함께 성장하는 프로독학러

0. 리액트 환경 설정하기 (React js, nodejs, webpack 4, babel) 본문

Programming/react.js

0. 리액트 환경 설정하기 (React js, nodejs, webpack 4, babel)

프로독학러 2018. 4. 6. 13:06

안녕하세요, 프로독학러 입니다.


이번 포스팅부터 React js 에 대해서 공부해 보도록 하겠습니다.


React.js가 무엇인가 부터 알면 좋겠죠?

React.js 에 대해서 간단하게 알아보도록 하겠습니다.


React.js는 facebook 이 만든 자바스크립트 라이브러리입니다.

리액트는 프레임워크가 아닌 라이브러리이기 때문에 Router 와 같은 웹을 만드는 도구는 포함되어 있지 않습니다.

하지만 그렇기 때문에 가볍습니다.

또한 배우기도 그렇게 까다롭지 않습니다.


이런 React.js 에는 세 가지 큰 특징이 있습니다.

첫 번째는 Component 입니다.

Component는 UI를 구성하는 개별적인 구성요소입니다. Component별로 나누어 개발을 하기 때문에 한 번 정의한 컴포넌트를 여러 위치에서 자유롭게 재사용할 수 있습니다. 

두 번째는 JSX 입니다.

JSX는 React를 위해 만들어진 새로운 자바스크립트 문법으로, HTML과 비슷한 문법구조를 가지고 있습니다.

이를 통해 React 컴포넌트와 HTML 엘리먼트들을 쉽게 사용할 수 있습니다.

세 번째는 virtual DOM 입니다.

virtualDOM 은 DOM 이 수정 됐을때 전체를 다시 렌더링하는 것이 아니라 기존의 DOM과 바뀐 DOM을 비교해 수정되야할 부분만 렌더링하는 것을 의미합니다. 이 방식을 통해 브라우저의 부담을 줄여주고, 페이지의 로딩 속도 등이 더 빨라지게 됩니다.


그럼 본격적으로 React를 사용하기 위한 세팅을 시작하도록 하겠습니다.

순서는 다음과 같습니다.


  1. node.js 설치 (npm)
  2. React project 설정
  3. webpack 설치
  4. babel 설치
  5. React 설치 및 설정 (webpack+babel 프로젝트)
  6. Hot module replacement 설치

1. node.js 설치 (npm)

먼저 node.js를 설치해 보도록 하겠습니다.
설치는 node.js 의 홈페이지에서 본인의 운영체제에 맞는 버젼을 선택에 다운받아 설치 하시면 되겠습니다.

*node.js 홈페이지

npm 은 Node Package Manager로 터미널 프로그램에서 명령어를 이용해 작업하는 프로젝트의 package.json 파일을 생성하고, 작업에 필요한 패키지를 설치할 수 있게 도와주는 프로그램입니다.
npm 은 node.js를 설치할 때 자동으로 같이 설치가 되므로 따로 설치하실 필요는 없습니다.

설치가 완료되면 설치가 제대로 됐는지 확인해 보도록 하겠습니다.

터미널 프로그램에 접속합니다. (저의 경우엔 윈도우즈 운영체제만을 사용하기 때문에 윈도우즈 기준으로 설명드리도록 하겠습니다)
윈도우즈에서 터미널 프로그램은 윈도우 버튼과 'R'버튼을 동시에 누르면 나오는 실행창에서 cmd를 입력하고 엔터를 누릅니다.


입력하고 엔터를 치면 아래와 같은 같은 창이 뜹니다.



창에 node -v 와 npm -v 를 차례로 쳐 봅시다.

node -v는 설치된 node.js의 버전을 확인하는 명령어이고, npm -v는 npm의 버전을 확인하는 명령어 입니다.

이상없이 설치 됐다면 각각의 버전이 다음과 같이 잘 뜨는 것을 확인 할 수 있습니다.



설치가 완료 되었다면, react 프로젝트를 설정해 보도록 하겠습니다.


2. React project 설정


react를 위한 프로젝트 폴더를 생성하고, 해당 폴더로 이동해 보도록 하겠습니다.

(*폴더의 생성은 윈도우 탐색기를 이용해 해도 상관 없습니다)

저는 e드라이브로 이동해 e드라이브 하위에 react-self-study라는 폴더를 생성하고 해당 폴더를 프로젝트 폴더로 사용하도록 하겠습니다.

터미널에 입력하는 명령어는 다음과 같습니다.


e:

mkdir react-self-study

cd react-self-study

(현재 C드라이브에 있는 상태, E 드라이브로 이동하는 커맨드)

(E 드라이브 하위에 react-self-study 라는 폴더를 make direction - 생성)

(생성한 react-self-study 폴더로 change direction - 이동)



이제 프로젝트 파일에 package.json 파일을 생성해 보도록 하겠습니다.

커맨드는 다음과 같습니다.


npm init -y 


이는 npm을 이용해 해당 폴더를 프로젝트 파일 폴더로 initializing (초기화) 하겠다는 의미 입니다.

그리고 뒤에 붙는 -y는 초기화 할 때 설정값을 모두 기본값 (default vlaue) 로 지정하겠다는 의미입니다.

만약 모든 값을 기본값으로 하지 않고 따로 설정하고 싶다면 -y를 빼고 명령어를 입력해 직접 설정하면 됩니다.


(터미널에 npm init -y 를 입력하고 엔터를 치면 자동으로 프로젝트 폴더로 초기화 합니다.)




(우리의 프로제트 폴더에 package.json 파일이 생성되었습니다. - 초기화에 의해 자동으로 생성)



react 폴더 안에 package.json 파일이 생성 되었습니다. 파일의 내용의 위와 같은 상태입니다.


이제 루트폴더(react폴더) 하위에 dist폴더를 만들고 그 안에 index.html 파일을 만들어 보도록 하겠습니다.

이 index.html 파일은 react를 이용해 렌더링할 컴포넌트들이 위치하는 html파일입니다.

즉 이 index.html 파일에 리액트를 이용해 렌더링할 컴포넌트들이 들어가는 것입니다.

(지금 이해가 되지 않아도 괜찮습니다. 환경설정 이후에 천천히 알아갈 예정입니다.)


(dist/index.html)

1
2
3
4
5
6
7
8
9
10
<!DOCTYPE html>
<html>
  <head>
    <title>React Webpack Babel Setup</title>
  </head>
  <body>
    <div id="root"></div>
    <script src="/bundle.js"></script>
  </body>
</html>
cs


index.html의 내용은 위와 같습니다.


(dist 폴더와 index 파일을 직접 만들어줍니다.)


index.html 파일까지 만들었다면, webpack 설치 및 설정 단계로 넘어가겠습니다.


3. webpack 설치 및 설정


웹팩은 모듈 번들러 입니다.


하나의 웹 어플리케이션은 여러 종류의 다양한 파일을의 관계에 의해서 이루어 집니다.(modules with dependencies)

어플리케이션의 크기가 커 질 수록 파일의 관계는 복잡해지고 무거워 집니다.

그리고 이 관계를 브라우저에 그대로 전달하면 브라우저가 이를 해석하고 사용자에게 출력하는 과정이 점점 버거워지게 됩니다.

따라서 다양한 파일들이 의존하는 그 관계(의존성 그래프)들을 정리하고, 최적화 하는 것이 필요해 지게 됩니다.

이 역할을 webpack이 수행해 주는 것입니다.

어플리케이션의 의존성 그래프들을 해석해 묶어줍니다. (번들링) 

그리고 묶은 파일은 최적화, 압축 등을 통해 더 가볍게 작동할 수 있도록 도와줍니다.


이제 우리의 프로젝트 파일에 웹팩을 설치해 보도록 하겠습니다. (웹팩 버전 - 4)

루트 폴더(react)에서 npm을 통해 개발을 할 때 필요한 Dependencies 를 설치해 보겠습니다.


npm install --save-dev webpack webpack-dev-server webpack-cli


터미널 프로그램을 이용해 루트 폴더에서 위의 명령어를 입력합니다.

--save는 Dependencies 들을 package.json 파일에 저장하는 것을 의미합니다.

-dev는 개발에만 사용하는 Dependencies 라는 의미입니다.


설치를 완료하면 package.json 파일이 다음과 같이 변경됩니다.


그리고 노드 패키지들을 설치하면 자동으로 루트 폴더에 node_modules 폴더가 생성됩니다.


개발용 서버를 실행시키기 위해 package.json 파일의 sciprts 부분에 아래의 코드를 추가하여 줍니다.


(./package.json)

1
2
3
4
5
6
7
8
9
10
11
...
 
"scripts": {
 
  "start": "webpack-dev-server --config ./webpack.config.js --mode development",
 
  ...
 
},
 
...
cs


(하이라이트 된 부분에 위의 코드를 복사, 붙여넣기 합니다.)


package.json내의 script는 npm을 통한 명령어를 지정하는 부분입니다.
위의 코드를 추가함으로 터미널에서(루트폴더에 위치한 상태) npm start를 통해 webpack-dev-server 를 실행시킬 수 있습니다.

이제 다음 단계는 webpack 을 설정하는 파일을 만들어 보겠습니다.
파일을 만드는 위치는 루트폴더 입니다.
에디터를 통해 만들거나 터미널을 통해 만드셔도 상관 없습니다.

(./webpack.config.js)
1
2
3
4
5
6
7
8
9
10
11
12
13
module.exports = {
  entry: [
    './src/index.js'
  ],
  output: {
    path: __dirname + '/dist',
    publicPath: '/',
    filename: 'bundle.js'
  },
  devServer: {
    contentBase: './dist'
  }
};
cs

(루트 폴더에 webpack.config.js 파일을 직접 생성해 위의 코드를 복사, 붙여넣기 합니다.)


간단하게 설명하자면,
엔트리는 의존성 그래프의 시작점을 의미합니다. 웹팩은 엔트리를 기점으로 필요한 파일들을 로드하여 하나의 파일로 묶습니다.(번들)
entry에 ./src/index.js 라고 정의 되어 있습니다. 이는 index.js 파일을 index.js 파일 안으로 임포트 되는 모든 파일들을 번들링하겠다는 의미입니다.
filename 부분은 번들링 된 파일의 이름을 bundle.js 로 지정하겠다는 의미이고,
각각의 번들될 파일들은 /dist 폴더 내에 있는 요소들이라는 의미입니다.

위에서 엔트리 포인트로 지정한 ./src/index.js 파일이 아직 존재하지 않으므로 폴더와 파일을 만들어 줍시다.
먼저 루트폴더에 src 라는 이름의 폴더를 만들고, src 폴더 하위에 index.js 파일을 만들어 줍니다.
index.js 파일에는 개발용 서버가 잘 작동하는지 확인하기 위한 코드를 넣어보겠습니다.

(./src/index.js)
1
console.log('Set up is continuing...');
cs

(루트 폴더에 src폴더를 만들고, 그 하위에 idex.js 파일을 만들어 위의 코드를 복사, 붙여넣기 합니다.)


여기까지 완료된 상태라면 파일 구조는 다음과 같습니다.


그럼 index.js 에 코딩한 내용이 개발서버에서 잘 작동 되는지 확인해 보도록 하겠습니다.
터미널의 루트폴더 안에서 npm start를 실행해 개발서버를 작동시켜 보겠습니다.

npm start

정상적으로 설정이 완료된 상태라면 compile이 제대로 동작할 것입니다.

(루트 폴더 위치에서 npm start를 실행.)


(정상적으로 컴파일이 완료된 것을 볼 수 있다.)


그럼 웹브라우저를 열어 콘솔창에 우리가 입력했던 값(index.js)이 뜨는지 확인해 보겠습니다.

브라우저를 열고 브라우저의 주소창에 


localhost:8080


을 입력해 봅니다.

(webpack-dev-server 의 기본 포트값은 8080 입니다.)


아무것도 보이지 않네요.
괜찮습니다 정상입니다. 브라우저의 콘솔창을 통해 입력했던 Set up is continuing... 이 잘 뜨는지 확인해 봅시다.
(크롬브라우저의 개발자 모드는 F12 버튼을 통해 쉽게 들어갈 수 있습니다.)

콘솔창에 index.js 에서 입력했던 Set up is continuing... 이 문제없이 잘 뜨는 것을 확인할 수 있습니다.

4. babel 설치 및 설정

webpack의 설치가 완료되면 babel을 설치해 보도록 합시다.
react의 컴포넌트들은 대부분 ES6의 문법에 따라 작성 됩니다. 
하지만 브라우저에 따라 ES6의 문법을 이해하지 못할 수 있습니다. 따라서 이런 문제를 해결하기 위해 babel을 사용합니다.
babel은 ES6의 문법을 기존 자바스크립트의 문법으로 변환시켜 크로스브라우징 이슈를 해결합니다.

그럼 babel을 설치해 보도록 하겠습니다.

npm install --save-dev babel-core babel-loader babel-preset-env

루트 폴더에서 npm을 통해 바벨 패키지 들을 설치합니다.
만약 ES6의 object spread 와 같은 문법을 사용하려면 stage-2를 추가 설치 합니다.
명령어는 다음과 같습니다.

npm install --save-dev babel-preset-stage-2

다음으로 리액트의 언어를 변환시켜주는 프리셋도 설치합니다.

npm install --save-dev babel-preset-react

위의 패키지들을 모두 설치 완료한 뒤에 package.json 에 babel 부분을 추가합니다.

1
2
3
4
5
6
7
8
9
 
...
"babel": {
  "presets": [
    "env",
    "react",
    "stage-2"
  ]
},
...
 
cs

위의 코드를 복사해 package.json 파일에 아래와 같이 붙여 넣으면 됩니다.


그리고 webpack.config.js 파일도 수정해줘야 합니다.


1
2
3
4
5
6
7
8
9
10
11
12
13
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        use: ['babel-loader']
      }
    ]
  },
  resolve: {
    extensions: ['*', '.js', '.jsx']
  },
 
cs


위의 코드를 webpack.config.js의 entry와 output 사이에 다음과 같이 붙여 넣습니다.


다음으로는 루트 폴더에 .babelrc 파일을 생성해 줍니다.
.babelrc 파일의 내용은 다음과 같습니다. (확장자명은 없습니다)

(./.babelrc)
1
2
3
4
5
6
7
8
{
  "presets": [
    "env",
    "react",
    "stage-2"
  ]
}
 
cs

(루트 폴더에 .babelrc 파일을 직접 생성해 위의 코드를 복사, 붙여넣기 합니다.)


여기까지 바벨의 설치 및 설정이 끝났습니다.
현재까지의 파일 구조는 다음과 같습니다.


5. React 설치 및 설정 (webpack+babel 프로젝트)

webpack과 bebel의 설치 및 설정이 끝나면 React를 설치해 줍니다.
루트 폴더에서 npm을 통해 react와 react-dom 을 설치해 줍니다.

npm install --save react react-dom

설치가 완료되면 src 폴더 하위의 index.js 파일을 수정해줍니다.

(./src/index.js)
1
2
3
4
5
6
7
8
9
10
import React from 'react';
import ReactDOM from 'react-dom';
 
const title = 'React Webpack Babel Setup';
 
ReactDOM.render(
  <div>{title}</div>,
  document.getElementById('root')
);
 
cs


ReactDOM.render 부분을 살펴봅시다.

메소드의 첫 번째 인자에 HTML 의 div 태그 안에 4번째 줄에서 정의한 title이 들어가 있습니다.

이에 대한 자세한 설명은 다음 포스팅부터 하도록하고, 두 번째 인자에 주목해 봅시다.

두 번째 인자에는 순수 자바스크립트의 문법이 들어있습니다.

이는 index.html 안의 id가 root 인 엘리먼트(태그)를 가리킵니다.

즉, ReactDOM.render 메소드는 첫 번째 인자를 두 번째 인자의 위치에 집어넣어 렌더링 하는 메소드입니다.


(해당 위치에 index.js 에서 렌더링할 컴포넌트를 지정하면 해당 컴포넌트가 렌더링 위치에서 렌더링 된다.)


잘 됐는지 확인해 보겠습니다.

터미널에서 루트 위치에서 npm start 가 되어 있는 상태에서 웹 브라우저를 열고 localhost:8080 에 접속해 봅시다.


(index.js 에서 const 로 지정한 title 의 내용이 잘 출력되는 것을 알 수 있습니다.)


수정을 해도 잘 적용되는지 확인해 보겠습니다. index.js 에서 const title 부분을 임의의 문자열데이터(Is it working?)로 변경해 보겠습니다.



index.js 를 수정하면 webpack-dev-server가 자동으로 브라우저를 새로고침해 변경된 내용을 표시합니다.


(자동으로 새로고침 된다.)


6. Hot module replacement 설치(자동으로 새로고침 된


이제 Hot module replacement 를 설치해 봅시다.

webpack-dev-server 는 친절하게도 우리가 수정한 내용이 있으면 파일의 변화를 감지하여 웹페이지를 새로고침해서 보여줬습니다.

이것만으로도 충분히 편리하지만, 새로고침 없이 수정된 부분만 렌더링 된다면 개발이 더 편리해지겠죠?

이를 가능하게 하는 것이 Hot module replacement 입니다.


터미널에서 루트 폴더 경로인 상태에서 아래의 명령어를 입력해 패키지를 설치합니다.


npm install --save-dev react-hot-loader


설치가 완료되면 webpack.config.js 파일을 수정합니다.


(./webpack.config.js)

1
2
3
4
5
6
7
8
9
const webpack = require('webpack');
...
    'react-hot-loader/patch',
...
  plugins: [
    new webpack.HotModuleReplacementPlugin()
  ],
...
    hot: true
cs


(위 그림에서 하이라이트 된 위치에 위의 코드를 복사, 붙여넣기 해주세요)


webpack.config.js 를 수정한 뒤에는 ./src/index.js 파일도 수정해 줍니다.


(./src/index.js)

1
2
3
...
 
module.hot.accept();
cs


(하이라이트 된 부분에 위의 코드를 복사, 붙여넣기 해주세요)


모든 설정이 끝났습니다.

제대로 동작하는지 확인해 보도록 하죠.


npm start


를 해 dev server를 동작 시킨뒤, 브라우저를 열어 둡니다.

const title 부분을 아무렇게나 수정하고 저장을하면, 브라우저가 새로고침 되지 않고 수정된 내용이 반영됩니다.



여기까지 리액트를 공부하기 위한 기본 환경설정에 대해서 알아보았습니다.

다음 포스팅부터는 리액트를 제대로 공부해 봅시다.


감사합니다.


**ps. webpack 설정부분이 더 낫고 빠른 방법으로 업데이트 되었으니 아래 링크의 글을 참고해 주세요!

http://pro-self-studier.tistory.com/128?category=658753


**참고 자료 (항상 감사드립니다)

https://www.robinwieruch.de/minimal-react-webpack-babel-setup/


*다녀가셨다는 표시는 공감으로 부탁드릴게요! (로그인 하지 않으셔도 공감은 가능합니다 ㅎㅎ)

'Programming > react.js' 카테고리의 다른 글

5-1. 전화번호부 어플리케이션 만들기 - 구상, Contact 검색 기능 구현  (0) 2018.04.19
4. 리액트가 내부적으로 작동하는 순서, Component Lifecycle  (1) 2018.04.19
3. 컴포넌트 안의 동적인 데이터, state  (0) 2018.04.19
2. 하위 컴포넌트로 값을 전달하는, props  (0) 2018.04.18
1. React Component, JSX  (0) 2018.04.17
'Programming/react.js' Related Articles more
Comments