
1. 패키지 생성
npm init
package name: (ret) ret
version: (1.0.0)
description:
entry point: (index.js)
test command:
git repository:
keywords:
author:
license: (ISC)
About to write to /ret/package.json:
{
"name": "ret",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC"
}
Is this OK? (yes)
2. 필요 플러그인 설치
npm i react react-dom
#React 설치
npm i -D webpack webpack-dev-server webpack-cli ts-loader @pmmmwh/react-refresh-webpack-plugin html-webpack-plugin
#WebPack 설치
npm i -D babel-loader @babel/core @babel/preset-react @babel/plugin-transform-runtime
#Babel 설치
sudo npm -g typescript
#Typescript 설치
npm i -D @babel/core @babel/preset-typescript @babel/preset-env @babel/cli --save-dev
#Typescript 바벨 변환하기 위해 필요한 패키지 설치
npm i -D eslint eslint-config-prettier eslint-plugin-import eslint-plugin-jsx-a11y
npm i -D eslint-plugin-prettier eslint-plugin-react eslint-plugin-react-hooks
npm i -D @typescript-eslint/parser @typescript-eslint/eslint-plugin
#eslint 설치
npm i -D prettier
#prettier 설치

3. Babel Config 생성
경로
Project/
├── public/
├── node_moudles/
├── src/
├── .babelrc
└── package.json
.babelrc
{
"presets": [
"@babel/preset-env",
[
"@babel/preset-react",
{
"runtime": "automatic"
}
],
"@babel/preset-typescript"
],
"plugins": [
[
"@babel/plugin-transform-runtime",
{
"regenerator": true
}
]
]
}

4. webpack
Project/
├── public/
├── node_moudles/
├── src/
├── .babelrc
├── webpack.common.js
├── webpack.dev.js
├── webpack.prod.js
└── package.json
- webpack.common.js
공통 설정을 정의하는 파일로, 다양한 환경에서 공유되는 설정을 관리하며 주로 로더, 플러그인, 모듈 규칙 등이 이 파일에 포함될 수 있음
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: './src/index.tsx',
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'build')
},
resolve: {
extensions: ['.js', '.ts', '.tsx'],
},
module: {
rules: [
{
test: /\.(ts|js)x?$/,
exclude: /node_modules/,
use: [
{
loader: 'babel-loader',
},
],
},
{
test: /\.scss$/,
use: ['style-loader', 'css-loader', 'sass-loader'],
},
{
test: /\.(?:ico|gif|png|jpg|jpeg)$/i,
type: 'asset/resource',
},
{
test: /\.(woff(2)?|eot|ttf|otf)$/,
type: 'asset/inline',
},
{
test: /\.svg$/,
type: 'javascript/auto',
use: ['@svgr/webpack'],
},
],
},
plugins: [
new HtmlWebpackPlugin({
template: path.resolve(__dirname, './public/index.html'),
}),
],
devServer: {
port: 3000, // 포트 번호 변경
hot: true, // HMR 기능 ON
historyApiFallback: true, //url 안될경우
}
};
- webpack.dev.js
개발 환경을 위한 설정 파일로, 개발 중에 사용되는 설정을 정의합니다. 주로 개발 서버 설정, 소스 맵, 개발용 플러그인 등이 이 파일에 추가될 수 있습니다. webpack.common.js 파일을 확장하여 필요한 설정을 추가합니다.
const { merge } = require('webpack-merge');
const common = require('./webpack.common');
const ReactRefreshWebpackPlugin = require('@pmmmwh/react-refresh-webpack-plugin');
module.exports = merge(common, {
mode: 'development',
devServer: {
open: true,
},
devtool: 'eval-source-map',
plugins: [new ReactRefreshWebpackPlugin()],
});
- webpack.prod.js
프로덕션 환경을 위한 설정 파일로, 실제 배포에 사용되는 설정을 정의합니다. 주로 최적화, 미니파이케이션, 프로덕션용 플러그인 등이 이 파일에 추가될 수 있습니다. 마찬가지로 webpack.common.js 파일을 확장하여 필요한 설정을 추가합니다.
const { merge } = require('webpack-merge');
const common = require('./webpack.common');
module.exports = merge(common, {
mode: 'production',
devtool: false,
});

5. TypeScript
- 경로
Project/
├── public/
├── node_moudles/
├── src/
├── .babelrc
├── webpack.common.js
├── webpack.dev.js
├── webpack.prod.js
├── package.json
└── tsconfig.json
- 파일명 : tsconfig.json
{
"compilerOptions": {
"target": "es6",
"baseUrl": ".",
"lib": ["dom", "dom.iterable", "esnext"],
"allowJs": true,
"skipLibCheck": true,
"esModuleInterop": true,
"allowSyntheticDefaultImports": true,
"strict": true,
"forceConsistentCasingInFileNames": true,
"noFallthroughCasesInSwitch": true,
"module": "esnext",
"moduleResolution": "node",
"resolveJsonModule": true,
"isolatedModules": true,
"noEmit": true,
"jsx": "react-jsx"
},
}

6. Eslint
- 경로
Project/
├── public/
├── node_moudles/
├── src/
├── .babelrc
├── webpack.common.js
├── webpack.dev.js
├── webpack.prod.js
├── package.json
├── tsconfig.json
└── .eslintrc.js
- 파일명 : .eslintrc.js
module.exports = {
parser: '@typescript-eslint/parser',
parserOptions: {
ecmaVersion: 'latest',
sourceType: 'module',
ecmaFeatures: {
tsx: true,
},
},
settings: {
react: {
version: 'detect',
},
},
extends: [
'plugin:react/recommended',
'plugin:react-hooks/recommended',
'plugin:@typescript-eslint/recommended',
'plugin:import/errors',
'plugin:import/warnings',
'plugin:import/typescript',
'plugin:jsx-a11y/recommended',
'prettier',
'plugin:prettier/recommended',
],
rules: {
'no-unused-vars': 'off',
'react/prop-types': 'off',
'react/jsx-uses-react': 'off',
'react/react-in-jsx-scope': 'off',
'@typescript-eslint/explicit-module-boundary-types': 'off',
'@typescript-eslint/no-unused-vars': ['error'],
'@typescript-eslint/no-var-requires': 'off',
},
};

7. Prettier
- 경로
Project/
├── public/
├── node_moudles/
├── src/
├── .babelrc
├── webpack.common.js
├── webpack.dev.js
├── webpack.prod.js
├── package.json
├── tsconfig.json
├── .eslintrc.js
└── .prettierrc.js
- 파일명 : .prettierrc.js
module.exports = { singleQuote: true, trailingComma: 'all', printWidth: 100,};
8. package.json 설정
-아래 내용 추가
"scripts": {
"start": "webpack serve --config webpack.dev.js --node-env development",
"start:build": "webpack --config webpack.prod.js --node-env production && cd build && npx serve",
"build": "webpack --config webpack.prod.js --node-env production",
"lint": "eslint --fix \"./src/**/*.{js,jsx,ts,tsx,json}\"",
"format": "prettier --write \"./src/**/*.{js,jsx,ts,tsx,json,md}\"",
"serve": "npx serve build"
},
9.index.html / index.tsx
Project/
├── public/
└── index.html
├── node_moudles/
├── src/
└── App.tsx
└── index.tsx
├── .babelrc
├── webpack.common.js
├── webpack.dev.js
├── webpack.prod.js
├── package.json
├── tsconfig.json
├── .eslintrc.js
└── .prettierrc.js
index.html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Ret</title>
</head>
<body>
<div id="root"></div>
</body>
</html>
index.tsx
import React from 'react';
import { createRoot } from 'react-dom'; // createRoot 추가
import App from './App';
const rootElement = document.getElementById('root');
createRoot(rootElement).render(<App />);
App.tsx
const App: React.FC = () => {
return (
<div>
<h1>Hello React</h1>
<a href="https://ret01.tistory.com">example.</a>
</div>
);
};
export default App;
위에 순서대로 하면 생성 완료
- 실행 방법
1. npm run start
- React 기본 실행(컴파일 해서 소스 확인)
2. npm run build
- React 전체 빌드 dist 폴더에 생성합니다.
3. npm run lint
- 소스 Lint 정적 분석
소스코드를 정적으로 분석하여 코드 스타일 규칙을 검사하고 설정값과 맞지 않는 부분을 식별
잠재적인 버그 오류패턴 검사하여 문제 있는 부분을 색출
설정된 규칙에 따라 경고나 에러메세지 출력하는 기능
4. npm run format
- 소스 prettier 코드 포맷팅
.prettierrc에 설정된 옵션값으로 들여쓰기, 공백, 줄 바꿈 등 스타일 규칙을 적용하여 코드를 일관되게
변경하는 기능 자동으로 코드를 정리하는 기능
5. npm run serve
dist폴더에 빌드한 index.html 파일을 server 모드로 호스팅 시켜보는 모드