리엑트는 페이스북에서 제공해주는 프론트엔드 라이브러리 입니다.
리액트는 화면을 이루는 요소들을 작게 쪼개어 컴포넌트(Component)라는 단위로 표현을 하기 때문에 코드를 읽기 쉽고 코드의 재사용성을 높여줍니다.
또한 데이터를 단방향으로 처리하며, 읽기전용 데이터(props) 와 변경 가능한 동적인 데이터(state) 로 분류합니다.
리액트의 가장 두드러지는 특징은 가상 돔(Virtual DOM) 입니다.
기존에는 html 코드를 수정하게 되면 전체 돔을 새롭게 만드는 과정으로 진행됩니다. 하지만 리액트에서는 가상의 돔을 만들어 진짜와 비교 후 변경사항이 있는 부분만 반영하여 프로그램의 효율성과 속도를 높여줍니다.
1. Node js 설치하기 - 저장소 추가하기
최신버전 사용을 위한 저장소를 추가합니다. (setup_11.x, setup_12.x .... 버전에따라 셋팅해주면 됩니다.)
# curl -sL https://rpm.nodesource.com/setup_10.x | bash -
# sudo yum clean all && sudo yum makecache fast
2. Node js 설치하기 - 의존성 패키지 설치하기
Node js 설치에 필요한 패키지를 먼저 설치해 줍니다. (빌드를 위한 패키지들)
- gcc-c++
- make
# sudo yum install -y gcc-c++ make
3. Node js 설치하기 - nodejs 설치하기 / 버전확인
Node js 설치 후 제대로 설치되었는지 버전을 확인해줍니다.
nodejs 설치하기
# sudo yum install -y nodejs
버전 확인
# node -v
4. Node js 프로젝트 만들기
원하는 경로에 프로젝트 폴더를 생성한 다음에 생성한 폴더로 이동합니다.
프로젝트를 생성하기 위해 npm init 이라는 명령어를 입력합니다.
프로젝트 옵션에 대해서는 기본값으로 처리할 것이기 때문에 모든 설정에 Enter 키를 입력해줍니다.
폴더 생성
# cd ~
# mkdir app
# cd ./app
프로젝트 생성 (질문에 대한 답은 모두 Enter 키 입력 - 추후 수정 가능)
# npm init
pakage name: (app)
version: (1.0.0)
description:
entry point: (index.js)
test command:
git repository:
keywords:
author:
license: (ISC)
5. Babel / Webpack 설치하기
> Babel에 대해 알아보기 링크
> Webpack에 대해 알아보기 링크
@babel/preset-react : jsx 파일을 읽을 수 있도록 도와줍니다.
html-loader : html 파일을 읽어줍니다.
clean-webpack-plugin : Webpack이 번들링 후 저장될 폴더를 빌드 할 때마다 삭제를 해주는 플러그인입니다.
html-webpack-plugin : Webpack 이 html 파일을 읽어서 빌드할 수 있도록 도와주는 플러그인입니다.
webpack-dev-server : 빌드와 웹서버의 역할을 동시에 해주는 라이브러리 입니다. (개발용으로만 씁니다)
Babel 설치
# npm install --save-dev @babel/core @babel/cli
Babel polyfill 설치
# npm install @babel/polyfill
Babel 프리셋 설치
# npm install --save-dev @babel/preset-env @babel/preset-react
Babel 플러그인 설치
# npm install --save-dev @babel/plugin-proposal-class-properties
Webpack 설치
# npm install --save-dev webpack webpack-cli
Webpack 로더 설치
# npm install --save-dev babel-loader
# npm install --save-dev html-loader
Webpack 플러그인 설치
# npm install --save-dev clean-webpack-plugin
# npm install --save-dev html-webpack-plugin
Webpack dev-server 설치
# npm install --save-dev webpack-dev-server
6. Sass 사용을 위한 패키지 설치하기
Sass, Less 라는 것은 CSS 전처리기 입니다.
일반적으로 CSS Preprocessor 라고 부릅니다.
CSS가 동작하기 전에 사용하는 기능으로, CSS 문법과 굉장히 유사하지만 선택자의 중첩이나 조건문, 반복문 등의 다양한 기능을 사용하여 훨씬 더 편리하게 작성할 수 있습니다.
하지만 웹에서 직접 동작하지 않기 때문에 CSS 코드로 컴파일이 필요합니다.
따라서 Node js를 컴파일러인 LibSass에 바인딩한 라이브러리인 node-sass를 사용합니다.
node-sass : sass로 작성된 코드를 css로 변환해줍니다.
css-loader : 모든 css 파일들을 읽습니다.
style-loader : 모든 css 파일들을 style 태그로 만들어 head 태그 안에 넣습니다.
sass-loader : 모든 sass 파일들을 읽습니다.
mini-css-extract-plugin : css 파일들을 style 태그 대신 하나의 파일로 저장합니다.
Sass - Sass 컴파일러 설치
# npm install --save-dev node-sass
Sass - Webpack 로더 설치
# npm install --save-dev css-loader style-loader sass-loader
Sass - Webpack 플러그인 설치
# npm install --save-dev mini-css-extract-plugin
7. React 설치하기
# npm install --save-dev react react-dom
8. 환경설정 파일 만들기 - .babelrc
사용할 프리셋과 플러그인을 입력합니다.
presets - 프리셋을 등록
plugins - 플러그인을 등록
{
"presets": ["@babel/preset-env", "@babel/preset-react"],
"plugins": ["@babel/plugin-proposal-class-properties"]
}
9. 환경설정 파일 만들기 - webpack.config.js
파일의 경로를 미리 변수로 정의하기
const path = require('path');
const path_pages = path.resolve(__dirname, 'app/render/pages');
const path_components = path.resolve(__dirname, 'app/render/components');
const path_styles = path.resolve(__dirname, 'app/render/assets/styles');
사용할 플러그인 객체를 생성하기
const HtmlWebPackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
Webpack 설정하기
module.exports = {
entry: [
'@babel/polyfill',
path_components + '/index.js',
path_styles + '/style.scss'
],
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'js/bundle.js'
},
plugins: [
SCSS 파일을 CSS 파일로 컴파일 해서 저장
new MiniCssExtractPlugin({ filename: 'css/style.css' }),
원하는 HTML 템플릿 파일에 style.css 와 bundle.js 파일을 임포트 후 저장
new HtmlWebPackPlugin({
template: path_pages + '/index.html',
filename: 'index.html'
})
],
webpack-dev-server 를 사용할때만 일시적으로 사용하는 설정
devServer: {
contentBase: path.join(__dirname, 'dist'),
compress: false,
port: 9000
},
module: {
rules: [
js/jsx 파일의 로더 설정
{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader',
options: {
presets: ['@babel/preset-env'],
plugins: ['@babel/plugin-proposal-class-properties']
}
}
},
html 파일의 로더 설정
{
test: /\.html$/,
exclude: /node_modules/,
use: [
{
loader: 'html-loader',
options: {minimize: false}
}
]
},
scss 파일의 로더 설정
{
test: /\.scss$/,
use: [
MiniCssExtractPlugin.loader,
'css-loader',
'sass-loader'
],
exclude: /node_modules/
}
]
},
mode: 'development'
};
10. package.json
배포하기 위한 빌드 스크립트를 추가합니다. (배포용)
webpack-dev-server를 실행하는 스크립트를 추가합니다. (개발용)
"build" : "webpack -w"
"start" : "webpack-dev-server --config ./webpack.config.js --mode development --open"
{
"name": "app",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack -w",
"start": "webpack-dev-server --config ./webpack.config.js --mode development --open"
},
"author": "",
"license": "ISC",
"devDependencies": { ... },
"dependencies": { ... }
}
11. 실행 및 빌드
개발환경에서의 테스트를 목적으로 실행하는 명령어
# npm run start
배포를 하기 위해서 빌드하는 명령어
# npm run build
