Next.js 튜토리얼 1편: 시작하기
React 서버사이드 렌더링 프레임워크 Next.js Tutorial
* 이 글은 Next.js의 공식 튜토리얼을 번역한 글입니다.
** 오역 및 오탈자가 있을 수 있습니다. 발견하시면 제보해주세요!
목차
1편: 시작하기 - 현재 글
개요
요즘은 싱글 페이지 JavaScript 애플리케이션을 구현하는게 꽤 어려운 작업이라는 것을 대부분 알고 있습니다. 다행히도 간단하고 빠르게 애플리케이션들을 구현할 수 있도록 도와주는 몇 가지 프로젝트들이 있습니다.
Create React App이 아주 좋은 예시입니다.
그렇지만 여전히 적당한 애플리케이션을 구현하기까지의 러닝 커브는 높습니다. 클라이언트 사이드 라우팅과 페이지 레이아웃 등을 배워야하기 때문입니다. 만약 더 빠른 페이지 로드를 하기위해 서버 사이드 렌더링을 수행하고 싶다면 더 어려워집니다.
그래서 우리는 간단하지만 자유롭게 설정할 수 있는 무언가가 필요합니다.
어떻게 PHP로 웹 애플리케이션을 만드는지 떠올려봅시다. 몇 개의 파일들을 만들고, PHP 코드를 작성한 다음 간단히 배포합니다. 라우팅에 대해 걱정하지 않아도 됩니다. 그리고 이 애플리케이션은 기본적으로 서버에서 렌더링됩니다.
이것이 바로 우리가 Next.js에서 수행해주는 일입니다. PHP 대신에 JavaScript와 React를 사용하여 애플리케이션을 구현합니다. Next.js가 제공하는 유용한 기능들은 다음과 같습니다:
기본적으로 서버 사이드에서 렌더링을 해줍니다.
더 빠르게 페이지를 불러오기 위해 자동으로 코드 스플릿을 해줍니다.
페이지 기반의 간단한 클라이언트 사이드 라우팅을 제공합니다.
Hot Module Replacement(HMR)을 지원하는 Webpack 기반의 개발 환경을 제공합니다.
Express나 다른 Node.js HTTP 서버를 구현할 수 있습니다.
사용하고 있는 Babel과 Webpack 설정을 원하는 대로 설정할 수 있습니다.
설치하기
Next.js는 Windows, Mac, Linux와 같은 환경에서 동작합니다. Next.js 애플리케이션을 빌드하기 위해서는 Node.js가 설치되어 있어야 합니다.
그 외에도 코드를 작성하기 위한 텍스트 에디터와 몇 개의 명령어들을 호출하기 위한 터미널 애플리케이션이 필요합니다.
Windows 환경이라면 PowerShell을 사용해보세요.
Next.js는 모든 셀과 터미널에서 동작하지만 튜토리얼에서는 몇 개의 특정한 UNIX 명령어를 사용합니다.
더 쉽게 튜토리얼을 따르기 위해서는 PowerShell 사용을 추천합니다.
맨 먼저 다음 명령어를 실행시켜 간단한 프로젝트를 생성하세요:
$ mkdir hello-next
$ cd hello-next
$ npm init -y
$ npm install --save react react-dom next
$ mkdir pages
그런 다음 hello-next 디렉토리에 있는 "package.json" 파일을 열고 다음과 같은 NPM 스크립트를 추가해주세요.
이제 모든 준비가 끝났습니다. 개발 서버를 실행시키기 위해 다음 명령어를 실행시키세요:
$ npm run dev
명령어가 실행되었다면 브라우저에서 http://localhost:3000 페이지를 여세요.
스크린에 보이는 출력값은 무엇인가요?
- Error No Page Found
- 404 - This page could not be found
- Hello Next.js
- Hello World
404 Page
다음과 같은 404 페이지가 보일 것입니다.
첫 번째 페이지 생성하기
첫 번째 페이지를 생성해봅시다.
pages/index.js 파일을 생성하고 다음의 내용을 추가해주세요:
이제 http://localhost:3000 페이지를 다시 열면 "Hello Next.js" 글자가 있는 페이지가 보일 것입니다.
pages/index.js 모듈에서 간단한 React 컴포넌트를 export 했습니다. 여러분도 React 컴포넌트를 작성하고 export 할 수 있습니다.
React 컴포넌트가 default export 인지 확인하세요.
이번에는 인덱스 페이지에서 문법 에러를 발생시켜봅시다. 다음은 그 예입니다: (간단하게 </p> HTML 태그를 삭제하였습니다.)
http://localhost:3000 페이지에 로드된 애플리케이션은 어떻게 되었나요?
- 아무일도 일어나지 않는다
- 페이지를 찾을 수 없다는 에러가 발생한다
- 문법 에러가 발생한다
- 500 - Internal Error가 발생한다
에러 다루기
기본적으로 Next.js는 이런 에러들을 추적하고 브라우저에 표시해주므로 에러들을 빨리 발견하고 고칠 수 있습니다.
문제를 해결하면 전체 페이지를 다시 로드하지 않고 그 페이지가 즉시 표시됩니다. Next.js에서 기본적으로 지원되는 웹팩의 hot module replacement 기능을 사용하여 이 작업을 수행합니다.
You are Awesome
첫 번째 Next.js 애플리케이션을 구현하였습니다! 어떠신가요? 마음에 드신다면 더 많이 배워봅시다.
마음에 들지 않는다면 우리에게 알려주세요. Github 저장소의 issue나 Slack의 #next 채널에서 이야기 할 수 있습니다.
#React #리액트 #Zeit #Next.js #SSR #JavaScript #자바스크립트 #프레임워크 #framework #가이드 #튜토리얼 #한글 #번역
