[인프런 강의] zerocho Slack 클론 코딩 (5) - 기본 세팅 (webpack devServer 세팅)

[인프런 강의] zerocho Slack 클론 코딩 (5) - 기본 세팅 (webpack devServer 세팅)

 

저번 포스팅에서는 webpack과 babel을 설정하였다.

이번 포스팅은 webpack devServer를 세팅하려 한다.

 

지금 형태에서는 만약 App.tsx의 <div> 태그의 글자를 변경하거나 변경사항이 있다면 다시 빌드 명령어로 재 빌드를 해야 한다.

 

 

App.tsx

import React from 'react';

const App = () => {
    return (<div>좀만 참아주세요 ㅠㅠㅠ</div>);
}

export default App;

 

그래서 개발 환경에서 수정사항이 생기면 저절로 알아서 변경된 사항을 바꿔주는 핫리로딩에 대한 설정을 필요로 한다.

핫 리로딩을 하기 위해선 webpack-dev-server 가 필요하다 다음과 같은 명령어로 설치할 수 있다.

 

1. webpack-dev-server 설치

webpack-dev-server를 개발용으로 설치해준다.

npm i webpack-dev-server -D

 

타입 스크립트도 설치해준다.

npm i @types/webpack-dev-server

 

webpack-dev-server의 기능은 다음과 같다

- 핫 리로딩 기능으로 개발할 때 바로 반영할 수 있어서 편리함.

- 프록시 서버의 역할도 해주어서 CORS에러를 해결해준다.

 

 

2. webpack-plugin 설치

핫 리로딩을 위해서는 다음과 같은 명령어로 react-refresh-webpack-plugin을 설치해 주어야 한다.

 

다음 명령어로 설치해준다.

npm i @pmmmwh/react-refresh-webpack-plugin

npm i react-refresh

 

3. webpack.config.ts 설정 변경

방금 설치하였던 플러그인 관련 주석을 풀어 주어야 한다.

//webpack.config.ts


import path from 'path';
//ReactRefreshWebpackPlugin의 주석을 풀어준다.
import ReactRefreshWebpackPlugin from '@pmmmwh/react-refresh-webpack-plugin';
import webpack, { Configuration as WebpackConfiguration } from "webpack";
import { Configuration as WebpackDevServerConfiguration } from "webpack-dev-server";




//.....

 

//webpack.config.ts


//......


if (isDevelopment && config.plugins) {

  //이부분에 주석되어 있는 것도 풀어준다.
  config.plugins.push(new webpack.HotModuleReplacementPlugin());
  config.plugins.push(new ReactRefreshWebpackPlugin());
}

 

ForkTsCheckerWebpackPlugin도 주석을 해제해준다.

이 플러그인은 타입 스크립트 체크와 webpack실행을 동시에 돌아가게 해 준다.

//webpack.config.ts

plugins: [
    //플러그인 부분 주석풀기
    new ForkTsCheckerWebpackPlugin({
      async: false,
      // eslint: {
      //   files: "./src/**/*",
      // },
    }),
    new webpack.EnvironmentPlugin({ NODE_ENV: isDevelopment ? 'development' : 'production' }),
  ],

 

//webpack.config.ts
//이부분의 주석도 해제
devServer: {
    historyApiFallback: true, // react router
    port: 3090,		//프론트 서버 포트
    devMiddleware: { publicPath: '/dist/' },
    static: { directory: path.resolve(__dirname) },
  },

 

 

 

 

 

그리고 아래와 env 부분에 아래에 주석으로 체크한 부분을 추가해준다.

 

//webpack.config.ts

module: {
    rules: [
      {
        test: /\.tsx?$/,
        loader: 'babel-loader',
        options: {
          presets: [
            [
              '@babel/preset-env',
              {
                targets: { browsers: ['IE 10'] },
                debug: isDevelopment,
              },
            ],
            '@babel/preset-react',
            '@babel/preset-typescript',
          ],
          //env 부분 추가
          env: {
            development: {
              plugins: [require.resolve('react-refresh/babel')],
            },
          },
        },
        exclude: path.join(__dirname, 'node_modules'),
      },
      {
        test: /\.css?$/,
        use: ['style-loader', 'css-loader'],
      },
    ],
  },

 

 

 

4. package.json 설정 변경

스크립트 부분에 "dev"를 추가해준다.

 "scripts": {
    "dev": "cross-env TS_NODE_PROJECT=\"tsconfig-for-webpack-config.json\" webpack serve --env development",
    "build": "cross-env TS_NODE_PROJECT=\"tsconfig-for-webpack-config.json\" NODE_ENV=production webpack",
   }

 

5. "npm run dev"로 실행해준다.

정상적으로 실행이 되었다면 3090 포트에 App.tsx의 내용이 보일 것이다.

실행 화면

 

 

나는 "npm run dev"명령어로 실행을 하였더니 여러 부분에서 에러가 났다.

 

1. swr 버전 관련 문제

2. react-custom-scrollbars 관련 문제

3. socket.io-client 문제

 

해결 방법

 

1. swr 버전 관련 문제

 

swr은 강의를 진행했던 당시의 버전과 지금의 버전의 사용 방법이 달라서 일어난 현상이다.

npm i swr@0.5로 0.5 버전을 설치하였다.

 

2. react-custom-scrollbars 관련 문제

해당 모듈이 존재하지 않아 읽을 수 없는 문제였다 npm i @types/react-custom-scrollbars 명령어로 해결하였다.

 

3. socket.io-client 문제

이 부분을 한참 헤맸는데 버전과 관련한 문제였다.

npm i --save-dev @types/socket.io-client@1

 

1 버전을 설치해주니 해결이 되었다.

 

 

---

정상적으로 설정이 되었다면

App.tsx를 변경하면 바로 브라우저에서 반영되는 것을 확인할 수 있다.

 

 

//App.tsx

import React from 'react';

const App = () => {
    return (<div>핫리로딩</div>);
}

export default App;

 

저장하였더니 바로 반영이된다.

 

 

 

출처 : 슬랙 클론 코딩 zerocho
https://www.inflearn.com/course/클론코딩-실시간채팅