안녕하세요 🙌🏻 24기 프론트엔드 운영진 이승연입니다.
지난 5주차 미션에서는 Next.js의 App Router를 활용하여 Instagram의 주요 화면을 구현하고, Server Component와 Client Component의 차이 및 파일 시스템 기반 라우팅에 대해 학습했습니다.
이번 6주차 미션에서는 Next.js를 활용하여 Instagram에서 구현하고 싶은 기능을 자유롭게 개발하고, Intersection Observer API를 활용한 무한 스크롤을 구현해보고자 합니다❗️
또한 Agile 방법론을 바탕으로 팀의 개발 과정을 계획하고 관리하며, README를 통해 프로젝트의 구현 결과와 협업 과정을 문서화하는 연습도 진행합니다.
지난 미션이 주어진 요구사항을 구현하는 데 집중했다면, 이번 미션에서는 팀원들과 함께 구현할 기능을 직접 선정하고, 작업의 우선순위를 설정하며, 개발 과정을 주도적으로 관리해보는 것이 목표입니다.
각 팀이 본격적인 프로젝트를 준비하거나 진행하고 있는 만큼, 이번 미션에서 경험한 기술적 의사결정과 협업 방식을 실제 팀 프로젝트에도 적극적으로 활용해보셨으면 좋겠습니다!
과제를 진행하다가 막히는 부분이 있더라도 우선 스스로 공부하고 찾아보며 해결해보는 과정을 권장드립니다. 다만 미션과 관련해 운영진의 도움이 필요하다면 언제든 프론트엔드 카카오톡 및 팀별 멘토에게 질문을 남겨주세요!
- Next.js를 활용하여 원하는 기능을 직접 설계하고 구현합니다.
- Intersection Observer API의 동작 원리를 이해하고 무한 스크롤을 구현합니다.
- Agile 방법론의 핵심 개념을 이해하고 Sprint 기반의 협업 과정을 경험합니다.
- 팀원 간 역할을 분담하고 Backlog를 활용하여 작업의 우선순위와 진행 상황을 관리합니다.
- README.md를 작성하여 프로젝트의 주요 기능, 구현 결과 및 개발 과정을 문서화합니다.
- 2026년 11월 18일 수요일 14:00까지
- Intersection Observer API를 활용한 무한 스크롤의 구현 방식과 구현 과정에서 고려한 사항에 대해 설명해주세요.
- 5주차 → 6주차 과제로 발전시키는 과정에서 중점적으로 고려한 사항과 그 이유를 작성해주세요.
- 팀별로 5주차 프로젝트에 이어 Instagram에서 구현하고 싶은 기능을 자유롭게 선정합니다.
- 기존 기능을 그대로 반복하기보다는 새로운 기능이나 개선 사항을 하나 이상 포함해주세요.
- 무한 스크롤 구현: Intersection Observer API를 활용하여 자유롭게 선정한 기능에 포함하여 구현하거나 별도의 피드 및 게시물 목록에서 구현합니다.
- Skeleton UI 구현: 데이터 로딩 중 실제 콘텐츠와 유사한 형태의 Skeleton UI를 표시하고, 로딩 완료 후 콘텐츠로 전환합니다.
- 이번 6주차 미션을 하나의 Sprint로 진행합니다.
- 프로젝트의 GitHub Repository에 팀별로 README.md를 작성합니다. 아래 3가지는 필수사항입니다.
- 프로젝트 소개 및 주요 기능
- 팀원별 역할 및 담당 기능
- Sprint 목표, Backlog 및 회고
- 실제 외부 API를 연동하여 데이터를 처리합니다.
- TanStack Query의 useInfiniteQuery를 활용하여 무한 스크롤의 데이터 페칭과 캐싱을 관리합니다.
- PR 템플릿 및 코드 리뷰 규칙을 작성하고 적용합니다.
- 이 외에도 추가하고 싶은 기능이나 개선 사항이 있다면 자유롭게 구현해 주세요!