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

2. React 와 ReactDOM 적용하기

React의 DOM 렌더링 과정은 이 문서를 참고하여 공부했습니다. 이와 관련해서 이후 포스팅을 할 예정입니다.

React, ReactDOM 설치하기

$ npm install --save react react-dom

/index.js 에서 사용해보기

import React from "react";
import ReactDOM from "react-dom";

let Hi = () => {
    return <h1>Hi Ryu!</h1>
};

ReactDOM.render(
    <Hi/>,
    document.getElementById("root")
);

이제 React 코드를 어떻게 컴파일해야할지 Webpack 에게 알려주는 역할이 필요합니다.

Babel 이 바로 그 역할을 합니다.

Babel packages 설치하기

$ npm install --save-dev @babel/core @babel/node @babel/preset-env @babel/preset-react babel-loader

더불어, 앞으로 css 파일들을 사용하여 스타일을 줄수 있도록 style 관련 loader 와 File 관련 loader 를 추가로 설치해주었습니다.

$ npm install --save-dev style-loader css-loader sass-loader node-sass
$ npm install --save-dev file-loader @babel/plugin-proposal-class-properties

이제 Babel 의 설정파일을 추가하여 Webpack이 React와 스타일 관련 코드들을 컴파일할 수 있도록 해야합니다.

Babel Config 작성하기

$ vi .babelrc

/.babelrc 에 아래와 같이 작성합니다.

{
  "presets": [
    "@babel/env",
    "@babel/react"
  ],
  "plugins": [
    "@babel/plugin-proposal-class-properties"
  ]
}

Webpack.config.js 의 module.rules 에 loader 정보 추가해주기

config.module = {
    rules: [
        {
            // this is so that we can compile any React,
            // ES6 and above into normal ES5 syntax
            test: /\.(js|jsx)$/,
            // we do not want anything from node_modules to be compiled
            exclude: /node_modules/,
            use: ['babel-loader']
        },
        {
            test: /\.(css|scss)$/,
            use: [
                "style-loader", // creates style nodes from JS strings
                "css-loader", // translates CSS into CommonJS
                "sass-loader" // compiles Sass to CSS, using Node Sass by default
            ]
        },
        {
            test: /\.(jpg|jpeg|png|gif|mp3|svg)$/,
            loaders: ['file-loader']
        }
    ]
};

package.json scripts 수정하기

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

---

이제 모든 설정이 끝났습니다!

CSS 파일을 하나 만들어서 스타일이 잘 적용되는지 확인해봅시다!

• src 폴더 하위에 style.css 파일을 하나 생성하고 body #root {font-size: 50px} 와 같이 간단한 스타일을 선언해줍니다.
• 그 다음, index.js 에서 이를 import 한뒤 (import "./style.css" ) - 서버를 띄웁니다.

$ npm run dev

그럼 아래와 같이 스타일이 적용된 것을 확인할 수 있습니다.

👏🏻👏🏻 

이제 기본적인 셋팅은 끝이 났습니다. 

다음으로는 Redux  를 사용해보겠습니다.

다음 포스팅 바로가기