💁🏻 들어가기에 앞서
본 글은 DeKu님의 블로그 글을 따라해보며 정리한 내용입니다.
DeKu님이 집필하신 '스무디 한 잔 마시며 끝내는 리액트 + TDD' 책 많이 사랑해주세요.
블로그 보고 많은 도움을 받고 있습니다. 감사합니다 😍
스무디 한 잔 마시며 끝내는 리액트 + TDD- 당장 사러가기
그리고 활기를 불어넣기 위한 귀여운 짤
모두 화이팅 !
프로젝트 폴더에 package.json 파일을 생성합니다.
npm이란?
----
Node Package Manager의 약자로
node.js 프로젝트를 진행하면서 설치되는 모듈들을 관리하는 패키지 매니저입니다.
설치한 모듈은 node_modules 라는 폴더에 저장되며, 패키지 버전과 빌드 관련 내용은 package.json이라는 파일에서 관리합니다.
npm 세팅을 직접 설정하고싶다 : npm init
기본 설정으로 생성하고싶다: npm init -y
명령어 입력 후 파일 목록을 보면 package.json 파일을 생성되어 있습니다.
앞으로 패키지를 설치하면 package.json에 패키지 이름과 버전이 기입됩니다.
react 와 react-dom을 설치해줍니다.
npm install --save react react-dom
여기서 --save
flag는 모듈을 package.json의 dependency 항목에 추가한다는 의미입니다.
node_modules 파일을 삭제하고 npm install
or yarn install
로 다시 모듈을 설치 하는 경우, package.json의 dependency 항목에 포함되지 않은 모듈들은 설치되지 않습니다.
하지만 npm 5.0.0부터는 기본적으로 설치된 모든 패키지를 종속 항목으로 저장하기 때문에 더 이상 --save
옵션을 사용할 필요가 없다고 합니다.
npm install --save-dev webpack webpack-cli html-webpack-plugin webpack-dev-server babel-loader @babel/core @babel/preset-env @babel/preset-react rimraf
webpack : 여러개의 파일을 하나로 합쳐주는 번들러입니다. css loader 기능, jsx 변환 기능도 포함합니다.
babel : 유행어나 사투리를 표준어로 변환해주는 변환기라고 생각하시면 됩니다.
특정 언어로 작성된 코드를 비슷한 다른 언어로 변환(컴파일)시키는 역할을 한다.
babel은 최신 js 코드나 실험적인 js 코드를 표준 js 코드로 변환해줍니다.
...
"scripts": {
"start": "webpack-dev-server --mode development",
"prebuild": "rimraf dist",
"build": "webpack --progress --mode production"
},
...
모드 (--mode) : webpack을 실행시킬때는 항상 build mode를 설정해주어야 합니다.
prebuild: 항상 빌드 전에 실행됩니다. rimref라는 모듈로 build를 실행하기 전 기존 build때 생성되었던 파일을 제거 해줍니다.
프로그래스 (--progress): 빌드 진행 과정을 모니터링하게 해주는 flag입니다.
webpack.config.js파일을 생성한 후 아래와 같이 작성해줍니다.
// webpack.config.js
// 절대 경로를 참조하기 위한 코드입니다.
const path = require('path');
// webpack에서 htmml을 다루기 위한 플러그인입니다.
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: {
// 최종적으로 하나로 합쳐질(번들링) 파일 경로입니다. (최상위 컴포넌트의 경로를 적어주면 됩니다.)
'js/app': ['./src/App.jsx'],
},
output: {
// 생성된 번들(bundle) 파일이 저장되는 위치입니다.
path: path.resolve(__dirname, 'dist/'),
// 다른 파일에서 생성된 번들을 참조할 때 '/'를 기준으로 참조합니다.
publicPath: '/',
},
module: {
rules: [
{
// 리액트 파일인 jsx와 js를 babel을 이용하여 빌드합니다.
test: /\.(js|jsx)$/,
use: ['babel-loader'],
exclude: /node_modules/,
},
],
},
plugins: [
new HtmlWebpackPlugin({
// template: 기본 생성된 HTML 대신 사용자 본인의 템플릿 파일을 전달합니다.
template: './src/index.html',
filename: 'index.html',
}),
],
};
번들링할 파일의 경로와 이름정의
번들링할 파일 종류 정의
번들링할 파일의 HTML 템플릿 적용
.babelrc파일을 생성한 후 아래와 같이 작성해줍니다.
// .babelrc
{
"presets": [
[
"@babel/preset-env",
// 컴파일 브라우저를 설정합니다.
// 브라우저의 상위 버전 두개(예: IE 11, 10)와 한국(KR)에서 5% 이상의 점유율을 가지고 있는 브라우저에 대응하여 컴파일합니다.
{ "targets": { "browsers": ["last 2 versions", ">= 5% in KR"] } }
],
"@babel/react" // 리액트도 컴파일 할 수 있도록 한다.
]
}
babel 설정에서의 포인트는 아래와 같습니다.
컴파일 타겟 브라우저의 버전을 설정합니다.
리액트를 컴파일 하기 위해서 하단에 "@babel/react"라는 코드를 추가해줍니다.
HTML을 생성하고 body 부분에 React코드가 들어갈 "app"이라는 id를 가진 div 태그를 추가해줍니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Hello World</title>
</head>
<body>
<div id="app"><!-- React 코드가 삽입되는 자리입니다 --></div>
</body>
</html>
React 코드를 작성하고 index.html의 'app'이라는 id를 가진 div에 리액트 코드를 삽입해줍니다.
// src/App.js
...
import React from 'react';
import ReactDOM from 'react-dom';
const App = () => {
return <h1>Hello World!</h1>;
};
// index.html의 'app'이라는 id를 가진 div에 리액트 코드를 삽입해준다
ReactDOM.render(<App />, document.getElementById('app'));
시작: npm start
빌드: npm run build
npm start 명령어 실행 후 http://localhost:8080에 들어가면 화면을 확인 할 수 있습니다.
.gitignore 파일을 생성한 후 commit하지 않을 파일과 디렉토리를 적어줍니다.
//.gitignore
node_modules
package-lock.json
마지막으로 README.md 파일 생성하여 프로젝트에 대한 설명을
markdown 언어로 적어주시면 완성입니다 :)
// README.md
## React Setting Test
---
리액트 세팅을 테스트하고
마음에 드는 세팅을 저장해두는 레포지토리입니다.
@2023.02.15