개요

• 서비스 링크
• 깃허브 레포 링크

기술 스택

• TypeScript
• Next.js
• React Query / Zustand
• Tailwind CSS / Headless UI
• ESLint / Prettier
• Vercel
• 그 외 주요 라이브러리
  • msw: 서버 구현 전에 목데이터를 사용할 수 있는 라이브러리
  • cookies-next: next에서 CSR, SSR환경 모두 쿠키를 용이하게 관리하는 라이브러리
  • color-thief-react: 이미지에서 컬러를 추출하여 색상 코드를 전달해주는 라이브러리
  • html-to-image: 지정한 컴포넌트를 이미지 파일로 변환해주는 라이브러리
  • file-saver: 파일로 저장하여 다운로드를 할 수 있는 라이브러리

개발 업무

• 프론트엔드 작업 100% 진행했습니다.
• 피그마를 기반으로 재사용 가능한 컴포넌트를 만들어 사용했습니다.
• 폰트 최적화 및 이미지 최적화를 사용했습니다.
• 책 커버에서 컬러를 추출하는 UI를 구현했습니다.
• 문장 카드를 이미지로 받을 수 있는 기능을 구현했습니다.
• getServerSideProps를 사용하여 토큰 유무에 따라 라우트 접근 제한을 적용했습니다.

얻은 경험

빠른 기간 내에 MVP 개발