✅ 시작하기 앞서 알아야 할 기술
- WebPack
- Babel
이 2가지를 먼저 알아야 React 환경을 구축할 수 있다.
📌 WebPack (=웹팩)
WebPack이란? JS 어플리케이션을 위해 여러개의 파일을 하나의 파일로 통합해주는 모듈 번들러
- 모듈 번들러란? JS 모듈을 브라우저에서 실행할 수 있는 단일 JS 파일로 묶는데 사용되는 도구
- 프로젝트에서 사용되는 라이브러리들을 빌드과정을 토앻서 html이 실행할 수 있는 하나의 파일로 합쳐주는데 사용하게 된다.
- 해당 과정에서 JS, JSX, CSS, 폰트, 이미지 등 다양한 파일들을 번들링(=빌드) 할 수 있다.
WebPack의 필요성
- 파일 단위의 JS 모듈 관리의 필요성 (전역변수 오염 방지)
- 웹 개발 작업 자동화 도구 적용 (새로고침 문제 해결, 용량이 큰 파일 자동 압축 등)
- 웹 어플리케이션의 빠른 로딩 속도 / 높은 성능 (로딩 속도를 높여 사용자 이탈 방지 등)
📌 Babel
ES6+ 버전 이상의 JS 코드를 하위 버전의 JS 문법으로 변환
- JS 컴파일러
- JS 특정 문법은
브라우저가 지원하지 않는 경우가 많다. (특히, ES6+ 이후) - 그래서 Babel이 호환 가능한 ES5이하의 문법으로 변환
Babel의 필요성
- 크로스 브라우징 (모든 브라우저에서 동작하도록)
- 편리성 (브라우저 호환여부를 구별하지 않고, 최신 문법으로 자유로운 사용 가능)
📌 개발환경 구축
1. package.json 생성 / React 설치
- React : React 코어 라이브러리
- React-Dom : React와 DOM 연결
// package.json 생성
npm init -y
npm i react react-dom2. WebPack 관련 모듈 설치
- webpack : WebPack 코어
- webpack-cli : 터미널의 커맨드 라인에서 WebPack 사용
- webpack-dev-server : WebPack을 메모리 상으로만 빌드한 결과물을 개발 서버에서 구동
- babel-loader : ES6+, JSX 문법 변환
- css-loader : CSS 코드 -> JS 변환
- style-loader : 변환된 CSS 파일을 JS 모듈로 변환 -> 해당 CSS
<style>태그로 변환 후, index.html의<head>부분에 삽입 - file-loader : 폰트, 이미지 등 파일 로드
- html-webpack-plugin : Webpack 번들을 제공할 HTML 파일 자동 생성
- clean-webpack-plugin : 빌드 전, 이전의 빌드 디렉토리를 자동으로 정리
// webpack 설치
npm i --save--dev webpack webpack-cli webpack-dev-server
// 관련모듈 설치
npm i --save--dev babel-loader css-loader style-loader file-loader html-webpack-plugin clean-webpack-plugin3. Babel 설치
- @babel/core : babel 코어
- @babel/preset-react : React의 JSX 코드 변환 (=js로 변환)
- @babel/preset-env : ES6+ 코드를 ES5 코드 변환
npm i --save--dev @babel/core @babel/preset-react @babel/preset-env4. WebPack / Babel 설정
- 루트에 babel.confing.js 파일 생성후, 프리셋 설정
// babel.config.js
module.exports = {
presets: ['@babel/preset-env', '@babel/preset-react'],
};// webpack.config.js
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
module.exports = {
mode: 'development', // 만약 환경변수를 사용하지 않는다면 직접 'development' 입력
entry: './src/index.js',
output: {
// 번들링 결과 : /dist폴더
path: __dirname + '/dist',
// bundle.해쉬.js로 생성
filename: 'bundle.[hash].js',
publicPath: '/',
},
resolve: {
// 번들링을 할 파일 설정
extensions: ['.js', '.jsx'],
},
module: {
// loader 설정 - 등록한 로더의 뒤의 요소부터 번들링에 반영
// node_modules 제외
rules: [
{
test: /\.(js|jsx)$/,
exclude: '/node_modules/',
loader: 'babel-loader',
},
{
test: /\.css$/,
use: [{ loader: 'style-loader' }, { loader: 'css-loader' }],
},
{
test: /\.(png|jpe?g|gif|svg)$/i,
loader: 'file-loader',
options: {
name: 'assets/[contenthash].[ext]',
},
},
],
},
plugins: [
// 빌드 이전 결과물을 제거
new CleanWebpackPlugin(),
// 번들한 css파일과 js파일을 html 파일에 link 태그, script태그로 추가
new HtmlWebpackPlugin({
template: 'public/index.html',
}),
// 환경 정보를 제공
new webpack.DefinePlugin({
mode: 'development',
port: 3000, // 포트번호 0이상 65536 미만 번호로 설정
}),
],
devServer: {
host: 'localhost',
port: 3000,
open: true,
historyApiFallback: true,
// hot : 모듈의 변화된 부분만 서버에 자동으로 반영
hot: true,
},
};FYI : 포트 번호를 0 이상 65535 이하로 설정하는 것은 네트워크 프로토콜의 표준을 따르는 것이며, 65536 이상의 번호는 사용 불가하기 때문에 이 범위 내에서 설정 해야 한다.
- start : 개발서버에서 리액트 프로젝트 수행
- build : dist 폴더에 번들링된 파일 생성
// package.json
"scripts": {
"start": "webpack-dev-server --progress --mode development",
"build": "webpack --progress --mode production"
}5. React 컴포넌트 생성
- 루트에 public 폴더 생성 후, index.html 파일 생성
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=divice-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>title</title>
</head>
<body>
<div id="root"></div>
</body>
</html>- src 폴더 생성 후, index.js / App.js 파일 생성
// index.js
import React from "react";
import { createRoot } from "react-dom/client";
import App from "./App";
const container = document.getElementById("root");
const root = createRoot(container);
root.render(<App />);// App.jsx
import React from "react"; // 꼭 import 해야한다. import 하지 않으면 렌더링 안됨
function App() {
return <></>;
}
export default App;📌 결과
해보고 싶은거 하기