안녕하세요, 프론트엔드 운영진 원채영입니다! 🔥🤍
이번 주부터는 새 프로젝트인 Netflix 클론코딩을 진행합니다!
이번 과제에서는 Next.js를 활용해 SSR(Server Side Rendering) 을 직접 경험해보고,
주어진 Figma 디자인을 활용해 스타일링 하는 방법을 이해하는 것을 목표로 합니다.
또한 이번 주부터는 프론트 페어와 함께하는 첫 과제인 만큼, 팀별로 미리 호흡을 맞춰볼 수 있는 좋은 기회가 될 것 같습니다.
그럼 이번 과제도 모두 파이팅입니다!!!! 🔥🔥
- Next.js 사용법을 공부해봅니다.
- Figma로 주어지는 디자인으로 스타일링 하는 방식에 익숙해집니다.
- Git을 이용한 협업 방식에 익숙해집니다.
- 프론트엔드와 백엔드 시스템에 대한 흐름을 이해합니다.
2026년 5월 2일 토요일 (기한 엄수)
- 결과화면의 랜딩 페이지와 메인 페이지를 구현합니다.
- Figma의 디자인을 그대로 구현합니다.
- Open api를 사용해서 데이터 패칭을 진행합니다. (ex. themoviedb API)
yarn,yarn berry,npm,pnpm등 패키지 매니저를 직접 선택해 Next.js를 세팅해 봅니다.
- SSR(Server Side Rendering)을 적용해서 구현합니다.
- 웹 폰트를 사용합니다.
- 반응형을 고려합니다.
- 전반적인 협업 과정에 대해 알려주세요. 👏🏻
(프로젝트에서 해당 패키지 매니저를 선택한 이유, 파일 구조 컨벤션을 어떻게 지켰는지,
업무 분담과 소통 방식은 어떻게 진행했는지를 함께 정리해 주세요. 21기, 22기 PR을 참고하시면 좋습니다!)
- React 18 버전의 변경점에 대해 설명해주세요.
- 서버 컴포넌트와 클라이언트 컴포넌트
- lazy loading과 Suspense 컴포넌트
- automatic batching, Concurrent Rendering 등 추가적으로 더 설명해주셔도 됩니다!
(React)
- useCallback과 React.Memo를 이용한 렌더링 최적화
- 성능 최적화
- React 18의 새로운 기능
- react 서버 컴포넌트가 해결하는 문제들 in kakao 기술 블로그
(Vercel)
(랜딩페이지 Netflix 로고)
(Next.js)
- Next.js Docs
- Next.js 13에서 변한 것들
- Next.js 14에서 변한 것들
- Next.js 15, 16
- React & Next.js에서 발견된 취약점-(CVE-2025-55182(React2Shell)
(협업)