[6주차] 셰어마인드 과제 제출합니다.

.eslintrc.json

@@ -0,0 +1,3 @@
+{
+  "extends": ["next/babel", "next/core-web-vitals"]
+}

.gitignore

@@ -0,0 +1,36 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# local env files
+.env*.local
+.env
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts

README.md

@@ -1,12 +1,12 @@
-# 5주차 미션: Next-Netflix
+# 6주차 미션: Next-Netflix
 
 ## 서론
 
 안녕하세요, 프론트 운영진 **노수진**입니다 😸
 
-이번주부터는 새 프로젝트인 **Netflix 클론코딩**을 진행합니다. 이번 미션은 Next.js를 사용해 보며 SSR을 학습하고 Figma로 주어지는 디자인을 활용해 스타일링 하는 방법을 이해하는 것을 목표로 합니다.
+이번주는 저번주 과제를 이어 Netflix를 완성해봅시다. 이번주 과제의 목표는 지난주에 이어 figma로 주어지는 디자인을 사용해 스타일링을 하는 방법과 SSR에 익숙해지는 것입니다. 추가적으로 성능 최적화 방법에 대해서도 생각해보는 것도 좋을 것 같습니다.
 
-또한 이번주부터는 프론트 페어와 함께하는 과제인 만큼 각 팀별로 미리 호흡을 맞춰 보는 좋은 기회가 될 것 같습니다. 모두 화이팅입니다🔥
+이번주도 화이팅입니다💪
 
 ## 미션
 
@@ -18,33 +18,31 @@
 
 ### 기한
 
-- 2023년 11월 10일 (기한 엄수)
+- 2023년 11월 17일 (기한 엄수)
 
 ### 필수 요건
 
-- [결과화면](https://next-netflix-17th-sepia.vercel.app/)의 랜딩 페이지와 메인 페이지를 구현합니다.
+- [결과화면](https://next-netflix-17th-sepia.vercel.app/)의 상세 페이지와 검색 페이지를 구현합니다.
+  - 상세 페이지는 동적 라우팅을 이용해 구현합니다.
+  - 검색 페이지는 실시간 키워드 검색으로 구현합니다.
 - [Figma](https://www.figma.com/file/UqdXDovIczt1Gl0IjknHQf/Netflix?node-id=0%3A1)의 디자인을 그대로 구현합니다.
+- **SSR**을 적용해서 구현합니다.
 - Open api를 사용해서 데이터 패칭을 진행합니다. (ex. [themoviedb API](https://developers.themoviedb.org/3/getting-started/introduction))
-- `yarn`, `yarn berry`, `npm`, `pnpm`등 패키지 매니저를 직접 선택해 Next.js를 세팅해 봅니다.
 
 ### 선택 사항
 
-- SSR(Server Side Rendering)을 적용해서 구현합니다.
-- 웹 폰트를 사용합니다.
-- 반응형을 고려합니다.
+- 검색 페이지 무한스크롤을 구현합니다.
+- 검색 페이지 스켈레톤 컴포넌트를 구현합니다.
+- 성능 최적화를 위한 방법을 적용해봅니다.
 
 ## **Key Question**
 
-- Server Side Rendering과 Client Side Rendering의 차이
-- SEO란
-- 전반적인 협업 과정
+- 정적 라우팅(Static Routing)/동적 라우팅(Dynamic Routing)이란?
+- 성능 최적화를 위해 사용한 방법
 
 ## 링크 및 참고자료
 
-- [랜딩페이지 영상](https://lottiefiles.com/kr/)
-- [Next.js Docs](https://beta.nextjs.org/docs)
-- [Next.js 13에서 변한 것들](https://velog.io/@hang_kem_0531/Next.js-13%EC%9D%B4-%EB%82%98%EC%99%80%EB%B2%84%EB%A0%B8%EB%8B%A4)
-- [Next.js 14에서 변한 것들](https://velog.io/@lee_1124/Next.js-14-%EC%97%85%EB%8D%B0%EC%9D%B4%ED%8A%B8)
-- [Git 협업 가이드](https://velog.io/@jinuku/Git-%ED%98%91%EC%97%85-%EA%B0%80%EC%9D%B4%EB%93%9C)
-- [디자이너와 개발자가 협업하기 위한 피그마 기본 기능](https://chingguhl.tistory.com/entry/%EA%B0%9C%EB%B0%9C%EC%9E%90%EA%B0%80-%EA%BC%AD-%EC%95%8C%EC%95%84%EC%95%BC-%ED%95%A0-%ED%94%BC%EA%B7%B8%EB%A7%88-10%EA%B0%80%EC%A7%80-%EA%B8%B0%EB%8A%A5-%EB%94%94%EC%9E%90%EC%9D%B4%EB%84%88%EC%99%80-%EA%B0%9C%EB%B0%9C%EC%9E%90%EA%B0%80-%ED%98%91%EC%97%85%ED%95%98%EA%B8%B0-%EC%9C%84%ED%95%9C-%ED%94%BC%EA%B7%B8%EB%A7%88-%EA%B8%B0%EB%B3%B8-%EA%B8%B0%EB%8A%A5)
+- [useCallback과 React.Memo를 이용한 렌더링 최적화](https://velog.io/@yejinh/useCallback%EA%B3%BC-React.Memo%EC%9D%84-%ED%86%B5%ED%95%9C-%EB%A0%8C%EB%8D%94%EB%A7%81-%EC%B5%9C%EC%A0%81%ED%99%94)
+- [성능 최적화](https://ui.toast.com/fe-guide/ko_PERFORMANCE)
+- [더 나은 UX를 위한 스켈레톤 UI 만들기](https://ui.toast.com/weekly-pick/ko_20201110)
 - [React에서 무한 스크롤 구현하기](https://tech.kakaoenterprise.com/149)

jsconfig.json

@@ -0,0 +1,7 @@
+{
+  "compilerOptions": {
+    "paths": {
+      "@/*": ["./src/*"]
+    }
+  }
+}

next.config.js

@@ -0,0 +1,17 @@
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+  webpack: (config) => {
+    config.module.rules.push({
+      test: /\.svg$/,
+      use: ["@svgr/webpack"],
+    });
+    return config;
+  },
+  compiler: { styledComponents: true },
+  reactStrictMode: false,
+  images: {
+    domains: ["image.tmdb.org"],
+  },
+};
+
+module.exports = nextConfig;