미리보기

• "Codeit Resoucres"에서 React와 AWS Amplify Gen2를 활용한 풀스택 개발 참여

• Amazon Cognito를 활용한 유저 및 팀 관리 기능 개발

• 부족한 개발 자료 속에서 기능 구현하며 문제 해결 능력을 한층 강화

• Google Calendar API 연동을 위한 Next.js 마이그레이션

• 기존 Cognito 로그인 방식에서 NextAuth.js로 구글 로그인 구현 및 효율적인 인증 로직 설계

AWS Amplfiy를 활용한 풀스택 개발

• 한 달이라는 짧은 프로젝트 기간 내 완수를 위해 AWS Amplify를 선정하여, 프로젝트 요구 사항 100% 충족

• 프론트엔드와 백엔드 통합 환경 구성으로 개발 생산성 향상

Amazon Cognito를 활용한 유저 인증

• 비밀번호 암호화 및 토큰 재발급과 같은 인증 작업을 자동화하여 개발 속도 및 안정성 향상

• 기존 Cognito 메서드로 해결할 수 없는 요구 사항에 대해 AWS SDK를 활용해 커스터마이징된 유저 로직 구현

React에서 Next.js로의 마이그레이션

• 서버가 필요한 구글 캘린더 API 연동을 위해 API Route를 지원하는 Next.js로 프로젝트를 마이그레이션

• API Route를 활용해 서버에서 유저 생성 로직을 처리하고, middleware를 통해 인증 및 데이터 유효성 검사를 수행하여 보안과 효율성을 향상

• 데이터 정렬 로직을 서버에서 수행하도록 API Route를 도입해, 멤버 관리 페이지의 초기 렌더링 성능을 33% 개선 (First Contentful Paint: 0.9초 → 0.6초)

Next-auth를 활용한 구글 로그인 구현

• Cognito의 Refresh Token 발급 제한 문제를 해결하기 위해 Next-auth를 도입하여 구글 로그인 시스템을 구현

• 로그인 성공 시 워크스페이스 프로필 이미지를 가져오고, JWT 콜백을 통해 클라이언트 세션에 인증 토큰 전달

• Next.js 환경 변수 처리와 AWS Amplify 환경 변수 방식의 차이를 해결하기 위해 빌드 전 변수 주입

Github Actions와 Chromatic을 활용한 Storybook 자동 배포 (블로그 링크)

• 이전 프로젝트에서 새로 만든 공통 컴포넌트를 리뷰어들이 테스트하는 과정이 번거로웠던 문제를 해결하기 위해 Storybook을 도입함

• Pull Request에서 배포된 Storybook을 통해 리뷰어들이 손쉽게 변경 사항을 확인할 수 있어 업무의 효율성이 향상됨

• comment-tag를 사용하여 하나의 PR에서 하나의 코멘트만 남기도록 설정하여 PR이 더욱 깔끔하게 유지되며 리뷰 과정을 개선함

Jotai + Tailwind CSS로 Toast 공통 컴포넌트 구현 (블로그 링크)

• 이전 프로젝트에서 React-Toastify 라이브러리 사용 시 Next.js의 Hydration 문제로 Toast가 정상적으로 표시되지 않는 이슈를 발견함

• 이를 해결하기 위해 클라이언트 컴포넌트에서 Jotai로 상태 관리를 하며, Tailwind CSS로 애니메이션과 스타일을 적용해 라이브러리 의존도를 줄이고 번들 크기를 최적화함

SSR + TanStack Query로 초기 로딩 속도 개선 및 데이터 캐싱 (블로그 링크)

• CSR에서 SSR로 전환하여 초기 로딩 속도를 단축시켜 사용자 경험을 향상시킴

• 서버 컴포넌트에서 prefetch로 데이터를 가져와 dehydrate을 통해 클라이언트로 전달

• 클라이언트 측에서는 TanStack Query로 서버에서 가져온 데이터를 사용하고 캐싱하여, 이후의 요청에 대해 빠른 반응성을 제공함

TanStack Query의 옵티미스틱 업데이트로 네트워크 지연 개선 (블로그 링크)

• 개발 초기 단계에서 네트워크 지연으로 인해 응답을 받아오는 데 시간이 걸려 사용자 경험이 저하되었음

• 이를 해결하기 위해 옵티미스틱 업데이트를 구현하여 즉각적인 피드백을 제공함으로써 사용자 경험을 개선하고, 네트워크 지연으로 인한 불편을 최소화함

• 서버 요청 실패 시, onError 핸들러로 롤백하여 서버 상태 간 불일치를 해결하고, 동시 요청이 발생할 경우 기존 쿼리를 중단해서 동시성을 제어함

베타 테스트를 진행하여 프로젝트 완성도를 높임

• 사용자가 간편하게 피드백을 제공할 수 있도록 채널톡 기능을 도입하여 사용자와의 소통을 원활하게 강화함

  (블로그 링크)

• 피드백을 바탕으로 캐러셀이 날아가는 오류를 수정하여 안정성을 개선함

  (블로그 링크)

• Firebase를 활용한 조회수 기능을 새롭게 구현하여 사용자 경험을 향상시키고 요구사항을 효과적으로 반영함

  (블로그 링크)

React Hook Form의 FormProvider로 복잡한 폼 관리 (블로그 링크)

• 이전 프로젝트에서 상태 관리 라이브러리를 사용하여 복잡한 폼 관리를 하는 비효율적인 방법을 사용했었음

• React Hook Form의 FormProvider를 도입하여 여러 컴포넌트에 걸친 복잡한 폼 상태를 손쉽게 관리함

• 폼 상태 변경 시 불필요한 리렌더링이 줄어 성능이 개선되고, 전체 폼 상태를 중앙에서 일관성있게 관리하여 코드의 복잡성을 줄임

Zod를 사용하여 입력 폼 유효성 검증 간편화

• 스키마 기반 검증으로 데이터 일관성을 유지하면서, 상수를 사용해 하드 코딩을 줄이고 유연한 요구 사항 변경에 대응하며 사용자 오류를 사전에 방지함

• React Hook Form과 Zod를 연동해 입력 폼의 유효성 검사를 간편하게 처리하여 오류 관리가 쉬운 코드를 구현하고, 유지 보수성을 높임

리팩토링 및 추가 기능을 대비하기 위한 테스트 코드 작성

• 1차 MVP 구현 이후, 리팩토링 및 추가 기능에 대비해 테스트 코드를 작성하여 반복적인 수동 테스트를 개선함

• 새로운 기능을 추가하거나 리팩토링 할 때마다 기존 기능에 영향을 주지 않도록 보장하여 예상치 못한 버그를 잡아냄

• 시스템의 안정성을 유지하면서도 개발 생산성을 극대화함

MSW Mock server를 사용하여 서버 API 요청 최소화

• MSW를 활용해 개발 및 테스트 과정에서 실제 서버 API 요청을 최소화

• 요청에 대한 지연 시간을 시뮬레이션할 수 있었고, 서버 부하를 줄이는 동시에 코드의 안정성과 디버깅 효율성을 높임

• 실제 운영 환경과 유사한 테스트를 통해 사용자 경험을 더욱 개선할 수 있으며, 전반적인 개발 속도와 품질을 함께 향상시킬 수 있었음