Next.js 튜토리얼 5편: 라우트 마스킹
React 서버사이드 렌더링 프레임워크 Next.js Tutorial
* 이 글은 Next.js의 공식 튜토리얼을 번역한 글입니다.
** 오역 및 오탈자가 있을 수 있습니다. 발견하시면 제보해주세요!
목차
5편: 라우트 마스킹 - 현재 글
개요
이전 편에서는 쿼리 문자열을 이용하여 동적 페이지를 생성하는 법을 배웠습니다. 생성한 블로그 게시물 중 하나에 대한 링크는 다음과 같습니다:
http://localhost:3000/post?title=Hello%20Next.js
하지만 이 URL은 구립니다.
다음과 같은 URL를 가지면 어떨까요? http://localhost:3000/p/hello-nextjs
더 낫지 않나요?
이번 편에서 이것을 구현할 예정입니다.
설치
이번 장에서는 간단한 Next.js 애플리케이션이 필요합니다. 다음의 샘플 애플리케이션을 다운받아주세요:
아래의 명령어로 실행시킬 수 있습니다:
이제 http://localhost:3000로 이동하여 애플리케이션에 접근할 수 있습니다.
라우트 마스킹
라우트 마스킹이라 불리는 Next.js의 특별한 기능을 사용할 예정입니다.
기본적으로 애플리케이션에서 표시되는 실제 URL와 다른 URL이 브라우저에 표시됩니다.
블로그 포스트 URL에 라우트 마스크를 추가해봅시다.
pages/index.js에 다음과 같은 코드를 작성해주세요:
다음의 코드 블럭을 살펴봅시다:
<Link> 엘리먼트에서 "as"라는 또다른 prop를 사용하였습니다. 이는 브라우저에서 보여질 URL입니다. 애플리케이션에 표시되는 URL은 "href" prop에 지정되어 있습니다.
첫 번째 블로그 포스트를 클릭하면 블로그 포스트로 이동할 것입니다.
그 다음에 뒤로가기 버튼을 클릭하고 앞으로가기 버튼을 클릭해보세요. 무슨 일이 일어날까요?
- 에러가 발생할 것이다
- 인덱스 페이지로 돌아가고 포스트 페이지로 다시 이동할 것이다
- 인덱스 페이지로 이동하지만 그 후에는 아무런 일도 일어나지 않을 것이다
- 인덱스 페이지로 돌아가고 에러가 발생할 것이다
히스토리 인식
본 것처럼 라우트 마스킹은 브라우저 히스토리를 활용하여 잘 작동합니다. 해야 할 일은 링크에 "as" prop를 추가하는 것뿐입니다.
새로고침하기
home 페이지로 돌아가세요: http://localhost:3000/
첫 번째 포스트 제목을 클릭하면 post 페이지로 이동합니다.
브라우저를 새로고침하면 무슨 일이 일어날까요?
- 예상대로 페이지가 첫 번째 포스트를 랜더링 할것이다
- 페이지가 로드되지 않고 계속 로딩 중일 것이다
- 500 에러가 발생할 것이다
- 404 에러가 발생할 것이다
404
서버에 불러올 페이지가 없기 때문에 404가 에러가 발생합니다. 서버는 p/hello-nextjs 페이지를 불러오려고 시도하지만 우리는 index.js와 post.js 두 개의 페이지밖에 없습니다.
이 방법으로는 프로덕션으로 이 애플리케이션을 실행할 수 없습니다. 이 문제를 고쳐야 합니다.
Next.js의 커스텀 서버 API는 이 문제를 해결할 수 있는 방법입니다.
다음 편에서 이것을 사용하는 방법을 배울 예정입니다.
#React #리액트 #Zeit #Next.js #SSR #JavaScript #자바스크립트 #프레임워크 #framework #가이드 #튜토리얼 #한글 #번역
