1년간 사내 프로젝트를 진행하면서 이미 개발 환경이 세팅된 상태에서 코드만 작성 하다 보니 환경 구성에 대한 지식이 부족하다고 느껴졌다. 그리고 React로 나만의 프로젝트를 만들고 싶다는 생각을 항상 해왔기 때문에 이번 기회에 환경 설정부터 하나씩 해보려고 한다.
보통 React 시작을 CRA를 사용해서 하는데, Typescript와 Webpack 설정을 직접 해보고 싶어서 생략했다.
개발 / 배포 용도로 두 가지 버전을 만들 수 있는데, 지금은 개발용부터!
기본 파일 구조
React + Typescript 설치
// 리액트 설치
npm install --save react react-dom
// 타입스크립트 설치
npm install --save @types/react @types/react-dom
ts-loader 설치
npm install -D ts-loader
tsconfig.json파일 생성 및 내용 작성
{
"compilerOptions": {
"outDir": "./dist",
"sourceMap": true,
"noImplicitAny": false,
"module": "commonjs",
"target": "es6",
"lib": ["es2015", "es2017", "dom"],
"removeComments": true,
"allowSyntheticDefaultImports": false,
"jsx": "react",
"allowJs": true,
"baseUrl": "./",
"paths": {
"src/*": ["src/*"]
}
},
"include": ["src"]
}
Webpack 설치
npm install webpack webpack-cli webpack-dev-server -D
플러그인 설치
npm install clean-webpack-plugin html-webpack-plugin -D
webpack.config.js 파일 생성 및 설정
const path = require("path");
const { CleanWebpackPlugin } = require("clean-webpack-plugin"); //추가
const HtmlWebpackPlugin = require("html-webpack-plugin"); //추가
module.exports = {
entry: "./src/index.tsx",
resolve: {
extensions: [".ts", ".tsx", ".js"],
},
output: {
path: path.resolve(__dirname, "dist"),
filename: "bundle.min.js",
},
module: {
rules: [
{
test: /\.(ts|tsx)$/,
use: "ts-loader",
exclude: /node_modules/,
},
],
},
plugins: [
new CleanWebpackPlugin(), // 웹팩 실행시마다 dist 폴더 정리
new HtmlWebpackPlugin({
//index.html 자동 생성되도록 template 옵션 설정
template: "./src/index.html",
}),
],
};
파일 내용 생성
- App.tsx
import * as React from "react";
function App() {
return <div>TEST</div>;
}
export default App;
- index.tsx
import * as React from "react";
import * as ReactDOM from "react-dom";
import App from "./App";
// index.tsx
ReactDOM.render(<App />, document.getElementById("root"));
- index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>TypeScript + React</title>
</head>
<body>
<div id="root"></div>
</body>
</html>
package.json에 스크립트 입력
"scripts": {
"start": "webpack-dev-server --mode development --open --hot",
"build": "webpack --mode development" //(production:배포용 모드 사용 가능)
},
여기까지가 React + Typescript + Webpack 기본 설정이다. 완전 기초적인 내용만 담았기 때문에 추가적인 구성은 프로젝트를 진행하면서 넣을 예정이다.