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를 불러오는 코드가 먼저 실행 될 수 있기 때문..

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, {..

IFrame Player API 유튜브 동영상을 재생하기 위해서는 유튜브에서 제공하는 Iframe을 사용해야 한다. IFrame API를 사용하면 동영상 플레이어를 직접 제어할 수 있다. * 공식 문서 iframe 삽입에 대한 YouTube Player API 참조 문서 | YouTube IFrame Player API | Google Developers Embed a YouTube player in your application. developers.google.com YoTube 동영상 데이터 불러오기 가져온 데이터의 id값으로 동영상을 재생 2023.01.11 - [React] - [Youtube API] 유튜브 API 동영상 데이터 가져오는 방법 1. 라이브러리 설치 공식 문서를 보고 사용해도 되..

유튜브 영상을 가져오기 위해서는 유튜브 API를 사용해야 한다. 1. Google Cloud Platform 프로젝트 등록 Google 클라우드 플랫폼 로그인 Google 클라우드 플랫폼으로 이동 accounts.google.com 1-1) 프로젝트 생성 1-2) YouTube Data API v3 사용 검색 > YouTube Data API v3 클릭 > 사용 클릭 1-3) API Key 생성 사용자 인증 정보 > 사용자 인증 정보 만들기 > API 키 1-4) API Key 제한 설정 (선택) 무단 사용 방지를 위해 Key 수정 키제한 > YouTube Data API v3 선택 2. YouTube API 통해 동영상 리스트 가져오기 Videos: list | YouTube Data API | Goo..

NextJS에서는 기본적으로 라우트 설정이 되어있지 않는 페이지에 대해 서버사이드 랜더링을 하지 않게 아래와 같은 404 오류 페이지를 보여주도록 되어있다. * 공식 문서 * https://nextjs.org/docs/advanced-features/custom-error-page 1. 404 페이지 커스텀 방법 기존 오류 페이지를 사용하지 않기 위해서는 pages폴더에 404 파일을 생성한다. ( 404.tsx ) export default function NotFound(){ return "What are u doing here" } 원하는 화면으로 커스텀 404 파일은 기본적으로 빌드 타임에 만들어 지기 때문에 데이터를 불러오는 작업이 있다면 getStaticProps를 통해 가져와야한다. 2. 5..

NextJS에서는 img태그가 아닌 next에서 import 해 온 next/image의 Image태그를 사용해야 한다. NextJS에서 이미지를 최적화시켜주기 때문이다. * 공식 문서 * https://nextjs.org/docs/api-reference/next/image 1. 장점 Loader을 통해서 커스터마이징 가능 자동으로 Lazy Loading을 통해 이미지 최적화를 지원해주지만, pre loading을 원하는 경우 취소 가능 자동 스켈레톤 UI(placeholder 통해서), CLS 방지도 가능 이미지 캐싱도 자동으로 해주고 expiration time 설정도 가능 next.config.js를 통해 지정된 곳에서만 이미지를 받아오며 악의적인 유저로부터 앱을 보호 가능 2. 사용 방법 2-1..