[React] 개발 환경 구축 (Webpack, Babel)

DevSeong2·2021년 8월 12일
React
0

React

목록 보기
2/5
post-thumbnail

vscode & Webpack/Babel을 이용한 리액트 개발 환경 구축

1. Node.js, VSCode 설치

  • Node.js 최신 버전으로 설치

    Node.js 왜 설치하나요?
    Node.js는 Chrome의 V8 JavaScript 엔진을 기반으로 하는 JavaScript 런타임 입니다. - Node.js 공식 사이트
    쉽게 말해, Node.js는 브라우저 밖에서도 자바스크립트를 실행할 수 있게 해주는 런타임 환경입니다. 앞으로 사용할 npm은 Node.js의 패키지 관리 도구.

  • Visual Studio Code (VSCode)

2. 프로젝트 생성 및 초기화

컴퓨터에 원하는 위치에 폴더 하나를 생성하고 vscode를 실행하여 파일 ➡ 폴더 열기 ➡ 생성한 폴더 선택

터미널에서 npm init 명령을 실행 (Node.js 프로젝트 폴더로 선언한다는 의미) 👉 package.json 파일이 생성됩니다.
(package name, author, license만 작성하고 나머지는 enter 했습니다)

🧾 package.json
프로젝트 정보와 패키지 버전 정보를 담고 있는 파일
참고: (https://heropy.blog/2018/02/18/node-js-npm/)

📁 node_modules
패키지를 설치했을 때 실제 소스코드가 들어있는 폴더

📃 package.json

{
  "name": "test",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "cs",
  "license": "MIT"
}

3. 웹팩 & 리액트 패키지 설치하기

웹팩이란?
최신 프런트엔드 프레임워크에서 가장 많이 사용되는 모듈 번들러(Module Bundler)입니다. 모듈 번들러란 웹 애플리케이션을 구성하는 자원(HTML, CSS, Javscript, Images 등)을 모두 각각의 모듈로 보고 이를 조합해서 병합된 하나의 결과물을 만드는 도구를 의미합니다. - https://joshua1988.github.io/webpack-guide/webpack/what-is-webpack.html

npm i -D webpack webpack-cli 👉 웹팩 설치

  • webpack : 웹팩
  • webpacK-cli : CLI에서 웹팩 사용가능

npm i react react-dom 👉 리액트 패키지 설치

  • react : 리액트 기본 요소
  • react-dom : react와 DOM 연결

npm을 사용해 리액트 패키지를 설치하지 않으면 CDN을 사용해 html 파일에 스크립트를 추가해야 합니다.

 <script src="https://unpkg.com/react@17/umd/react.development.js" crossorigin></script>
 <script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js" crossorigin></script>

4. 바벨 설치

Babel이란?
현재 및 이전 브라우저 또는 환경에서 ECMAScript 2015+ 코드를 이전 버전의 JavaScript로 변환하는 데 주로 사용되는 도구 체인입니다. - https://babeljs.io/docs/en/

const element = <h1>Hello, world!</h1>;
자바스크립트에서 html 태그를 쓰는 것은 문법적으로 가능하지 않습니다. Babel은 이와 같은 JSX 구문을 자바스크립트 문법으로 변환할 수 있습니다.

npm i -D @babel/core @babel/preset-env @babel/preset-react babel-loader

  • babel/core : 바벨의 기본 요소
  • babel/preset-env : 브라우저에 맞게 최신 문법을 예전 문법으로 변환(지원)
  • babel/preset-react : JSX 지원
  • babel-loader : 바벨과 웹팩을 연결

5. 웹팩 설정

루트 경로에 webpack.config.js 웹팩 설정 파일 생성

mode

mode 속성을 정의하면 웹팩의 실행 모드가 설정됩니다. 각 실행 모드에 따라 웹팩의 결과물 모습이 달라집니다.

  • none : 모드 설정 X
  • development : 개발용
  • production : 배포용 (default)

devtool

이 옵션은 소스 맵이 생성되는지 여부와 생성 방법을 제어합니다. 소스 맵(Source Map)이란 배포용으로 빌드한 파일과 원본 파일을 서로 연결시켜주는 기능입니다. devtool 속성을 추가하고 소스 맵 설정 옵션 중 하나를 선택해 지정할 수 있습니다.

entry

웹팩이 파일을 읽어들이기 시작하는 부분(진입점)입니다. 웹팩은 entry에 명시된 파일을 통해 의존하는 다른 모듈과 라이브러리를 알아내 하나의 번들 파일을 만들어냅니다.

loader

로더(Loader)는 웹팩이 웹 애플리케이션을 해석할 때 자바스크립트 파일이 아닌 웹 자원(HTML, CSS, Images, 폰트 등)들을 변환할 수 있도록 도와주는 속성입니다.

  • test : 로더를 적용할 파일 유형 (일반적으로 정규 표현식 사용)
  • use : 해당 파일에 적용할 로더의 이름

plugins

웹팩에 적용할 플러그인들을 설정합니다. 플러그인(plugin)은 웹팩의 기본적인 동작에 추가적인 기능을 제공하는 속성입니다.

output

결과물의 파일 경로를 의미합니다. filename 속성은 웹팩으로 빌드한 파일의 이름을 의미하고, path 속성은 해당 파일의 경로를 의미합니다.

📃 webpack.config.js

const path = require('path') // Node.js 에서 파일을 쉽게 다룰 수 있도록 도와주는 모듈

module.exports = {
  name: 'test',
  mode: 'development',
  devtool: 'eval',

  entry: {
    app: ['./index.jsx']
  },

  module: {
    rules: [{
      test: /\.jsx?$/,
      loader: 'babel-loader',
      options: {
        presets: ['@babel/preset-env', '@babel/preset-react'],
      }
    }],
  },

  plugins: [],

  output: {
    path: path.join(__dirname, 'dist'),	// __dirname: webpack.config.js 파일이 위치한 경로
    filename: 'app.js',
    publicPath: '/dist/'
  },
}
📃 index.html

<html>
<head>
  <meta charset="utf-8" />
  <title>Test</title>
</head>
<body>
  <div id="root"></div>
  <script src="./dist/app.js"></script>
</body>
</html>
📃 index.jsx

const React = require('react')
const ReactDom = require('react-dom')

const Test = require('./Test')

ReactDom.render(<Test />, document.querySelector('#root'))
📃 Test.jsx
const React = require('react')

const Test = () => {
  return (
    <div>
      Hello, React!
    </div>
  )
}

module.exports = Test
📃 package.json

{
  "name": "test",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "dev": "webpack"
  },
  "author": "cs",
  "license": "MIT",
  "dependencies": {
    "react": "^17.0.2",
    "react-dom": "^17.0.2"
  },
  "devDependencies": {
    "@babel/core": "^7.15.0",
    "@babel/preset-env": "^7.15.0",
    "@babel/preset-react": "^7.14.5",
    "babel-loader": "^8.2.2",
    "webpack": "^5.50.0",
    "webpack-cli": "^4.7.2"
  }
}

6. 웹팩 빌드

npm run dev 👉 package.json 파일의 scripts 명령어 실행
Hello React😉

Reference

📗 Node.js와 npm
📗 리액트 공식 사이트 - 설치
📗 What is Babel?
📗 Guides | Webpack
📗 JavaScript 모듈화 도구, webpack

profile
DevSeong2
차근차근
이전 포스트

[React] 개발 환경 구축 (CRA)

다음 포스트

[React] 프론트엔드 세팅하기

0개의 댓글