<aside>
쇼핑몰 개발에 앞서 Next.js의 데이터 처리·로그인·화면 이동 방식을 연습한 개인 학습 프로젝트입니다.
실제 서버 대신 가상 데이터를 사용하며, 일부 화면은 더미 데이터를 표시하는 수준까지 구현했습니다.
</aside>
쇼핑몰 프로젝트를 시작하기 전에 서버에서 가져오는 데이터 관리와 인증, Next.js의 화면 이동 방식을 익히고자 만들었습니다. 2025.06에 30일간 진행했습니다.
반응형 피드·검색·탐색·메시지·프로필 화면과 인증 화면을 만들고, 가상 API와 데이터 상태 관리, 배포를 맡았습니다.
실제 서버 응답을 흉내 내는 Mock API를 MirageJS와 Faker.js로 구성했습니다. 서버 없이도 데이터를 동적으로 생성해 화면이 어떻게 반응하는지 확인했습니다.
또한 화면이 이동해도 이전 화면이 배경에 남는 모달을 구현했습니다. Next.js의 인터셉팅 라우트와 병렬 라우트를 사용했습니다.
Mock API 덕분에 실제 백엔드 없이 화면과 데이터 상태를 함께 확인하고 다양한 상황을 시험할 수 있었습니다. 개발 초기에 화면을 만들고 서버 구조를 연습하는 데도 활용했습니다.
다만 가상 데이터의 상태를 저장하고 일관성을 유지하기 어려웠으며, 실제 서버와 같은 환경을 검증한 것은 아닙니다. 기능을 넓히면서 메시지·알림 등 일부 화면은 더미 데이터를 보여주는 수준에 머물렀습니다.
다시 만든다면 피드 조회·작성·수정 같은 핵심 흐름을 먼저 완성하고 보조 화면을 추가하겠습니다.
로그인 버튼에서 테스트 계정으로 들어가 화면을 둘러볼 수 있습니다. 표시되는 데이터는 모두 Mock 데이터입니다. Render 무료 인스턴스로 배포해 첫 접속이 지연될 수 있습니다.
피드 · 게시물을 불러와 보여주는 화면입니다.