Next.js 튜토리얼

Learn | Next.js

오늘도 공식 문서님이 열일해주시겠습니다.

코드를 따라치는 것은 직접 페이지를 보기로 하고, 기능 위주로 보도록 하자.

---

쉽고 편한 라우팅

우선 next에서는 src폴더 안에 pages폴더를 만들어야 한다.

이 pages폴더는 URL과 1:1 매칭을 해준다.
예를 들어 hello.jsx를 만들고
주소/hello로 접속하면 hello.jsx를 연결해준다.

주소/hello로 접속한 사진

src 페이지

---

그렇다면 이런 부분도 의문이 들 수 있다.

그럼 다른 URL로 가려면 어떻게 해야하나요?

원래대로라면 <a>태그를 통해 이동하겠지만,
next에선 <Link> 태그를 이용한다.

그 이유는 <a>는 새로고침을 유발하는데,
React.js의 목적은 알다시피 SPA다.
단일 페이지에서 전환되어야하기에, <a>를 사용할 수 없는 것이다.

---

Dev 모드 실행 제공

웹 개발에서 가장 고역인 점은 항상 코드를 수정한 후에 새로고침을 하는 것이다.
물론 CRA로만 썼다면 아마도 자동으로 됐겠지만, 원래 안 해준다.

그래서 webpack-dev-server등 개발 모드 실행 패키지가 있다.
수정이 되었을 때 자동으로 페이지를 새로고침 해주는 기능이다.

이 next에도 비슷한 기능이 있는데, 'next dev'가 그 주인공이다.

---

NPM 명령어로 추가

package.json

루트 디렉토리의 package.json 파일을 수정한다.
key값인 명령어는 아무거나 해도 되지만, 목적에 맞게 "dev"로 하자
value인 명령어는 "next dev"다.

그 다음, npm run dev를 실행하면 된다.

npm run dev
or
next dev

이런 메시지가 나오며 3000번 포트에 올라간다.

---

배포 모드 - 컴파일링

next.js는 프로덕션 모드 (실제 서비스하는 서버)에서 4가지 기능을 제공해준다.
그중 하나는 컴파일링이다.

우리가 만드는 코드는 대부분 우리에게 편리하게 되어있다.
예를 들어 화살표 함수, 클래스, JSX등이 있다.

하지만 브라우저(응애)는 그런거 모른다.
그렇기 때문에 중간에서 브라우저가 이해할 수 있게 번역하는 과정이 필요하다.
그걸 해준다는 얘기다.
(하는 방법은 이후에 보자)

---

배포 모드 - 압축 (Minifying)

우리는 개발할 때 엔터랑 스페이스를 오지게 쓴다.
아버지가방에들어가시는 불상사를 방지하는것도 있고,
가독성을 높이는 이유도 있다.

하지만 브라우저는 기계다.
기계에게는 가독성이라는 개념이 없다.
뭐같이 써도 내용만 슥 보면 다 읽혀지니까.

그래서 중간에서 불필요한 코드를 제거해 주는 것이 이 Minifying기능이다.

---

배포 모드 - 번들링 (Bundling)

번들링이란 여러 파일을 하나로 합쳐주는거다.
끝

근데 이걸 왜 하느냐?
브라우저에서 성능을 저하시키는 대표적인 이유가
여러 파일을 다운로드하는 것이다.

왜냐하면 각 파일을 요청하고 수락하고 전송을 할 때
부하가 생기기 때문이다.

그래서 여러 css, js파일을 하나로 합쳐주는것이 이 번들링이다.

---

배포 모드 - 코드 분할 (Code Splitting)

자, 이제 파일 하나로 압축이 되었다.

근데 이 뚱뚱한 파일을 접속할때마다 다운로드한다?
심지어 내가 안 가는 페이지의 소스마저도?

이런 문제를 해결하기 위해서 next.js에서는 코드 분할을 해준다.
위에서 나온 'pages'폴더를 기준으로 코드를 분할해서
내가 접속한 url에 맞는 소스만 로드하는 것이다.

그리고 똑똑한점은, 여러 페이지에 걸쳐서 사용되는 코드도
따로 분할이 되어서 다시 다운로드하지 않는 것이다.