뉴질랜드 다이어리(NZ Diary) 라빠
React 프로젝트 환경설정(feat. 순수한 react project) 본문
React 프로젝트를 시작한다고 하면 일단 create-react-app 을 이용하는 경우가 많습니다. 그런데, 이렇게 툴들을 이용하면 생산성은 물론 향상되는 장점이 있지만, 그 내부에 어떤 일들이 일어나고 있는지를 알지 못하니, 문제가 발생했을때 대응을 할 수 가 없는 경우가 많습니다. 마치, 냉장고는 잘 사용하지만, 고장나면 사람을 불러야 하는 것과 마찬가지죠. 적어도 개발자라면, 설정을 하나하나 해가면서 프로젝트를 구성해보고 그 이후에 좋은 툴들을 이용하는 것이 좋을 것이라고 생각합니다.
그래서, 수도없이 생성해 봤을 React Project 를 어떠한 툴의 도움도 없이 생성해 보는 과정을 살펴볼까 합니다.
Node 를 설치하는 과정은 생략합니다!
1. 작업폴더 생성 및 banana project 만들기
일단, 프로젝트 파일들이 위치한 폴더를 새로 만들어줍니다.
이 과정도 create-react-app 에서 대신 해 주었죠?
mkdir banana-react
cd banana-react
해당 폴더에서 이제 npm init 을 수행해서 프로젝트 파일을 만들어줍니다. 여기서 프로젝트 파일이라고 해봐야 결국 package.json 파일을 만들어주는게 전부입니다.
$ npm init
This utility will walk you through creating a package.json file.
It only covers the most common items, and tries to guess sensible defaults.
See `npm help init` for definitive documentation on these fields
and exactly what they do.
Use `npm install <pkg>` afterwards to install a package and
save it as a dependency in the package.json file.
Press ^C at any time to quit.
package name: (banana-react)
version: (1.0.0)
description:
entry point: (index.js)
test command:
git repository:
keywords:
author:
license: (ISC)
사실, 이 과정도 npm init 을 수행하지 않고, package.json 파일을 편집기를 통해 생성해도 되지만, 그건 좀 과하다는 느낌이네요;;
자 이제, 프로젝트가 생성되었습니다. 물론 아직 이 프로젝트는 node 의 기본적인 프로젝트일뿐, React 와는 관계가 없습니다;;
2. React 적용하기
React 프로젝트의 기본이 되는 파일들을 생성해줍니다.
touch index.html
touch index.js
index.html 과 index.js 파일은 각각 아래와 같이 작성해 볼 수 있습니다.
이 글은 react 를 설명하기보다는 설정과정을 정리하는 글이니까 완전 기본중의 기본만 작성합니다.
<html>
<head></head>
<body>
<div id="root"></div>
<script src="./index.js"></script>
</body>
</html>
import React from 'react';
import ReactDOM from 'react-dom';
ReactDOM.render(<h1>Hello React</h1>, document.getElementById('root'));
index.js 에서 사용한 React, React-DOM dependency 도 추가해 주어야겠죠?
$npm install --save react react-dom
자 이렇게 하면, 실제로 react 프로젝트를 만들기 위해 할 일은 다 한 셈입니다. 이제 html 파일을 browser 에서 로드해볼까요?
..
..
아무것도 나오지 않습니다.
왜 그를까요?
console 창을 확인해보면
Uncaught SyntaxError: Cannot use import statement outside a module
이라고 출력되는것을 확인할 수 있습니다. 네, index.js 에서 import 문을 수행할때, 해당 모듈을 import 하는데 실패하고 있는것이죠. React 관련한 모듈들이 각각 별도의 파일로 나뉘어져 있으니, 이를 하나의 모듈(혹은 번들)로 묶어주는 작업을 해야 import 가 가능해집니다.
바로, webpack 이 등장하는 이유입니다.
3. webpack 적용하기
프로젝트에 추가된 react, react-dom library 를 하나의 모듈로 번들해주기 위해 webpack 을 설정해보도록 합니다.
일단, 관련 모듈들을 프로젝트에 추가해줍니다.
$npm install --save-dev webpack
그리고, webpack 을 수행하기 위해 webpack.config.js 설정파일을 만들어주야아 합니다.
const path = require('path');
module.export = {
entry: path.resolve(__dirname, 'index.js'),
output: {
path: path.resolve(__dirname),
filename: 'bundle.js'
}
}
그리고, package.json 에 이를 수행하기 위한 script 를 추가해줍니다.
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack"
},
자 이제 webpack 을 실행하기만 하면 되겠네요.
$npm run build
..
..
네. 또 에러가 나네요.
이런 과정을 거치며 배우는거죠
ERROR in ./index.js 5:16
Module parse failed: Unexpected token (5:16)You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
자 드디어, 많이 들어본 babel 을 적용할 때가 되었습니다.
4. babel 적용하기
babel 은 EC6 문법으로 작성된 React 구성 요소들을 banana javascript 로 변환해주는 기능을 수행합니다.
npm install --save-dev @babel/core babel-loader @babel/preset-env @babel/preset-react
그리고, webpack.config.js 파일을 아래와 같이 수정해줍니다.
const path = require('path')
module.exports = {
mode: 'development',
entry: path.resolve(__dirname, 'index.js'),
output: {
path: path.resolve(__dirname),
filename: 'bundle.js'
},
module: {
rules: [
{
test: /\.jsx?$/,
exclude: /node_modules/,
loader: 'babel-loader',
options: {
presets: ['@babel/preset-env', '@babel/preset-react']
}
}
]
}
}
webpack 의 loader 를 설정하고, react preset 을 설정하여 react 의 구문을 babel 에게 알려주는 설정입니다.
다시 webpack 을 실행해봅니다.
$npm run build
자 이제 정상적으로 bundle.js 파일이 생성되었습니다. index.html 에서 index.js 대신 bundle.js 파일을 사용하는것으로 설정이 마무리됩니다.
<html>
<head></head>
<body>
<div id="root"></div>
<script src="./bundle.js"></script>
</body>
</html>
자 이제 다시 브라우저로 index.html 을 열어볼까요?
4. 프로젝트 동작확인
짜잔~
5. 그리고 다음으로...
지금 상태로는 매번 코드를 수정하고 나면 webpack 을 수행하고, 브라우저에서 리프레쉬를 해야 하는 불편함이 있습니다. 이런 불편함을 해결해주는 다양한 모듈과 플러그인들이 제공되고 있죠. 그 대표적인게 webpack-dev-server 같은 라이브러리입니다. 그 외에도 다양한 툴들이 많으니, 하나하나 추가하면서 기능을 익히면 됩니다.
자, 이렇게 프로젝트를 직접 구성해보면서 webpack 은 왜 추가해야 하는지, babel 은 또 무었인지 그리고 어떻게 설정하는지를 알아보았습니다. 물론 더 자세한 내용은 각각의 라이브러리 홈페이지를 방문하여 직접 알아보시는 것을 추천드립니다.
이렇게 하나씩 하나씩 기본기를 익혀가면서 Senior 개발자가 되는것이죠~^^
'개발' 카테고리의 다른 글
| [Wit.AI 를 이용하여 Facebook Messenger 챗봇 만들기] #2. Glitch? (0) | 2020.08.21 |
|---|---|
| [Wit.AI 를 이용하여 Facebook Messenger 챗봇 만들기] #1. Wit.AI? (0) | 2020.08.20 |
| [Scratch] Scratch 기본 익히기 #7 - 코드의 이해(감지, 연산, 변수) (0) | 2019.09.04 |
| [Scratch] Scratch 기본 익히기 #6 - 코드의 이해(이벤트, 제어) (0) | 2019.09.04 |
| [Scratch] Scratch 기본 익히기 #5 - 코드의 이해(동작, 형태, 소리) (0) | 2019.09.04 |
