[인프런 강의] zerocho Slack 클론 코딩 (4) - 기본 세팅 (ts + webpack 실행)

 

[인프런 강의] zerocho Slack 클론 코딩 (4) - 기본 세팅 (ts + webpack 실행)

 

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

이번 포스팅에는 ts + webpack을 세팅해보겠다.

Typescript(타입 스크립트)는 자바스크립트와 비슷하지만 정적 타입을 명시함으로써 코드의 품질, 타입 체킹, 높은 생산성을 지니는  프로그래밍 언어이다.

webpack은 이전 포스팅에서도 말했다시피 모든 파일(. css,. js. html 등)을 하나의 파일로 합치는 모듈 번들러이다.

 

 

 

1. aleacture/layouts/ 폴더를 만들고 App.tsx를 만들고 다음과 같이 작성한다.

 

App.tsx

 

import React from 'react';

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

export default App;

 

2. aleacture 루트 경로에 있는 client.tsx를 다음과 같이 변경해준다.

 

import React from 'react';
import { render } from 'react-dom';
import App from '@layouts/App';


//app 이란 id를 가지고 있는 html태그에 렌더링하겠다라는 의미이다.
render(<App /> , document.querySelector('#app'));

 

3. 현재 디렉터리를 aleacture로 변경해주고 webpack 명령어로 실행해준다.

 

//webpack 실행 명령어
npx webpack

만약 npx를 붙이지 않고 webpack 명령어로만 실행을 하고 싶다면 webpack을 전역으로 설치해주어야 한다.

//webpack 전역 설치 명령어 (-g)
npm i webpack -g

 

 

※ 만약 webpack이 깔려 있지 않다면 아래 명령어로,  webpack 부터 설치를 해주어야 한다.

//webpack 설치 명령어
npm i webpack

 

※ npx webpack 명령어로 실행을 하였는데 오류가 나면 aleacture/tsconfig.json에 다음과 같은 내용을 추가해준다.

 

npm i cross-env ts-node

 

//tsconfig.json
"ts-node": {
    "compilerOptions": {
      "module": "commonjs",
      "moduleResolution": "Node",
      "target": "es5",
      "esModuleInterop": true
    }
  }

 

 

4.  alecture/package.json 파일의 script  부분을 다음과 같이 변경하고 npm run build 하면 자동적으로 webpack이 실행된다.

 

//package.json

"scripts": {
    "dev": "webpack serve --env development",
    "build": "cross-env NODE_ENV=production webpack"
 },

NODE_ENV는 개발할 때 배포할 시 또는 개발 시의 환경에 대한 빌드 명령어를 지정해줄 수 있고, 원래는 리눅스 유닉스 기반에서만 작동하기 때문에 윈도우에서도 실행시키려면 cross-env를 붙여주어야 한다.

 

package.json 에 "script"에 넣어줌으로써 명령어를 간결하게 사용할 수 있다.

 

 

그리고 다음과 같은 명령어로 실행한다.

//빌드 실행 명령어

npm run build

 

 

---

오류

 

나는 npx webpack명령어를 실행하였더니 webpack-cli를 설치할지 물어보고 엔터를 쳤더니 다음과 같은 오류가 나왔다.

 

 

여러 가지 방법을 써보았다. 하지만 오류가 지속되어서 setting/ts 폴더를 가져와 npm i를 실행하였다.

그런데 한참을 헤맸다. 

저기서 찾을 수 없는 라이브러리를 설치도 해보고, 

되지 않아서 setting/ts 안에 있는 설정 파일들을 가져와서 실행해보아도 webpack build 또는 npm run build 되지 않았다.

 

내가 해본 방법들은 다음과 같다.

 

1. setting/ts 에서 설정 파일 가져와서 npm i --force  

2. npm outdated를 사용하여 npm 모듈 버전 최신화

 

하지만 이렇게 변경을 해도 되지가 않았다. 오류의 내용은 사용하지도 않는 파일들이 에러가 나는 것이었다.

그래서 webpack.config.ts 파일을 유심히 보다가 강의를 다시 재생하고 다음과 같이 주석 처리하였다.

 

//webpack.config.ts


import path from 'path';
// import ReactRefreshWebpackPlugin from '@pmmmwh/react-refresh-webpack-plugin';
import webpack, { Configuration as WebpackConfiguration } from "webpack";
import { Configuration as WebpackDevServerConfiguration } from "webpack-dev-server";

interface Configuration extends WebpackConfiguration {
  devServer?: WebpackDevServerConfiguration;
}

import ForkTsCheckerWebpackPlugin from 'fork-ts-checker-webpack-plugin';

const isDevelopment = process.env.NODE_ENV !== 'production';

const config: Configuration = {
  name: 'sleact',
  mode: isDevelopment ? 'development' : 'production',
  devtool: !isDevelopment ? 'hidden-source-map' : 'eval',
  resolve: {
    extensions: ['.js', '.jsx', '.ts', '.tsx', '.json'],
    alias: {
      '@hooks': path.resolve(__dirname, 'hooks'),
      '@components': path.resolve(__dirname, 'components'),
      '@layouts': path.resolve(__dirname, 'layouts'),
      '@pages': path.resolve(__dirname, 'pages'),
      '@utils': path.resolve(__dirname, 'utils'),
      '@typings': path.resolve(__dirname, 'typings'),
    },
  },
  entry: {
    app: './client',
  },
  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: {
            development: {
              plugins: [require.resolve('react-refresh/babel')],
            },
          },
        },
        exclude: path.join(__dirname, 'node_modules'),
      },
      {
        test: /\.css?$/,
        use: ['style-loader', 'css-loader'],
      },
    ],
  },
  plugins: [
    // new ForkTsCheckerWebpackPlugin({
    //   async: false,
    //   // eslint: {
    //   //   files: "./src/**/*",
    //   // },
    // }),
    new webpack.EnvironmentPlugin({ NODE_ENV: isDevelopment ? 'development' : 'production' }),
  ],
  output: {
    path: path.join(__dirname, 'dist'),
    filename: '[name].js',
    publicPath: '/dist/',
  },
  // devServer: {
  //   historyApiFallback: true, // react router
  //   port: 3090,
  //   devMiddleware: { publicPath: '/dist/' },
  //   static: { directory: path.resolve(__dirname) },
  // },
};

if (isDevelopment && config.plugins) {
//   config.plugins.push(new webpack.HotModuleReplacementPlugin());
//   config.plugins.push(new ReactRefreshWebpackPlugin());
}
if (!isDevelopment && config.plugins) {
}

export default config;

 

그랬더니 원활하게 파일 wepack 빌드가 수행되었다.

문제는 아마 webpack.config.ts의 설정 파일의 일정 부분이 아직 구현되기도 전의 파일을 불러내려고 해서 오류가 나고, 

빌드가 안되었던 것 같다. 

 

webpack빌드 완료 화면

 

 

 

 

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