리액트(react)로 투두(todo)앱 만들기 - 셋팅

프로젝트 셋팅을 해보도록 하겠습니다. 먼저 nodejs(nodejs란)와 에디터가 설치되어 있다는 가정 하에 시작하겠습니다.

저는 에디터로 vscode를 사용하고 있습니다. (vscode의설치법이 궁금하시다면 여기를 클릭하여 주세요!)

바닥부터 시작하는것이기 떄문에 처음에 복잡할 수 있습니다.

원하는 folder path를 설정한 후 프로젝트 폴더를 만들어 줍니다. C:\Users\User\workspace경로에 react-todo폴더를 만든 후 위의 경로에서 진행 하였습니다. (User는 사용자의 이름)

npm init -y

npm 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인것입니다.

Document

./index.jsx 파일을 생성합니다.

import React from 'react'; import ReactDOM from 'react-dom'; const App = () => { return Hello World!; }; ReactDOM.render(, document.getElementById('app'));

ReactDom 이 App component를 document에 삽입하는것을 알 수 있습니다.

npm start 로 실행하면 잘 실행되는것을 볼 수 있습니다.

from http://chazz.tistory.com/15 by ccl(A) rewrite - 2020-03-07 00:20:55