시작하며...이번 Codeit Resoucres 프로젝트에서 기술스택으로 React, AWS Amplify Gen2, NoSQL 데이터베이스인 DynamoDB를 사용하고 있다. 마주친 문제점처음에 데이터베이스에 데이터를 추가할 때, 데이터가 시간순이나 id값을 기준으로 자동 정렬될 것이라 예상했지만, 실제로 사용을 해보니 DynamoDB에서는 데이터가 특정 순서 없이 저장되는 것을 발견하게 되었다. 프로젝트 요구사항을 구현하기 위해서는 시간순, 이름순으로 정렬된 데이터를 보여줘야 했기 때문에, 이를 어떻게 해결할지 많은 고민을 하게 되었다. 해결 과정?!?!AWS Amplify Gen2 공식 문서와 GitHub 레퍼런스를 통해 전체 데이터를 정렬하는 방식을 찾아보았으나...DynamoDB에서는 기본적으로..

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

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

시작하며...지금까지 다양한 프로젝트를 진행하면서 클라이언트에서 상태 관리를 간편하게 하기 위해 라이브러리를 사용하였다.그중 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] 옵티미스틱 업데이트 사용하여 좋아요 구현시작하며...이번 프로젝트에서 게시물의 좋아요/취소 기능을 구현하는데, 백..

시작하며...중급 프로젝트에서 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 값을 사용..

시작하며...길고도 짧았던 6개월 간의 코드잇 스프린트 여정이 이번 주 마침내 막을 내렸다... 🥹이 기간 동안 많은 경험을 통해 성장하며, 내 삶에 있어서 기억에 남는 일 중 하나일 것이다.오늘은 그 6개월을 돌아보며, 지난 기간 "나"라는 사람에 대해 깊이 생각해 보고 무엇을 얻게 되었는지 글로 작성하게 되었다.(코드잇 관련 내용은 별로 없고, 혹시라도 코드잇 스프린트가 궁금하면 파트별 회고랑 프로젝트 회고 보는 거 추천해요.)  왜 프론트엔드 개발자?? 왜 코드잇 스프린트?? 👀프론트엔드 개발자를 선택한 이유나는 원래 웹 개발과는 거리가 멀었다.  임베디드 전공자로 하드웨어와 회로, C언어 같은 로우레벨 분야를 주로 공부했으며, HTML이라는 단어조차 3학년 2학기에 처음 접했다.  그동안 나는..