· 1 / 5
기여 범위
설문과 진단 결과, 화장품 검색 등 고객용 화면과 관리자 페이지를 포함해 전체 프론트엔드를 담당했습니다. Next.js App Router를 사용하며 개발 환경과 UI를 구성하고, 인증과 API 연동, 서비스 배포를 진행했습니다.
맡은 작업
- Next.js/TypeScript 기반의 개발 환경 구성과 고객용·관리자 화면 구현
- Next.js와 서버 사이드 세션을 활용해 인증 상태에 따른 화면 깜빡임 개선
- NextAuth.js를 활용해 프론트엔드 환경에서 소셜 로그인 구현
- 검색 상태를 URL 쿼리 스트링으로 관리하여 새로고침이나 링크 공유 시 맥락 유지
- 검색 디바운스와 무한 스크롤을 적용해 불필요한 API 요청을 줄이고 목록을 이어서 조회할 수 있도록 구현
- AWS Amplify를 활용한 배포 환경 구성
사용 기술
언어·프레임워크
Next.jsTypeScript
상태·데이터
Recoil
화면·인터랙션
Tailwind CSS
배포·도구
NextAuth
- Next.js · NextAuth
- 세션 기반 인증 화면과 소셜 로그인을 구성했습니다.
- URL 쿼리 · 디바운스
- 검색 맥락을 유지하고 입력 중 불필요한 조회를 줄이도록 적용했습니다.
인증과 검색·목록 처리
인증 상태에 맞는 화면 표시
클라이언트에서 로그인 여부를 확인하는 동안 화면이 바뀌어 보였습니다. 서버에서 세션을 먼저 확인해 초기 화면부터 인증 상태에 맞는 내용을 표시하도록 했습니다. 소셜 로그인은 NextAuth로 구현했습니다.
검색 조건 유지와 목록 이어보기
검색 조건을 URL 쿼리로 관리해 새로고침하거나 링크를 공유해도 같은 조건으로 조회하도록 했습니다. 검색 입력에는 디바운스를 적용해 입력 중 발생하는 요청을 줄이고, 무한 스크롤로 목록을 이어서 불러오도록 구현했습니다.
페이지 이동 후 Router Cache의 이전 데이터 표시
데이터를 변경해도 목록에 바로 반영되지 않고 새로고침해야 갱신되는 문제가 있었습니다. fetch 옵션과 재검증 설정을 조정해도 해결되지 않아 페이지 이동 시 재사용되는 클라이언트 Router Cache를 확인했습니다. 당시에는 페이지 진입 시 router.refresh()로 캐시를 갱신하고 데이터를 다시 받아오도록 처리했습니다.