시작하며...중급 프로젝트에서 Toast 를 react-toastify 라이브러리와 Styled Components 를 사용해서 커스텀하여 사용하였다. 그러나 간혈적으로 토스트가 생기지 않고 갑자기 다른 곳에서 생기는 등(?) 이상한 현상이 발생하였다.주강사님께 여쭤보니깐 아마 Next.js Hydration 에러인 것 같다고 해서 Context 를 사용해서 구현해 보라고 피드백을 주셨다. 당시에 토스트를 다시 구현할 시간이 없어서 나중에 기회가 되면 직접 Toast 컴포넌트를 구현하고 싶었는데,마침 이번 프로젝트에서 Jotai 라는 상태 관리 라이브러리를 사용하여 직접 구현하게 되었다. 구현하기참고로 나는 토스트가 스택처럼 여러 개 쌓이는 걸 별로 안 좋아한다..그리고 다른 팀원분도 토스트가 쌓이지 않..

시작하며...이번 프로젝트에서 게시물의 좋아요/취소 기능을 구현하는데, 백엔드 API 가 느려 응답을 기다리기까지 과정이 사용자 관점에서 좋지 않다는 단점을 발견하였다. 그러나 실제 SNS 에서는 네트워크 속도가 느려도 좋아요/취소 기능이 바로바로 반영이 되는 것을 볼 수 있다. 그래서 이를 보고 좋아요 버튼을 누르면 클라이언트 측에 좋아요가 바로 반영되는 기능을 구현하려고 한다. 이러한 기능을 구현하기 위해 TanStack Query 의 Optimistic Updates 를 사용하여 좋아요 기능을 구현하였다.  Optimistic UpdatesOptimistic Updates 란?단어 뜻 그대로 낙관적인 업데이트 라는 뜻이다. 서버 요청 시 클라이언트 측에서 UI 를 업데이트를 될 거라고 낙관적으로 가..

시작하며..."우주윗미" 프로젝트 개발을 다 마치고 리팩토링 기간 때, Lighthouse 를 돌려봤는데 74, 64 라는 처참한 결과가 나왔다 😅 오히려 좋아 웹 사이트의 성능을 개선할 수 있는 좋은 기회인데 완전 럭키비키자낭~🤭🍀 그래서 성능을 개선하기 위해 적용한 내용이나 수정한 내용에 대한 여정을 글로 작성하게 되었다. (참고로 dev 환경 아니고 빌드환경에서 시크릿 모드창을 켜서 Lighthouse 돌렸다.) 자유게시판 페이지 - 성능 개선하기 📈1. 데이터 패칭 CSR → SSR 로 변경CSR 은 브라우저에서 자바스크립트가 실행돼야 페이지에 내용이 렌더링이 되는 방식이다. 그래서 초기 로딩 시간이 길다. 반면 SSR 은 서버에서 HTML 을 완성하여 클라이언트한테 전달하는 방식으로 서버..

시작하며...이번 프로젝트에서 TanStack Query 의 useInfiniteQuery 를 사용해서 댓글 무한 스크롤 기능을 구현했다. 그래서 무한 스크롤 기능을 구현하는 것도 처음이고, useInfiniteQuery 를 사용하는 것도 처음이라 댓글 무한 스크롤을 구현한 과정에 대한 내용을 기록하기 위해 글을 작성하게 되었다. [공식문서] useInfiniteQuery | TanStack Query React DocsThis ad helps to keep us from burning out and rage-quitting OSS just *that* much more, so chill. 😉tanstack.com 구현하기 앞서...내가 구현할 댓글 무한 스크롤은 백엔드 서버에서 cursor 값을 사용..

시작하며...이번 프로젝트에서 자유게시판(모집게시판)을 구현하게 되었다.  게시물 상세페이지에 "목록으로" 버튼이 있는데이를 눌렀을 때, 주소의 param 값이 유지되기 위해 router.back() 을 사용하여 구현하였다. 그러나!!! 게시물 상세페이지를 다른 페이지에서 주소창으로 들어오면 router.back() 이 원하는 의도대로 동작하지 않게 된다. 😭얘 때문에 그냥 "/boards?page=0" 으로 보낼 수도 없어 고민이 많았다.. 🤔 그래서 이전에 접근했던 페이지를 저장해 가면서 이전 페이지를 확인하여 동작하는 방식을 선택하였다. 이전 페이지 저장하기어디에 저장할까?이전 페이지 정보를 어디에 저장할 지 많은 고민을 했다.로컬 스토리지세션 스토리지Jotai쿠키 등등.....각 저장소의 장단..

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

시작하며...이번 프로젝트에서 Storybook 을 사용하게 되었다. 그런데 공통 컴포넌트를 만들고 Storybook 을 작성한 후 Pull Request 를 올렸을 때, 리뷰어들을 Storybook 에 반영된 것을 바로 시각적으로 확인할 수 없다. 그래서 이를 해결하기 위해 GitHub Action 을 사용하여 Storybook 을 Chromatic 배포를 하여 PR 을 올릴 때, 미리 보기 배포 주소를 보여주는 것을 구현하였다.  Chromatic 배포Storybook 은 Chromatic 을 사용하여 배포를 할 수 있다. Visual testing & review for web user interfacesChromatic scans every possible UI state across browse..

시작하며...이전 프로젝트에서 Menu 와 DropDown 컴포넌트를 구현하였다. 그러나 공통 컴포넌트라는 성격과 거리가 멀었다. 그래서 이번 프로젝트에서 DropDown 공통 컴포넌트를 범용성이 좋게 만들기 위해 컴파운드(Compound) 패턴으로 만들게 되었다!  컴파운드(Compound) 패턴컴파운드 패턴이란?컴파운드 패턴이란 무엇일까? 컴파운드 패턴React에서 복잡한 컴포넌트를 효율적으로 관리하고 재사용성을 높이기 위한 디자인 패턴DropDown 이나 Select 등 컴포넌트를 여러 작은 컴포넌트로 분리하여 부모/자식 관계로 이루어진 컴포넌트를 독립적이면서 통합되어 하나의 컴포넌트처럼 사용할 수 있게 만드는 디자인 패턴 중 하나이다. 장점유연성 증가가독성 증가유지보수성 증가재사용성 향상컴포넌트 ..

시작하며...Next.js 에서 React Quill 에디터 라이브러리를 사용하여 이미지를 모달로 받고 업로드하는 것을 구현하였는데 이에 대해 자세히 글을 작성해보려고 한다. 이미지 핸들러1. 이미지 핸들러 등록에디터에 있는 이미지 아이콘을 클릭하여 이미지를 업로드하는 대신, 직접 이미지 업로드 과정을 구현하기 위해서는 이미지 핸들러를 추가해야 한다.  Quill 에디터에 있는 이미지를 클릭하였을 때 사용자 정의 동작을 할 수 있도록 image 를 클릭했을 때 handleClickImage 함수가 호출되도록 핸들러로 지정해 준다.  2. 이미지 등록 모달 열기이미지 핸들러인handleClickImage 에 모달을 open 하는 함수를 넣는다.  이미지 모달 구현이미지를 입력받음 → 유효성 검사 → 이미지..

시작하며...이번 프로젝트에서 상태 관리 라이브러리인 Zustand 를 사용하여 로그인 여부를 확인하고, 로그아웃을 구현하게 되어 해당 글을 작성하게 되었다. Zustand 스토어 작성일단 다음과 같은 플로우를 생각해 보았다.로그인 → 토큰 쿠키에 저장 → 로그인 여부 O쿠키에 토큰 있음 → 로그인 여부 O쿠키에 토큰 없음 → 로그인 여부 X로그아웃 → 쿠키에 토큰 만료 useAuthStore.tsx일단 상태와 메서드 5개를 만들었다.user - 로그인하면서 저장할 유저 정보 상태saveUser - 유저 정보 저장하는 메서드isLogin - 로그인 여부 나타내는 boolean 상태checkLogin - 로그인 여부 확인하는 메서드logout - 로그아웃 처리하는 메서드 saveUser 로 유저 정보와 로..