create-react-app 없이 React App 생성하기

1. package.json 생성

프로젝트에 다양한 패키지를 사용하기 위해서 npm을 사용한다. 빈 폴더를 생성하고 npm을 사용하기 위해서 cmd에서 npm init 명령어를 수행하면 package.json을 생성된다. npm은 node.js에서 사용할 수 있는 모듈을 패키지화해서 설치, 관리하고 package.json은 패키지들의 의존성을 관리한다

내가 원하는 폴더 경로> npm init

2. React, ReactDOM 설치

npm install로 React, ReactDOM을 설치한다. React 패키지는 리액트 라이브러리의 진입점으로 최상위 API를 사용 가능하게 해주고, ReactDOM 패키지는 Virtual DOM으로 실제 DOM 노드를 생성 가능하게 해준다 (=React Element를 실제 화면에 렌더링)

내가 원하는 폴더 경로> npm install react react-dom

아까는 빈 폴더였는데 패키지 설치하니까 3개가 생성되었다.

package.json, node_modules, 그리고 package-lock.json간의 관계

npm이란 무엇인가? npm(node package manager)은 노드 패키지 매니저의 약자로써, 모듈(패키지) 관리(설치, 업데이트, 삭제)를 하기위한 매니저이다. 노드의 정의는 크게 2가지로 나눌 수 있다. 서버: 네트

cheonmro.github.io

3. 실제 코드 작성하기

폴더 안에 폴더를 따로 하나 더 만들어 그 안에 실제 코드들을(js, html 등 프로젝트의 모든 구성요소) 작성한다

<!--index.html-->

<!DOCTYPE html>
<html lang="UTF-8">
<head>
    <meta charset="UTF-8">
    <title>ToDoList2</title>
</head>
<body>
    <div id="root"></div>
    <script src="bundled.js"></script>
</body>
</html>

//index.js

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

var root = document.getElementById("root");

function Test() {
    return(
        <div>
            <h1>TEST - CRA 없이 React App 만들기</h1>
            <p>by Chaewon</p>
        </div>
    )
}

ReactDom.render(<Test/>,root);

4. Webpack 설정

Webpack은 번들러 중 하나로 번들러는 웹에서 사용되는 자원들 (js, css, png 등)을 묶어주는(번들링) 도구다 Webpack을 사용하면 HTTP 요청 횟수를 줄일 수 있다

4-1. 패키지 설치

내가 원하는 폴더 경로> npm install webpack webpack-cli webpack-dev-server

4-2. webpack.config.js 생성 및 작성

const path = require("path")

module.exports = {
    entry: path.resolve(__dirname,"app/index.js"),
    output: {
        path: path.resolve(__dirname,"app"),
        filename: "bundle.js"
    },
    mode: "development",
    devtool: "source-map",
    devServer: {
        host:"localhost",
        port:3000,
        static: {
          directory: path.resolve(__dirname,"app")
        },
        hot: true,
        historyApiFallback: { index: "index.html" }
    },
    module: {
        rules: [
          {
            test: /\.js$/,
            exclude: /(node_modules)/,
            use: {
              loader: "babel-loader",
              options: {
                presets: [
                  "@babel/preset-react",
                  "@babel/preset-env"
                ]
              }
            }
          }
        ]
    }
}

webpack.config.js 코드를 조금 파헤쳐보면

Entry

entry: path.resolve(__dirname,"app/index.js") //index.js부터 시작

webpack은 번들링 과정에서 dependency graph를 그린다. dependency graph는 프로젝트에 필요한 모듈(js, css, img 등)을 다 포함하며 어떤 모듈에서 출발해 필요한 다른 모듈을 타고 타고 가면서 그려진다. (어떤 모듈이 다른 모듈을 필요로 하면 dependency가 있다고 한다) dependency graph를 다 그리면 모든 모듈을 하나의 번들로 묶어서 브라우저에 로드한다. 이때 entry속성은 어떤 모듈에서 출발해 dependency graph를 그려나갈지를 의미한다.

Output

output: {
        path: path.resolve(__dirname,"app"), //결과물 경로
        filename: "bundle.js" //결과물 이름
}

번들링한 결과물 파일의 이름, 파일의 경로를 의미한다

mode

mode: "development"

webpack 모드에는 development(개발모드), production(배포모드)(기본값), none(최적화 모드 해체) 가 있다. production 모드는 번들링 과정에서 자동으로 코드를 최적화 해준다.

devtool

devtool: "source-map"

source-map은 개발한 코드와 번들링 된 코드 사이의 관계를 나타낸다. source-map이 없다면 디버깅이 어려워진다. 왜냐하면 번들링 된 코드로부터 작성한 코드를 유추해서 디버깅해야 하기 때문이다. source-map을 사용하면 디버깅을 원할하게 할 수 있다.

devServer

devServer: {
        host:"localhost", //webpack dev server 실행환경의 호스트 이름
        port:3000, //webpack dev server 실행환경의 포트번호
        static: {
          directory: path.resolve(__dirname,"app") //정적 자원을 제공하는 경로
        },
        hot: true, //true로 설정하면 브라우저를 새로고침 안해도 webpack으로 빌드한 결과물이 브라우저에 실시간으로 반영
        historyApiFallback: { index: "index.html" }
    },

Loader

module: {
        rules: [
          {
            test: /\.js$/, //모든 .js 파일
            exclude: /(node_modules)/, //제외할 파일
            use: { //사용할 로더 설정
              loader: "babel-loader",
              options: {
                presets: [
                  "@babel/preset-react",
                  "@babel/preset-env"
                ]
              }
            }
          }
        ]
    }

Loader는 webpack이 어플리케이션을 해석할 때 JavaScript로 만든 모듈(자원을 모듈로 봄!)이 아닌 다른 모듈(html, css, image 등)을 JavaScript 코드에 포함될 수 있도록 해준다

4-3. webpack dev server 실행

create-react-app으로 생성한 react 프로젝트는 "npm start" 명령어로 실행시켰는데, webpack dev server를 실행시키려면 내가 명령어를 커스텀한다. package.json 파일의 scripts에 명령어를 추가하고 "npm run 명령어"로 실행시킬 수 있다.

npm run build

npm run dev

[JS] Webpack을 쓰는 이유

Webpack은 여러개 파일을 하나의 파일로 합쳐주는 모듈 번들러(Module bundler)이다. Webpack을 쓰는 이유는 무엇일까? 표준화된 모듈화 기법이 등장한 것은 ES2015부터인데, Webpack…

ingg.dev

5. babel 설정

babel은 ES6+ 문법, JSX 문법 등을 하위 버전의 JavaScript 코드로 변환시켜준다. 바벨은 크로스 브라우징을 가능하게 한다. (바벨을 쓰는 이유라고 할 수 있을듯...) 크로스 브라우징은 작성한 코드가 모든 브라우저에서 정상적으로 돌아갈 수 있게 해주는 행위, 방법론을 의미한다.

webpack에서 babel을 사용하기 위해서 패키지 설치한다.

npm install @babel/core @babel/preset-env @babel/preset-react babel-loader

6. 실행

localhost:3000

[react] CRA 없이 react 시작하기

안녕하세요. 김용성입니다. 오늘은 CRA 명령어를 사용하지 않고 webpack을 사용하여 하나하나 react 프로젝트를 세팅하는 방법에 대해 포스팅하도록 하겠습니다.

velog.io

'보지마세요' 카테고리의 다른 글

[구현] 백준 1388번 (C++) (0)	2022.06.09
[구현] 백준 1004번 (C++) (0)	2022.06.09
React Document 2 : Element, Component (0)	2022.06.03
React Document 1 : React란? (0)	2022.06.02
Spring 공부하기(3) - 회원 서비스 만들기 (0)	2022.05.25