[Photorage] 1-2. CRA 없이 React + TypeScript 개발환경 구축하기

최정우·2022년 5월 26일

Photorage

목록 보기

3/7

지난 글 1-1. React CRA가 최선이고 최고일까?에 이어지는 글입니다.

나는 CRA를 안쓰고 싶었으며, 빠른 빌드 도구인 esbuild 존재를 알았기 때문에 CRA 없이 React + TypeScript의 개발환경을 세팅하는 방법을 우선 알아보았다.

1. 패키지 매니저는 npm을 사용

yarn과 npm의 차이는 https://joshua1988.github.io/vue-camp/package-manager/npm-vs-yarn.html#yarn 참고하면 좋을 것 같다.

2. package.json 파일을 생성 및 설정

> npm init

{
  "name": "webpack-practice",
  "version": "1.0.0",
  "description": "",
  "main": "index.tsx",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}
// npm init 명령어는 package.json에 정보를 기록하고 프로젝트를 초기화한다

3. TypeScript를 설치(선택)

npm i typescript

4. react-dom을 설치

npm i react react-dom
npm i -D @types/react @types/react-dom

React와 React-dom은 js로 만들어져있고 타이핑을 제공하지 않는다.
따라서 React와 React-dom의 타입은 알지 못하기 때문에 외부 패키지를 사용한다.
TS로 만들어진 라이브러리는 따로 @types/____와 같은 타입을 받을 필요가 없다.

5. webpack을 설치

npm i webpack webpack-cli webpack-dev-server -D

-D는 개발용(webpack은 개발단계에서만 사용되기 때문에)
devServer: 실시간 개발 모드로 개발하는 중 변경사항이 프로젝트에 반영
TypeScript 코드를 원하는 JavaScript 코드로 컴파일하려면 ts-config.json이 필요하다.
ts-loader를 이용해 Typescript를 Javascript로 변환시켜 줘야한다.

6. 바벨(크로스 브라우징 이슈 해결)을 설치 및 설정

npm i -D babel-loader @babel/core 
npm i -D @babel/preset-env @babel/preset-react @babel/preset-typescript

module.exports = {
  presets: [
    "@babel/preset-react",
    "@babel/preset-env",
    "@babel/preset-typescript",
  ],
};

/*
목적에 맞게 여러가지 플러그인(코드 변환을 처리하는 모듈)을 세트로 모아놓은 것을 “프리셋”이라고 한다.
babel-loader : JSX 및 ES6+ 문법을 트랜스파일링
@babel/core : 바벨의 코어
@babel/preset-react : 리액트의 JSX를 트랜스파일링
@babel/preset-env : ES6+ 코드를 ES5로 트랜스파일링하고 브라우저 폴리필을 자동화
*/

7. tsconfig.json 설정하기

tsc --init

타입스크립트 컴파일러 옵션은 해당 문서를 참고하자

TS DOC | Intro to the TSConfig Reference

8. 필요한 플러그인 설치

npm i -D html-webpack-plugin clean-webpack-plugin

플러그인이란
- 로더가 파일 단위로 처리하는 반면 플러그인은 번들된 결과물을 처리한다.
- 번들된 자바스크립트를 난독화 한다거나 특정 텍스트를 추출하는 용도로 사용한다.
CleanWebpackPlugIn: 번들링을 할 때마다 이전 번들링 결과를 제거
HtmlWebpackPlugin: HTML 파일에 번들링 된 자바스크립트 파일을 삽입해주고 이 플러그인으로 빌드하면 HTML 파일로 아웃풋에 생성된다.

9. webpack.config.js 설정

const path = require('path');
const webpack = require('webpack');

module.exports = {
  mode: 'development', // 배포용: production
  devtool: 'eval', // 배포용: hidden-source-map   *그냥 source-map을 쓰면 개발자 도구에 소스코드가 노출이 된다.
  resolve: {
    extensions: ['.jsx', '.js', '.tsx', '.ts'], // 웹팩에서 처리해주는 확장자들
  },

  entry: {
    app: './app.tsx',
  },
  // modules, plugins에 적힌 처리과정을 client.tsx에 적용을 해서 최종적으로 app.js를 뽑아낸다(output).
  module: {
    rules: [
      // babel대신에 tsc 설정.
      {
        test: /\.tsx?$/, // tsx나 ts파일을 발견하면
        loader: 'ts-loader', // 해당 loader를 통해서 버전을 변환하겠다 는 뜻.
      },
    ],
  },
  plugins: [], // 현재는 필요없어진 옵션이라고 한다.
  output: {
    filename: '[name].js', // or '[name].js'
    path: path.join(__dirname, 'dist'), // npm webpack을 실행하면 client.tsx를 통해서 webpack처리 후 dist폴더가 생기고 그 안에 app.js가 들어있다.
  },
};

10. index.tsx(entry)와 App.tsx를 만들어줍시다

//index.tsx
import ReactDOM from "react-dom";
import App from "./App";

ReactDOM.render(<App />, document.getElementById("root"));

//App.tsx
const App: React.FC = () => {
    return (
        <div>hello world</div>
    )
};

export default App;

마지막으로 프로젝트를 시작하기 위해 스크립트를 수정해줍시다

"scripts": {
    "dev": "webpack-dev-server --mode=development --open --hot --progress",
    "build": "webpack --mode=production  --progress",
    "start": "webpack --mode=development  --progress"
},