Skip to content

Commit 91f8d48

Browse files
📝 docs: readme 작성
1 parent 75c3bd3 commit 91f8d48

File tree

1 file changed

+101
-61
lines changed

1 file changed

+101
-61
lines changed

README.md

Lines changed: 101 additions & 61 deletions
Original file line numberDiff line numberDiff line change
@@ -1,61 +1,101 @@
1-
# 6주차 미션: Next-Netflix
2-
3-
## 서론
4-
5-
안녕하세요, 프론트 운영진 **김승완**입니다 🐶🍮
6-
7-
이번주는 저번주 과제를 이어 Netflix를 완성해봅시다. 이번주 과제의 목표는 지난주에 이어 figma로 주어지는 디자인을 사용해 스타일링을 하는 방법과 SSR에 익숙해지는 것입니다. 추가적으로 성능 최적화 방법에 대해서도 생각해보는 것도 좋을 것 같습니다.
8-
9-
이번주도 화이팅입니다~!!💪
10-
11-
## 미션
12-
13-
### 미션 목표
14-
15-
- Next.js 사용법을 공부해봅니다.
16-
- Figma로 주어지는 디자인으로 스타일링 하는 방식에 익숙해집니다.
17-
- Git을 이용한 협업 방식에 익숙해집니다.
18-
- 프론트엔드와 백엔드 시스템에 대한 흐름을 이해합니다.
19-
20-
### 기한
21-
22-
- 2024년 11월 09일 토요일(기한 엄수)
23-
24-
### 필수 요건
25-
26-
- [결과화면](https://next-netflix-18th-2.vercel.app/)의 상세 페이지와 검색 페이지를 구현합니다.
27-
- 상세 페이지는 동적 라우팅을 이용해 구현합니다.
28-
- 검색 페이지는 실시간 키워드 검색으로 구현합니다.
29-
- [Figma](https://www.figma.com/file/UqdXDovIczt1Gl0IjknHQf/Netflix?node-id=0%3A1)의 디자인을 그대로 구현합니다.
30-
- **SSR**을 적용해서 구현합니다.
31-
- Open api를 사용해서 데이터 패칭을 진행합니다. (ex. [themoviedb API](https://developers.themoviedb.org/3/getting-started/introduction))
32-
33-
### 선택 사항
34-
35-
- 검색 페이지 무한스크롤을 구현합니다.
36-
- 검색 페이지 스켈레톤 컴포넌트를 구현합니다.
37-
- 성능 최적화를 위한 방법을 적용해봅니다.
38-
39-
## **Key Question**
40-
41-
- React 18 버전의 변경점에 대해 설명해주세요.(+ 19 버전에 대한 추가 설명도 좋습니다)
42-
- 서버 컴포넌트와 클라이언트 컴포넌트
43-
- lazy loading과 Suspense 컴포넌트
44-
- automatic batching, 동시성 모드 등 추가적으로 더 설명해주셔도 됩니다!
45-
- nextJS 13 이후의 app routing 방식의 특징과 기능에 대해 설명해주세요.
46-
- 13 이전의 페이지 라우팅과의 디렉터리 구성 변화
47-
- nextJS가 백엔드 시스템을 녹여내는 방법
48-
- 패러랠, 인터셉팅 라우트란 무엇인가?
49-
- nextJS에서 SSR, SSG를 구현하는 방법
50-
- vercel, netlify 같은 호스팅 플랫폼의 특징과 내부 구현 원리에 대해 설명해주세요(+ aws의 스토리지와 인스턴스 등 생태계에 대해서도 알려주세요)
51-
52-
## 링크 및 참고자료
53-
54-
- [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)
55-
- [성능 최적화](https://ui.toast.com/fe-guide/ko_PERFORMANCE)
56-
- [더 나은 UX를 위한 스켈레톤 UI 만들기](https://ui.toast.com/weekly-pick/ko_20201110)
57-
- [React에서 무한 스크롤 구현하기](https://tech.kakaoenterprise.com/149)
58-
- [React 18의 새로운 기능](https://www.youtube.com/watch?v=7mkQi0TlJQo)
59-
- [react 서버 컴포넌트가 해결하는 문제들 in kakao 기술 블로그](https://tech.kakaopay.com/post/react-server-components/)
60-
- [vercel의 배포 방식](https://www.youtube.com/watch?v=8q-jCvLWwKc&t=11s)
61-
- [클라우드 전반의 이해](https://www.youtube.com/watch?v=YSudWlx0o9I)
1+
# 5주차 미션: Next-Netflix
2+
3+
# 결과물
4+
5+
- [베포 링크](https://next-netflix-20th-gamma.vercel.app/)
6+
7+
# Key Questions
8+
9+
## React 18 버전의 변경점에 대해 설명해주세요.(+ 19 버전에 대한 추가 설명도 좋습니다)
10+
11+
React 18버전은 서버 컴포넌트와 클라이언트 컴포넌트의 구분, lazy loading과 Suspense 기능, 자동 배칭 기능 등을 도입했다.
12+
13+
### 자동 배칭
14+
15+
- 자동 배칭은 여러 개의 상태 업데이트를 묶어 한 번의 렌더링으로 처리하여 성능을 높이는 것이다.
16+
- 18 이전 버전에서도 이벤트 핸들러에서는 자동 배칭이 지원되었다.
17+
- 예를 들어, 이벤트 핸들러 내에서 `setState` 함수로 여러 상태가 변경되어도 렌더링은 한 번만 일어났다.
18+
- 하지만 `setTimeout` 등의 비동기 함수에서는 자동 배칭이 적용되지 않아 `setTimeout` 내의 `setState` 함수는 각각 렌더링을 요구했다.
19+
- 하지만 18부터는 비동기 함수 내에서도 자동 배칭이 지원되도록 했다.
20+
21+
### 서버 및 클라이언트 컴포넌트
22+
23+
- 서버 컴포넌트
24+
- 서버에서 데이터를 렌더링해 HTML로 전달한다.
25+
- 서버에서만 처리되는 컴포넌트로, 상태나 유저의 인터랙션이 필요 없는 UI에 주로 사용된다.
26+
- ex) 정적 데이터렌더링, SEO를 위한 데이터 로드
27+
- 클라이언트로 불필요한 자바스크립트를 보내지 않으므로 로딩 속도가 빠르고 성능이 향상된다.
28+
- 클라이언트 컴포넌트
29+
- 브라우저에서 실행되며, 상태 관리나 이벤트 핸들링이 필요한 경우에 사용된다.
30+
- 클라이언트 컴포넌트 내에서 서버 컴포넌트를 가져와 함께 사용할 수 있다.
31+
- 주로 사용자와의 상호작용이 요구되는 UI 요소에 사용된다.
32+
33+
### Lazy Loading과 Suspense
34+
35+
- Lazy Loading
36+
- 컴포넌트를 필요할 때까지 로드하지 않고, 사용자가 해당 컴포넌트를 필요로 할 때 로드함으로써 초기 로딩 시간을 줄일 수 있다.
37+
- `React.lazy()`를 사용하여 설정할 수 있다.
38+
- Suspense
39+
- 비동기적으로 로드되는 컴포넌트를 감싸 로딩 중인 상태를 처리할 수 있도록 한 컴포넌트이다.
40+
- `Suspense`를 사용하여 불러올 수 있고, `fallback` 속성으로 데이터를 불러오는 동안 보여줄 로딩 UI를 전달할 수 있다.
41+
42+
## nextJS 13 이후의 app routing 방식의 특징과 기능에 대해 설명해주세요.
43+
44+
### app router
45+
46+
- 13 이전에는 `pages` 디렉토리 안의 파일들을 라우트로 변환했다. 페이지별로 하나의 파일이 필요하다.
47+
- 13부터는 `app` 디렉토리를 사용하며, `layout.js`, `page.ts` 파일을 통해서 라우팅할 수 있다.
48+
- `layout.js` 파일은 중첩된 레이아웃을 관리한다. 각 페이지마다 공통된 UI를 제공할 수 있다.
49+
- `page.ts`는 실제 페이지 콘텐츠를 정의한다.
50+
51+
### 패러렐(Parallel) 라우트
52+
53+
- 하나의 페이지 내에서 동시에 여러 라우트를 렌더링할 수 있다.
54+
- 대시보드나 소셜 미디어 피드 등에서 사용하기 좋다.
55+
- 병렬 라우팅은 명명된 슬롯(@folder)을 사용하여 구현된다. 각 슬롯은 독립적으로 렌더링되며, URL 구조에 영향을 미치지 않는다.
56+
- 병렬 라우팅을 사용하면 인증 상태나 기타 조건에 따라 렌더링할 콘텐츠를 선택할 수 있.
57+
- ex) 로그인 상태에 따라 대시보드와 로그인 페이지를 선택적으로 렌더링하기
58+
- 병렬 라우트에서 URL과 일치하지 않는 슬롯은 default.js 파일로 대체된다. 만약 default.js가 없으면 404 페이지가 표시됩니다.
59+
60+
### 인터셉팅(Intercepting) 라우트
61+
62+
- 페이지 이동 중에 특정 동작을 처리할 수 있다.
63+
- ex) 로딩 상태, 에러 처리, 추가 데이터 받아오기 등
64+
- (..): 한 단계 위의 디렉토리에서 라우트를 가로채기
65+
- (...): app 디렉토리 기준으로 라우트를 가로채기
66+
- Hard Navigation
67+
- 전체 페이지 새로 고침: 페이지 이동 시 현재 페이지를 완전히 벗어나서 새로운 페이지를 서버에서 다시 가져온다.
68+
- 페이지 상태 초기화: 새로고침이나 페이지 이동 시 모든 상태가 초기화된다.
69+
- 네트워크 요청: 서버에서 새로운 콘텐츠를 요청하는 방식이기 때문에 페이지 이동 시 네트워크 요청이 발생한다.
70+
- Soft Navigation
71+
- 페이지 새로 고침 없음: 페이지 이동 시 전체 페이지를 새로 고침하지 않고, 필요한 데이터나 콘텐츠만을 클라이언트 사이드에서 동적으로 업데이트한다.
72+
- 상태 유지: 페이지 이동 후에도 페이지의 상태가 유지된다.
73+
- 빠른 전환: 페이지가 완전히 새로 로드되지 않는다.
74+
75+
## vercel, netlify 같은 호스팅 플랫폼의 특징과 내부 구현 원리에 대해 설명해주세요(+ aws의 스토리지와 인스턴스 등 생태계에 대해서도 알려주세요)
76+
77+
- Vercel
78+
- Vercel은 Next.js의 개발사로, 클라우드 기반의 플랫폼으로 웹 애플리케이션을 빠르게 배포하고 최적화해준다.
79+
- CI/CD 자동화: Vercel은 GitHub 등에 연동해 커밋이 발생할 때마다 자동으로 빌드하고 배포한다.
80+
- 서버리스 기능: Vercel은 서버리스 아키텍처를 지원하여, 클라이언트의 요청에 따라 서버리스 함수가 트리거된다. AWS Lambda와 유사한 방식으로 동작하며, 요청 시에만 실행되고, 실행이 끝나면 서버 자원은 자동으로 해제된다.
81+
- 캐싱과 엣지 네트워크: 전 세계에 분산된 CDN(Content Delivery Network)을 통해 정적 콘텐츠를 캐싱하고, 클라이언트에게 제공한다.
82+
- Netlify
83+
84+
- Netlify는 Jamstack(JavaScript, API, Markup) 아키텍처에 최적화된 호스팅 플랫폼으로, 주로 정적 사이트와 서버리스 함수의 배포를 할 수 있다.
85+
- CI/CD 파이프라인: Netlify는 Git 저장소와 연결해 변경 사항이 발생하면 자동으로 애플리케이션을 빌드하고 배포한다.
86+
- 서버리스 함수 지원: Netlify Functions는 AWS Lambda와 유사한 서버리스 함수 기능을 제공한다.
87+
- 내부 CDN 및 엣지 네트워크: Netlify는 글로벌 CDN을 통해 정적 에셋을 빠르게 제공하며, 특정 페이지나 API 호출을 위한 엣지 네트워크 최적화로 성능을 높일 수 있다.
88+
89+
- AWS(Amazon Web Services)
90+
- AWS는 클라우드 기반의 다양한 인프라 및 서비스 제공업체로, 개발자와 기업들이 웹 애플리케이션, 데이터베이스, 서버리스 시스템을 손쉽게 관리하고 확장할 수 있도록 한다.
91+
- AWS S3: AWS의 S3(Simple Storage Service)는 스토리지 서비스로, 정적 웹사이트 호스팅, 데이터 아카이빙, 백업 등에 자주 사용된다.
92+
- EC2 인스턴스: Amazon EC2(Elastic Compute Cloud)는 가상 서버를 제공하는 서비스이다. EC2 인스턴스에 운영 체제와 애플리케이션을 설치하여 애플리케이션을 호스팅할 수 있다. 확장 및 축소도 가능하다.
93+
- AWS Lambda: AWS Lambda는 서버리스 컴퓨팅 서비스를 제공하여, 특정 이벤트에 대해 자동으로 실행되는 함수를 작성할 수 있다. 효율적인 서버리스 아키텍처를 구현할 수 있다.
94+
- 데이터베이스 및 API 서비스: AWS는 RDS(Relational Database Service)와 DynamoDB(NoSQL)와 같은 다양한 데이터베이스 서비스를 제공한다.
95+
96+
# 참고
97+
98+
- https://nextjs.org/docs/app/building-your-application/routing/parallel-routes
99+
- https://rocketengine.tistory.com/entry/NextJS-13-Routing-Parallel-Routes-%EB%B3%91%EB%A0%AC-%EB%9D%BC%EC%9A%B0%ED%8A%B8
100+
- https://rocketengine.tistory.com/entry/NextJS-13-Routing-Intercepting-Routes%EB%9D%BC%EC%9A%B0%ED%8A%B8-%EA%B0%80%EB%A1%9C%EC%B1%84%EA%B8%B0?category=1127295
101+
- https://velog.io/@hyunjoong/Next.js-13-Parallel-Intercepting-Routes-jxn0qt37

0 commit comments

Comments
 (0)