프로젝트 간단 소개
- 기존에 외주로 개발되었던 Ghost CMS로 제작된 데일리바이트 사이트를, Next.js 기반의 사이트로 전체 리뉴얼 하는 프로젝트입니다.
- 모든 인프라를 새로 구축하고 디자인을 새로이 하는 등 자체 솔루션 개발을 위해 모든 부분을 새로 구성하였으며, 기존의 데이터만 마이그레이션 되었습니다.
기여도
프로젝트 기간
2022.08 ~ 2023.01
개발 환경
개발 언어/라이브러리
상세 업무
<aside>
💡 핵심
- 각종 CRUD요구사항을 기획에 맞게 정확히 구현하였고, REST API를 연동하였습니다.
- 서버 상태를 react-query 라이브러리 활용하여 해결했습니다.
- queryKey, queryFn을 모듈화하여 쿼리키를 계층적으로 체계적으로 관리하였습니다. ⇒ tanstack query v5 마이그레이션에 손쉽게 대응할 수 있었습니다.
- 클라이언트 상태는 redux + redux-toolkit 을 사용하여 관리했습니다.
- 로컬 상태로 해결할 수 없는 일부 전역적인 UI, 모달 및 토스트 등을 관리하는데 사용했습니다.
- 무한스크롤로 진행되는 메인 랜딩페이지를 최적화하기 위해 virtualization 기술을 적용하였습니다.
- Form 최적화 및 유지보수 효율성을 높였습니다.
- react-hook-form 라이브러리를 사용하여 상태관리를 최소화하였습니다.
- 여기에 yup 라이브러리를 결합하여 유효성 검증을 효율적으로 관리했습니다.
- 디자인 시스템을 구축하였습니다.
- 디자이너와의 협의 후 typography, color, shadow, animation 등의 기본 스타일을 도출하였고 이를 emotion.js 코드로 정의하여 활용했습니다.
- 이를 바탕으로 button, input, label, modal 등의 디자인 시스템 컴포넌트를 구현하였습니다.
- 반응형 디자인을 emotion.js 에 Facepaint를 결합하는 방식으로 구현하였습니다. https://emotion.sh/docs/media-queries#facepaint
- tinymce 에디터 라이브러리 사용하여 wysiwyg 개발을 진행하였습니다. 문서를 읽어가며 각종 옵션과 플러그인을 적용하였습니다.
- 테이블을 Generic Constraints 기술을 사용하여 여러 종류의 리스트를 받을 수 있도록 컴포넌트화 하였습니다.
- SSR, SSG + ISR, CSR의 정확한 이해를 바탕으로 사이트를 개발하였습니다.
- 최적화를 위해 SSG를 적극적으로 이용했습니다.
- 인증된 유저만 볼 수 있는 유료 컨텐츠는, 일단 SSG로 공개 데이터를 렌더링 한 후 클라이언트사이드에서 API를 재 호출하여 유료 컨텐츠를 볼 수 있도록 하였습니다
</aside>
<aside>
💡 문제를 발견해서 적극적으로 개선해본 경험