티스토리 뷰
프로젝트 셋팅을 해보도록 하겠습니다. 먼저 nodejs(nodejs란)와 에디터가 설치되어 있다는 가정 하에 시작하겠습니다.
저는 에디터로 vscode를 사용하고 있습니다. (vscode의설치법이 궁금하시다면 여기를 클릭하여 주세요!)
바닥부터 시작하는것이기 떄문에 처음에 복잡할 수 있습니다.
원하는 folder path를 설정한 후 프로젝트 폴더를 만들어 줍니다. C:\Users\User\workspace경로에 react-todo폴더를 만든 후 위의 경로에서 진행 하였습니다. (User는 사용자의 이름)
npm init -ynpm init : 현재 디렉토리를 Node.js 프로젝트로 초기화하는 명령어로 package.json 파일을 생성합니다. package.json 파일은 현재 Node 프로젝트에 대한 정보를 담고 있는 파일입니다. -y option은 init을 간단하게 할 수 있는 명령어입니다.
위와 같은 결과를 얻을 수 있습니다. 자 이제 이 폴더를 vscode에서 열어보겠습니다.
code .code . 명령어로 윈도우 cmd창에서 바로 vscode를 실행 시킬 수 있습니다.
폴더에 package.json파일 하나만 있습니다. 정말 바닥부터 리액트를 시작하는 것입니다. 사실 바닥부터 시작하면 설명드릴것이 많고 하나하나 다 설명하면서 진행하기엔 가독성이 너무 떨어진다고 판단되어 설명이 길어질만한 부분들은 링크를 걸어가며 넘어가도록 하겠습니다.
맨땅에 리액트 프로젝트를 진행하기 위해서는 설치해야 되는 모듈이 몇가지 있습니다. 크게 나눠보자면
- react 관련 모듈
- webpack 관련 모듈
- babel 관련 모듈
react 관련 모듈 : react를 사용하기 위해 꼭 필요한 react 관련 모듈입니다.
webpack 관련 모듈 : webpack은 많은 js css 파일들을 묶어주는 역할을 합니다.
babel 관련 모듈 : react는 es6버전은 자바스크립트를 모든 브라우져에서 호환가능한 es5버전으로 바꿔주는 역할을 합니다.
1. webpack 설정
npm i -D webpack webpack-cli babel-loader html-webpack-plugin//webpack.config.js
const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
module.exports = {
//mode
entry: "./index.jsx",
output: {
path: path.join(__dirname, "/dist"),
filename: "index_bundle.js"
},
module: {
rules: [
{
test: /\.(js|jsx)$/,
use: ["babel-loader"],
exclude: /node_modules/
}
]
},
plugins: [
new HtmlWebpackPlugin({
template: "./index.html"
})
],
resolve: {
extensions: [".js", ".jsx"]
}
};
웹팩 설정은 크게 6가지로 나뉩니다.
- mode: development | production 인지 명시해주시면 됩니다. 저는 여기서 명시하지 않고 package.json에서 명시할 예정입니다. 나중에는 development 와 production 모드를 분리해서 각각의 config file을 만들 예정입니다.
- entry: 어디를 root로 삼아서 웹팩을 진행할지 결정하는 곳 입니다.
- output: bundle된 파일을 어디에 위치시킬지 결정하는 곳입니다.
- module rule: 파일들을 합칠때 확장자별로 rule을 결정해주는 곳입니다. 나중에 css파일 png파일등 각각의 확장자별로 룰을 정해줄 것입니다.
- plugin: 웹팩을 하는데 있어서 도움을 주는 플러그인들입니다.
- resolve: 웹팩이 알아서 경로나 확장자를 처리할 수 있게하는 곳입니다. resolve에 확장자가 있으면 import할때 확장자를 생략 가능합니다.
2. babel 설정
npm i -D @babel/core @babel/preset-env @babel/preset-react바벨을 설정하기 위해 .babelrc 파일을 생성하고 아래와 같이 적습니다.
{
"presets": [
[
"@babel/preset-env",
{ "targets": { "browsers": ["last 2 versions", ">= 5% in KR"] } }
],
"@babel/react"
]
}프리셋은 플러그인들의 집합체라고 생각하시면 되고 브러우져 타겟을 정해서 과하게 오버피팅되는걸 막아줍니다.
3. package.json 설정
npm i -D webpack-dev-server rimraf스크립트 부분을 수정합니다. rimraf는 운영체제 상관없이 폴더를 지우기위한 명령어이고
production 모드인지 development 모드인지 웹팩으로 빌드할 때 스크립트에서 정해줍니다.
{
// "main": "index.js", 삭제
...
"scripts": {
"start": "webpack-dev-server --mode development --open",
"prebuild": "rimraf dist",
"build": "webpack --progress --mode production"
},
...
}
4. react 설정
npm i react react-dom./index.html 파일을 생성하고 아래와같이 적어줍니다. 리액트는 div id= app 에 들어가게 됩니다.
이 웹페이지의 root인것입니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<div id="app"></div>
</body>
</html>
./index.jsx 파일을 생성합니다.
import React from 'react';
import ReactDOM from 'react-dom';
const App = () => {
return <h1>Hello World!</h1>;
};
ReactDOM.render(<App />, document.getElementById('app'));ReactDom 이 App component를 document에 삽입하는것을 알 수 있습니다.
npm start 로 실행하면 잘 실행되는것을 볼 수 있습니다.
