-
[2019.07.11] React + TypeScript + Webpack 환경 설정개발 블로깅/React 개념 2019. 7. 11. 09:48
React의 보일러 플레이트 CRA를 사용한 것이 아닌, 직접 웹팩 세팅에 TypeScript를 적용한 환경설정을 해보자.
# 프로젝트 디렉토리 생성
$ mkdir React_TypeScript $ cd React_TypeScript
프로젝트로 사용할 디렉토리를 생성하고 해당 디렉토리로 이동한다.
# packge.json 생성
$ npm init -y
해당 프로젝트의 디렉토리에 사용할 packge.json을 생성한다.
# webpack 세팅
$ npm i -D webpack webpack-cli
프로젝트에 사용할 webpack을 개발용 패키지로 설치한다.
$ touch webpack.config.js
이후에 webpack 실행에 관한 설정을 하는 webpack.config.js 파일을 root 경로에 생성한다.
webpack.config.js파일에 아래와 같이 입력한다.
const path = require('path'); module.exports = { entry: './src/index.tsx', output: { path: path.join(__dirname, '/dist'), filename: 'bundle.min.js' } }
- entry : 연결되어 있는 각 파일 중, 제일 처음으로 시작되는 최상위 파일. 해당 최상위 파일부터 각 각 하위로 따라 내려가며 번들화 작업을 한다.
- output: 번들화 된 파일을 export 할 경로와 파일명.
위의 설정에는, 'src/index.tsx'의 파일이 running 시 동작되는 것 중 제일 처음으로 동작하는 최상위 파일이며, 해당 번들화 된 파일은 루트 경로의 '/dist/bundle.min.js'파일로 추출된다.
# TypeScript 설치
$ npm i typescript awesome-typescript-loader -D
위 명령어를 보면 typescript 뿐 아니라, 'awesome-typescript-loader'라는 것을 함께 설치할 것을 알 수 있다.
webpack은 일반적인 javascript 코드만 이해하므로, loader를 사용하면 다양한 유형의 파일을 발견하고 처리할 수 있다.
Typescript파일 번들링 작업 모듈은 일반적으로 'ts-loader'와 'awesome-typescript-loader'가 있는데, 여기서는 'awesome-typescript-loader''를 쓰도록 하겠다.
# tsconfig.json으로 typescript 사용 환경 설정하기
root 경로에 tsconfig.json 파일을 하나 생성하고 아래와 같이 추가한다.
{ "compilerOptions": { "sourceMap": true, "noImplicitAny": false, "module": "commonjs", "target": "es6", "lib": [ "es2015", "es2017", "dom" ], "removeComments": true, "allowSyntheticDefaultImports": false, "jsx": "react", "allowJs": true, "baseUrl": "./", "paths": { "components/*": [ "src/components/*" ], } } }
# webpack.config.js에서 모듈 설정하기
그럼 해당 모듈을 webpack.config.js에서 추가로 설정한다.
const path = require('path'); module.exports = { entry: './src/index.tsx', resolve: { extensions: ['.ts', '.tsx', '.js'] }, output: { path: path.join(__dirname, '/dist'), filename: 'bundle.min.js' }, module: { rules: [ { test: /\.tsx?$/, loader: 'awesome-typescript-loader' } ] } }
# React 설치
$ npm i react react-dom @types/react @types/react-dom
설치한 모듈 중 react, react-dom 뿐 아니라, @types/react, @types/react-dom을 설치한 것을 알 수 있다.
이는 typescript 방식으로 사용할 수 있도록 호환성을 제공해주는 모듈이다.
#간단한 react component 생성
root경로에 src디렉토리를 하나 생성 후, 변수의 타입을 지정해 줄 수 있는 interface를 생성한다.
'/src/PageInterface.ts'
export default interface Page { color: string; }
'/src/components/App.tsx'
import * as React from 'react'; import PageInterface from '../PageInterface'; class App extends React.Component<PageInterface, {}> { render() { return (<div> <h1>Welcome to React with Typescript</h1> <p>The color of this page is: {this.props.color}</p> </div> ); } } export default App;
'/src/index.tsx'
import * as React from 'react'; import * as ReactDOM from 'react-dom'; import App from './components/App'; ReactDOM.render ( <App color="Blue" />, document.getElementById("root") );
'src/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>
# HTML Plugin 추가
webpack의 번들링 작업이 끝난 후 나온 html파일이 자동으로 bundle.min.js파일을 참조하는 코드를 추가하도록 도와주는 플러그인을 설치한다.
$ npm i html-webpack-plugin -D
webpack.config.js 파일에 해당 플러그인 파일을 적용한다.
const path = require('path'); const HtmlWebpackPlugin = require('html-webpack-plugin'); module.exports = { entry: './src/index.tsx', resolve: { extensions: ['.ts', '.tsx', '.js'] }, output: { path: path.join(__dirname, '/dist'), filename: 'bundle.min.js' }, module: { rules: [ { test: /\.tsx?$/, loader: 'awesome-typescript-loader' } ] }, plugins: [ new HtmlWebpackPlugin({ template: './src/index.html' }) ] }
# packge.json의 script 명령어 추가
"scripts": { "start": "webpack --mode development", "build": "webpack --mode production" }
npm start로 실행시키게 되면, webpack 명령어에 의해 webpack.config.js파일에 설정한 방식대로 동작하게 되어, dist디렉토리 안에 번들링 된 파일이 추출된다.
# typescript파일을 번들링 시키기
$ npm start
스크립트 명령어를 실행시킨다.
그러면 번들링 작업이 실행되면서, 번들링 작업 후에 dist 디렉토리와 번들링된 파일이 생성된 것을 확인할 수 있다.
# 개발용 환경 구축
개발중이면 이러한 번들작업과 웹브라우저 실행을 일일이 하게되면 매우 귀찮다. 그래서 실시간 번들링 작업과 자동 새로고침이 되는 개발용 환경을 구축해보자.
webpack 개발용 서버 모듈을 설치한다.
npm i webpack-dev-server --D
그리고 package.json의 스크립트 명령어를 아래와 같이 변경한다.
"scripts": { "start": "webpack-dev-server --mode development --open --hot", "build": "webpack --mode production" }
npm start 명렁어에서, webpack 개발용 서버로 실행을 시킨다는 것을 알 수 있다.
- --open : default로 브라우저를 열어주는 옵션
- --hot : 개발 중 변경된 사항을 자동으로 번들링 작업
반응형'개발 블로깅 > React 개념' 카테고리의 다른 글
[2019.08.11] Mobx-react 기본 개념 및 사용법 2 (살짝 어려움 주의) (2) 2019.08.12 [2019.08.11] Mobx-React 개념 및 사용법 1 (살짝 어려움 주의) (4) 2019.08.11 [2019.05.08] react-redux 사용하기 (매우 어려움 주의...) (3) 2019.05.08 [2019.04.15] React의 개념 - LifeCycle API (0) 2019.04.15 [2019.04.15] React의 개념 - state (0) 2019.04.15