HTTP 200 OK

Memento mori & Carpe diem

REACT

babel과 webpack

sjoongh 2022. 1. 19. 17:29

react를 사용하기 위한 기본 라이브러리(react+babel+webpack)

기본 라이브러리

npm init
npm i react react-dom
  1. react: 리액트 라이브러리
  2. react-dom: 원래는 react에 함께 있었으나 이렇게 따로 떨어져 나왔다. react와 DOM 사이에 연결해주는 역할을 한다.
  3. react-scripts: 리액트 프로젝트 초기 셋업을 쉽고 간편하게 해준다.
  4. babel-cli: 바벨을 터미널에서 사용하기 위해 필요하다.
  5. babel-preset-env: 바벨은 babel-preset-es2017과 같이 여러 버전이 있다. 자동으로 옛날 브라우저들을 지원한다.
  6. babel-preset-react: 바벨을 리액트에서 사용하게 해준다.리액트를 쓸거니까 이게 필요하다. 달리 말하면 바벨과 리액트는 별개 프로젝트다.
  7. webpack: 웹팩을 쓰기 위해 필요하다.
  8. babel-core: 웹팩용 바벨(?)이다. 터미널에서 쓸 때 babel-cli를 썼는데 이걸 웹팩에서 사용하는 용도다.
  9. babel-loader: 웹팩에서 바벨을 로드할 때 이 로더를 쓴다.

babel

대표적인 트랜스파일러, 총 네가지 방법으로 실행할 수 있다.

  • @babel.cli로 실행
  • 웹팩에서 babel-loader로 실행
  • @babel/core를 직접 실행
  • @babel/register로 실행
  • 흔히 webpack에서 babel-loader로 실행한다.
  • 트랜스파일링이란 특정 언어로 작성된 코드를 비슷한 다른 언어로 변환시키는 것이다. 이를 해주는 것이 트랜스 파일러이다.

 

트랜스파일링이 왜 필요한가?

  • 모든 브라우저가 ES6의 기능(최신기능)을 제공하지 않기 때문에 ES5코드(구기능)으로 변환시키는 과정이 필요하기 때문이다.

 

적용하고자 하는 폴더에 webpack과 webpack-cli를 설치해준다

npm i -D webpack webpack-cli // -D는 개발환경에서만 쓰인다는 것

바벨설치

npm i -D @babel/core @babel/preset-env @babel/preset-react babel-loader
  • -D : --save-dev의 축약, 개발 단계에서만 사용하기 때문에 devDependencies에 추가

 

root 경로에 babel.config.js파일을 생성한 후 아래와 같이 작성한다.

module.exports = {
    presets: ['@babel/preset-react', '@babel/preset-env']
};
  • preset-env : es6+를 변환할 때 사용
  • preset-react : 리액트, 타입스크립트를 변환하기 위한 프리셋

webpack

웹팩은 여러개의 파일을 하나로 합쳐주는 모듈 번들러이다. 필요한 라이브러리를 npm으로 설치 후 필요한 부분에 import를 사용하여 즉시 사용할 수 있다.

 

  • 웹팩은 기본적으로 모듈을 지원하고 파일 분할 기능(원하는 코드만 따로 분리해서 하나의 파일로 압축이 가능하다), css loader기능, jsx변환 작업도 해준다.
  • 여러개로 나눠진 JS파일을 html이 실행할 수 있는 하나의 JS파일로 합쳐준다 -> 빠른 서비스
  • 다양한 loader를 사용하여 원하는 파일에 대해서 전처리, style 태그 사용, jsx를 js파일로 변환, 최신 js문법 사용
npm i -D webpack webpack-cli webpack-dev-server css-loader
style-loader file-loader html-webpack-plugin clean-webpack-plugin
  • webpack : 웹팩 코어
  • webpack-cli : 웹팩의 커맨드라인 인터페이스
  • webpack-dev-server : 실시간 리로드 기능을 갖춘 개발 서버 제공
  • css-loader : css파일을 js파일이 이해할 수 있도록 변환
  • style-loader : 변환된 css파일을 dom에 <'style'>태그로 감싸서 삽입
  • file-loader : 이미지, 폰트 등 파일 로딩
  • html-webpack-plugin : html파일에 번들링된 자바스크립트 파일을 삽입, 번들링된 결과가 저장되는 폴더에 옮겨줌, webpack.config.js에서 사용할 플러그인
  • clean-webpack-plugin : 웹팩으로 번들링할 때마다 이전 번들링 결과와 사용하지 않는 모든 웹팩 에셋 제거

webpack 파일 만들기

root 경로에 webpack.config.js 파일을 생성

const path = require('path'); 

module.exports = {
    //webpack 속성들을 기재
    name: 'setting', // 웹팩 설정 이름
    mode: 'development', //실서비스 :production
    devtool: 'eval', // 빠르게
    resolve: {
        extensions:['.js', '.jsx'] //entry에 포함되는 파일의 확장자를 확인해주기 때문에 app.js라면 app 만 넣어줘도 된다.
    },
    entry : { // 합쳐질 파일 요소들 입력
        app: ['./client.jsx', './RSP.jsx'], // 만약 client.jsx 에서 RSP.jsx를 rendering 하고 있으면 client.jsx 만 기재해도 된다. 
    }, //입력

    module: {
        rules : [{
            test : /\.jsx?/,  // .js 와 .jsx 에 적용하겠다는 정규식
            loader : 'bable-loader',
            options : {
                presets : [ 
                    ['@babel/preset-env', { // babel 옵션
                        targets : {
                            browsers : ['last 2 chrome versions'],
                        },
                    }],
                    '@babel/preset-react', // babel 옵션
                ],
                plugins : [ '@babel/plugin-proposal-class-properties'],
            },
        }],
    },

    output :{ // 최종적으로 만들어질 js
        path : path.join(__dirname, 'dist'),  // __dirname 현재폴더에 dist를 합쳐서 반환한다. -> 빌드위치
        filename: 'app.js', // 웹팩 빌드 후 최종적으로 만들어질 파일
        publicPath:'/dist/', // 가상경로
    }, //출력
    devServer :{
        publicPath:'/dist/',
        hot : true,
    },
};
  • module.exports = {} : 선언된 객체를 모듈로 출력
  • entry : 사용될 js (배열을 이용한 복수 설정)
  • output : 합쳐질 결과물에 대한 설정
  • module : 모듈 설정
  • plugins : 플러그인 활용

client.jsx

jsx파일에서 사용 예시

import React from 'react';
import ReactDom from 'react-dom';
import Setting from './setting';

ReactDom.render(<Setting />, document.querySelector('#root'));

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="root"></div>
    <script src = "./dist/app.js"></script>
</body>
</html>

loader란?

모듈을 입력받아 처리하는 과정과 관련된 속성

  • 웹팩이 의존성 그래프를 완성시키는 과정에서 의존 관계를 갖는 다양한 타입의 모듈들을 입력받고 처리하는 역할
  • 모듈을 해석할 때 js파일이나 json파일을 기본 모듈로 본다.
  • 만약 다른 파일을 모듈로 불러와서 사용하게 될 경우, loader라는 요소를 설정해야 그 파일들을 모듈로 불러와서 번들링 가능

문법

  • test라는 key를 통해 모듈을 인식하는 패턴을 지정
  • use라는 key를 통해 사용할 loader와 option을 설정하여 모듈을 처리할 때 어떻게 처리할 지 구체적으로 정할 수 있다.

체이닝

  • loader를 읽어들이는 순서

loader 종류

  • CSS loader : css를 모듈로 사용하기 위한 로더, css 선택자의 이름이 전역 환경으로 적용되는 것을 방지, 파일별 class이름 중복 우려를 감소한다. -> css 파일을 모듈로 불러오고 class 이름들을 js파일에 직접 불러와서 사용
  • sass-loader : css와 같은 기능
  • style loadeer : 처리하는 css파일별로 style태그를 생성 -> head 태그 안에 주입
  • file loader : 모듈 내에서 import 또는 require 키워드를 통해 사용하고자 하는 파일들을 모듈로 읽어 들일 수 있게 해주는 로더 -> 파일 로더로 읽어 들인 파일의 경우, 빌드가 될 때 output 디렉토리 경로로 파일을 카피
  • URL loader : 작은 이미지와 같은 리소스들을 문자열 형태로 변환 -> 리소스 요청 수 감소, 문서를 다운받는 시간에 영향을 주지 않는다.

 

1. file loader와 URL loader는 출력의 형태가 다르다.
2. file loader는 모듈로 파일을 입력받고 특정한 파일을 바로 출력한다.
3. 반면에 URL loader는 파일을 입력받고 Data URIs형태로 변환된 문자열을 반환한다. 리소스를 Data URIs라는 특정한 형태로 변환한다.

'REACT' 카테고리의 다른 글

State and Lifecycle  (0) 2022.03.28
webpack 정리  (0) 2022.03.17
Components와 Props  (0) 2022.01.15
엘리먼트 렌더링이란??  (0) 2022.01.15
JSX란 무엇인가?  (0) 2022.01.15

'REACT'의 다른글

  • 현재글babel과 webpack

관련글

댓글

티스토리툴바