React CRA를 이용하지 않고 프로젝트 생성(2)
React CRA를 이용하지 않고 프로젝트 생성(1)에 이어서 추가로 Typescript를 사용 할 수 있게 구성해 보겠습니다.
타입스크립 관련 모듈을 설치 합니다.
// 타입스크립트를 사용하기 위한 기본 모듈
npm i -g typescript
or
npm i -D typescript
npm i -D @types/react @types/react-dom //리액트에서 사용할 타입 모듈
npm i -D ts-loader // 웹팩에서 타입스크립트 사용하기 위한 모듈
ts-loader는 tsconfig.json파일은 참고해서 동작하므로
tsconfig.json파일은 생성해 줍니다.
기본 tsconfig.json 생성
tsc --init // 글로벌 설치시
or
npx tsc --init // 로컬 설치시
tsconfig 환경을 아래와 같이 설정해준다.
{ "compilerOptions": { "target": "es6", // 자바스크립트 버전 es6=es2015와 같고 현재 es2021까지 지원합니다. "module": "commonjs", // 어떤모듈로 생성할지 지정 "rootDir": "./src", // 소스파일 위치 "outDir": "./dist", // 배포파일 생성 위치 "jsx": "react", // jsx 컴파일 방법 지정 (preserve, react, react-native) "moduleResolution": "node", // 모듈 해성방법 지정 (classic, node) "esModuleInterop": true, // es6와 commonjs간 모듈 호환성을 위해 true로 설정한다. "forceConsistentCasingInFileNames": true, // 대소문자를 정확히 구별할지 강제 "strict": true, // 타입 체킹 동작 활성 "skipLibCheck": true, // 모든 선언 파일 (.d.ts)의 타입 체킹을 스킵하도록 설정 "sourceMap": true, // map파일 생성 여부 "noImplicitAny": true, // <any> 타입을 허가하지 않음 }, "exclude": ["node_modules"], "typeRoots": ["node_modules/@types"], //타입 스크립트가 정의되 있는 type을 찾는 위치 include 위치에 있는 .d.ts 파일은 자동으로 인식되므로 추가할 필요 없음 "include": ["src/**/*"] // 티입 추가 위치 }
기존 webpack.config.js 파일을 아래와 같이 수정한다.
const fs = require('fs');
const path = require('path');
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
// 번들 파일 생성 위치
const bundlePath = path.resolve(__dirname, 'dist/');
const jsxRegex = /\.(js|jsx)$/; // js, jsx regex
const tsxRegex = /\.(ts|tsx)$/; // ts, tsx regex
// /\.ts(x?)$/,
module.exports = (_env, argv) => {
let entryPoints = {
main: {
path: './src/index.tsx',
outputHtml: 'main.html',
build: true
},
config: {
path: './src/config.tsx',
outputHtml: 'config.html',
build: false
}
};
let entry = {};
// 웹팩 플러그인 추가 구성
let plugins = [new webpack.HotModuleReplacementPlugin()];
Object.entries(entryPoints).map(([key, value]) => {
if (value.build) {
entry[key] = value.path;
if (argv.mode === 'production') {
plugins.push(
new HtmlWebpackPlugin({
inject: true,
chunks: [key],
template: './public/template.html',
filename: value.outputHtml
})
);
}
}
return null;
});
let config = {
entry,
optimization: {
minimize: true // 불필요한 코드 최적화
},
devtool: 'source-map', // Webpack의 출력물에서 디버깅을 하기위해 소스 맵을 허용합니다.
module: {
rules: [
{
test: tsxRegex,
exclude: /(node_modules|bower_components)/,
use: [
{
loader: 'ts-loader'
}
]
},
{
// test: /\.(js|jsx)$/,
test: jsxRegex,
exclude: /(node_modules|bower_components)/,
use: {
loader: 'babel-loader',
options: {
presets: [
'@babel/preset-env',
'@babel/preset-react'
],
plugins: []
}
}
},
{
test: /\.css$/,
use: ['style-loader', 'css-loader']
},
{
test: /\.(jpe?g|png|gif|svg)$/i,
loader: 'file-loader',
options: {
name: 'img/[name].[ext]'
}
},
// 모든 '.js' 출력 파일은 'source-map-loader'에서 다시 처리한 소스 맵이 있습니다.
{
enforce: 'pre',
test: /\.js$/,
loader: 'source-map-loader'
}
]
},
resolve: { extensions: ['*', '.js', '.jsx', '.ts', '.tsx'] },
output: {
filename: '[name].js',
path: bundlePath
},
plugins
};
if (argv.mode === 'development') {
config.devServer = {
static: './public',
host: 'localhost',
// host: '192.168.0.242',
// host: '0.0.0.0',
port: 3008,
historyApiFallback: {
index: 'index.html'
},
hot: true
// allowedHosts: ['com.arenacast.io'],
};
config.performance = {
hints: false,
maxEntrypointSize: 512000,
maxAssetSize: 512000
};
config.output = {
// publicPath: "/",
path: path.resolve(__dirname, './dist'),
filename: '[name].js'
};
}
return config;
};
rules에 ts-loader 추가
resolve - extensions 에 .ts, .tsx 확장자 추가
타입스크립트로 index 모듈을 작성 한다.
index.tsx
import * as React from 'react';
// import * as ReactDOM from 'react-dom';
import * as ReactDom from 'react-dom/client';
import { Hello } from './components/hello';
const container = document.getElementById('example');
if (!container) throw new Error('Failed to find the root element'); // react18 에서 typescript지원부분 오류로 인한 에러 type업데이트 될때 까지 해당 코드를 사용한다.
// react18에서는 render가 createRoot로 변경
ReactDom.createRoot(container).render(
<React.StrictMode>
<Hello compiler="TypeScript" framework="React" />
</React.StrictMode>
);
react18로 업데이트 되면서
몇가지 변경점이 생겼다
react-dom > react-dom/client로 변경
ReactDom.render > ReactDom.createRoot(container).render 로 변경
// react18 에서 typescript지원부분 오류로 인한 에러 type업데이트 될때 까지 해당 코드를 사용한다.
if (!container) throw new Error('Failed to find the root element');
실행해보자
npm run start
by Kazel
Author And Source
이 문제에 관하여(React CRA를 이용하지 않고 프로젝트 생성(2)), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@arenacast/React-CRA2저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)