Typescirpt + react + webpack 설정하기
타입스크립트에 + React + Webpack까지 프로젝트를 생성하고 빌드되는 환경을 설정하는 것을 공부하며 포스팅해보도록 하겠다.
TypeScript(타입스크립트)
자바스크립트는 동적 타입 var, let, const의 타입을 사용하여 자동으로 타입을 변환해준다.
타입스크립트는 정적 타입의 컴파일 언어이며 바벨을 통해 자바스크립트 코드로 변환된다.
이번 포스팅은 React 환경에 typescript 환경을 세팅하는 것을 포스팅하겠다.
CRA(Create-React-App)을 사용하지 않고 구성할 것이다.
1. 프로젝트를 사용할 디렉터리를 생성해 준다.
mkdir react-ts
2. vsCode를 열고 기본 프로젝트 뼈대를 구성해 준다.
dist 폴더와 src/components 폴더를 만들어준다.
타입스크립트에서 webpack으로 빌드한 파일은 dist 폴더에 main.js로 생길 것이고, 작성하는 컴포넌트들은 components 파일에 작성한다.
3. 프로젝트 초기화하기
vscode 터미널에서 다음 명령어로 npm 패키지로 바꾸어준다. 이 명령어를 입력하면 package.json 파일이 생길 것이다.
npm init -y
4. webpack을 설치해준다.
webpack과 webpack-cli를 설치해준다.
webpack은 여러 가지 우리가 만든 html. css. js 파일들을 하나의. js 파일로 묶어주는 모듈 번들러이다.
npm install --save-dev webpack webpack-cli
5. react react-dom을 설치해준다.
다음의 명령어로 react와 react-dom을 설치해준다. @types/ 명령어로 Typescirpt 의 패키지도 설치해준다.
npm install --save react react-dom
npm install --save-dev @types/react @types/react-dom
6. ts-loader 및 source-map-loader를 추가해준다.
npm install --save-dev typescript ts-loader source-map-loaderts-loader와 source-map-loader는 TypeScript와 Webpack을 같이 사용할 수 있게 해준다.
ts-loader는 Webpack이 tsconfig.json이라는 Typescript 설정 파일을 사용하여 컴파일할 수 있도록 도와준다.
source-map-loader는 Typescript의 소스 맵 출력을 사용해 고유한 소스 맵을 생성하게 될 때 Webpack에 알리게 된다.
이렇게 하면 기존의 TypeScript 소스코드를 디버깅하는 것처럼 최종 출력 파일을 디버깅할 수 있다.
7. tsconfig.json 추가 (Typescript 설정 파일)
tsconfig.json은 Typescript 설정 파일이다. 프로젝트 루트 위치에 tsconfig.json 파일을 추가하고, 다음의 내용을 추가한다.
//tsconfig.json
{
"compilerOptions": {
"outDir": "./dist/", /* 해당 디렉토리로 결과물을 보낸다.*/
"sourceMap": true, /* '.map' 파일 생성 여부. */
"noImplicitAny": true, /* 'any' 타입으로 구현된 표현식 혹은 정의 에러처리 여부 */
"module": "commonjs", /* 모듈을 위한 코드 생성 설정: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', 'es2020', or 'ESNext'. */
"target": "es6", /* 사용할 특정 ECMAScript 버전 설정: 'ES3' (기본), 'ES5', 'ES2015', 'ES2016', 'ES2017', 'ES2018', 'ES2019', 'ES2020', 혹은 'ESNEXT'. */
"jsx": "react" /* JSX 코드 생성 설정: 'preserve', 'react-native', 혹은 'react'. */
}
}설명은 주석으로 달아 놓았다.
해당 설정에 대해 더 많은 종류가 아래 사이트에서 볼 수 있다.
TSConfig Reference - Docs on every TSConfig option
From allowJs to useDefineForClassFields the TSConfig reference includes information about all of the active compiler flags setting up a TypeScript project.
www.typescriptlang.org
8. 컴포넌트 코드 작성하기
src/components 하위에 Hello.tsx 파일을 만들고 다음과 같이 작성한다.
.tsx 확장자는 컴포넌트를 사용할 때 사용하고, 그냥 TypeScript만 사용한다면 .ts 확장자를 사용하는 것을 추천한다.
Hello.tsx
import * as React from "react";
export interface HelloProps { compiler: string; framework: string; }
// 'HelloProps'는 props의 형태를 나타냅니다.
// state는 설정되지 않으므로, `{}` 타입을 사용합니다.
export class Hello extends React.Component<HelloProps, {}> {
render() {
return <h1>Hello from {this.props.compiler} and {this.props.framework}!</h1>;
}
}
src 하위에 index.tsx 파일을 생성한다.
index.tsx
import * as React from "react";
import * as ReactDOM from "react-dom";
import { Hello } from "./components/Hello";
ReactDOM.render(
<Hello compiler="TypeScript" framework="React" />,
document.getElementById("example")
);
index.tsx 파일이 Hello.tsx 파일을 import로 가져오는 것을 확인할 수 있다.
절대 경로가 아닌 상대 경로로 파일을 가져왔다는 것을 유의하자.
그렇지 않으면 Typescript는 node_modules 폴더를 탐색할 것이다.
9. index.html 작성하기
현재 프로젝트 루트 경로에 index.html을 추가해준다. 그리고 다음과 같이 작성한다.
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Hello React!</title>
</head>
<body>
<div id="example"></div>
<!-- Dependencies -->
<script src="./node_modules/react/umd/react.development.js"></script>
<script src="./node_modules/react-dom/umd/react-dom.development.js"></script>
<!-- Main -->
<script src="./dist/main.js"></script>
</body>
</html>
10. webpack.config.js 파일 생성하기
프로젝트 디렉터리에 webpack.config.js 파일을 생성하여 다음과 같이 작성한다.
webpack.config.js
module.exports = {
mode: "production",
// Webpack의 출력물에서 디버깅을 하기위해 소스 맵을 허용합니다.
devtool: "source-map",
resolve: {
// 확인 가능한 확장자로 '.ts' 와 '.tsx' 를 추가합니다.
extensions: [".ts", ".tsx"]
},
module: {
rules: [
{
test: /\.ts(x?)$/,
exclude: /node_modules/,
use: [
{
loader: "ts-loader"
}
]
},
// 모든 '.js' 출력 파일은 'source-map-loader'에서 다시 처리한 소스 맵이 있습니다.
{
enforce: "pre",
test: /\.js$/,
loader: "source-map-loader"
}
]
},
// 경로가 다음 중 하나와 일치하는 모듈을 가져올 때,
// 해당 전역 변수가 있다고 가정하고 사용합니다.
// 브라우저가 빌드간에 라이브러리를 캐시 할 수 있도록
// 모든 의존성을 묶지 않아도 되기 때문에 중요합니다.
externals: {
"react": "React",
"react-dom": "ReactDOM"
}
};webpack.config.js 는 webpack 명령어를 사용하여 프로젝트를 빌드할 때 사용하는 설정 파일이다.
각각의 개별 옵션 등이 들어가 있으며 webpack 공식문서에서 이 설정들의 역할을 볼 수 있다.
externals 같은 설정은 주석으로 쓰여 있듯 라이브러리를 캐시 하여 변경이 없다면 캐시 된 정보를 읽어 올 수 있다.
Concepts | webpack
webpack is a module bundler. Its main purpose is to bundle JavaScript files for usage in a browser, yet it is also capable of transforming, bundling, or packaging just about any resource or asset.
webpack.js.org
11. webpack 실행하기
npx webpack
webpack 명령어를 사용하여 실행한다.
vsCode에서 지원하는 Live Server extension으로 index.html을 열어보면 다음과 같은 화면이 잘 빌드되어 보인다.
'개발 > Typescript' 카테고리의 다른 글
| [Typescript] - 공식문서 보기 (Tooling 5 in minutes) (0) | 2022.10.27 |
|---|
댓글