쇼핑몰 개발에 앞서 Next.js의 라우팅·인증·서버 상태 관리를 익히려고 만든 인스타그램 클론입니다. 실제 서버 대신 가상 API와 데이터를 사용한 학습 프로젝트입니다.
2026.10.02 배포 주소에서 확인한 로그인 화면. 인프런 강의를 바탕으로 만든 클론 실습임을 화면에 표시하고 있습니다.
학습에 사용한 강의의 흐름을 따라 구현하며 라우팅과 데이터 처리를 익혔습니다. 이번에는 로그인 화면까지만 확인했으며, 아래 피드와 모달 이미지는 기존 구현 당시의 자료입니다.
피드. 가상 API의 게시물을 불러와 표시합니다.
MirageJS와 Faker.js로 서버 응답을 흉내 내고 데이터를 동적으로 생성했습니다. TanStack Query로 비동기 데이터 상태를 다루고, NextAuth.js로 인증 흐름을 연결했습니다. 실제 백엔드 없이 화면 반응을 확인하기 위한 구성이었습니다.
모달 이동. 다른 화면을 열어도 이전 화면이 배경에 남도록 구성했습니다.
Next.js의 인터셉팅 라우트와 병렬 라우트를 사용했습니다. 페이지 이동과 모달 표현을 함께 다루는 방식을 이 프로젝트에서 연습했습니다.
가상 데이터의 저장 상태와 일관성을 유지하기 어려웠습니다. 실제 서버 환경을 검증한 프로젝트는 아니며, 기능을 넓히는 동안 메시지·알림 등은 더미 화면으로 남았습니다. 다시 진행한다면 피드 조회·작성·수정 흐름을 먼저 마무리하고 보조 화면을 추가하겠습니다.
로그인 화면의 테스트 계정 버튼으로 둘러볼 수 있으며 표시 데이터는 모두 Mock 데이터입니다. 기존 배포는 Render 무료 인스턴스를 사용해 첫 접속이 지연될 수 있습니다.