🙆🏻♀️ [React] 환경 구성 🙆🏻♀️
without CRA!
리액트의 진입 장벽을 낮춰 주는 매력적인 create-react-app.
CRA로 프로젝트를 진행해 왔지만, 직접 환경을 구성할 필요성을 느꼈다.
가벼운 무게와 리액트가 어떻게 돌아가는지 자세히 알기 위해서...!
알아야 할 것이 산더미지만 잊지 않기 위해 우선 기록해 본다.
준비물
- node.js (안전성을 위해 LTS버전으로 설치 추천)
- yarn
(node를 설치하면 npm이 자동으로 설치되기 때문에 선택 사항)
초기 생성
# cmd창
## 폴더 생성
mkdir react-app
## 해당 폴더로 이동
cd react-app
## node package.json 생성
yarn init이제 원하는 코드 에디터에 해당 폴더를 열면 node_module 폴더와 package.json이 있을 것이다.
public 폴더 생성 뒤 index.html 생성 한다.
<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<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>리액트 프로젝트</title>
</head>
<body>
<div id="root"></div>
</body>
</html>body 안에 id root인 div는 우리가 만들 리액트 파일들이 그려질 영역이다.
필요 모듈 설치
이제 리액트를 사용하기 위해 모듈들을 설치해 보자.
리액트 설치
# cmd
yarn add react react-dom- react
- react-dom: react와 dom을 연결해 줌.
바벨 설치
ES6 이후의 문법이나 리액트에서 쓰는 JSX문법을 지원하지 않는 브라우저가 이해할 수 있도록 변환해준다.
# cmd
yarn add @babel/core @babel/preset-react @babel/preset-env- @babel/core
- @babel/preset-react: react의 JSX문법을 자바스크립트 코드로 변환.
- @babel/preset-env: ES6 이상의 문법을 호환 가능하도록 ES5로 변환.
웹팩 설치
HTML, CSS, JavaScript, Image등을 병합하여 하나의 결과물로 만드는 도구
# cmd
yarn add webpack webpack-cli webpack-dev-server -D- webpack
- webpack-cli: 커맨드 라인에 webpack 명령어를 사용할 수 있음.
- webpack-dev-server: 개발 모드에서 임시 서버를 띄워 결과물을 보여 줌.
로더 설치
웹팩의 번들링에 필요
# cmd
yarn add babel-loader css-loader sass-loader -D- babel-loader: ES6, JSX 문법 변환.
- css-loader, sass-loader: css, scss파일을 자바스크립트가 이해할 수 있도록 변환.
플러그인 설치
번들링 파일에 적용할 플러그인들
# cmd
yarn add html-webpack-plugin clean-webpack-plugin mini-css-extract-plugin -D- html-webpack-plugin: HTML파일(public/index.html)에 번들링된 자바스크립트 파일을 삽입. 번들링 결과물을 배포될 파일로 옮김.
- clean-webpack-plugin: 번들링될 때 마다 이전의 번들링을 지움.
- mini-css-extract-plugin: 여러 css파일을 별도의 파일로 추출.
바벨 & 웹팩 파일 설정
바벨(babel)
// babel.config.js (파일 최상단)
module.exports = {
presets: ["@babel/preset-env", "@babel/preset-react"],
};웹팩(webpack)
// webpack.config.js (파일 최상단)
const webpack = require("webpack");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
module.exports = {
mode: "development",
entry: "./src/index.js",
output: {
path: __dirname + "/dist",
filename: "[name].js",
clean: true,
},
resolve: {
extensions: [".js", ".jsx"],
},
module: {
rules: [
{ test: /\.(js|jsx)$/i,
exclude: "/node_modules/",
loader: "babel-loader"
},
{
test: /\.(sc|c)ss$/i,
use: [MiniCssExtractPlugin.loader, "css-loader", "sass-loader"]
},
plugins: [
new HtmlWebpackPlugin({ template: "public/index.html" }),
new MiniCssExtractPlugin(),
],
devServer: {
host: "localhost",
port: 1234,
open: true,
client: {
overlay: true,
},
historyApiFallback: true,
hot: true,
proxy: {
"/api/*": {
target: "http://localhost:5000",
pathRewrite: { "^/api": "/" },
},
},
},
};난관이었던 웹팩 설정...☆ 하나 하나 찬찬히 살펴 보자.
- mode: mode의 매개 변수는 3가지다. 'development', 'production', 'none'
사용자는 모드에 따라 웹팩을 설정할 수 있고 production으로 설정 시 번들링 과정에서 자체적으로 코드를 최적화하여 용량을 줄인다. - entry: 모듈의 번들링이 시작될 곳을 지정한다. 위의 구문은 entry: {main: "./src/index.js"} 을 줄인 것이다. 객체 구문을 통해 여러 개로 설정할 수도 있다.
- output: 번들링 결과물 저장 옵션을 설정한다. 필수 조건은 filename이다.
path로 위치를 저장하고 clean: true로 파일을 내보내기 전에 디렉토리를 정리한다.
entry는 여러 개 설정할 수 있지만 output은 하나만 설정 가능하다. - resolve: 경로를 재설정할 수도 있고 확장자를 생략하게도 도와준다.
위와 같이 설정하면 import할 때 js, jsx의 확장자명을 생략해도 된다. - module
-> rules: 모듈에 적용할 로더들에 대한 옵션을 지정한다.
exclude는 로더에 제외할 대상을 지정할 수 있다.
loader가 여러 개라면 use를 사용한다. 이때 순서를 신경 써야 한다. 웹팩은 등록한 로더 배열 뒤에서부터 번들링에 반영하기 때문이다.
-> plugins: 플러그인의 옵션을 지정한다.
여기서 HtmlWebpackPlugin의 template에 경로를 지정해 html을 생성 한다. - devserver: 개발 서버의 옵션을 지정한다.
-> open: dev server가 구동되면 자동으로 브라우저가 실행 된다.
-> client.overlay: 컴파일러 시 오류가 있으면 브라우저 화면에 표시 한다.
-> historyApiFailBack: 404에러 발생 시 index.html로 리다이렉트 한다. (SPA 개발 시)
-> hot: 설정에 변화가 생기면 자동으로 라로딩한다.
-> proxy: 개발 서버가 다를 시에 사용. API 요청 시 /api로 시작하면 localhost:5000로 접근한다. pathRewrite 옵션으로 /api로 시작 시 /로 교체 했다.
ex) axios.get("/api/something") -> localhost:5000/something으로 요청하는 것.
package.json 스크립트 등록
// package.json
"scripts": {
"start": "webpack serve --progress --mode development",
"build": "webpack"
}실행 스크립트를 입력한다.
'--progress' 옵션은 번들링 진행 상태를 볼 수 있다.
컴포넌트 작성
이제 public/index.html에 넣을 컴포넌트를 만들어 보자.
src 폴더를 생성하고 app.jsx를 생성한다.
// src/app.jsx
import React from "react";
function App(){
return <p>진실은 언제나 하나...!</p>
};
export default App;그 다음 이 컴포넌트와 public/index.html을 연결해 줄 index.js를 생성한다.
// src/index.js
import React from "react";
import ReactDOM from "react-dom";
import App from "./App";
ReactDOM.render(<App />, document.getElementById("root"));이제 React는 ReactDOM을 사용하여 id값이 root인 HTML element에 우리가 작성한 컴포넌트를 표시한다.
그리고 cmd 창에 'yarn start'를 입력하면 끄읏-☆
세상에, 간단해😏
글 챕터를 통일 시키려고 '세상에, 간단해😏'를 사용하고 있지만 반어법의 정석이 아닐까 매번 생각 한다.
알면 알수록 알아갈 게 많은 JS와 그와 관련된 프레임워크, 라이브러리들...
이번에는 웹팩 설정도 해봤는데 속성도 많고 그에 따른 옵션도 많았다.
(왜 CRA 프로젝트에서 eject 시키면 설정할 게 많아질 거라는 지 알게 된...)
프랜시스 베이컨의 '아는 것이 힘이다'가 실감나기도 하면서 재밌기도 하면서 아는 것보다 모르는 것이 많구나 실감 났다.
그래서 결론은... 파이팅이라고여...🙋🏻♀️
아주 유용한 정보군요!