- 머릿속에 뒤죽박죽 섞여있는 개념들을 이번 기회에 정리해보려고 합니다.
- CRA(create-react-app) 없이 직접 개발환경을 구축해봅시다.
- VSCode와 node.js는 설치되어 있어야 합니다.
- 패키지 설치 명령어는 다음과 같이 블록으로 표시했습니다.
npm i ~
1. NPM
-
npm이란 Node Package Manager의 줄임말으로, 자바스크립트 라이브러리를 편하게 설치하고 관리하도록 돕는 패키지 매니저입니다.
npm init -y -
-y: 별도의 수동 설정없이 default로 설정된 package.json 파일이 바로 생성됩니다.
2. Webpack
- 웹팩이 필요한 이유는 여기에 자세하게 나와있습니다.
npm i -D webpack webpack-cli -D: 웹팩은 개발용 라이브러리(=개발할 때만 사용되고 배포 시 최종 애플리케이션 코드에서 제외되는 라이브러리)이므로 설치 옵션에-D를 추가합니다.
2.1 webpack dev server
- 오픈 소스 공식 README에서 설명하기로는, 'Use webpack with a development server that provides live reloading. This should be used for development only.'라고 하네요.
- 즉, webpack dev server을 사용하면 파일 변경 후 매번 웹팩 명령어를 실행하지 않아도 됩니다. 코드 변경 후 저장하면 Webpack으로 빌드한 결과를 브라우저에서 자동으로 새로고침하여 반영해줍니다.
npm i -D webpack-dev-server
2.2 html-webpack-plugin
- 플러그인이 HTML 파일을 동적으로 생성하도록 설정할 수 있습니다.
- 플러그인이 동적으로 생성한 HTML 코드 안에 웹팩으로 빌드한 결과물을 로딩하는 코드를 자동으로 주입시켜줍니다. 따라서 개발자가
index.html파일에 스크립트 로딩 관련 코드를 직접 작성하지 않아도 됩니다.npm install -D html-webpack-plugin
2.3 webpack.config.js
- 이제 웹팩 환경설정을 해봅시다. 저는 일단 간단하게 다음과 같이 설정해 보았습니다.
- 더 다양한 설정들은 웹팩 공식문서를 확인하시면 됩니다.
// webpack.config.js
const HtmlWebpackPlugin = require('html-webpack-plugin');
const path = require('path');
module.exports = {
entry: './src/index.jsx', // webpack 최초 진입점(엔트리 포인트) 파일 경로를 설정합니다.
output: { // webpack을 실행한 후의 결과물의 이름/경로 등을 설정합니다.
filename: 'main.js',
path: path.resolve(__dirname, 'dist'),
},
plugins: [
new HtmlWebpackPlugin({
template: './index.html', // 번들링 파일을 주입하여 번들링 폴더로 복사할 대상 HTML 파일을 설정합니다.
}),
],
devServer: { // webpack-dev-server 옵션을 설정합니다.
static: path.resolve(__dirname, 'dist'),
historyApiFallback: true, // 404 페이지 대신 index.html로 이동합니다.
hot: true, // 모듈 전체를 다시 로드하지 않고 변경된 사항만 갱신합니다.
},
resolve: { // resolve: import를 할 때 확장자를 생략할 수 있습니다.
extensions: ['.jsx', '.js'],
},
};2.4 웹팩 실행
package.json을 다음과 같이 수정해주었습니다.- 배포(build)시에만 webpack 명령어를 사용하고,
개발(start)시에는 webpck dev server을 실행합니다. - mode도 개발(development), 배포(production)에 맞게 설정해줍니다.
"scripts": {
"build": "webpack --mode=production",
"start": "webpack serve --mode=development"
},3. Babel
- Babel이란, ECMAScript 2015+ 코드를 현재 및 과거의 브라우저와 같은 환경에서 호환되는 버전으로 변환하기 위해 사용하는 도구입니다.
npm i -D @babel/core @babel/cli @babel/preset-env @babel/preset-react babel-loader
@babel/core: 바벨 설치@babel/cli: 바벨 커맨드라인 도구@babel/preset-env: ECMAScript2015+를 변환하는 프리셋(*프리셋이란 간단하게 말해서 '플러그인 모음'입니다.)@babel/preset-react: 리액트 변환을 위한 프리셋 (jsx 관련 plugin도 포함되어 있습니다.)babel-loader: babel-loader을 사용하면 바벨을 webpack으로 통합해서 사용할 수 있습니다.- 이때 webpack.config.js를 다음과 같이 수정합니다.
// webpack.config.js module.exports = { module: { rules: [ { test: /\.(js|jsx|ts|tsx)$/, // 해당 파일명으로 끝나면 babel-loader가 처리 exclude: /node_modules/, // node_modules는 대상에서 제외 loader: "babel-loader", // 바벨 로더 추가 }, ], }, }
3.1 babel.config.js
- 바벨 설정 파일(babel.config.js)을 생성합니다.
- 설치한 프리셋(preset)을 설정에 추가합니다.
// babel.config.js
module.exports = {
presets: [
'@babel/preset-env',
'@babel/preset-react',
],
};4. ESLint
- ESLint란 ECMAScript 코드의 문제점을 검사하거나 정정할 때 사용하는 Javascript Lint 도구입니다.
npm -i -D eslint
npx eslint --init--init옵션으로 eslint 설정을 손쉽게 구성할 수 있습니다. 답변에 따라 그에 맞는 .eslintrc 파일을 자동으로 생성해줍니다.
5. React
npm i react react-dom
- 리액트를 설치합니다.
자! 이제 실행해봅시다.
- 다음과 같이 파일을 추가해주었습니다.
-
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>React App</title> </head> <body> <div id="root"></div> </body> </html> -
src/index.jsx
→ webpack.config.js의 entry에서 지정했던 파일 경로과 동일하게 생성해야 합니다!import React from 'react'; import ReactDOM from 'react-dom/client'; import App from './App'; const rootNode = document.getElementById('root'); ReactDOM.createRoot(rootNode).render( <React.StrictMode> <App /> </React.StrictMode>, );
- React 18부터는
ReactDOM.render대신createRoot를 사용하네요!
-
src/App.jsximport React from 'react'; export default function App() { return ( <h1>MY REACT APP💗</h1> ); }
결과🎉
- 이렇게 작고 귀여운 리액트 앱을 확인해 볼 수 있습니다
:3
차근차근🐾