목록Next13 블로그 프로젝트 (23)
안녕하세요
1. Jotai Atom의 핵심은 Atomic이다. Jotai는 useContext에서 발생하는 리렌더링 문제를 해결하기 위해 개발되었다. => 여기서 리렌더링 문제란 하나의 상태라도 변경이 되면 context가 선언된 컴포넌트의 하위 모든 컴포넌트가 리렌더링 된다. 예를 들면 다음과 같다. import React, { createContext, useContext, useState } from 'react'; const MyContext = createContext(); // 1. 부모 컴포넌트에서 context를 생성 const ParentComponent = () => { const [count, setCount] = useState(0); return ( ); }; // 2. 자식1 컴포넌트에서 ..
0. Jotai는 조타이가 아니라 일본어로 상태를 의미하는 状態(죠-타이) 영문 표기로는 Jotai이지만 실제 영어로 표기해야하는 발음은 Jaw-tai 가 맞겠다. 1. Jotai는 어떠한 상태관리 라이브러리인가요 jotai는 useState + useContext를 개선한 recoil과 비교되는 라이브러리라 생각하면 된다. jotai는 내부적으로 context API를 이용하면서도 context의 불필요한 리렌더링을 방지한다. 리덕스에 비해 보일러 플레이트 코드가 적고 사용이 간편하다. atomic 한 구조에 잘 어울린다. bottom-up 상태관리를 한다. (부모에서 atom 정의하고, 자식이 받아온 atom을 set) 번들 크기가 작다. 매우 가볍다. useAtom에서 사용되는 atom은 가비지 컬..
마주한 문제: Imgur 서버에 이미지 업로드가 갑자기 안 될 때의 디버깅 과정 코드를 수정하며 건드리지도 않은 로직이 갑자기 수행이 안 될 때, 제 경우에는 이미지 업로드 시 403 에러가 나타나며 갑자기 작동하지 않게 된 상황에서 디버깅하는 과정을 정리합니다. 1. 문제 발견: 갑자기 이미지 업로드가 작동하지 않음 프로젝트를 진행하던 중, 이미지 업로드가 안되는 문제가 발생했습니다. 이미지 업로드 로직은 모듈화하여 수정한 적이 없기 때문에 로직 외의 영역에서 원인을 파악해야 했습니다. 2. 원인 찾기(1): Imgur API App 재발급 해보기 'Forbidden' 오류는 요청을 받았으나 거절당했다는 의미이기 때문에, 새롭게 imgur app을 발급부터 해보았습니다. callback url은 이전에..
기존: 특정 Email인 유저라면 해당 권한을 수행하거라. 기존에는 회원별 권한 분기를 구분하는 방법이 단순했습니다. 유저의 email로 구분지었죠. adminEmailList에 포함되는 경우에는 admin 권한을 수행할 수 있고, testerEmailList에 포함되는 경우에는 tester 권한을 수행하는 방식이었습니다. 하지만 이러한 방식은 확장성도 떨어지며, 만일 tester가 1억명으로 늘어난다면? 1억개의 요소를 지닌 배열에서 Email이 포함되어 있는지를 뒤져봐야 하는 문제가 생깁니다. 수정이나 삭제를 하려고 해도 index를 찾고, 해당 index를 삭제하는 등 불필요한 작업들이 추가됩니다. 그렇다면 유저에 role을 추가하면 되지 않을까? 이를 개선하기 위해 사실은 처음부터 Role-bas..