뚝딱뚝딱 코딩 기록_

[React_ useLayoutEffect] useEffect와 useLayoutEffect의 차이를 알아보자. 이전 회사에 재직하면서 useLayoutEffect라는 React Hook을 처음 접하게 되었다. 사실 잊고 살다가 얼마 전 면접에서 useEffect와 useLayoutEffect의 차이와 useLayoutEffect를 사용해 본 적 있냐는 질문에 다시 떠올랐다. 사용해 본 적도 없고 개념도 잘 몰라서 솔직하게 모른다고 대답하긴 했지만, 이번 기회에 공부해보는 것도 좋을 것 같아서 정리해 보려고 한다. ❓ useEffect, useLayoutEffect React Component의 Side Effect를 관리하는데 사용되는 Hooks 1️⃣ useEffect(setup, dependenci..

[Firebabse_ 인증] Firebase를 통해 서버리스 애플리케이션으로 쇼핑몰 프로젝트를 진행하고 있다. 사실 쇼핑몰은 예전부터 하고싶은 프로젝트였는데 잠시 미뤄두고 있었다. 그런데 친구가 쇼핑몰을 오픈하려고 한다는 소식을 듣고 괜히 만들어주고 싶어서(?) 드디어 시작하게 되었다. (ㅎㅎ firebase의 인증 시스템을 이용하여 자체 회원가입 및 로그인, 구글 소셜 로그인 기능을 구현하였는데 복습도 할 겸 정리해 보려고 한다. 1️⃣ 파이어베이스 연동하기 파이어베이스에 프로젝트를 생성하고 [프로젝트 설정 - Web App] 부분을 보면 아래 사진처럼 sdk 설정 및 구성 방법이 나온다. 저 부분을 복사해서 src/api/firebase.js 폴더에 붙여넣기 하면 된다. 참고로 firebaseConf..

[Next_ Notion API] Next.js로 블로그를 만들던 중 어차피 노션에 프로젝트를 정리해 놓으니 게시글을 노션의 데이터베이스와 연결해서 가져오면 좋을 것 같다는 생각을 하게 되었다! 그래서 발견한 것이 바로 Notion API였는데 막상 시작해보니 생각보다 많이 복잡했다.. 방법도 여러가지가 있었는데 역시나 한번에 성공하는 법은 없었고..! 이런 저런 방법을 시도해 본 결과 드디어..! 성공했다 ㅠㅠ 막상 성공하니까 어려운 것도 아니었는데 처음 시도해본 일이어서 헤맸던 것 같다..ㅎㅎ ※ 설치할 라이브러리 - @notionhq/client를 이용하여 notion과 연결할 예정!! npm install @notionhq/client 1️⃣ 노션 API 통합 만들기 연동할 노션 워크스페이스의 통..

[React_ react-router] 리액트 프로젝트를 진행하면서 react-router v6을 사용하게 되었다. 헤더, 푸터 등 공통적으로 사용되는 컴포넌트의 중복을 줄이기 위해 createBrowserRouter와 Outlet을 사용하였다. ❔ index.tsx, router.tsx, App.tsx 파일 - router 설정 // index.tsx import React from "react"; import ReactDOM from "react-dom/client"; import { BrowserRouter } from "react-router-dom"; import App from "./App"; const root = ReactDOM.createRoot( document.getElementByI..

[Recoil] ❓ Recoil : 리액트 상태 관리 라이브러리 1. recoil 설치하기 npm install recoil or yarn add recoil 2. RecoilRoot로 컴포넌트 감싸기 - : 상태를 관리하고 사용할 상위 컴포넌트 3. Atom 생성하기 - src 디렉토리에 recoil을 생성한 뒤 state를 정의할 파일(ts / js 모두 가능)을 만든다. - 파일 이름은 임의로 정하면 된다. - key : state를 식별할 id (유일해야 함) - default : 초기 값 ❗ 각 컴포넌트에서 state를 읽고 업데이트 하는 것이 가능하다. ❗ 상태 값을 읽는 컴포넌트들은 해당 atom에 subscribe(구독) 되기 때문에 업데이트 될때마다 리렌더링이 발생한다. 3. 컴포넌트에서..

[React_ axios] 유튜브 클론 프로젝트에서 axios로 통신을 하던 중 baseURL과 api_key가 반복적으로 사용되고 있었다. 반복되는 코드를 줄이기 위해서 axios.create를 통해 instance를 생성하여 사용하기로 했다. 1. 인스턴스 생성 후 export (내보내기) - 폴더 / 파일 이름을 임의로 정하고 axios를 import한다. - axios.create({}) 안에 기본 세팅 값들을 넣어준다. ❕ baseURL : request url (요청 보낼 url) ❕ params : 기본 query params → {key: value} 형태로 넣어준다. 2. 외부에서 import 하여 사용하기 - 기존 axios를 사용하는 것과 동일하게 사용 가능하다. axios.creat..

[Toy Project_ To Do List] 📜 토이 프로젝트 소개 📃 목적 : Typescript 연습 + React 기본 기술 복습 📃 기능 할일 추가, 삭제 완료 목록 체크 다크 모드 / 라이트 모드 항목 상태 별로 보여주기 (All, Active, Completed) 📃 사용 기술 : Typescript, React, PostCSS 📃 결과물 Typescript를 연습하면서 React도 기초부터 복습할 겸 To Do List를 만들어 보았다. Event Type을 지정하는 것과, ContextAPI를 이용하여 다크모드를 구현하는 과정에서 타입을 지정하는 부분에서 조금 시간이 걸렸다. Typescript를 조금 더 능숙하게 사용할 수 있도록 공부해야겠다. 👉To Do List 코드 전체보기👈 Gi..

[Typescript_ HTMLInputElement] ❓ 문제 리액트 + 타입스크립트로 작업하던 중 change event (event.target.checked)의 타입 오류가 발생했다. label 태그의 onChange 이벤트로 체크박스의 체크 여부를 확인하는 과정에서의 타입 선언이 잘못 된 것이었다. type을 any로 선언해 주어도 되지만 any는 지양해야 한다는 얘길 들었기 떄문에.. 다른 방법을 찾아보았다. ❗ 해결 알고보니 label이 아니라 input에서 onChange 이벤트를 추가해서 React.ChangeEvent 타입으로 선언해 주면 되는 것이었다...! event 타입 문제 때문에 타입스크립트를 사용하기 어려웠는데 이번 기회에 정확하게 타입 공부를 해야 할 것 같다. 내가 보려고..

[React_ useReducer + ContextAPI] ❓ 전역으로 state 관리하기 리액트로 개발을 하면서 느낀 점은 컴포넌트 층이 많아지면 prop로 state를 전달하는 과정(prop drilling)에서 prop을 추적하기 어려워 유지보수에 영향을 미친다는 점이었다. 이러한 현상을 해결하기 위해 상태 관리도구인 Redux, Recoil, Mobx 등을 사용하여 과도한 prop drilling을 줄이는 방법을 사용한다. ❓ useReducer useState를 대체하는 hook으로 state가 여러 하위 값을 포함하는 복잡한 상태거나 다음 state가 이전 상태에 종속되는 경우 선호되는 방법이다. [state, dispatch] 한 쌍으로 반환되며 컴포넌트 밖에 state를 정의하여 사용할 수..

[JS_URL.createObjectURL()] 로컬 객체 경로를 만들어 주는 URL.createObjectURL()을 img 태그 안에 직접 입력했을 때 반복적으로 객체를 생성하는 것과 그에 대한 해결 방법 대해 알아보자 ❓ URL.createObjectURL()을 이용하여 이미지 미리보기를 구현하던 중 text를 입력할 떄마다 계속해서 이미지 객체를 생성하는 현상을 발견했다. 이전 프로젝트와 같은 방법으로 구현했는데 이번에만 발생한 이슈라서 이유를 몰라 조금 헤맸다. 전역 스테이트 (useReducer, useContext 이용)로 관리하며 state를 복사해서 그런 것인 줄 알고 따로 빼서 분리하는 등 이것 저것 시도해 보았지만 똑같은 현상이 일어났다. 그런데 이유는 바로 img 태그 안에 바로 U..