시작하며...지금까지 다양한 프로젝트를 진행하면서 클라이언트에서 상태 관리를 간편하게 하기 위해 라이브러리를 사용하였다.그중 Recoil, Zustand, Jotai 라이브러리를 사용해 보았고, 각기 다른 방식으로 상태 관리를 했다. 그래서 이번 글에서는 그동안 사용해 본 Recoil, Zustand, Jotai를 비교하고, 각 라이브러리를 어떤 상황에서 사용했고 느낀 장단점을 정리하게 되었다. 1. Recoil1-1. 사용 배경개발 동아리 DND 9기에서 진행한 NewPle 프로젝트에서 Recoil을 사용했다. Recoil을 선택한 이유는 단순했다.사실 React Query(TanStack Query)와 Recoil의 조합이 좋다는 이야기를 들어서 깊이 있는 이해 없이 그냥 선택하게 된 것이다.(당시 ..

시작하며...우주윗미 프로젝트에서 TanStack Query의 옵티미스틱 업데이트를 사용해서 게시물의 좋아요 기능을 구현하였다. 그런데 오늘 useState로 구현할 수 있을 거 같은데 굳이 TanStack Query를 사용한 이유를 질문받았다.....!(약간 당황하면서 대충 서버 상태를 반영해 준다고 답을 했다.) 그래서 이에 대해 다시 한 번 생각해 보면서 글로 정리하게 되었다. 왜 useState가 아닌 TanStack Query를 사용했는지!! (참고로 TanStack Query의 옵티미스틱 업데이트를 적용한 내용은 해당 블로그 글에서 확인할 수 있다.) [TanStack Query] 옵티미스틱 업데이트 사용하여 좋아요 구현시작하며...이번 프로젝트에서 게시물의 좋아요/취소 기능을 구현하는데, 백..

시작하며...지난 기초, 중급 프로젝트에서 캐러셀을 라이브러리를 사용하여 구현하였다. 그때 회고를 보면 나중에는 라이브러리가 아닌 직접 구현해보고 싶다고 글을 적었었다.그런데 마침 이번 프로젝트에서도 캐러셀을 구현해야 될 기회가 생겨 직접 구현하게 되었다. 캐러셀을 구현한 결과는 아래와 같고, 이를 구현하기까지의 과정을 작성하려고 한다. 💪💪💪  무한 캐러셀 원리?카드가 4개가 있는 무한 캐러셀을 만들었다. 마지막 카드에서 첫 번째 카드로 이동할 때 자연스럽게 오른쪽으로 넘어가면서 1번 인덱스로 가야 한다.이를 어떻게 구현해야 될까? 이를 그림으로 표현해 보았다. 마지막 카드(4번 이미지)에서 오른쪽으로 넘어가면 첫 번째 카드(1번 이미지)를 복사한 카드를 바로 오른쪽에 두어 자연스럽게 넘어가는 것..

시작하며...메뉴바나 드롭다운의 외부영역을 클릭했을 때 닫히는 걸 구현하는 게 어려운 작업은 아닌데 이걸 구현하면서 삽질이 좀 많았다🥲 그래서 외부 영역 클릭 시 닫히는 로직에 대하여 자세히 정리해보려고 한다. 처음 구현한 방식Modal 처럼 닫히도록 구현처음에 구현한 방식은 모달(Modal)처럼 닫히도록 구현하였다. 메뉴바 뒷배경 전체화면으로 만든 후, 그 위에 메뉴바를 만드는 방식이다.const UserMenu = ({ isOpen, onClose, className }: UserMenuProps) => { const menuRef = useRef(null); const handleClickOutside = (e: MouseEvent) => { if (menuRef.current) { ..

시작하며...현재 프로젝트의 상태 관리 라이브러리로 Zustand 를 사용하기로 했다.사용하기 간편한 상태 관리 라이브러리 중에서 꾸준히 업데이트되면서 다운로드 수가 많은 Zustand 를 선택하게 되었다.  내용이 좀 빈약하지만 블로그에 간단하게 Zustand 를 사용하는 방법에 대해 글을 작성했었다.https://jjang-j.tistory.com/57 [React] Zustand 상태 관리 라이브러리 사용 방법시작하며...React 에서 다른 컴포넌트로 데이터를 전달하기 위해 props 를 사용한다.그러나 React 의 상태인 state 는 자식 컴포넌트한테만 전달할 수 있어 만약 컴포넌트가 많고 잘 분리되어 있을 경jjang-j.tistory.com persist 사용하게 된 이유아래 코드와 같이..

발생한 문제검색어를 입력하고 검색 버튼이나 엔터를 눌렀을 때 검색이 되는 기능을 구현하고 있다. 위에 코드를 실행해 보니 엔터를 눌렀을 때 값이 두 번 찍히는 현상을 발견하게 되었다. (검색 버튼 눌렀을 땐 한 번) 그래서 혹시 reactStricMode 때문일 수도 있어 주석처리 했는데도 변함이 없었다. (참고로 Next.js 임)  문제 이유구글링을 통해 이러한 문제가 발생한 이유를 살펴보니 바로 한글 때문이였다.영어와 숫자와 달리 한글은 자음과 모음을 조합해서 만드는 언어라서 조합 중인 문자를 처리하는 과정에서 keydown 이 두 번이나 발생하는 것이라고 한다. 그래서 문자가 조합 중이면 keydown 이벤트가 발생하지 않도록 처리해야 한다. 문제 해결문제를 해결하기 위해 다음과 같이 절차를 진행..

(해당 게시글은 모던 리액트 Deep Dive 를 참고해서 작성한 글입니다.) ESLint를 활용한 정적 코드 분석버그와 예기치 못한 작동을 방지하기 위해 여러 가지 방법이 있는데 그 중에 정적 코드 분석이 있다. 정적 코드 분석이란?코드의 실행과는 별개로 코드 그 자체만으로 코드 스멜(잠재적으로 버그를 야기할 수 있는 코드)을 찾아내어 문제의 소지가 있는 코드를 사전에 수정하는 것 자바스크립트에서 가장 많이 사용되고 있는 정적 코드 분석 도구가 바로 ESLint 이다. ESLint 살펴보기ESLint 는 어떻게 자바스크립트 코드를 읽어서 분석할까?자바스크립트 코드를 문자열로 읽는다.자바스크립트 코드를 분석할 수 있는 파서(parser)로 코드를 구조화한다.2번에서 구조화한 트리를 AST(Abstract..

시작하며...프론트엔드에서 React, Axios 를 사용하면서 로그인/회원가입 기능을 구현할 때 서버에서 쿠키로 refresh token 과 access token 을 받아 유저 기능를 하는 방법에 대해 알아볼 것이다. 로그인 기능 구현React 와 axios 로 서버에 로그인 요청을 하는 코드를 작성해서 실행을 하면응답으로 서버에서 쿠키로 access token 과 refresh token 를 보내주게 된다.서버에서 전달해준 쿠키를 클라이언트 측에서 저장하기 위해 withCredentials 를 true 로 설정한다.다시 로그인 요청 후 개발자 도구 → 애플리케이션 탭 → 쿠키 를 확인해보면 서버에서 전달받은 토큰이 쿠키에 제대로 저장되는 것을 확인할 수 있다. 그러면 이제 서버에 요청을 보낼 때도 ..

시작하며... memo, useMemo, useCallback 사용해서 렌더링 최초화 하기!!시작하기 앞서...제목, 내용, 이미지를 입력하는 페이지에서 내용을 입력할 때마다 사진이 계속 다시 렌더링 되어 깜박거리는 현상을 발견하였다.그래서 이를 해결하기 위해 렌더링을 최소화하jjang-j.tistory.com지난 게시물을 보면 이미지가 계속 렌더링 되어 깜박거리는 현상을 useMemo 를 사용하여 해결하였다. 그러나 이미지 미리보기 URL 을 만들기 위해 사용했던 URL.createObjectURL() 의 MDN 문서를 보니 더 이상 사용하지 않을 땐  URL.revokeObjectURL() 를 사용해서 하나씩 해제해줘야 한다고 적혀있는 것을 발견했다.  그래서 리액트 Side Effect 의 Clea..

(해당 게시글은 모던 리액트 Deep Dive 를 참고해서 작성한 글입니다.) React 개발 도구 설치React 에서 디버깅을 하기 위해 크롬 확장 프로그램 중에서 React Developer Tools를 설치해야 한다. 정상적으로 설치가 되면 크롬 우측 상단 확장 도구 모음에 React 로고가 생긴 것을 확인할 수 있게 된다. 현재 티스토리 블로그도 React 로 만들어졌기 때문에 활성화된 것을 확인할 수 있고만약 React 개발 모드라면 로고가 빨간색으로 되어 있으며React 로 만들어지지 않는 웹사이트는 회색으로 표시되게 된다. React 개발 도구 활용하기 React Developer Tools를 설치하게 되면 이제 개발자 도구에서 Components 와 Profiler 메뉴가 추가된다. Com..