• 프로젝트 초기 세팅: Next13의 실험적 기능인 app 디렉토리 폴더 구조를 이용해 프로젝트를 구축하였습니다.
• PWA: PC보다는 모바일에 집중한 사이트의 특성을 고려해 홈 화면에 추가하여 사용자가 네이티브 앱처럼 사용할 수 있도록 했습니다.
• 회원가입: React-hook-form을 사용해 컴포넌트 리렌더링 최적화를 진행했습니다.
• 회원정보 수정: 사용자가 프로필 이미지를 등록하면 미리보기가 렌더되고, 서버에 바로 저장될 수 있도록 구현하였습니다.

• 메인 페이지

✅ 비회원도 조회가 가능한 유일한 페이지! 메인 페이지는 모두가 조회가 가능한 유일한 페이지입니다. 따라서 개별 시리즈는 새로운 사용자의 궁금증을 유도하여 회원가입으로 연결하는 역할을 해야합니다. 이를 위해 시리즈의 사진 영역을 넓게 잡아 시각적인 이목을 끌고자 했으며, “n번 사용”정보를 노출하였습니다. (비닐봉지를 30번 사용한 시리즈라면 궁금하지 않을까요? 👀)

✅ 사용자의 빠른 탐색을 위해 무한 스크롤을 적용했습니다. 많은 이미지 로딩이 필요한 메인페이지는 최초 렌더가 느리다는 단점이 있습니다. 이를 해결하기 위해 api 요청 1회당 12개의 데이터만 불러오는 무한 스크롤을 적용하였습니다.

• 시리즈 상세 페이지

✅ 기능별로 컴포넌트를 분할했습니다. 시리즈 상세페이지는 다양한 기능(데이로그 조회, 북마크, 투표, 댓글)이 들어가는 페이지입니다. 각 기능은 개별 api가 존재하기 때문에 불필요한 리렌더링 방지를 위해 컴포넌트를 분할 했습니다.

✅ 사용자의 빠른 탐색을 위해 무한 스크롤을 적용했습니다. 데이로그도 많은 이미지 로딩이 필요한 페이지입니다. 따라서 무한 스크롤을 통해 단위 별로 데이터를 호출하여 빠른 로딩을 주고자 했습니다.

• 마이 페이지

✅ 조건으로 UI를 구분하여 컴포넌트를 재사용했습니다. 마이페이지는 "자신"의 페이지 접속의 경우와 "타인"의 페이지 접속의 경우 UI가 구분됩니다. UI의 글씨 혹은 연결 링크만 변경되기 때문에, 페이지를 나눠 중복 코드를 작성하기 보다는 조건문을 주어 다른 UI가 렌더되도록 하였습니다.

✅ 다양한 시리즈 상태의 구분이 필요했습니다. 시리즈는 투표 결과에 따라 메달을 부여받을 수도, 재사용을 해야할 수도 있습니다. 이러한 상태가 피드의 UI상으로 구분되어 사용자가 즉각적으로 확인할 수 있도록 구현했습니다.

• 로그인 페이지
  • 이런 이유로 이런 이런 기술을 적용해서 이렇게 만들어 보았습니다.
• 회원가입 페이지
  • 이런 이유로 이런 이런 기술을 적용해서 이렇게 만들어 보았습니다.
• 회원 정보 수정 페이지
  • 이런 이유로 이런 이런 기술을 적용해서 이렇게 만들어 보았습니다.

• 로그인 페이지
  • 이런 이유로 이런 이런 기술을 적용해서 이렇게 만들어 보았습니다.
• 회원가입 페이지
  • 이런 이유로 이런 이런 기술을 적용해서 이렇게 만들어 보았습니다.
• 회원 정보 수정 페이지
  • 이런 이유로 이런 이런 기술을 적용해서 이렇게 만들어 보았습니다.

• 로그인 페이지
  • 이런 이유로 이런 이런 기술을 적용해서 이렇게 만들어 보았습니다.
• 회원가입 페이지
  • 이런 이유로 이런 이런 기술을 적용해서 이렇게 만들어 보았습니다.
• 회원 정보 수정 페이지
  • 이런 이유로 이런 이런 기술을 적용해서 이렇게 만들어 보았습니다.

• 로그인 페이지
  • 이런 이유로 이런 이런 기술을 적용해서 이렇게 만들어 보았습니다.
• 회원가입 페이지
  • 이런 이유로 이런 이런 기술을 적용해서 이렇게 만들어 보았습니다.
• 회원 정보 수정 페이지
  • 이런 이유로 이런 이런 기술을 적용해서 이렇게 만들어 보았습니다.