brunch

매거진 개발개발

You can make anything
by writing

- C.S.Lewis -

by 워니 Feb 05. 2018

Next.js 튜토리얼 1편: 시작하기

React 서버사이드 렌더링 프레임워크 Next.js Tutorial

* 이 글은 Next.js의 공식 튜토리얼을 번역한 글입니다.

** 오역 및 오탈자가 있을 수 있습니다. 발견하시면 제보해주세요!



목차

1편: 시작하기  - 현재 글

2편: 페이지 이동

3편: 공유 컴포넌트

4편: 동적 페이지

5편: 라우트 마스킹

6편: 서버 사이드

7편: 데이터 가져오기

8편: 컴포넌트 스타일링

9편: 배포하기



개요

요즘은 싱글 페이지 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 저장소issueSlack의 #next 채널에서 이야기 할 수 있습니다.




#React #리액트 #Zeit #Next.js #SSR #JavaScript #자바스크립트 #프레임워크 #framework #가이드 #튜토리얼 #한글 #번역

워니 소속트레바리 직업개발자
구독자 6,253
매거진의 이전글 Node.js로 Amazon DynamoDB 사용하기

매거진 선택

키워드 선택 0 / 3 0
브런치는 최신 브라우저에 최적화 되어있습니다. IE chrome safari
;