지난 포스팅에서 CRA를 이용하여 쉽고 빠르게 리액트 개발환경을 구축해보았다.
[React] CRA로 리액트 시작하기 - 설치부터 설정까지
왕초보의 구구절절한 리액트 개발을 시작합니다. Create React App(CRA)는 리액트를 배우기에 간편한 환경이다 - (리액트 문서 참조) CRA을 이용하면 웹팩이나 바벨같은 복잡한 설정을 몰라도 리액트를
spectrum20.tistory.com
CRA를 사용하면 쉽게 리액트 환경을 만들 수 있지만, 그만큼 불필요한 패키지들이 잔뜩 설치되기 때문에 다소 무겁다는 단점이 있다.
CRA로도 리액트를 연습하고 개인 프로젝트를 진행하기에는 무리가 없지만(오히려 좋아),
그래도 알아는 보자는 차원에서 웹팩을 사용한 리액트 환경 구축을 시작해보겠습니다~
webpack은 모던 JavaScript 애플리케이션을 위한 정적 모듈 번들러 입니다 - (웹팩 문서 참고)
1. node.js 설치
node.js가 설치되어 있지 않다면 설치해주자
2. 작업폴더 생성
react 개발을 위한 작업폴더를 만들어주자
지난 포스팅에서 CRA를 만들기 위해 생성한 react 작업폴더안에 webpack이란 이름으로 폴더를 생성해주었다.
3. pakage.json 파일 생성
명령 프롬프트를 실행시켜 방금 만들어준 webpack으로 이동해준다.
npm init -y 명령어를 실행시켜 package.json 파일을 생성
해당 폴더를 확인해보면 package.json 파일이 생성된 것을 확인할 수 있다.
4. index.html, index.js 파일 생성
react/webpack/public 폴더 생성
webpack폴더 안에 public이라는 이름으로 폴더를 생성해 준 뒤,
public 폴더 안에 index.html와 index.js 파일을 생성해준다.
(여기서부터는 소스코드 편집기를 사용, 나는 visual studio code를 사용했다.)
react/webpack/public/index.html
<!DOCTYPE html>
<html>
<head>
<title>React Webpack Babel Setup</title>
</head>
<body>
<div id="root"></div>
<script src="/bundle.js"></script>
</body>
</html>react/webpack/public/index.js
import React from 'react';
import ReactDOM from 'react-dom';
function App(){
return(
<h1>Hello World?</h1>
)
}
ReactDOM.render(<App />, document.getElementById('root'));위와 같이 Hello World?코드를 작성해주었다.
5. webpack 설치 및 설정
다시 cmd로 돌아와서 react와 react-dom을 설치하고
다음 명령어로 webpack을 설치해준다.
npm install react react-dom
npm install --save-dev webpack webpack-dev-server webpack-cli html-webpack-plugin
webpack과 webpack-dev-server, webpack-cli, html-webpack-plugin 을 한꺼번에 설치해주었다.
6. package.json 스크립트 수정
아래에서 "script"부분에 "start": "webpack server --mode development"를 입력하여
start 명령어를 추가하였다.
그 아래 "build": "webpack --progress --mode production"로 build 명령어를 추가하였다.
(대충 start명령어를 사용하면 webpack-dev-server가 실행된다는 의미, 모드는 개발모드로 설정해주었다.
build는 production모드로 설정하였다.)
{
"name": "webpack",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "webpack-dev-server --config ./webpack.config.js --mode development",
"build": "webpack --progress --mode production"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"html-webpack-plugin": "^5.5.0",
"webpack": "^5.68.0",
"webpack-cli": "^4.9.2",
"webpack-dev-server": "^4.7.3",
"react": "^17.0.2",
"react-dom": "^17.0.2"
}
}
7. webpack.config.js 파일 생성
위에서 스크립트 명령어를 추가할 때, 작성한 웹팩설정파일(webpack.config.js)을 만들것이다.
코드 편집기를 통해서 아래 경로에 js파일을 만들고 코드를 작성해준다.
react/webpack/webpack.config.js
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: [
'./public/index.js'
],
output: {
path: __dirname + '/dist',
publicPath: '/',
filename: 'bundle.js'
},
devServer: {
static: './dist'
},
plugins: [
new HtmlWebpackPlugin({
template: './public/index.html',
filename: 'index.html',
})
]
};
여기까지 완료됐으면 npm start를 통해서 리액트를 실행해보자.
(npm start가 안될 시, npx webpack serve를 시도해보자)
그럼 위와 같이 오류가 뜰것이다.
(대충 적절한 로더가 없다는 것 같음)
http://localhost:8080/
인터넷 주소창에 위 주소로 접속해보면 서버는 돌아가고 있지만 404오류가 뜬다.
오류를 해결하기 위해, 바벨설정을 해보자.
(바벨설정을 하기 전에 명령 프롬프트에서 'ctrl+c'를 마구 갈겨서 서버를 중지시킨다.
8. 바벨 설치 및 설정
명령 프롬프트에서 아래 명령어로 바벨을 설치한다.
npm install --save-dev babel-loader @babel/core @babel/preset-env @babel/preset-react
다음으로, webpack.config.js를 수정해준다.(대충 마지막에 추가해준다.)
module: {
rules: [
{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
use: ['babel-loader']
}
]
},
resolve: {
extensions: ['*', '.js', '.jsx']
},
마지막으로, .babelrc 파일을 생성해준다.
/react/webpack/.babelrc
{
"presets": [
[
"@babel/preset-env",
{ "targets": { "browsers": ["last 2 versions", ">= 5% in KR"] } }
],
"@babel/preset-react"
]
}
여기까지 하면 설정이 끝났다!
명령 프롬프트에서 npm start를 실행하고 정상적으로 실행되길 기도해준다(기도코딩ㅠ)
successfully가 나오면 성공이다 휴~
http://localhost:8080/에 접속해서 잘 돌아가는지 확인한다.
정상적으로 돌아간다
이제부터 본격적으로 리액트 프로젝트를 시작할 수 있다.
(css, ie 등은 따로 설정해야 한다는건 안비밀.....ㅠㅠ)
'개발기록 > React' 카테고리의 다른 글
| [React] React-router-dom 리액트 라우터 (0) | 2022.02.05 |
|---|---|
| [React] 리액트 시작하기 - Create React App(CRA) (0) | 2022.02.01 |
댓글