5주차 넥제 강의 정리

[kyxnguk]

배운 내용

-Next.js에서 어떻게 라우팅이 되는지 복습하는 내용을 가졌다.

• 라우팅 구조와 파일 읽기:
  pages 디렉토리 내의 파일과 폴더 구조를 기반으로 자동 라우팅이 설정된다
• 슬러그 라우트 및 단일 동적 매개변수 라우트:
  [slug].js와 [id].js 같은 동적 파일 이름을 사용하여 다양한 URL 경로를 처리할 수 있다
  -단일 동적 매개변수 라우트 :

-Next.js의 데이터 페칭

정적 사이트 생성(getStaticProps):
페이지를 빌드 시 사전 렌더링하고 데이터를 준비하여 빠른 로딩과 SEO 향상에 기여한다.

동적 경로를 위한 getStaticPaths:
사전 렌더링 시 동적 경로를 정의해 여러 페이지를 생성할 수 있으며, fallback 옵션을 추가해 예외 상황을 처리할 수 있다.

서버사이드 렌더링(getServerSideProps):
요청 시마다 페이지를 생성하여 최신 데이터를 반영할 수 있다.

클라이언트 사이드 데이터 페칭:
페이지가 클라이언트 측에서 렌더링된 후 데이터를 비동기적으로 가져오는 방법이다.

추가적으로 공부한 내용

• Link 태그와 a 태그 같이 썻을때 나는 오류

Next.js의 새로운 방식은 컴포넌트가 자동으로 태그를 포함하도록 했기 때문에, 안에 태그를 직접 넣으면 오류가 발생한다

하지만, 기존 코드나 이전 버전의 스타일을 그대로 유지하고 싶을 때 legacyBehavior 속성을 추가해 가 태그를 자동으로 포함하지 않도록 설정할 수 있었습니다!

• 예제

예제 페이지

저는 legacyBehavior를 저런식으로 사용했더니 오류가 사라졌습니다!
근데 버튼 위치가 오른쪽 하단에 안붙던데 그것은 왜그런지 모르겠습니다.. ㅜㅜ

공부하면서 의문을 가졌던 내용 또는 공유하고자 하는 내용

• 처음 Next.js 파일기반 페이지 라우팅 복습 색션에서 Link 태그안에 a태그를 사용하는 코드에서 버전차이? 인지는 모르겠지만 오류까 떠가지고 왜 궁금했습니다.

[kimmubin0318]

정적인 페이지를 생성하는 부분에서 장점인 getStaticProps 와 실시간 데이터를 불러오기에 용이한 getServerSideProps, 그리고 사전 렌더링 시 경로를 정하여 여러 페이지를 생성 가능한 getStaticPaths 이 세가지는 각각 장단점이 존재해서 잘 조합해서 사용해야 겠네요!
각각의 단점들을 찾아보는 것도 좋을듯

[shtfh]

중복으로 하면 오류가 생기는 건 알았는데 legacyBehavior 속성을 이용해서 피해가는건 몰랐어요 요런 오류 피하기 방법 너무 좋네요 굿굿