시작의 계기
- Next.js를 사용하기로 함
- 사용하기도 편하고, SSR과 혼용하여 구현할 수 있다고 함
- 한번도 써보지 않아서 예전에 노마드코더에서 듣던 강의가 있어 그걸로 학습하기로 함
Nextjs의 특징(react.js VS next.JS)
- 주요 기능
- hot reloading: 개발 중 저장되는 코드가 생기면 자동으로 새로고침을 실행한다
- automatic routing: pages dir 또는 app dir에 생성하는 파일 또는 폴더에 따라 자동적으로 라우팅이 된다
- single file components: 'style jsx'를 사용하여 컴포넌트 내부 스코프만을 가지는 css를 만들 수 있다
- globals.css를 통한 전역적인 css의 적용도 가능함
- server side landering이 가능함
- code splitting이 손쉽게 가능함(dynamic import)
- typescript의 적용이 자동적으로 된다
- library VS framework, framework를 사용함(reactjs는 library)
- 자율성보단 짜여진 규칙에 따라야 함
- 라우팅을 index.js에서 따로 하는 것이 아닌 pages의 폴더에 생성하는 파일의 이름이 자동으로 라우팅되어 페이지명이 됨
- 컴포넌트를 적절한곳에 잘 넣어서 사용하면 됨
- 정적 프리 랜더링(static pre-rendering)
- reactjs는 CSR ONLY, nextjs는 SSR로 프리랜더링 후 CSR로 전환
- react는 느린 인터넷 상에서 js가 로딩될때까지 어떤 코드도 보여주지 않고, 백지의 페이지로 시작된다
- nextjs는 기초적인 html이 소스코드에 들어 있어 api요청 부분을 제외한 페이지는 보여지고, 이것은 ux에서 강점으로 작용한다
- react와 js가 로딩되기 전이더라도, 페이지에 설정된 초기값(useState등 hook의 초기값을 기초로 한 내용)을 기초로 랜더링된 페이지를 보여준다
- 이후 로딩이 완료되면 우리가 작성한 페이지가 보여지게 됨
- pages
- 컴포넌트를 export하고 있는 파일을 넣으면 자동으로 라우팅되어 파일 이름으로 페이지가 추가됨
- 라우팅을 하고, 라우터를 설계하고, 랜더를 하는 일련의 과정을 대신 해줌
- 기본페이지인 '/'은 index.js로 적용됨
- 404 페이지도 샘플 페이지가 적용되어 있음, 디자인만 수정하여 사용하면 됨
- 페이지 내에서 jsx타입의 코딩도 가능함
실제 사용 실습
- Link, 링크부분을 감싸는 전용 태그가 존재함(import Link from 'next/link')
- 링크로 이동시 전체 리랜더링을 막는 역할을 함(Link의 child로 a tag 사용 불가)
- css modules 사용
- '*.module.css'식의 이름으로 작성된 파일에서의 class속성을 전역으로 사용할 수 있음
- 중복되는 class의 경우라도 html상에 임의의 str을 추가하여 중복에러가 나지 않음
- 크게 선호되지는 않음
- styles JSX
- return 최하단에
- css modules와 마찬가지로 현재 적용한 컴포넌트 내에서 독립적인 className을 갖는다(전역 사용시 jsx global)
- App Component
- _app.js, 일종의 App blueprint로 nextjs pages의 파일 중 가장 먼저 확인하는 파일
- 어떻게 페이지가 있어야 하는지, 어떤 컴포넌트가 어떤 페이지에 있어야 하는지를 표시함
- 또는 style jsx global과 같은 값들을 여기에서 적용함
- globals.css 또한 여기에서 import해서 사용해야 함(다른 컴포넌트에서는 불가)
- Layout Component
- Layout을 작성하여 App에 적용하고 NavBar나 Footer같은 항상 보이는 글로벌 컴포넌트들을 여기서 배치함
- Head Component
- app의 head를 관리하는 전용 태그가 존재(import Head from 'next/head')
- return의 div 최상단에 적용함
- Head 내 title의 경우 단일 str로 이루어져야 한다
- {
${title} | Next Movies}등의 방식으로 변수를 단일 str화해서 적용한다
- public 폴더 내의 이미지파일 경로 간소화
- /~~ 사용: src에 일일이 경로 지정 없이 src='/이미지이름.확장자'로 사용
- Route 관련
- '/about'의 경우 뒤에 추가적인 페이지가 없을 경우는 'page이름.js'로 구성하면 된다
- '/'에 추가분기가 필요한 url, 예로 '/movies/all'과 같은 구성을 하고자 한다면
- pages의 폴더 안에 movies라는 폴더를 추가로 생성하고 그 안에 all.js를 작성하면 된다
- '/movies'의 페이지는 폴더 안에 index.js를 작성하면 된다
- 추가분기가 아이디와 같은 변수일 경우 [변수].js(예: [id].js)를 작성하면 된다
- 위와 같은 식으로 라우팅을 자유롭게 구성할 수 있다
- useRouter를 사용해 추가분기로 선택한 변수를 적용하여 라우팅할 수 있다
- const router = useRouter()와 같이 사용한다
- router.push()를 통해 사용할 주소를 자유롭게 세팅할 수 있다
- router를 통하여 api를 통해 받은 데이터들을 활용할 수 있다
- catch All
- [변수].js에서 [...변수]를 적용하면 변수에 담긴 여러값들을 전부 받아서 사용할 수 있다
- id나 title등 여러 값을 받아와 그 중 아무거나 입력을 해도 같은 곳으로 접속된다
- 404page는 404.JS 파일을 작성하여 사용하면 된다
