[6주차] Team 포토그라운드 강다혜 & 이희원 미션 제출합니다.

.eslintrc.json

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

.github/workflows/github-actions.yml

@@ -0,0 +1,38 @@
+name: Push to another repo to deploy to Vercel
+
+on:
+  push:
+    branches: [main, feature/moviedbapi]
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout the repository
+        uses: actions/checkout@v2
+
+      - name: Install dependencies (if needed for build script)
+        run: |
+          sudo apt-get update
+          sudo apt-get install -y ruby
+          sudo gem install mustache
+
+      - name: Run build script
+        run: sh ./build.sh
+
+      - name: Push output to another repository
+        uses: cpina/github-action-push-to-another-repository@main
+        env:
+          API_TOKEN_GITHUB: ${{ secrets.API_TOKEN_GITHUB }}
+        with:
+          source-directory: 'output'
+          destination-github-username: 'hiwon-lee' # <- 여기에 대상 사용자 이름
+          destination-repository-name: 'next-netflix-20th' # <- 여기에 대상 리포지토리 이름
+          user-email: ${{ secrets.GIT_EMAIL }}
+          user-name: ${{ secrets.GIT_USERNAME }}
+          commit-message: ${{ github.event.commits[0].message }}
+          target-branch: main
+
+      - name: Test the output directory variable
+        run: echo $DESTINATION_CLONED_DIRECTORY

.gitignore

@@ -0,0 +1,38 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+.yarn/install-state.gz
+
+# 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
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts
+
+.env

.prettierrc

@@ -0,0 +1,8 @@
+{
+  "singleQuote": true,
+  "semi": true,
+  "useTabs": false,
+  "tabWidth": 2,
+  "trailingComma": "all",
+  "printWidth": 80
+}

README.md

@@ -1,61 +1,101 @@
 # 6주차 미션: Next-Netflix
 
-## 서론
-
-안녕하세요, 프론트 운영진 **김승완**입니다 🐶🍮
-
-이번주는 저번주 과제를 이어 Netflix를 완성해봅시다. 이번주 과제의 목표는 지난주에 이어 figma로 주어지는 디자인을 사용해 스타일링을 하는 방법과 SSR에 익숙해지는 것입니다. 추가적으로 성능 최적화 방법에 대해서도 생각해보는 것도 좋을 것 같습니다.
-
-이번주도 화이팅입니다~!!💪
-
-## 미션
-
-### 미션 목표
-
-- Next.js 사용법을 공부해봅니다.
-- Figma로 주어지는 디자인으로 스타일링 하는 방식에 익숙해집니다.
-- Git을 이용한 협업 방식에 익숙해집니다.
-- 프론트엔드와 백엔드 시스템에 대한 흐름을 이해합니다.
-
-### 기한
-
-- 2024년 11월 09일 토요일(기한 엄수)
-
-### 필수 요건
-
-- [결과화면](https://next-netflix-18th-2.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))
-
-### 선택 사항
-
-- 검색 페이지 무한스크롤을 구현합니다.
-- 검색 페이지 스켈레톤 컴포넌트를 구현합니다.
-- 성능 최적화를 위한 방법을 적용해봅니다.
-
-## **Key Question**
-
-- React 18 버전의 변경점에 대해 설명해주세요.(+ 19 버전에 대한 추가 설명도 좋습니다)
-    - 서버 컴포넌트와 클라이언트 컴포넌트
-    - lazy loading과 Suspense 컴포넌트
-    - automatic batching, 동시성 모드 등 추가적으로 더 설명해주셔도 됩니다!
-- nextJS 13 이후의 app routing 방식의 특징과 기능에 대해 설명해주세요.
-    - 13 이전의 페이지 라우팅과의 디렉터리 구성 변화
-    - nextJS가 백엔드 시스템을 녹여내는 방법
-    - 패러랠, 인터셉팅 라우트란 무엇인가?
-    - nextJS에서 SSR, SSG를 구현하는 방법
-- vercel, netlify 같은 호스팅 플랫폼의 특징과 내부 구현 원리에 대해 설명해주세요(+ aws의 스토리지와 인스턴스 등 생태계에 대해서도 알려주세요)
-
-## 링크 및 참고자료
-
-- [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)
-- [React 18의 새로운 기능](https://www.youtube.com/watch?v=7mkQi0TlJQo)
-- [react 서버 컴포넌트가 해결하는 문제들 in kakao 기술 블로그](https://tech.kakaopay.com/post/react-server-components/)
-- [vercel의 배포 방식](https://www.youtube.com/watch?v=8q-jCvLWwKc&t=11s)
-- [클라우드 전반의 이해](https://www.youtube.com/watch?v=YSudWlx0o9I)
+# 결과물
+
+- [베포 링크](https://next-netflix-20th-five.vercel.app/)
+
+# Key Questions
+
+### 무한 스크롤과 `Intersection Observer API`의 특징에 대해 알아봅시다.
+
+무한 스크롤
+무한 스크롤은 스크롤을 무한으로 할 수 있는 기능이다.
+페이지 최하단에 도달했을 때 신규 콘텐츠를 로드하는 식으로 무한 스크롤이 구성된다.
+이 전에는 페이지네이션을 활용해 콘텐츠를 확인하는 방식을 사용했다.
+
+무한스크롤의 장점 : 별도의 추가 동작이 필요하지 않음. 
+무한스크롤의 단점  : 한 페이지 내에 많은 콘텐츠가 로드 되므로, 페이지 성능이 느려진다. 많은 컨텐츠 로드 후, 눈여겨봤던 콘텐츠로 다시 돌아가기 어렵다.
+
+Intersection Oberserver API
+해당 API는 무한 스크롤을 구현할 수 있도록 돕는다.
+Intersection Oberserver(교차 관찰자)는 요소(Element)가 뷰포트(ViewPort)와 교차하고 있는 지 감지한다. 즉, 관찰 중인 요소가 사용자가 보는 화면 영역 내에 들어왔는 지 알려준다.
+
+객체 생성
+```js
+new Intersection Observer(callback, options)
+```
+객체 생성 시 root(관찰 대상이 화면에 들어왔음을 감지하는 영역), rootMargin(감지 영역을 바깥 범위까지 확장), threshold(관찰 대상이 화면 내 얼마나 들어왔을 때 콜백 함수를 콜백할 지) 등의 값을 작성하면 된다.
+
+### `tanstack query`의 사용 이유(기존의 상태 관리 라이브러리와는 어떻게 다른지)와 사용 방법(reactJS와 nextJS에서)을 알아봅시다.
+
+tanstack query(이전 이름 : React Query)
+웹 애플리케이션에서 데이터 가져오기, 캐싱 동기화 및 서버 상태 업데이트를 간편하게 만들어주는 리액트 라이브러리다.
+즉, React에서 API 요청과 상태 관리를 쉽게 해주는 도구다.
+React나 Next.js와 함께 사용하는 경우 서버에서 데이터를 효율적으로 가져오고 캐싱 및 동기화를 관리할 수 있게 해준다.
+
+
+| 특징               | TanStackQuery              | 상태관리 라이브러리                      |
+| ---------------- | -------------------------- | ------------------------------- |
+| **사용 목적**        | 서버 상태 관리 (API 데이터 패칭, 캐싱)  | 클라이언트 상태 관리                     |
+| **주요 기능**        | 데이터 패칭, 캐싱, 무효화, 동기화, 리트라이 | 애플리케이션의 전역 상태 관리                |
+| **복잡성**          | 간단 (비동기 로직 추상화)            | 상태 및 비동기 로직 직접 구현 필요            |
+| **리덕스 미들웨어 필요성** | 불필요                        | 필요 (예: Redux-Thunk, Redux-Saga) |
+| **캐싱 지원**<br>    | 지원<br>                     | 직접 구현 필요<br>                    |
+
+[ReactJS, Next.js에서의 사용]
+
+ReactJS :
+- CSR을 기본으로 동작하며, 데이터는 클라이언트에서 fetching
+
+Next.js :
+- SSR이나 SSG(Static-Site Generation)을 활용해 초기 상태를 서버에서 준비할 수 있다.
+- Hydrate로 서버에서 패칭한 데이터를 클라이언트에 주입한다.
+
+[사용 방법]
+
+-  데이터 캐싱
+	- 항상 쿼리 키를 지정해 데이터를 가져온다. 이 쿼리 키를 통해 캐시된 데이터를 사용할 지, 새로운 데이터를 가져올 지를 판단한다.
+- 데이터의 신선도
+	- 캐시한 데이터를 fresh | stale 상태로 구분해 관리한다.
+	- fresh -> 데이터 사용
+	- stale -> 서버에 다시 요청해 신선한 데이터를 가져온다.
+	- staleTime : 데이터가 상하는 데까지 걸리는 시간
+	- isStale : fresh | stale 판단
+```tsx
+import { useQuery } from '@tanstack/react-query' 
+export default function DelayedData() { 
+	const { data, isStale } = useQuery({ 
+		queryKey: ['delay'], 
+		queryFn: async () => (await fetch('https://api.heropy.dev/v0/delay?t=1000')).json(), 
+		staleTime: 1000 * 10 // 10초 후 상함. 즉, 10초 동안 신선함. 
+		}) 
+	return ( <> 
+		<div>데이터가 {isStale ? '상했어요..' : '신선해요!'}</div> 
+		<div>{JSON.stringify(data)}</div> 
+		</> ) 
+}
+```
+### 기본적인 git add, commit, push, pull, merge, rebase 등의 명령어에 대해 알아봅시다(+ git branch 전략이나 다른 git 명령어도 좋습니다!)
+
+
+**Git에서의 흐름**을 기준으로 git 명령어에 대해 설명한다.
+1. **작업 디렉토리 (Working Directory)**:
+    - 실제로 코드 작업을 하는 디렉토리다.
+    - 파일을 생성하거나 수정하면, 변경 사항은 "Tracked" 상태(추적 중) 또는 "Untracked" 상태(추적되지 않음)가 된다.
+2. **스테이징 영역 (Staging Area)**:
+    - 변경된 파일을 `git add` 명령어로 스테이징 영역에 올립니다.
+    - 스테이징된 파일만이 commit 대상이 됩니다.
+3. **로컬 리포지토리 (Local Repository)**:
+    - 스테이징 영역의 변경 사항을 `git commit` 명령어로 로컬 리포지토리에 저장
+4. **원격 리포지토리 (Remote Repository)**:
+    - 로컬 리포지토리에서 커밋된 내용을 `git push`로 원격 리포지토리에 업로드
+
+ **Merge와 Rebase**
+특히 협업 할 때 중요하 쓰인다.
+
+|**특징**|**Merge**|**Rebase**|
+|---|---|---|
+|**히스토리**|병합 커밋 생성, 브랜치 구조 유지|히스토리가 직선으로 재배치됨|
+|**커밋 내역 확인**|브랜치별 작업 흐름이 명확히 보임|히스토리가 깔끔하고 간단해짐|
+|**협업 안전성**|충돌 관리가 비교적 쉬움|충돌 발생 시 작업 복잡도가 증가|
+|**사용 사례**|협업 중 공유된 브랜치에서 병합 시 사용|개인 작업 정리 또는 feature 브랜치 정리 시 사용|

build.sh

@@ -0,0 +1,4 @@
+cd ./
+mkdir output
+cp -R ./next-netflix-20th/* ./output
+cp -R ./output ./next-netflix-20th/

next.config.mjs

@@ -0,0 +1,16 @@
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+  compiler: {
+    styledComponents: true,
+  },
+  images: {
+    domains: ['image.tmdb.org'], // 여기에 도메인 추가
+  },
+  env: {
+    API_KEY: process.env.API_KEY,
+    API_URL: process.env.API_URL,
+    IMAGE_BASE_URL: process.env.IMAGE_BASE_URL,
+  },
+};
+
+export default nextConfig;