익명의 개발노트

[react] typescript 수동셋팅하기 본문

코딩일기/TIL

[react] typescript 수동셋팅하기

캡틴.JS 2021. 3. 5. 20:49
반응형

CRA로 손쉽게 설치 할 수 있지만, 수동으로 설치를 진행해보고자 한다.

1. 수동 설치 이유

 1) 프로젝트 규모가 커지면 eject 해야하는 경우가 발생하는 경우가 생김

 2) CRA로 설치하는 것보다 작업하면서 필요한 부분을 추가해 나가는 것이 나중에 빌드시 시간 감소에 유리하다.

2. 수동셋팅방법

  1) npm  설정하기

npm init

 2) npm package 추가

//웹팩설치
npm install --save-dev webpack webpack-dev-server webpack-cli

//바벨설치
npm install --save-dev babel-loader @babel/core @babel/preset-env @babel/preset-react babel-preset-es2015

//리액트설치
npm install --save react react-dom

//타입스크립트 설치
npm install --save @types/react @types/react-dom

 3) root 디렉토리에 webpack.config.js 설정

   (1) root 디렉토리에 webpack.config.js 를 생성한다.

module.exports = { 
    entry: [ 
        './src/index.tsx' 
    ], 
    output: { 
        filename: "bundle.js", 
        path: __dirname + "/dist", 
    }, 
    module: { 
        rules: [ 
            { 
                test: /\.(js|jsx|ts|tsx)$/, 
                exclude: /node_modules/, 
                use: ['babel-loader'] } 
        ], 
    }, 
    resolve: { 
        extensions: ['*', '.js', '.jsx', '.ts', '.tsx'] 
    },
};

 4) root 디렉토리에  tsconfig.json 설정하기

 

{
    "compilerOptions": {
        "outDir": "./dist/",
        "sourceMap": true,
        "noImplicitAny": true,
        "module": "commonjs",
        "target": "es2017",
        "jsx":"react",
    },
    "include": [
        "./src/**/*"
    ]
}

 5) root 디렉토리에 .babelrc 설정하기

{
    "presets": [
        "@babel/preset-env",
        "@babel/preset-react",
        "@babel/preset-typescript",
    ]
}

6) root 디렉토리에 src 폴더를 생성하고 index.tsx 추가하기

1) app.tsx를 만들고, index.tsx를 만든 후 연결해도 되지만, 한번에 사용하기 위해 index.tsx만 생성

import * as React from "react";
import * as ReactDOM from "react-dom";

const Component: React.FunctionComponent<{ name: string}> = ({
    children,
    name
}) => <div title={name}>{children}</div>

class Root extends React.Component {
    render() {
        return (
            <div>
                <Component name={'암거나'}>
                   테스트
                </Component>
            </div>
        )
    }
}

ReactDOM.render(<Root/>, document.getElementById('root'));

7) root 디렉토리에 public 폴더를 만든 후 index.html, favicon.ico 를 만든다.

//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 id="root"></div>
    <script src="./bundle.js"></script>
</body>
</html>

script 태그에 bundle.js 를 사용한 이유 : ko.javascript.info/modules-intro

 

모듈 소개

 

ko.javascript.info

8) package.json에 script에 start 추가하기

{
  "name": "frontend",
  "version": "1.0.0",
  "description": "",
  "main": "index.tsx",
  "scripts": {
    "start": "webpack-dev-server --config ./webpack.config.js --mode development",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@babel/core": "^7.13.8",
    "@babel/preset-env": "^7.13.9",
    "@babel/preset-react": "^7.12.13",
    "@babel/preset-typescript": "^7.13.0",
    "babel-loader": "^8.2.2",
    "babel-preset-es2015": "^6.24.1",
    "html-webpack-plugin": "^4.5.2",
    "webpack": "^4.44.1",
    "webpack-cli": "^3.3.12",
    "webpack-dev-server": "^3.11.0"
  },
  "dependencies": {
    "@types/react": "^17.0.2",
    "@types/react-dom": "^17.0.1",
    "react": "^17.0.1",
    "react-dom": "^17.0.1"
  }
}

 

9) html을 public 폴더 밑으로 넣었으므로, 웹팩에다가 경로를 설정해주어야 한다.

    (1) 먼저 html-webpack-plugin을 설치한다.

//웹팩4 버전
npm i --save-dev html-webpack-plugin@4

//웹팩5 버전
npm i --save-dev html-webpack-plugin

10) webpack.config.js 파일에 plugin 추가

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

module.exports = { 
    entry: [ 
        './src/index.tsx' 
    ], 
    output: { 
        filename: "bundle.js", 
        path: __dirname + "/dist", 
    }, 
    module: { 
        rules: [ 
            { 
                test: /\.(js|jsx|ts|tsx)$/, 
                exclude: /node_modules/, 
                use: ['babel-loader'] } 
        ], 
    }, 
    resolve: { 
        extensions: ['*', '.js', '.jsx', '.ts', '.tsx'] 
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: 'public/index.html',
            favicon: 'public/favicon.ico'
        })
    ] 
};

11) npm start 후 localhost:8080 에서 확인가능

   (1) 혹시나 @babel/preset-tyscript 모듈이 없다고 하면 설치해주면 된다.

npm install --save-dev @babel/preset-typescript

 

반응형

'코딩일기 > TIL' 카테고리의 다른 글

[Browser] async, defer 차이  (0) 2021.09.03
[Browser] window load 특징  (0) 2021.09.03
[node] 웹소켓 특징  (0) 2020.10.21
[vue.js] production mode에서 console.log 제거하기  (0) 2020.07.22
[vue.js] debounce를 이용한 검색기능 구현  (0) 2020.07.14
'코딩일기/TIL' Related Articles more
Comments