코딩기록

리액트 관련 셋팅 CRA(리액트 프로젝트 생성), react / react-dom, Babel, Webpack, HMR 셋팅 본문

프론트/리액트

리액트 관련 셋팅 CRA(리액트 프로젝트 생성), react / react-dom, Babel, Webpack, HMR 셋팅

뽀짝코딩 2025. 1. 5. 15:24
728x90

1. CRA (create react app)

리액트 공식 홈피

https://ko.legacy.reactjs.org/docs/add-react-to-a-website.html

 

노드와, npm 버전 확인

node -v

npm -v

 

 

리액트 프로젝트 생성 

npx create-react-app 프로젝트이름

npx create-react-app my-app

 

설치확인 

ls -al

설치한 위치로 이동 

cd my-app

 

간혹 프로젝트 생성 후 web-vitals 모듈이 누락된 경우 아래 명령어로 설치 하면된다. 

npm install web-vitals

그리고 현재 250106월  

react@19.0.0 버전과 @testing-library/react@13.4.0 버전 사이에 버전 충돌이 있다.

1. React 버전 변경: react@19.0.0이 아니라, react@18.x.x로 변경함.

  • react@19.0.0 버전이 설치되어 있는데,
  • @testing-library/react@13.4.0 패키지는 react@^18.0.0 버전을 요구

npm install react@18 react-dom@18

 

 

리액트 실행 명령어

npm start

app.js에 텍스트를 추가하고 바로바로 수정되는지 확인한다.

 

2. react, react-dom 

새로운 프로젝트를 만들고 그곳에

public > index.html 

scr      > components > FollowButton.js

           > index.js

구조를 만든다.

react, react-dom 모듈 설치 명령어

npm install react react-dom

[ 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 class="root"></div>
</body>

</html>

 

[ FollowButton.js ]

import React from 'react';
// React Component!
// Follow <-> following
function FollowButton() {
  const [following, setFollowing] = React.useState(false);

  const commonBtnStyle = {
    display: "flex",
    justifyContent: "center",
    alignItems: "center",
    position: "absolute",
    top: "12px",
    right: "16px",
    width: "100px",
    height: "36px",
    borderRadius: "9999px",
    fontWeight: "bold",
  };

  const followBtnStyle = {
    ...commonBtnStyle,
    backgroundColor: "black",
    color: "white",
  };


  const followingBtnStyle = {
    ...commonBtnStyle,
    backgroundColor: "white",
    color: "black",
    border: "1px solid #cfd9de",
  };

  // JS -> JSX
    // return React.createElement(
    //   "div",
    //   {
    //     onClick: () => setFollowing(!following),
    //     style: following ? followingBtnStyle : followBtnStyle,
    //   },
    //   following ? "Following" : "Follow"
    // );

  // JSX code
  return ( <div onClick={() => setFollowing(!following)}
    style={following ? followingBtnStyle : followBtnStyle}
  >
    {following ? "Following" : "Follow"}
  </div>;
  );
}

export default FollowButton;

 

[ index.js ]

// react 18이상 최신방식
import React from "react";
import ReactDOM from "react-dom/client";
import FollowButton from "./components/FollowButton.js";

const domContainer = document.querySelector('.root');
if (domContainer) {
  const root = ReactDOM.createRoot(domContainer);
  root.render(
    <React.StrictMode>
      <FollowButton />
    </React.StrictMode>
  );
} else {
  console.error("Root container not found.");
}

/**
 * React 17 이하 (옛날 방식)
import React from "react";
import ReactDOM from "react-dom/client";
import FollowButton from "./components/FollowButton.js";

const domContainer = document.querySelector('#root');
ReactDOM.render(<FollowButton />, domContainer));
 */

 

 

 

3. Babel 셋팅

npm i -D @babel/core @babel/cli @babel/preset-react

deprecated 경고가 나와서 기존 패키지 제거하고 다시 설치 

기존 Babel 패키지 제거

먼저 기존에 설치된 Babel 패키지를 삭제

npm uninstall @babel/core @babel/cli @babel/preset-react

 

새로운 명령어로 다시 설치

npm install --save-dev @babel/core @babel/cli @babel/preset-env @babel/preset-react

 

Babel이 전역으로 설치되어 있다면, 다음 명령어로 확인.

npx babel --version

 

그런데도 deprecated 경고가 나와서 

Babel 패키지 업데이트  명령어를 입력함.

npm update @babel/core @babel/cli @babel/preset-env @babel/preset-react

 

쳇지피티왈)  @babel/plugin-proposal-optional-chaining이 deprecated되었다면,

이를 @babel/plugin-transform-optional-chaining으로 교체해야 합니다.

필요한 경우, 다음과 같이 플러그인을 설치하고 .babelrc 파일을 업데이트하세요

//bash

npm uninstall @babel/plugin-proposal-optional-chaining
npm install --save-dev @babel/plugin-transform-optional-chaining

 

//json

{
  "plugins": ["@babel/plugin-transform-optional-chaining"]
}

 

두개다 했다. 혹시 몰라서 어쨋든 현재 cli 7.26.4 core 7.26.0이다.

 

 

JSX -> JS 로 변경하는 명령어 

파일경로에서 $ npx babel 폴더이름/폴더이름/파일이름.js --presets=@babel/preset-react

$ npx babel src/components/FollowButton.js --presets=@babel/preset-react

 

[ JSX 코드 ] JS로 컴파일  전 

  // JSX code 
  return <div onClick={() => setFollowing(!following)}
    style={following ? followingBtnStyle : followBtnStyle}
  >
    {following ? "Following" : "Follow"}
  </div>;

 

[ JSX 코드 ] JS로 컴파일  후 

 

// JSX code
  return /*#__PURE__*/React.createElement("div", {
    onClick: () => setFollowing(!following),
    onClick: () => setFollowing(!following),
    onClick: () => setFollowing(!following),
    style: following ? followingBtnStyle : followBtnStyle
  }, following ? "Following" : "Follow");

 

 

하지만❗❗❗❗

이렇게 매번 @babel~~~ 명령어를 타입핑하는게 귀찮다 그래서 babel.config.js 파일을 이용한다.

[ babel.config.js ] 명령어 -

npx babel 파일경로/파일.js

npx babel src/components/FollowButton.js

[ babel.config.js ]

module.exports = (api) => {
  api.cache(true);

  const presets = ["@babel/preset-env", "@babel/preset-react"];
  const plugins = [];

  return {
    presets,
    plugins,
  };
};

 

 

4. Webpack

4가지 패키지 다운

npm i -D webpack webpack-cli html-webpack-plugin babel-loader

 

[ webpack.config.js ]

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


module.exports = {
  mode: 'development',
  entry: './src/index.js',

  module: {
    rules: [{ test: /\.js$/, use: 'babel-loader' }],
  },

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

  optimization: { minimizer: [] },

  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js',
  },

};

 

웹팩실행 명령어 - 코드 변화가 있을때 마다 다시 명령어 실행해 번들링을 다시 해야함.

npx webpack

 

 

하지만 이 귀찮은 작업을 생략할 수 있다. 어떻게❓

HMR로 !!💥

 

5. HMR (hot-module-replacement)

webpack에서 제공하는 가장 유용한 기능 중 하나. 모든 종류의 모듈을 새로고침할 필요가 없다.

 

HMR 설치명령어

npm install -D webpack-dev-server

 

 

[ webpack.config.js ] 파일 업뎃

  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js',
  },

  // 추가코드
  devServer: {
    static: './dist',
    hot: true,
  },

 

추가코드는 

'dist라는 파일에 업뎃이 발생할 때마다 ,

hot: true / 바로바로 런타입으로 업뎃을 실행해라.' 라는 뜻이다.

 

기존 index.html에서 bundle.js 가 스트립트 태그로 추가된 index.html 파일이 dist폴더에 생성됐다.

[ 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>
<script defer src="bundle.js"></script></head>

<body>
  <div class="root"></div>
</body>

</html>

 

 

 

 

 

코드를 추가하고 명령어로 실행한다

npx webpack serve

위에 보이는 Loopback: http://localhost:8081~ 주소를 클릭해서 들어가보면 live server로 보았던 index.html 화면이 똑같이 보인다.

 

live server

 

 

Lookback

 

내가 vscode에서 코드를 변경하면 실시간으로 브라우저가 변경되는게 보인다.

리액트 live server 라고나 할까ㅎㅎ 참 편하네

 

 

 

 

 

 

 

 

 

참고

웹사이트에 react 추가 - https://ko.legacy.reactjs.org/docs/add-react-to-a-website.html

바벨config - https://babeljs.io/docs/configuration

 

 

 

 

 

반응형
저작자표시 비영리 변경금지

'프론트 > 리액트' 카테고리의 다른 글

리액트) 비동기적으로 실행되는 setState  (0) 2025.01.07
리액트) 상태(state)관리- 원시타입 state와 참조타입 state  (0) 2025.01.07
리액트)2주차 학습 - 기본부터 끝까지 러닝메이트 HTML/CSS  (0) 2024.06.10
리액트)1주차 학습 - css 애니메이션  (0) 2024.06.08
리액트)1주차 학습 - html, CSS 문법  (0) 2024.06.04
'프론트/리액트' Related Articles more
Comments