본문 바로가기

React, Redux, Webpack4, Babel7, Material UI 로 프로젝트 셋팅하기 1

왈왈이 2019. 3. 1. 10:40

팀에서 데이터 조회 및 운영툴이 필요하여 만들게 되었습니다.

지금은 데이터 조회 기능이 전부인 작은 서비스이지만, 이후 팀에서 운영이 필요한 부분들을 모두 담을 애플리케이션이라 React, Redux, Webpack4, Material UI 를 스펙으로 서비스 스펙을 설정하게 되었습니다.


세부적인 코드는 업무 내용이라 여기 작성하진 못하겠지만, 기본적인 셋팅과 틀은 어디서나 공통적으로 사용될 내용이라 블로그에 기록을 해두면 좋을것 같아 함께 진행해보려 합니다.


0. 너로 정했다!


우선은 들어가기에 앞서, 많고 많은 Framework와 Library 중에 아래 도구들을 사용하기로 결정한 이유에 대해 정리해보았습니다.

React

바야흐로 춘추전국시대에서 살아남은 React와 Vue.

작년에 Vue 로 팀내 운영툴을 만들었는데 저는 템플릿 형태로 앱을 제작하던게 습관이 되어있던터라 진입장벽없이 쉽게 만들어 사용했습니다.

보통 Vue는 경량의 앱을 만들고 싶을때, React는 큰 규모의 앱을 만들때 사용한다는 학계정설 기준이 있는것 같습니다.

이번에 제작하는 앱도 그리 큰 규모는 아니지만 이후의 확장가능성이 충분히 있기에 React 를 선택하게 되었습니다.

Redux

  • 사실 제일 큰 이유는 그냥 Redux를 쓰고 싶었습니다.
    - React에 종속적이지 않아 어디든 적용할 수 있는 개념이니, Angualr를 사용할때도 유용하게 쓸 수 있을것 같아 제대로 경험해두고 싶었습니다.

Webpack4

우선 Webpack 자체를 사용한 이유는 수많은 파일을 번들로 묶어 http 요청수를 최소화하여 최적화된 성능을 내고 싶었습니다.
제가 이전에 했던 프로젝트에선 Webpack3 를 사용하고 있었는데, 이번 작업에서 특히 v4로 버전업을 하고 싶었던 이유는 아래와 같습니다.

  • Dev/Prod 를 mode 로 명시적으로 나눔으로써 Config 없이 빌드가 가능해졌다.
  • 빌드 속도가 더 빨라졌다.
  • 2018년 상반기에 릴리즈 되었고, 이제는 적용 사례 문서가 충분히 많아졌다.

Material UI

Google Material Design 을 구현하고 있는 React용 라이브러리들이 몇몇개 있었지만, 그중 Material-UI 를 선택한 이유는 다음과 같습니다.


  • 제일 많이 사용되고있다. Github Star가 4만 5천개, Fork는 만번 정도 되었다.
    - 경험을 비추어보면 사용자가 적은 라이브러리를 사용하게되면 이슈가 있을때 StackOverflow에 관련 질문이 많이 없어서 해결하기 힘들었다.
    - 역시 인기많은게 최고인거 같다.
  • jQuery 를 사용안하고 있다. jQuery를 사용하게되면 React의 Virtual DOM 개념과 섞여 컨트롤 할 수 없는 상황이 올 수 있다.
    - 전에 Vue.js 개발을 할때 잘모르고 jQuery로 돔 제어를 했더니 미궁에 빠진 적이 있었다.
  • Google Material 의 Component, Icons 를 잘 지원하고 있다.

1. 프로젝트 생성하고 Webpack4 적용하기

package.json 만들기

 $ npm init -y
 $ vi package.json

{
  "name": "react-redux-webpack4-babel7-material",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

index.html, index.js 만들기

$ mkdir src
$ cd src
$ vi index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>Tutorial</title>
  </head>
  <body>
    <div id="root"></div>
  </body>
</html>

$ vi index.js

(function () {
  console.log("Hi!");
}());

Webpack4 설치하기

개발 환경에 번들러를 설치합니다.

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

여기까지 하면, package.json 파일에 방금 설치한 dependency 값들을 들고있는 devDependencides 필드가 새로 생긴것을 확인할 수 있습니다.


추가로 프로젝트 하위에 package-lock.json 파일이 새로 생긴것을 볼 수 있는데요, 이 파일은 package.json 파일이 수정되면 자동으로 생성되는 파일입니다.

  • package-lock.json 파일은 의존성 트리에 대한 정보를 담고있는데요, 이는 파일이 작성된 시점의 의존성 트리가 다시 생성되도록 보장합니다.
  • 조금 쉽게말해 이 파일을 git에 커밋을 해두면 해당 레포를 클론받아 작업하는 모든 개발자들이 동일한 버전의 dependency로 작업할 수 있음이 보장됩니다.
  • 보통 node_modules 폴더는 git에 올리지 않기 때문에 package-lock.json 파일은 저장소에 커밋해주어야 합니다.

path 와 htmlWebpackPlugin 설치하기

  • path: devDependency 의 path 를 지정해주기 위해 필요합니다.
  • htmlWebpackPlugin: 이 도구는 서버를 띄울때마다 임시 index.html 파일을 만들어 사용할 수 있도록 해주는 툴입니다.

$ npm install --save-dev path
$ npm install --save-dev html-webpack-plugin

Webpack Config 작성하기

앱 하위에 webpack.config.js 파일을 생성해줍니다.

  • 파일명은 이와 같이 설정해주어야 Webpack 이 자동으로 인식하여 실행하게 됩니다.
  • 만약 다른 파일명을 원한다면 run 할때 flag를 사용하여 해당 파일의 위치를 알려주어 명령어를 실행해주어야 합니다.
$ vi webpack.config.js
  • Dev config 와 Production config 를 나누어 작성할 수도 있지만, Webpack4 에서는 mode 라는 옵션을 지원하기 때문에, 하나의 파일 (webpack.config.js) 에 작성하고 mode 로 분기하는 방식으로 진행했습니다.
  • 즉, 커맨드라인에서 --mode 옵션으로 development or production 을 명시해주고, config 파일에서는 이를 파라미터로 받아 분기하도록 했습니다.

./webpack.config.js

const path = require('path');
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = (env, options) => {
    const config = {
        entry: {
            app: ['./src/index.js']
        },
        output: {
            filename: '[name].bundle.js',
            path: path.resolve(__dirname, 'dist')
        }
    }

    if(options.mode === 'development') {
        console.log('dev')
        config.plugins = [
            new webpack.HotModuleReplacementPlugin(),
            new HtmlWebpackPlugin({
                template: path.join(__dirname, 'src', 'index.html')
            })
        ];

        config.devtool = 'inline-source-map';

        config.devServer = {
            hot: true, 
            host: '0.0.0.0',
            contentBase: './dist', 
            stats: {
                color: true
            }
        };
    } else {
        console.log('prod')
    }

    return config;
}

package.json 의 scripts 에 명령어 추가하기

"scripts": {
  "test": "echo \"Error: no test specified\" && exit 1",
  "build-dev": "webpack --mode development",
  "build": "webpack --mode production",
  "dev": "webpack-dev-server --open --mode development"
},

  • --open 옵션: 서버가 뜨면 자동으로 브라우저가 열리고 서버에 접속합니다.



자, 이제 webpack 의 기본 설정이 끝났습니다.


이제 개발 서버를 띄워봅시다!


$ npm run dev

그럼 아래와 같이 8080 포트로 브라우저가 열리면서 index.html 과 app.bundle.js 파일이 <script> 로 삽입된 것을 확인할 수 있습니다.





나머지 build 명령어도 실행해봅시다.

Production 빌드하기

$ npm run build
  • Webpack이 src 하위의 index.js 파일을 compile 하고 그 결과로 dist/app.bundle.js 를 만들어낸걸 볼 수 있습니다.

Development 빌드하기

$ npm run build-dev




👏🏻👏🏻 


지금까지 Webpack4 를 앱에 적용해보았습니다.


다음으로는 React, ReactDOM 그리고 Babel 을 사용해보겠습니다.


다음 포스팅 바로가기 


'Web Frontend' 카테고리의 다른 글

iOS 웹뷰 safe area inset 이슈 해결 방법  (1) 2024.04.26
React, Redux, Webpack4, Babel7, Material UI 로 프로젝트 셋팅하기 2  (0) 2019.03.01
타입스크립트  (0) 2018.01.12
프론엔 기본  (0) 2017.12.08

'Web Frontend' Related Articles

티스토리툴바