CRA 없이 React 개발 환경 구축하기
- 일반적으로
CRA(Create React App)을 사용하게 되면, 개발환경 세팅 시간을 단축시켜 빠르게 프로젝트를 시작할 수 있다. 하지만 추가적으로 웹팩과 바벨 설정 및 변경하며 커스텀할때 어려움이 발생할 수 있다. 또한 리액트 개발자로서, 관련 툴을 직접 사용하여 CRA 환경을 세팅할 줄 알아야한다고 생각했기에 처음부터 세팅을 직접 해보았다.
초기 세팅
├── dist
├── public
│ └── index.html
├── src
└── index.tsx
- 위와 같이, 폴더 구조를 먼저 만들어준다. (CRA를 통해 프로젝트를 생성할 시 보게 되는 비슷한 구조이다.)
dist: 빌드 파일이 위치할 경로public: static 파일이 위치할 경로src: 프로젝트 메인 파일(ex> components)이 위치할 경로
yarn init -y
tsc --init
yarn init -y : node 모듈 설치를 위한 package.json 파일 생성(-y는 파일 성생시 shell에서 생성되는 모든 질문에 yes로 답하는 것을 뜻함)tsc --init: ts를 js로 어떻게 트랜스파일 할것인지에 대한 설정을 명시해주는 tsconfing.json 파일 생성
리액트 설정
- 리액트 모듈 설치
yarn add react react-dom
yarn add -D @types/react @types/react-dom
react: 리액트 사용을 위해 필요한 필수 모듈react-dom: DOM과 리액트를 연결하기 위해 필요한 모듈@types/react, @types/react-dom: ts 적용을 위해 필요한 모듈
바벨(babel) 설정
1. 바벨 관련 모듈(코어, 프리셋) 설치
yarn add -D @babel/core @babel/preset-env @babel/preset-react @babel/preset-typescript
@babel/core: 바벨을 사용하기 위핸 필수 모듈preset: 필요한 플러그인을 세트로 모아놓은 것을 뜻한다.
@babel/prest-env: ES6이상(혹은 최신)의 문법으로 작성된 JS 코드를 ES5 이하의 JS 코드로 트랜스파일하기 위한 모듈@babel/prest-react: JSX 문법으로 작성된 코드를 js로 트랜스파일하기 위한 모듈@babel/prest-typescript: ts 사용을 위해 필요한 모듈
2. root 경로에 babel.config.js 파일 생성 및 설정
// babel.config.js
module.exports = {
presets: [
"@babel/preset-env",
"@babel/preset-react",
"@babel/preset-typescript",
],
};
웹팩(Webpack) 설정
1. 웹팩 관련 모듈 설치
yarn add -D webpack webpack-cli webpack-dev-server
yarn add -D html-webpack-plugin clean-webpack-plugin
yarn add -D css-loader style-loader sass-loader file-loader ts-loader babel-loader
webpack: 웹팩을 사용하기 위한 필수 모듈webpack-cli: 웹팩을 commands로 설정을 가능케 하는 모듈webpack-dev-server: 개발 서버 구동을 가능케 하는 모듈html-webpack-plugin: 번들링(build)된 자바스크립트 파일을 index.html 파일에 삽입해주고, 번들링된 결과물이 저장될 폴더에 옮겨주는 모듈clean-webpack-plugin: 현재 빌드된 결과물 이전의 결과물을 제거하는 모듈loader: js파일 뿐만 아니라 style, image, file 등의 파일들을 모듈로 변환하여 처리할 수 있도록 도와준다.
babel-loader: webpack으로 번들링(build)을 할때에도 babel이 정상적으로 기능하도록 도와주는 로더이다.sass-loader: sass/scss 파일을 로드한 후 CSS 파일로 컴파일하는 로더이다.css-loader: css 파일을 모듈로 불러와 사용할 수 있게 하는 로더이다.style-loader: JS 코드로 변경된 style을 DOM에 추가해줌으로써 브라우저가 해석하도록 도와주는 로더이다.file-loader: 파일을 모듈로 사용할 수 있도록 도와주는 로더이다.ts-loader: ts를 js로 변환해주는 로더
2. root 경로에 webpack.confing.js 파일 생성 및 설정
const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const { CleanWebpackPlugin } = require("clean-webpack-plugin");
module.exports = {
entry: {
main: "/src/index.tsx", // tsx 기준이므로 ts-loader가 rules에 추가가 되어야함
},
output: {
filename: "bundle.js", // 번들링 결과물의 이름
path: path.resolve(__dirname, "./dist"), // 번들링된 결과물이 위치할 디렉토리
},
resolve: {
extensions: [".js", ".jsx", ".ts", ".tsx"], // build하고자 하는 파일들의 확장자
alias: {
"@css": path.resolve(__dirname + "/src/styles"), // 경로 alias 설정
"@components": path.resolve(__dirname + "/src/components"),
},
},
module: {
rules: [
{
test: /\.tsx?$/,
exclude: /node_modules/,
use: ["babel-loader", "ts-loader"], // 로더는 오른쪽에서 왼쪽 방향 순서대로 적용
},
{
test: /\.(sc|sa|c)ss$/, // 스타일 로더
use: ["style-loader", "css-loader", "sass-loader"],
},
{
test: /\.(png|jpg|jpeg|gif)$/i, // 파일 로더
loader: "file-loader",
},
],
},
plugins: [
new CleanWebpackPlugin(), // 이전 빌드 결과물 삭제
new HtmlWebpackPlugin({
// 번들링된 js 파일을 html 파일에 삽입 및 번들링 결과물 폴더로 옮김
template: "./public/index.html",
}),
],
devtool: "eval-cheap-source-map", // 어디에서 에러가 났는지 확인 가능
devServer: {
// 개발 단계에서, 반영 결과물을 즉각적으로 확인 가능
overlay: true, //에러의 결과를 브라우저에 보여주는 기능
historyApiFallback: true, // 리다이렉션(세부설정이 없을시 index.html로 자동 리다이렉션)
port: 3000, // 포트번호
hot: true, // 모듈의 변화된 부분만 자동으로 리로딩
publicPath: "/", // 브라우저를 통해 접근하는 기본 주소값
},
};
3. script 파일 command 지정
"scripts": {
"dev": "webpack-dev-server --progress --mode development",
"build": "webpack --progress --mode production"
}
Reference
- Webpack docs
- Babel docs
- CRA 없이 React환경 구축하기
- CRA 없이 React 개발 환경 구축하기
- CRA 없이 리액트 프로젝트 시작하기
- CRA 없이 리액트 환경 만들기
- 절대경로를 사용하여 css 적용하기
- 웹팩으로 리액트 시작하기
- React + TS boilerplate 제작기 1 - 환경 구성
- CRA를 사용하지 않고 React 초기 세팅하기