https://typescript-kr.github.io/pages/tutorials/React%20&%20Webpack.html
TypeScript 한글 문서
TypeScript 한글 번역 문서입니다
typescript-kr.github.io
https://www.typescriptlang.org/docs/handbook/react-&-webpack.html
React & Webpack · TypeScript
This guide will teach you how to wire up TypeScript with React and webpack. If you’re starting a brand new project, take a look at the React Quick Start guide first. Otherwise, we assume that you’re already using Node.js with npm. Lay out the project # Let
www.typescriptlang.org
Nest Js에 화면 react.js를 추가하고 싶지만 공식문서에는 이에 대한 내용이 없고
오직 MVC에 대한 내용만 있고 어떻게 통합해야 하는 지에 대한 설명은 없다.
찾아보자~
알짜배기 정리
프로젝트 배치
-
디렉토리 구조를 아래와 같이 만든다.
proj/
├─ dist/
└─ src/
└─ components/
-
타입스크립트 파일은 src 폴더에서 출발하여 타입스크립트 컴파일러를 실행 한 다음 웹팩을 거쳐 dist의 main.js 파일로 끝납니다.
-
참고로 웹팩은 dist 디렉토리를 생성 할 것 입니다.
프로젝트 초기화
-
위 폴더를 npm 패키지로 바꿀것입니다.
npm init -y
-
기본값으로 package.json 파일을 만듭니다.
의존성 설치
-
먼저 Webpack이 설치되어 있는지 확인해보세요.
npm install --save-dev webpack webpack-cli
-
Webpack은 코드와 선택적으로 모든 종속성을 단일 .js 파일로 묶는 도구입니다.
-
이제 선언 파일과 함께 React 및 React-DOM을 package.json 파일에 대한 종속성으로 추가하겠습니다.
npm install --save react react-dom
npm install --save-dev @types/react @types/react-dom
-
@types/ 접두사는 React 및 React-DOM에 대한 선언 파일도 가져오고 싶다는 것을 의미합니다.
-
일반적으로 "react"와 같은 경로를 가져 오면 react 패키지 내부를 살펴 봅니다. 그러나 모든 패키지가 선언 파일을 포함하는 것은 아니므로 TypeScript는 @types/react 패키지도 찾습니다.
-
우리는 나중에 이것에 대해 생각할 필요가 없다는 것을 알게 될 것입니다.
-
다음으로 ts-loader 및 source-map-loader에 개발 시간 종속성을 추가합니다.
npm install --save-dev typescript ts-loader source-map-loader
-
이 두 가지 의존성 모두 TypeScript와 웹팩을 함께 사용할 수 있습니다.
-
ts-loader는 Webpack이 TypeScript의 표준 구성 파일 인 tsconfig.json을 사용하여 TypeScript 코드를 컴파일하도록 도와줍니다.
-
source-map-loader는 TypeScript의 모든 소스 맵 출력을 사용하여 자체 소스 맵을 생성 할 때 웹팩에 알립니다.
-
이렇게하면 원본 TypeScript 소스 코드를 디버깅하는 것 처럼 최종 출력 파일을 디버깅 할 수 있습니다.
-
ts-loader는 typescript의 유일한 로더는 아닙니다.
-
개발 의존성(--save-dev)으로 TypeScript를 설치했습니다.
-
npm link typescript을 사용하여 TypeScript를 전역 복사본에 연결할 수도 있습니다.
-
전역으로 설치된 Typescript 패키지를 현재 프로젝트에 연결하는 심볼릭 링크를 만들어 사용가능하게함
-
그러나 이 방법은 일반적인 시나리오가 아닙니다.
-
파입스크립트 구성 파일 추가
-
TypeScript 파일을 함께 가져오고 싶을 것입니다. - 작성할 코드와 필요한 선언 파일 모두
-
이렇게하려면 입력 파일 목록과 모든 컴파일 설정을 포함하는 tsconfig.json을 만들어야합니다.
-
tsconfig.json이라는 프로젝트 루트에 새 파일을 작성하고 다음 내용으로 채우십시오.
{
"compilerOptions": {
"outDir": "./dist/",
"sourceMap": true,
"noImplicitAny": true,
"module": "commonjs",
"target": "es6",
"jsx": "react"
}
}
-
tsconfig.json 파일에 대한 자세한 내용은 여기를 참조하십시오.
일부 코드 작성
-
React를 사용하여 첫 번째 TypeScript 파일을 작성해 봅시다.
-
먼저 src/components에 Hello.tsx라는 파일을 만들고 다음을 작성하십시오.
//Hello.tsx
import * as React from "react";
export interface HelloProps { compiler: string; framework: string; }
export const Hello = (props: HelloProps) => <h1>Hello from {props.compiler} and {props.framework}!</h1>;
-
이 예제는 함수 컴포넌트를 사용하지만 예제를 조금 더 세련되게 만들 수 있습니다.
//Hello.tsx
import * as React from "react";
export interface HelloProps { compiler: string; framework: string; }
// 'HelloProps' describes the shape of props.
// State is never set so we use the '{}' type.
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")
);
-
Hello 컴포넌트를 index.tsx로 가져 왔습니다.
-
"react" 또는 "react-dom"과 달리 Hello.tsx에 대한 상대 경로를 사용했습니다. 이것은 중요합니다.
-
그렇지 않은 경우 TypeScript는 대신 node_modules 폴더를 살펴봅니다.
-
Hello 컴포넌트를 표시하려면 페이지가 필요합니다.
-
proj의 루트에 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>
-
node_modules 내에 파일이 포함되어 있습니다.
-
React 및 React-DOM의 npm 패키지에는 웹 페이지에 포함 할 수있는 독립형 .js 파일이 포함되어 있으며, 더 빠르게 이동하기 위해 직접 참조합니다.
-
이러한 파일을 다른 디렉토리로 복사하거나 CDN (Content Delivery Network)에서 호스팅하십시오.
-
Facebook은 CDN 호스트 버전의 React를 제공하며 여기에서 자세한 내용을 읽을 수 있습니다.
웹팩 구성 파일 작성
- 프로젝트 디렉토리의 루트에 webpack.config.js 파일을 작성하십시오.
module.exports = {
mode: "production",
// Enable sourcemaps for debugging webpack's output.
devtool: "source-map",
resolve: {
// Add '.ts' and '.tsx' as resolvable extensions.
extensions: [".ts", ".tsx"]
},
module: {
rules: [
{
test: /\.ts(x?)$/,
exclude: /node_modules/,
use: [
{
loader: "ts-loader"
}
]
},
// All output '.js' files will have any sourcemaps re-processed by 'source-map-loader'.
{
enforce: "pre",
test: /\.js$/,
loader: "source-map-loader"
}
]
},
// When importing a module whose path matches one of the following, just
// assume a corresponding global variable exists and use that instead.
// This is important because it allows us to avoid bundling all of our
// dependencies, which allows browsers to cache those libraries between builds.
externals: {
"react": "React",
"react-dom": "ReactDOM"
}
};
-
externals 필드에 대해 궁금 할 것 입니다.
-
컴파일 시간이 길어 지므로 모든 React를 동일한 파일로 묶지 않기를 원합니다.
-
브라우저는 일반적으로 라이브러리가 변경되지 않으면 라이브러리를 캐시 할 수 있습니다.
-
이상적으로 브라우저 내에서 React 모듈을 가져오기를 바라지만 대부분의 브라우저는 아직 모듈을 지원하지 않습니다.
-
대신 라이브러리는 전통적으로 jQuery 또는 _와 같은 단일 전역 변수를 사용하여 사용할 수있게되었습니다.
-
이것을“네임 스페이스 패턴”이라고 하며, 웹팩을 사용하면 이런 방식으로 작성된 라이브러리를 계속 활용할 수 있습니다.
-
"react": "React" 항목을 통해 webpack은 React 변수에서 "react" 로드를 가져 오기 위해 마법을 사용합니다.
-
여기서 웹팩 구성에 대해 자세히 알아볼 수 있습니다.
모든 것을 하나로 모으기
-
아래 명령어를 실행합니다.
npx webpack
-
이제 선호하는 브라우저에서 index.html을 열고 모든 것을 사용할 준비가되었습니다!
-
“Hello from TypeScript and React!”라는 페이지가 나타납니다.
'Javascript > Typescript' 카테고리의 다른 글
| 타입스크립트 핸드북 - 데코레이터 (0) | 2020.02.01 |
|---|---|
| 타입스크립트 핸드북 - 클래스 (0) | 2020.01.30 |
| 타입스크립트 핸드북 - 인터페이스 (0) | 2020.01.29 |
| 타입스크립트 핸드북 - 변수선언 (0) | 2020.01.29 |
| 타입스크립트 핸드북 - 기본 자료형 (0) | 2020.01.26 |
_김은찬
두번 다시는 꺾이지 않으리