2020/12/30 - [React] - [React] 프로젝트 생성하고 실행하기-떽떽대는 개발공부
[React] 프로젝트 생성하고 실행하기-떽떽대는 개발공부
리액트 프로젝트 생성 및 실행 방법 프로젝트 생성 프로젝트 생성 명령 설치하기 npm install -g create-react-app 위 명령으로 리액트 프로젝트를 생성하는 create-react-app명령을 설치했다. -g옵션이 주어
ddeck.tistory.com
상기 글에서 리액트 프로젝트를 생성하는 방법을 포스팅 했다.
실제 프로젝트 작업을 하기 위해 상기의 생성 프로젝트에서 수정해야 할 사항이 보이는데
이 부분을 보다 웹팩을 이용하여 직접 프로젝트 개발 환경 구성하는 법에 대해 알아보았다.
먼저 프로젝트를 생성할 디렉토리를 열어준다.
터미널을 열고 초기화를 해주면 package.json 파일이 생성된다.
npm init -y
필요한 라이브러리를 설치한다.
npm i -D @babel/core @babel/preset-env @babel/preset-react babel-loader clean-webpack-plugin css-loader html-loader html-webpack-plugin mini-css-extract-plugin node-sass react react-dom sass-loader style-loader webpack webpack-cli webpack-dev-server
설치가 끝난 후 package.json 의 devDependencies 에서 설치된 라이브러리들을 확인할 수 있다.
"devDependencies": {
"@babel/core": "^7.12.10",
"@babel/preset-env": "^7.12.11",
"@babel/preset-react": "^7.12.10",
"babel-loader": "^8.2.2",
"clean-webpack-plugin": "^3.0.0",
"css-loader": "^5.0.1",
"html-loader": "^1.3.2",
"html-webpack-plugin": "^4.5.1",
"mini-css-extract-plugin": "^1.3.4",
"node-sass": "^5.0.0",
"react": "^17.0.1",
"react-dom": "^17.0.1",
"sass-loader": "^10.1.1",
"style-loader": "^2.0.0",
"webpack": "^5.14.0",
"webpack-cli": "^4.3.1",
"webpack-dev-server": "^3.11.2"
}
위의 라이브러리 중 웹팩 부분을 보면 서로 버전이 상이한데, 이렇게 되면 서버 구동 시 에러가 발생될 수 있다.
webpack-cli 를 uninstall 하고 webpack-dev-server와 버전을 맞추어 재설치 하도록 하겠다.
npm uninstall -D webpack-clinpm install -D webpack-cli@3
최상위 디렉토리에서 src 디렉토리를 생성하고 index.html 파일을 작성해준다.
<!DOCTYPE html>
<html lang="kr">
<head>
<meta charset="utf-8" />
<title>study_webpack</title>
</head>
<body>
<div id="app"></div>
</body>
</html>
이제 id="app"에 들어갈 내용은 js파일로 render 해줄 것이다.
src 디렉토리에 index.js 파일을 작성해준다.
import React from "react";
import ReactDOM from "react-dom";
import App from "./components/App";
ReactDOM.render(<App />, document.getElementById("app"));
위와 같이 index.html 에 들어갈 내용에 App 컴포넌트로 render 할 수 있도록 적용했다.
이제 src/components 디렉토리를 생성하고 App.js 컴포넌트를 작성해주자.
import React from 'react';
const App = () => {
return (
<h3>Hello, React</h3>
);
};
export default App;
최상위 디렉토리에서 .babelrc 파일을 생성하고 아래와 같이 입력해준다.
바벨은 ES6에서 ES5로 자바스크립트를 변환해주는 역할을 해준다.
{
"presets": ["@babel/preset-env", "@babel/preset-react"]
}
package.json 에서 script: build 부분을 추가한다.
{
"name": "study_webpack",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack",
"start": "webpack-dev-server"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"@babel/core": "^7.12.10",
"@babel/preset-env": "^7.12.11",
"@babel/preset-react": "^7.12.10",
"babel-loader": "^8.2.2",
"clean-webpack-plugin": "^3.0.0",
"css-loader": "^5.0.1",
"html-loader": "^1.3.2",
"html-webpack-plugin": "^4.5.1",
"mini-css-extract-plugin": "^1.3.4",
"node-sass": "^5.0.0",
"react": "^17.0.1",
"react-dom": "^17.0.1",
"sass-loader": "^10.1.1",
"style-loader": "^2.0.0",
"webpack": "^5.14.0",
"webpack-cli": "^3.3.12",
"webpack-dev-server": "^3.11.2"
}
}
build 시에 webpack 에서 처리하고 start 시에는 webpack-dev-server 에서 처리하도록 했다.
처리할 수 있도록 최상위 디렉토리에 webpack.config.js 파일을 생성한다.
const path = require("path");
module.exports = {
entry: "./src/index.js",
output: {
filename: "bundle.js",
path: path.resolve(__dirname + "/build")
},
mode: "development",
module: {
rules: [
{
test: /\.(js|jsx)$/,
exclude: "/node_modules",
use: ['babel-loader'],
}
]
}
};
entry 는 build 가 처음 시작되는 파일을 설정해준다.
react 에서는 js 기준으로 보기 때문에 index.js 파일로 넣어주었다.
output 은 빌드 된 파일을 설정하는 곳이다.
동일 디렉토리에 build 디렉토리를 생성하고 빌드된 번들을 bundle.js 라는 이름으로 저장할 수 있도록 했다.
index.js 파일은 babel-loader 를 이용하여 가져와서 처리한다.
가장 처음 빌드 될 index.html 은 .html 파일이므로 아래와 같이 설정이 필요하다.
const path = require("path");
const HtmlWebPackPlugin = require("html-webpack-plugin");
module.exports = {
entry: "./src/test.js",
output: {
filename: "bundle.js",
path: path.resolve(__dirname + "/build")
},
mode: "development",
module: {
rules: [
{
test: /\.html$/,
use: [
{
loader: "html-loader",
options: { minimize: true }
}
]
}
]
},
plugins: [
new HtmlWebPackPlugin({
template: './src/index.html',
filename: 'index.html'
})
]
};
src 폴더에 있는 index.html 파일은 "html-loader"로 불러온 후 빌드한다.
빌드한 파일을 index.html 이라는 이름으로 build 디렉토리에 생성해줄 것이다.
options로 minimize 를 주어 코드 최적화 시켜주어 생성될 번들 코드가 한줄로 나타난다.
이제 웹팩에서 서버를 지정해주어 구동을 해보도록 해보자.
const path = require("path");
const HtmlWebPackPlugin = require("html-webpack-plugin");
module.exports = {
entry: "./src/index.js",
output: {
filename: "bundle.js",
path: path.resolve(__dirname + "/build")
},
devServer: {
contentBase: path.resolve("./build"),
index: "index.html",
port: 3000
},
mode: "development",
module: {
rules: [
{
test: /\.(js|jsx)$/,
exclude: "/node_modules",
use: ['babel-loader'],
},
{
test: /\.html$/,
use: [
{
loader: "html-loader",
options: { minimize: true }
}
]
}
]
},
plugins: [
new HtmlWebPackPlugin({
template: './src/index.html',
filename: 'index.html'
})
]
};
웹팩에서 devServer 로 서버 구동에 필요한 정보를 알려주었다.
빌드 된 번들의 경로를 알려주고 포트를 지정하였다.
이제 npm start 를 실행하고 브라우저 http://localhost:3000 에 접속하면 빌드된 결과가 나올 것이다.
'React' 카테고리의 다른 글
| [React] react, redux 를 사용하여 게시판 만들기 - 떽떽대는 개발공부 (1) | 2021.01.19 |
|---|---|
| [React] 절대경로를 사용하여 css 적용하기 - 떽떽대는 개발공부 (0) | 2021.01.15 |
| [React] react-dom 과 css animation 을 이용하여 loading 중 아이콘 구현하기 - 떽떽대는 개발공부 (0) | 2021.01.12 |
| [React] ReactDOM 을 사용하여 팝업창 띄우기 - 떽떽대는 개발공부 (0) | 2021.01.11 |
| [React] a태그 onClick 이벤트 render 에러 해결 - 떽떽대는 개발공부 (0) | 2021.01.07 |
댓글