(TIL4) CRA 기초 다지기(feat.webpack,babel)

져니·2021년 7월 5일

CRA JavaScript TIL babel javascript모듈 webpack 바벨 웹팩

React

목록 보기

4/12

1) CRA(Create React App)란❓

Create React App을 사용하면 React 배우기에 간편한 환경을 설정해줍니다. 그리고 싱글페이지 애플리케이션을 제작할 때도 최적의 개발환경을 구축해줌, CRA는 웹서버를 통한 개발환경 구축이다!

⭐그래서 Node.js환경에서 작업하기에 백엔드로 오해할 수 있으나 확실한 프론트엔드단이다!

Create React App는 Babel이나 webpack같은 build 도구를 사용하나, 설정 없이도 동작함, 하지만 Babel이나 webpack이 어떤 원리로 돌아가는지 자세히 보기 위해 webpack과 babel을 직접 설정해보는 법을 배웠습니다.

webpack이란❓

웹팩은 프로젝트에 사용된 파일을 분석하여 기존 웹 문서 파일로 변환하는 도구.
웹팩이 필요한 이유는 프레임워크가 .js,.css,.jpg와 같은 기존 웹문서 파일을 사용하지 않기 때문입니다. 예를 들어, 트위터 부트스트랩 템플릿은 웹문서 스타일을 .css가 아닌 .sass 파일로 작성하는게 웹브라우저는 .sass 파일을 해석하지 못하므로 중간에 누군가 이 파일을 해석해주어야 하고, 바로 그런 역할을 하는 도구가 웹팩

출처: [DO it! 리액트 프로그래밍 정석,박호준]

babel이란❓

babel은 자바스크립트 컴파일러다. 입력은 자바스크립트 코드고 출력도 자바스크립트 코드다. 최신 버전의 자바스크립트 문법은 브라우저가 이해하지 못하기 때문에 babel이 브라우저가 이해할 수 있는 문법으로 변환해준다. ES6, ES7 등의 최신 문법을 사용해서 코딩을 할 수 있기 때문에 생산성이 향상된다.

출처: https://ljs0705.medium.com/babel-%EC%9D%B4%ED%95%B4%ED%95%98%EA%B8%B0-a1d0e6bd021a

2) webpack 개발환경 구축하기

CRA 폴더 만들기
CRA에서 통합터미널 열기
npm init
npm install react
npm install react-dom
npm install -D webpack
npm install -D webpack-cli
//D -> 개발용도를 의미
CRA 폴더 안에 webpack.config.js 파일 생성하기
webpack.config.js파일 안에 아래 코드 넣어주기

const path = require('path') 

module.exports = {
    name:'webpack', // webpack의 이름을 정해주는 것
    mode:'development', // development -> 개발용   production -> 배포용
    devtool:'eval', // 개발용 -> eval  배포용 -> hidden-source-map 

    //webpack이 읽어야 될 내용들
    entry:{
        app:['./index.jsx']
    },
    //내가 위의 파일을 읽어서 어떻게 내보낼 것인지(경로,파일명)
    output: {
        path:path.join(__dirname,'dist'), //컴퓨터마다 환경이 다르기 때문에 절대경로로 적는 것이 안전함(path 패키지 활용)
        filename:'app.js'
    }
}

package.json 파일 scripts 부분에 다음 코드 추가하기

  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev" :"webpack"  // => npx webpack으로 서버 킬 수 있음
  },

✔ Hello webpack 찍기

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 type="text/javascript" src="./dist/app.js"></script>
</body>
</html>

index.jsx 만들고 코드 넣기

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

class App extends React.Component{
    render(){
        return(
            React.createElement('div',null,'Hello webpack!!')
                            // (엘리먼트명,속성값,내용)
        )
    }
}

ReactDOM.render(
    React.createElement(App),
    document.querySelector('#root')
)

아직 바벨을 깔아주지 않아서 index.jsx의 html을 해석하지 못한다. 그래서 React.createElement를 사용하여 Hello webpack을 찍었다!
npx webpack을 터미널에서 실행해보면 성공적으로 컴파일 됐다고 뜬다!

헬로 웹팩도 잘 찍혀서 나옴!

3) babel 개발환경 구축해주기

webpack이 바벨도 이해할 수 있도록 패키지를 몇가지 더 설치하여 개발환경을 구축할 것입니다!

npm install -D @babel/core
-> babel의 기본적인 것들을 함축하고 있음
npm install -D @babel/preset-env
-> 최신문법을 옛날문법으로 바꿔줌
npm install -D @babel/preset-react
-> jsx라던가 리액트에 필요한 문법들을 지원해주는 아이
npm install -D babel-loader
-> 바벨과 웹팩을 이어주는 패키지

✔ Hello babel 찍기

index.jsx 코드 고치기

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

class App extends React.Component{
    render(){
        return(
            <div>Hello babel</div>
        )
    }
}

ReactDOM.render(
    <App />,
    document.querySelector('#root')
)

webpack.config.js에서 module세팅 넣어주기

entry{}와 ouuput{} 사이에 module 세팅을 넣어줘야 한다.

    module:{
        rules:[{ 
            test:/\.jsx?$/, //확장자가 .jsx인가 .js인가? 안의 내용이 적합하다면 아래 내용을 로드할 것임
            loader:'babel-loader', //webpack이 바벨을 읽을 수 있도록 해줌
            options:{
                presets:[
                    '@babel/preset-env', //최신문법을 옛날문법으로 바꿔줌
                    '@babel/preset-react' // jsx라던가 리액트에 필요한 문법들을 지원해주는 아이
                ]
            }
        }]
    },

npm run dev로 결과를 확인해보자