Week_5,6

5,6주차 미션: Next-Netflix

 

 

 

새오스 5,6주차를 마무리하며.....

 

처음으로 next.js를 써봤다..

음 그냥 그럭 저럭 쓸만 했다

next 12와 달리 13에서는 변경된 사항들이 꽤 있어서 오류 해결하느라 애 좀 먹었다. 음..

그래도 layout 기능이나.. page 넘어가는 기능들이 처음이라 어색해도 되게 유용하다고 생각해서 생각보다 그렇게 큰 스트레스를 받은 것 같진 않다^^...!!

 

npm만 쓰다가 yarn berry 시도해봤는데 배포 이슈로 다시 npm으로 돌아왔다는 아쉬운 점 빼고

많이 배울 수 있었던 과제였음ㅎ

 

 

---

새롭게 알게 된 부분 & 어려웠던 부분

 

사실 새롭게 알게 된 부분이라고 한다면 코드의 거의 모든 부분....이라

중요도가 높다고 생각하는 것만 적어보자면

 

 

1. Data fetching

export async function fetchUpComing() {
  const upComingRes = await (
    await fetch(
      `${process.env.NEXT_PUBLIC_API_URL}/movie/upcoming?api_key=${process.env.NEXT_PUBLIC_API_KEY}`,
      { cache: 'no-store' }
    )
  ).json();
  const upComingData = upComingRes.results;
  return [upComingData];
}

next 13 app router에서는 getServerSideProps을 지원하지 않아서 SSR 구현을 위해 fetch함수를 이용해 위와 같은 방식으로 api를 가져왔다.

 

 getServerSideProps 함수를 쓰려고 얼마나 애를 썼는지... 모른다ㅠㅠㅠ흑ㄱㅎㄱ흑흑ㅎㄱㅎㄱ흐그흑ㅎㄱ

 

 

 

 

2. Next.js에서 동적 라우팅(Dynamic Routing)하는 방법!!

1. [대괄호]

• 예시 : <pages/post/[pid].js>
• /post/1 , /post/abc 등의 주소는 모두 post/[pid].js로 매칭됩니다.
• 대괄호 안의 임의의 이름은 라우터 객체의 query 속성으로 들어갑니다.

1. Catch all routes : [...대괄호]

• 예시 : <pages/post/[pid].js>
• 이 파일은 ant path까지 잡아낼 수 있습니다.
• /post/1 , /post/abc, /post/abc/124/4635/efwef까지 모두 post/[...pid].js로 매칭됩니다.

1. Optional catch all routes : [[...대괄호]]

• 예시 : <pages/post/[[...pid]].js>
• /post/1 , /post/abc, /post/abc/124/4635/efwef에 /post까지 모두 post/[...pid].js로 매칭됩니다.

사실 이 내용은 Key questions^^ 아무튼 layout 사용이나 page 구조를 알 수 있었다고~ 어쩌구

 

 

 

 

3. 컴포넌트 재사용

 

 

이런 구조로 컴포넌트를 구성했다.

 

재사용되는 부분을 중점으로 최대한.. 효율적으로 짜보려고 노력함

 

 

 

 

4. 깃 협업

 

 

혼자 프로젝트를 할 때는 그냥 add~ commit~ push~ 만 했었는데 협업을 해보면서 pull하고.. merge도 하고..

 

처음에는 헷갈렸지만 하다 보니 재미있었고 이젠 슈슈슈슛ㄱ 하는 것 같다.. 아마도??

 

 

---

 

사실 급하게 과제 마무리 하느라 넥스트를 제대로 완전히 이해하지 못 하고 우선 급한 불부터 끈 느낌이다.

후다닥 티스톨 써 놓고 넥스트 좀 더 공부한 다음에 노션에 더 자세하게 써야지~~~

 

 

우선 팀원이 나보다 실력이 좋았기에.... 무사히 마무리할 수 있었던 것 같다. 덕분에 많이 배우기도 배웠고;;

다음 프백 과제에서도 넥스트를 쓸 예정이기에 기말 기간동안 넥스트 완전 정복!!!!!이란 건 없겠지만

아무튼 공부하고!!! css도 더 공부해서 훨씬 발전한 프로젝트를 완성할거야!!!!!!!!!!!!!!!!!! 흥