react 처음부터 세팅하기 헤딩하기

react 처음부터 세팅하기 헤딩하기

2022. 2. 22. 16:08ㆍ프로젝트/Mr. Toolbox

728x90

오늘은 공식문서는 아니고 모 개발자님의 블로그를 가져왔습니다.

React 세팅하기 (without create-react-app)

React 개발 환경 세팅하는 법! create-react-app을 사용한다. 처음부터 직접 세팅한다. create-react-app은 리액트 환경을 빠르게 세팅해주는 패키지이다. 공식으로 제공하는 기능이다. React 공식 홈페이지 C

enai.tistory.com

지금 만든 Mr. Toolbox를 테스트 해야하는데,
대충 해보려니까 안되서 세팅을 해보려고 한다.

그냥 따라하는 것이 아닌, 하나하나 해보고 필요한 내용을 파악하는게 목표다.

1. npm init - package.json 생성하기

npm 패키지를 생성해준다.

mkdir my-project
cd my-project
npm init -y

-y 키워드는 입력 받지 않고 기본값으로 설정한다는 뜻.

2. react, react-dom 설치

npm install react react-dom

dom에 컴포넌트를 넣을 수 있게 react-dom을 설치한다.

3. webpack 설치

개발에만 필요하고 배포에는 필요하지 않아서 -D를 붙여준다 (devDependencies라는 뜻)

npm i -D webpack webpack-cli

webpack.config.js 파일을 생성한다.
(우선 내용은 비워 둔다)

module.exports = {};

다음에 package.json을 다음과 같이 수정했다.

{
  ...
  "scripts": {
    "build": "webpack"
  },
  ...
}

그다음 빌드를 시도해보았다.

npm run build

다음과 같은 에러가 떴다.
./src 폴더가 없다고 한다.

우선 src폴더와 index.js를 만들어보자.

import reactDom from "react-dom";

reactDom.render(<div>10</div>, document.getElementById('root'));

다시 실행해보자.

1. mode를 알 수 없다고 한다.
2. js안에 <>를 처리할 수 있는 loader가 없다.

우선 mode를 추가해주자. (webpack.config.js)

module.exports = {
    mode: "development",
};

바벨을 설치하고 로더를 배치하자.

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

webpack.config.js를 수정한다.

module.exports = {
    mode: "development",
    entry: './src/index.jsx',
    module: {
        rules: [{
            test: /\.jsx?$/, // babel-loader로 읽을 파일 확장자 정규표현식
            exclude: '/node_modules', // 제외할 파일 경로
            loader: 'babel-loader',
            options: {
                presets: ['@babel/preset-react'], // babel-loader에서 사용할 옵션
            }
        }]
    },
    resolve: {
    	extensions: ['', '.js', '.jsx'],
    },
};

오? 벌써 되었다.

dist/main.js가 생성되었다.

솔직히 너무 잘 되어서 좀 당황스럽다.

4. 서버 돌리기

하지만 문제점이 있었다. 빌드는 잘 되는데, 이제 서버를 돌려야한다.
배포버전은 Apache같은 웹서버로 돌리면 되고,
로컬에서 사용할 개발용 서버를 돌려보자.

우선 webpack-dev-server를 설치한다.

npm i -D webpack-dev-server

실행해본다.

npx webpack serve --env development

localhost:8080으로 접속하면 다음과 같이 뜬다.

로그를 보면 public에서 서빙을 하는데, public이 없어서 그렇다고 한다.

만들어주자.

public폴더를 만들고, 그 안에 index.html을 생성한다.

<!DOCTYPE html>
<html>
    <head>

    </head>
    <body>
        <div id="root">5</div>
    </body>
</html>

잘 된다. 개꿀개꿀
근데 뭔가 이상하다. 우리는 index.jsx에서 10을 넣어줬는데, 5가 출력된다.

문제를 찾아보자.

번들을 html에 넣어주는 플러그인

블로그에서 좋은걸 찾았다.
번들된 css와 js파일을 html에 넣어준다고 한다.

패키지를 설치해보자

npm i -D html-webpack-plugin

webpack.config.js를 설정해주자.

const HtmlWebpackPlugin = require('html-webpack-plugin');

{
    ...
    plugins: [
        new HtmlWebpackPlugin({
            template: './public/index.html'
        }),
    ],
    ...
}

나한테 왜그래애애애애애애애

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

reactDom.render(<div>10</div>, document.getElementById('root'));

네... index.js를 수정해줍시다. import React가 있어야 하네요.
더 꼴받는건 대문자로 시작하는 React여야합니다.

그동안 CRA로만 생성을 해서, npm start하면 node index.js랑 같은 건 줄 알았다.
하지만 그 내부에는 많은 과정들이 있었고, 잘 모르고 쓰고 있었다.
이렇게나 복잡할줄은 몰랐는데 그냥 CRA 써야겠다 ^^7

저작자표시 비영리

'프로젝트 > Mr. Toolbox' 카테고리의 다른 글

babel 파헤쳐보기 (react 변환) (0)	2022.02.22
npm - package.json 분석하기 (0)	2022.02.22

금붕어의 일기장