진짜오늘 종일 CRA구축하는 거만 했네욤.. 계속 에러뜨고 이쥐랄 나서.. 힘들었습니다.
최대한 자세히 적으려고 했고.. 좋은 블로그.. 디테일한 설명들을 찾아서 포스팅해봅니다..
먼저 프로젝트가 될 디렉토리를 만들고,
npm init -y를 해준다.
npm init -y그러면 package.json 파일이 생기게 된다.
● 작업에 필요한 폴더 만들기
먼저 리액트 환경과 매우 비슷하게 만들 것이므로, src, public, 그리고 빌드가 되었을 때 파일이 저장될 dist 파일을 만든다.
mkdir src public dist- src : react 작업을 할 폴더
- public : 정적 파일이 위치할 폴더
- dist : 빌드한 작업물이 들어갈 폴더 → 배포란 뜻으로 distribute를 의미한다
다음 public 폴더로 이동해서 index.html 파일을 만들어준다.
cd public
touch index.html그리고 아래의 내용을 입력해준다.
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>Set React Development Environment without CRA</title>
</head>
<body>
<div id="root"></div>
</body>
</html>
● Babel 설치 하기
babel 이 필요한 이유는 다음과 같다.
최신 버전의 자바스크립트 문법은 브라우저가 이해하지 못하는 경우가 있다. 따라서 브라우저가 이해할 수 있는 문법으로 변환해주기 위해서 필요하다. 아래의 명령어를 통해 필요한 라이브러리를 설치한다.
npm i -D @babel/core @babel/preset-env @babel/preset-react- @babel/core : 바벨의 메인 패키지
- @babel/preset-env : ES6+ 코드를 이하 버전(ES5)으로 변환해주는 라이브러리
- @babel/preset-react : JSX 코드를 React.CreateElement 호출 코드로 변환해주는 것으로 아래와 같이 작동하는 것이다.
이제 설치한 파일을 사용하기 위해 babel의 환경을 설정할 파일을 만들어 준다.
디렉토리의 최상단에 만들어주는 것을 잊지말자.
touch .babelrc다음 .babelrc 파일을 아래와 같이 수정해주자.
.babelrc
{
"presets": ["@babel/preset-env", "@babel/preset-react"]
}
● Webpack 설치 하기
webpack 이 필요한 이유는 다음과 같다.
- 웹 애플리케이션을 구성하는 자원 모듈화
- 웹 개발 작업 자동화 도구로 이용
- 웹 애플리케이션의 빠른 로딩 속도와 높은 성능
아래의 명령어를 통해 필요 라이브러리와 플러그인을 설치한다.
npm i -D webpack webpack-cli webpack-dev-servernpm i -D style-loader css-loader babel-loader- webpack: 웹팩의 코어
- webpack-cli: 웹팩을 커맨드 라인에서 사용
- webpack-dev-server: 실시간 개발 서버 환경을 구동할 수 있게 해 줌
웹팩은 loader를 사용하여 다른 확장자를 가진 파일들을 번들링 한다.
- style-loader : 변환된 CSS 파일을 <style> 태그로 감싸서 삽입
- css-loader : CSS 파일을 자바스크립트가 이해할 수 있도록 변환
- babel-loader : JSX, ES6+ 문법을 트랜스파일링
필요한 플러그인들도 설치해준다.
npm i -D html-webpack-plugin clean-webpack-plugin @pmmmwh/react-refresh-webpack-plugin- html-webpack-plugin: script 태그를 사용하여 body에 모든 webpack 번들을 포함하는 HTML5 파일을 생성한다. HTML에 번들링 한 JS 파일을 삽입하고, HTML 파일을 번들링 된 결과물이 저장될 폴더에 옮겨준다. 여기서는 dist 폴더가 될 것이다.
- clean-webpack-plugin: 번들링을 할 때마다 이전 번들링 결과를 제거해준다.
- @pmmmwh/react-refresh-webpack-plugin : 코드의 변경된 사항을 바로 적용해준다.
이제 설치한 파일을 사용하기 위해 webpack의 환경을 설정할 파일을 만들어 준다.
touch webpack.config.js그리고 아래와 같이 작성한다.
const path = require('path');
//플러그인
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const RefreshWebpackPlugin = require('@pmmmwh/react-refresh-webpack-plugin');
module.exports ={
entry : {
index : './src/index.js'
},
resolve : {
extensions : ['.mjs', '.js', '.jsx', '.css'],
},
output : {
path : path.resolve(__dirname, 'dist'),
filename : '[name].bundle.js',
assetModuleFilename: 'images/[hash][ext][query]',
},
devtool : 'eval-cheap-source-map',
devServer : {
port : 8080,
static : {
publicPath : '/dist/',
},
hot : 'true',
open : true,
client : {
progress : true,
overlay : true,
},
},
module : {
rules : [
{
test : /\.(js|jsx)$/,
loader : 'babel-loader',
},
{
test : /\.css$/,
use : ['style-loader', 'css-loader'],
},
{
test : /\.jpe?g/,
type : 'asset/resource'
},
{
test : /\.png$/,
type : 'asset/resource'
},
{
test : /\.svg/,
type : 'asset/inline',
}
]
},
plugins : [
new RefreshWebpackPlugin(),
new CleanWebpackPlugin(),
new HtmlWebpackPlugin({
template : './public/index.html',
})
]
}그다음 Index.js 와 App.js를 채워준다.
index.js
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<React.StrictMode>
<App />
</React.StrictMode>
);App.js
import React from 'react';
const App = ()=>{
return(
<div className='App'>
<h1>Without CRA</h1>
<h2>대박</h2>
</div>
)
}
export default App;
그다음, package.json의 scripts를 만들어준다.
{
"description": "",
"scripts": {
"dev": "webpack server --mode development",
"build": "webpack --mode production"
},
"devDependencies": {
"@babel/core": "^7.21.4",
"@babel/preset-env": "^7.21.4",
"@babel/preset-react": "^7.18.6",
"@pmmmwh/react-refresh-webpack-plugin": "^0.5.10",
"babel-loader": "^9.1.2",
....그러고 npm run dev 해주면 끝!!!!!!!!!!!!!!!!
참고블로그
[Tech] CRA없이 react 개발 환경 구축하기
React 환경에서 개발을 진행하면서 CRA를 통해 보통 개발 환경을 구축해왔다. 하지만, '프론트엔드 개발자라면 빌드 시스템을 직접 구축할 수 있어야 하지 않을까?'라는 생각이 들었다. 또한 상황
aosjehdgus.tistory.com
🔨CRA없이 웹팩(Webpack)으로 개발 환경 구축 - Hyoeun Yeah!
CRA(create-react-app)를 이용해서 너무나 간단하게 리액트 프로젝트를 생성할 수 있었지만, CRA가 어떤 라이브러리들로 구성되어 있는지 이해하고, 나에게 필요한 라이브러리 만을 설치하여 최적화하
ye-yo.github.io
