웹 프로그래밍을 배울때만 해도 jQuery를 이용해서 동적 웹페이지를 만들었었는데, 이제는 Angular, Vue, React 등 다양한 프론트앤드 프레임워크들이 등장하면서 대세를 이루고 있는 추세이다. 이번 무장적 시장하기 시리즈에서는 이 중 React를 다루어보려고 한다.
React는 프로젝트를 구성할 때, 패키지들을 설치하다보면 간혹 버전의 호환성에서 문제가 발생하는 경우가 종종있다. React를 처음 입문하는 사람이라면 멘붕에 빠질 수 밖에 없을 것이다. 하지만 걱정하지 마시라 [ create-react-app ] 이라는 툴을 사용하면 쉽고 빠르게 React 프로젝트를 구성할 수 있다. 하지만, 이번 포스트에서는 이 툴을 사용하지않고 한땀한땀 프로젝트를 구성해나갈 계획이다.
https://ko.reactjs.org/docs/create-a-new-react-app.html
새로운 React 앱 만들기 – React
A JavaScript library for building user interfaces
ko.reactjs.org
1. Node.js 다운로드
1-1. Node.js는 Javascript 런타임 툴로 Local에서 Javascript를 다룰 수 있도록 도와줌.
1-2. 최신버전: https://nodejs.org/ko/download/
- 최신버전이라면 아무버전이나 상관없음. 참고로 필자는 v12.9.1 버전을 기준으로 작성하였음.
- 설치방법은 [ 다음 ]만 열심히 눌러주면 됨.
1-3. Node.js의 패키지 관리 툴로 npm이 함께 설치됨.
- 취향에 따라 yarn을 사용하기도 하는데, npm으로 좀 익숙해지고 사용하는 것을 권장.
1-4. 설치가 완료되었다면 버전을 확인하여 보자.
2. 프로젝트 준비.
2-1. 폴더 생성.
|
1
|
mkdir blog
|
cs |
- 프로젝트를 진행할 폴더를 생성.
2-2. node 프로젝트 생성.
|
1
|
npm init -y
|
cs |
- [ npm init -y ]는 node 프로젝트를 설정하는 명령어이며, [ -y ] 옵션을 사용하면 별도의 입력없이 자동으로 생성해줌
- 명령어를 실행하면 [ package.json ] 파일이 생성됨.
2-3. 패키지 다운로드.
|
1
|
npm install react@16.8.6 react-dom@16.8.6
|
cs |
- dependencies 다운로드.
- React의 필수 패키지.
|
1
2
3
|
npm install --save-dev @babel/core@7.4.3 @babel/plugin-proposal-class-properties@7.4.0 @babel/preset-env@7.4.3 @babel/preset-react@7.0.0
npm install --save-dev babel-loader@8.0.5 react-hot-loader@4.8.3
npm install --save-dev webpack@4.29.6 webpack-cli@3.3.0 webpack-dev-server@3.3.1
|
cs |
- devDependencies 다운로드, 개발 환경에서만 필요한 패키지들.
- babel은 Javascript 컴파일러이며, 최신 버전의 Javascript를 사용할 수 없는 환경을 위해 이전 버전의 Javascript로 컴파일 해줌.
- webpack은 번들러이며, 여러 파일로 나누어져있는 파일들을 묶어주는 역할을 하며, 가상서버, hot-loader 등 개발에 필요한 다양한 기능들을 제공함. ( webpack.config.js 라는 설정 파일이 필요함. )
2-4. webpack.config.js 작성.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
|
const path = require('path');
module.exports = {
name: 'blog',
// 번들링 모드, 배포시 production으로 변경.
mode: 'development',
// node.js에서 webpack으로 번들링할 때 node옵션이 필요함.
node: {
fs: 'empty'
},
// Source Mapping 스타일
// Source Mapping은 번들링된 파일을 원복시켜주는 기능인데, 개발 환경에 적합한 옵션들을 선택해서 사용.
// https://webpack.js.org/configuration/devtool/
devtool: 'eval',
// 번들링할 파일의 확장자.
resolve: {
extensions: [ '.js', '.jsx' ]
},
// 번들링할 대상 지정.
entry: [
'./index.js'
],
// 번들링된 결과물을 할 폴더 지정.
output: {
filename: 'app.js',
path: path.join(__dirname, 'dist'),
publicPath: '/dist'
},
// 개발 서버 환경 설정.
devServer: {
host: 'localhost',
port: 4000,
historyApiFallback: true,
hot: false,
contentBase: path.join(__dirname,'static')
},
// 번들링에 사용할 모듈 설정.
module: {
rules: [
{
test: /\.jsx?$/,
loader: 'babel-loader',
options: {
presets: [
[
'@babel/preset-env',
// chrome 최신 2개의 버전에서 지원.
{ targets: { browsers: [ 'last 2 chrome versions' ]} }
],
'@babel/preset-react'
],
plugins: [
'react-hot-loader/babel',
'@babel/plugin-proposal-class-properties'
]
},
exclude: path.join(__dirname, 'node_modules')
}
]
}
}
|
cs |
2-5. packcage.json 수정.
|
1
2
3
4
5
6
7
|
...
"scripts": {
"dev": "webpack-dev-server --hot"
},
...
|
cs |
- 개발 서버를 실행하기위한 명령어를 추가.
- [ --hot ] 옵션은 파일을 수정할 때마다 서버를 재실행할 필요없이 자동으로 reload 시켜줌.
3. 실행 파일 작성.
3-1. 메인 HTML파일 작성, [ ./static/index.html ]
|
1
2
3
4
5
6
7
8
9
10
11
12
|
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My-React</title>
</head>
<body>
<div id="root"></div>
<script src="/dist/app.js"></script>
</body>
</html>
|
cs |
- 9 ln: React를 적용할 대상.
- 10 ln: 번들링된 React 파일( /dist/app.js )을 Load하여 React를 적용.
3-2. 메인 React 파일 작성, [ ./index.js ]
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
import React from 'react';
import ReactDom from 'react-dom';
import { hot } from 'react-hot-loader/root'
import App from './components/App'
function render( Component, hotModule=true ){
const root = document.getElementById('root');
Component = hotModule ? hot( Component ) : Component;
ReactDom.render(<Component />, root);
}
render( App, module.hot.active );
|
cs |
- [ webpack.config.js ]에서 [ entry ]로 지정한 파일이며, 앞으로 이 파일을 번들링하여 [ /dist/app.js ]로 내보내게됨.
3-3. 첫번째 Component 작성. [ ./components/App.js ]
- React Component는 class와 함수형 Component 두가지의 작성 기법을 선택하여 사용할 수 있음.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
|
import React, { Component } from 'react';
class App extends Component {
render(){
return (
<>
Hello, World..!!!
</>
);
}
}
export default App;
|
cs |
- Class를 이용한 React의 정통적인 Component 생성방법이며 라이프사이클API를 사용할 수 있음.
|
1
2
3
4
5
6
7
8
9
10
11
|
import React from 'react';
const App = ()=>{
return (
<>
Hello, World..!!!
</>
);
}
export default App;
|
cs |
- 함수형 Component 생성방법이며, Class와 더불어 정통적인 Component 생성 방법이었지만, React Hooks라는 기법으로 발전하여 사용되고 있음.
- 라이프사이클API를 사용할 수 없지만, 작성법이 간단함.
- 이 방법을 사용하여 프로젝트를 진행할 계획임.
4. 실행.
4-1. 2.5에서 작성한 [ scripts ]를 호출
|
1
|
npm run dev
|
cs |
- webpack-dev-server가 실행되면, 브라우저를 실행하고 [ localhost:4000 ]으로 접속.
- 정상적으로 접속되면 아래와 같이 [ Hello, World..!!! ]가 노출됨.
지금까지 React 프로젝트를 webpack을 이용하여 셋팅하여 보았다. [ create-react-app ]보다는 손이 많이 가지만, 프로젝트를 내맘대로 구성할 수 있고, 경량화 할 수 있어서 좋다. 다음 포스트에서는 Component를 추가하여 간단한 Counter를 만들어 보도록 하겠다.
'Font-end > React' 카테고리의 다른 글
| [React] Layout을 구성해보자 (8) | 2020.07.26 |
|---|---|
| [REACT] 무작정 시작하기 (3) - props 와 state (0) | 2019.11.25 |
| [REACT] 무작정 시작하기 (2) - Component (0) | 2019.11.24 |
댓글