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에서 카카오맵 불러오기 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 선언해 준다..

TypeScript는 JavaScript의 상위 집합으로 JavaScript에서 제공하는 대부분을 지원한다. ES5 모든 문법, ES6의 문법의 대부분을 사용 가능하다. 1. Props /* props 타입 정의 */ interface DummyProps { text: string; // 값 명시 text: "Hi"|"Hello"|"By" } /* 오브젝트의 타입이 DummyProps */ const Dummy = ({text}:DummyProps) => { return {text} } function App() { return ; } interface를 통해 props 타입을 정의해 준다. Dummy컴포넌트의 오브젝트에 타입을 지정한다. 값을 명시하게 되면 이외 문자 사용 x 2. Optional(선택..

1. 새로운 프로젝트 생성 방법. npx create-react-app 파일명 --template typescript 확장자 ts : 순수 TypeScript 파일이다. (JavaScript의 .js) 확장자 tsx : TypeScirpt에 React문법을 담은 확장자 파일이다. (JavaScript의 .jsx) 2. 기존 ReactJS파일을 TypeScript로 변환 방법. npm install --save typescript @types/node @types/react @types/react-dom @types/jest @types/이 package이름에 앞에 붙음으로써 nodeJS, react, jest 각각에 typescript의 문법을 적용 이후, js확장자를 tsx확장자로 변경 3. 라이브러리..

TypeScirpt는 Javascript의 확장판으로 Strongly-Type언어이다. Strongly-Typed란? 프로그래밍 언어가 작동하기 전에 Type을 확인 한다는 말이다. TypeScript - 컴파일 에러 (코딩할 때 알 수 있음) JavaScript - 런타임 에러 1. JavaScript와 TypeScript /*** JavaScript ***/ const plus = (a, b) => a + b; plus(2,2) // 4 plus(4, "h2") // 2h2 - a + b의 결과만 내보낸다. /*** TypeScript ***/ const plus = (a:number, b:number) => a + b; plus(2,2) // 4 plus(4, "h2") // 오류 발생 - para..