2023.10 ~ 2024.02(4개월) 프론트엔드 3人
샤뜨는 페인트 용품 온라인 쇼핑몰입니다. Modern Masters와 Midas Metal의 공식 수입처로 고품질 제품을 판매하고 있습니다. 최신 웹 기술을 사용함으로써 모던 웹 개발에 대한 호기심이 더욱 깊어졌고, 이를 실전에 적용할 수 있는 좋은 기회였습니다.
NextJS 13의 App Router와 서버 컴포넌트를 활용해 SSR과 SSG를 구현하여 초기 로딩 속도 개선과 SEO 최적화를 달성했습니다. 또한, NextJS의 Image 컴포넌트로 이미지 최적화의 장점을 알게되었습니다.
Framer-Motion 라이브러리를 통해 주요 페이지에 애니메이션을 추가하여 인터랙티브한 UI 요소로 사용자 경험을 개선했습니다.
서버 데이터는 SWR로 캐시를 관리하고, 클라이언트 데이터는 Redux-toolkit으로 관리했습니다. 이를 통해 단방향 패턴으로 효율적인 데이터 흐름을 구축하여 유지보수가 용이하도록 구현했습니다.
Headless CMS인 Sanity를 이용한 스키마 설계 경험은 데이터 모델링과 시스템 아키텍처에 대한 이해를 높이는 계기가 되었습니다. Sanity의 타입 생성 기능과 TypeScript를 결합하여 백엔드와 프론트엔드 간 일관된 타입 안정성을 확보했습니다.
NextJS: App Router와 서버 컴포넌트를 사용하여 초기 로딩 속도와 SEO 최적화를 달성했습니다. TossPayments SDK 및 next-auth 등의 기능 사용을 위한 백엔드 서버 로직 구현과 Next의 Image 컴포넌트를 통한 이미지 최적화를 위해 선택했습니다.
Sanity: Headless CMS 기술로, 운영을 담당하면서 데이터베이스 관리와 CMS를 통합할 수 있는 장점 때문에 선택했습니다.
SWR: NextJS에 최적화된 데이터 관리 도구로, 여러 컴포넌트에서 한번의 통신으로 관리하는 편의성을 위해 선택했습니다. 데이터 캐싱과 리페칭에서 강력한 효과를 기대했습니다.
Redux-toolkit: 클라이언트 상태 관리 도구로, Flux 패턴을 적용해 상태를 관리하기 위해 선택했습니다. 이전 프로젝트에서 props drilling 문제로 유지보수의 어려움을 경험하며 상태 관리의 필요성을 깨달았습니다.