시작하며...이번 코드잇 인턴 프로젝트인 "Codeit Resources"가 11월 1일에 무사히 완료되었고 긍정적인 평가를 받았다!그러나... 실제 직원분들이 사용하고 피드백을 받기 위해서는 구글 캘린더가 연동이 필수적이라고 요구사항을 받았다. 사실 여기서 프로젝트를 마무리할 수도 있었지만, 팀원들과의 회의 끝에 구글 캘린더 연동 작업을 추가로 진행하기로 결정을 내렸다. 다행히도 코드잇 측에서 2주간 리소스(AWS)를 제공할 수 있다는 답변을 받아 계속 프로젝트를 이어나가게 되었다. 구현 초기 단계백엔드 서버가 필요해!먼저 구글 캘린더 API와 연동을 하기 위해서는 백엔드 서버가 필요했다. 현재 프로젝트의 AWS Amplify Gen2를 사용하고 있어 간편하게 풀스택 개발을 할 수 있었다.그런데.. ..

시작하며이번 코드잇 인턴에서 AWS Amplfiy Gen2를 기술스택으로 선정하였고, 나는 그중에서 User 관리 기능을 담당하게 되었다. 이 기능을 구현하면서 AWS Cognito를 적극적으로 활용했다. 그러나 기본 제공 기능만으로는 프로젝트 요구 사항을 완전히 충족하기 어려워, AWS SDK를 통해 보다 세밀한 User 관리 기능을 개발하게 되었다. 그래서 해당 구현 과정을 기록하기 위해 글을 작성하게 되었다. 구현한 기능우선 해당 프로젝트는 사내에서 사용하는 서비스로 회원가입 기능은 없이 ADMIN이 멤버를 추가하고 수정하고 삭제하는 방식이다. 그래서 크게 다음과 같은 기능을 구현하였다.멤버 추가멤버 수정멤버 삭제로그인비밀번호 재설정비밀번호 변경 1. AWS SDK 사용 이유Cognito의 기본 메..

시작하며...중급 프로젝트에서 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 등 컴포넌트를 여러 작은 컴포넌트로 분리하여 부모/자식 관계로 이루어진 컴포넌트를 독립적이면서 통합되어 하나의 컴포넌트처럼 사용할 수 있게 만드는 디자인 패턴 중 하나이다. 장점유연성 증가가독성 증가유지보수성 증가재사용성 향상컴포넌트 ..