에뮬레이터와 상관없이 XCODE, Android Studio를 둘 다 설치해야 한다.RN 설치 방법은 버전에 따라 환경을 구성하는 방법이 다르기 때문에 공식 문서를 그대로 따라 하자.   1. React Native CLI 아래 공식 문서에 따라 설치를 진행한다.https://reactnative.dev/docs/environment-setup Setting up the development environment · React NativeThis page will help you install and build your first React Native app.reactnative.dev 1-1) [RN CLI Quickstart] -> [macOS] -> [Andorid] and [iOS] 둘 다 진행..

1. 라이브러리 npm install react-quill 2. 소스코드 이미지 핸들러를 만들어 이미지 등록할 경우 Firebase Store에 추가하고 해당 URL을 받아와 저장했다. 2023.03.01 - [React] - [NextJS] Firebase Storage 파일 업로드/다운로드 방법 import dynamic from "next/dynamic"; import "react-quill/dist/quill.snow.css"; import { useState, useMemo, useRef, useEffect } from "react"; import styled from "styled-components"; import { useForm } from "react-hook-form"; import ..

* 카카오맵 API 사용 가이드 2023.04.10 - [React] - [카카오맵 API] React TypeScript에서 카카오맵 불러오기 * 카카오 주소 API 사용 가이드 2023.03.29 - [React] - [카카오 주소 API] TypeScript에서 카카오(다음) 주소 API 사용 방법 1. Script 파라미터 추가 libraries=services : 주소 - 좌표 변환하는 객체 Geocoder를 사용하기 위해서 필요하다. 2. 코드 작성 declare global { interface Window { kakao: any; } } export default function KakaoMap() { const [map, setMap] = useState(); const [marker, ..

* 카카오맵 API 사용 가이드 2023.04.10 - [React] - [카카오맵 API] React TypeScript에서 카카오맵 불러오기 1. 커스텀 Hook 생성 첫 렌더링 시에 함수 실행을 막기 위한 Hook을 생성한다. useEffect는 state가 변할 때 실행되는데 최초 렌더링 시에도 state가 설정되는 것을 확인 하고 실행된다. 이러한 상황을 막기 위한 Hook를 생성한다. import { useEffect, useRef } from "react"; const useDidMountEffect = (func: any, deps: any) => { const didMount = useRef(false); useEffect(() => { if (didMount.current) func()..

Geolocation란? 사용자의 현재 위치를 가져오는 API로, 지도에 사용자 위치를 표시하는 등 다양한 용도로 사용할 수 있다. 브라우저의 경우 정확한 위치를 찾지 못하지만 핸드폰으로 사용할 경우 GPS를 통해 정확하게 확인 가능 Chrome 브라우저는 https 환경에서만 geolocation을 지원한다. * 카카오맵 API 사용 가이드 2023.04.10 - [React] - [카카오맵 API] React TypeScript에서 카카오맵 불러오기 1. 사용 방법 브라우저에서 제공하기 때문에 따로 라이브러리 설치가 필요 없다. navigator.geolocation.getCurrentPosition(success) navigator.geolocation.getCurrentPosition(succes..

1. API Key 발급 방법 https://developers.kakao.com/ Kakao Developers 카카오 API를 활용하여 다양한 어플리케이션을 개발해보세요. 카카오 로그인, 메시지 보내기, 친구 API, 인공지능 API 등을 제공합니다. developers.kakao.com 1-1) 애플리케이션 추가 [내 애플리케이션] => [애플리케이션 추가하기] 1-2) API Key 복사 [요약 정보] => [JavaScript 키] 복사 1-3) 플랫폼 등록 [플랫폼] => [등록하기] 사용하는 URL를 등록한다. 2. Script 불러오기 autoload=false : script를 동적으로 로드하게 되면 로드가 다 끝나기도 전에 kakao api를 불러오는 코드가 먼저 실행 될 수 있기 때문..

카카오 주소 API의 경우 별도의 Key 없이 바로 외부 스크립트를 cdn 등의 방법으로 바로 사용이 가능하다. 1. Script 불러오기 /* NextJS */ 2. Interface 선언 타입스크립트는 컴파일 언어이기 때문에, IDE에서 바로 오류를 감지한다. 그렇기 때문에 외부 객체는 타입을 알 수 없기 때문에 바로 참조할 수가 없고 Interface를 선언해 주어야 한다. declare global { interface Window { daum: any; } } interface IAddr { address: string; zonecode: string; } 위와 같이 window에 daum 객체가 있다고 명시해 준다. 주소 입력 후 반환받기 위한 Paramiter도 interface 선언해 준다..

XSS XSS란? 웹 사이트에 악성 스크립트를 삽입하여 사용자의 정보(쿠키, 세션 등)를 탈취하거나, 자동으로 비정상적인 기능을 수행하게 할 수 있다. 주로 다른 웹사이트와 정보를 교환하는 식으로 작동하므로 사이트 간 스크립팅이라고 한다. 웹 사이트가 입력받은 값을 검증하지 않고 사용할 경우 발생 1. 테스트 예시 입력 값에 ["> ] 삽입 2. 해결 방안 2-1) NextJS 해결 방안 next.config.js 파일의 headers에 해당 값을 추가 해당 값을 추가하게 되면 XSS 공격을 XSS공격을 감지했을 때 페이지 로드를 중지한다. * XSS 해결 방안 공식문서 https://nextjs.org/docs/advanced-features/security-headers module.exports =..

useMutation이란? 값을 바꿀 때 사용하는 API로 return 값은 useQuery와 동일하다. insert, update, delete 할 경우 사용 select는 useQuery를 사용한다. useQuery 사용 방법 2022.08.25 - [React] - [ReacTS] React Query를 이용한 API 통신 사용방법 1-1) update const save = useMutation((data: any) => axios.post('http://localhost:8080/save', data)); const onSave = () => { save.mutate(person); } 1-2) update 후 get 실행 const mutation = useMutation(postTodo, {..

1. Firebase Storage 생성 * Firebase 사이트 URL https://console.firebase.google.com/ 프로젝트 생성 => 화면 좌측 빌드 [Storage] 클릭 => [시작하기] 클릭 [프로덕션 모드에서 시작] 클릭 => [다음] 클릭 [Cloud Storage 위치] 선택 => [다음] 클릭 2. 프로젝트 권한 설정 [Rules] 클릭 => 코드 수정 읽기는 모든 사용자에게, 쓰기는 인증된 사용자만 가능하도록 설정했지만, 쓰기도 모든 사용자가 이용 가능하게 하려면 allow read, write: if true;로 변경한다 3. NextJS에 Firebase 연결 3-1. Firebase SDK 추가 [설정] 클릭 => [프로젝트 설정 클릭] => [] 클릭 SD..