[001] 리액트, 타입스크립트, Webpack, Babel - 초기 설정

안녕하세요~ totally 개발자입니다.

 

리액트(React), 타입스크립트(Typescript), Webpack, Babel

 

초기 설정에 대해서 살펴보도록 하겠습니다. 오늘 살펴볼 리액트, 타입스크립트, 웹팩, 바벨의 용도는 아래와 같습니다.

 

리액트(React)	자바스크립트 라이브러리
타입스크립트(Typescript)	자바스크립트의 확장 언어로 자바스크립트에 타입 등을 부여할 수 있고 엄격한 문법을 사용하도록 지원
웹팩(Webpack)	애플리케이션을 위한 필요한 모든 파일(모듈)을 병합하여 하나의 번들(결과물)로 생성해주는 도구
바벨(Babel)	ES6 이상의 자바스크립트 문법을 ES5 형태 즉 모든 브라우저에서 지원할 수 있도록 컴파일해주는 도구

 

초기 세팅을 위해 기본적으로 VScode, yarn, node.js는 모두 설치되어 있다고 가정하겠습니다.

 

Step 1: 에디터를 열어서 폴더를 하나 만들어주고 원하는 프로젝트명을 입력해줍니다.

 

 

 

Step 2: build 폴더, src 폴더, webpack 폴더, .gitignore, .babelrc, tsconfig.json 파일을 각각 만들어줍니다.

 

Step 3: 터미널을 열어 ts_webpack_project 경로인지 확인하신다음 npm init을 입력해줍니다. package name에서만 조금 전 지정하셨던 폴더 이름으로 입력해주시고 나머지 부분은 엔터 키 입력으로 넘어가시면 됩니다.

 

 

Step 4: 터미널에 yarn add react react-dom을 입력합니다.

 

 

Step 5: 리액트에 사용한 타입스크립트를 위해 터미널에 yarn add -D typescript @types/react @types/react-dom을 입력해줍니다. 여기에서 -D는 --save-dev로 devDependencies에 나타나게 됩니다.

 

 

 

Step 6: Babel을 설치하기 위해 yarn add -D @babel/core @babel/preset-env @babel/preset-react @babel/preset-typescript를 입력합니다.

 

 

 

 

Step 7: 웹팩(webpack)을 설치하기 위해 yarn add -D webpack webpack-cli webpack-dev-server html-webpack-plugin를 입력해줍니다.

 

 

Step 8: yarn add -D babel-loader를 입력합니다.

 

 

 

Step 9: tsconfig.json 파일에 다음을 복사해줍니다.

 

{

  "compilerOptions": {

    "target": "ES5" /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017', 'ES2018', 'ES2019', 'ES2020', or 'ESNEXT'. */,

    "module": "ESNext" /* Specify module code generation: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', 'es2020', or 'ESNext'. */,

    "moduleResolution": "node" /* Specify module resolution strategy: 'node' (Node.js) or 'classic' (TypeScript pre-1.6). */ /* Type declaration files to be included in compilation. */,

    "lib": [

      "DOM",

      "ESNext"

    ] /* Specify library files to be included in the compilation. */,

    "jsx": "react-jsx" /* Specify JSX code generation: 'preserve', 'react-native', 'react' or 'react-jsx'. */,

    "noEmit": true /* Do not emit outputs. */,

    "isolatedModules": true /* Transpile each file as a separate module (similar to 'ts.transpileModule'). */,

    "esModuleInterop": true /* Enables emit interoperability between CommonJS and ES Modules via creation of namespace objects for all imports. Implies 'allowSyntheticDefaultImports'. */,

    "strict": true /* Enable all strict type-checking options. */,

    "skipLibCheck": true /* Skip type checking of declaration files. */,

    "forceConsistentCasingInFileNames": true /* Disallow inconsistently-cased references to the same file. */,

    "resolveJsonModule": true

    // "allowJs": true /* Allow javascript files to be compiled. Useful when migrating JS to TS */,

    // "checkJs": true /* Report errors in .js files. Works in tandem with allowJs. */,

  },

  "include": ["src/**/*"]

}

 

 

Step 10: webpack 폴더 안에 webpack.config.js 파일을 생성하시고 다음을 입력해줍니다.

 

 

const path = require('path')

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

 

module.exports = {

  mode: 'development',

  entry: path.resolve(__dirname, '..', './src/index.tsx'),

  resolve: {

    extensions: ['.tsx', '.ts', '.js'],

  },

  module: {

    rules: [

      {

        test: /\.(ts|js)x?$/,

        exclude: /node_modules/,

        use: [

          {

            loader: 'babel-loader',

          },

        ],

      },

    ],

  },

  output: {

    path: path.resolve(__dirname, '..', './build'),

    filename: 'bundle.js',

  },

  plugins: [

    new HtmlWebpackPlugin({

      template: path.resolve(__dirname, '..', './src/index.html'),

    }),

  ],

}

 

 

Step 11: .babelrc 파일에 다음을 복사해줍니다.

 

{

  "presets": [

    "@babel/preset-env",

    [

      "@babel/preset-react",

      {

        "runtime": "automatic"

      }

    ],

    "@babel/preset-typescript"

  ],

  "plugins": [

    [

      "@babel/plugin-transform-runtime",

      {

        "regenerator": true

      }

    ]

  ]

}

 

Step 12: App.tsx, index.html, index.tsx 파일을 각각 생성해줍니다.

 

App.tsx 

export const App = () => {
  return <h1>React</h1>;
}

 

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>React App</title>
</head>
<body>
  <div id="root"></div>
</body>
</html>

 

index.tsx

import ReactDOM from 'react-dom';
import { App } from './App';

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

 

 

이렇게 모두 입력해주시면 됩니다.

 

 

Step 13: yarn add -D @babel/plugin-transform-runtime 터미널에 입력해줍니다.

 

 

 

Step 14: package.json 파일을 열어서 7번째 줄처럼 "start": "webpack server --config webpack/webpack.config.js --open", 넣어주시면 됩니다.

 

 

 

Step 15: 터미널에 yarn start를 입력해서 다음처럼 확인되면 성공입니다.