06_Oct_2021 ๐Ÿฐ์—˜๋ฆฌ์Šค AI ํŠธ๋ž™ TIL: React ํ”„๋กœ์ ํŠธ ์ƒ์„ฑํ•˜๊ธฐ

4686 ๋‹จ์–ด react.jsnode.jsnode.js

Create React App

๊ผญ Create React App์„ ์‚ฌ์šฉํ•ด์•ผ ํ•˜๋Š” ๊ฒƒ์€ ์•„๋‹ˆ๊ณ , ์ง์ ‘ script๋ฅผ ์ž„์˜๋กœ ์ถ”๊ฐ€ํ•ด์„œ ์‚ฌ์šฉํ•ด๋„ ๋ฌด๋ฐฉํ•˜๋‹ค (๋‹จ์ง€ ํ”„๋กœ์ ํŠธ ํ™˜๊ฒฝ ์„ค์ •์„ ์‰ฝ๊ฒŒ ๋„์™€์ค„ ๋ฟ์ด๋‹ค.)

Create React App(CRA)๋ž€?

  • React ํ”„๋กœ์ ํŠธ๋ฅผ ์†์‰ฝ๊ฒŒ ์ƒ์„ฑํ•  ์ˆ˜ ์žˆ๋„๋ก ๋„์™€์ฃผ๋Š” '๋ณด์ผ๋Ÿฌํ”Œ๋ ˆ์ดํŠธ(Boilerplate)'

  • ์ˆ˜ ๋งŽ์€ React์šฉ ๋ณด์ผ๋Ÿฌํ”Œ๋ ˆ์ดํŠธ๊ฐ€ ์žˆ์ง€๋งŒ Facebook์—์„œ ์ง์ ‘ ๋งŒ๋“ค์–ด ๊ด€๋ฆฌํ•˜๋Š” ๋ณด์ผ๋Ÿฌํ”Œ๋ ˆ์ดํŠธ์ด๊ธฐ ๋•Œ๋ฌธ์— ๊ฐ€์žฅ ๋งŽ์ด ์‚ฌ์šฉ๋œ๋‹ค.

  • ํ”„๋กœ์ ํŠธ ์ƒ์„ฑ์— ํ•„์š”ํ•œ ๋‹ค์–‘ํ•œ ๊ธฐ๋Šฅ์„ Command๋กœ ์ œ๊ณตํ•œ๋‹ค.

    CRA์˜ ์žฅ์ 

  1. ๊ฐœ๋ฐœ์ž๊ฐ€ ์˜จ์ „ํžˆ React App ๊ฐœ๋ฐœ์— ์ง‘์ค‘ํ•  ์ˆ˜ ์žˆ๋„๋ก ๋„์™€์ค€๋‹ค.
  • ์ƒ๋Œ€์ ์œผ๋กœ ๋œ ์ค‘์š”ํ•œ ์ฝ”๋“œ๋Š” ๋…ธ์ถœ๋˜์ง€ ์•Š๋Š”๋‹ค.
  • ๊ฐ•๋ ฅํ•œ Command๋ฅผ ์ง€์›ํ•œ๋‹ค.
  1. (๋Œ€๋ถ€๋ถ„์˜) ๋ชจ๋“  ๋ธŒ๋ผ์šฐ์ €์—์„œ ํ•ด์„๋  ์ˆ˜ ์žˆ๋„๋ก transcompile์„ ์ž๋™์œผ๋กœ ์ง€์›ํ•œ๋‹ค.

    Transcompile์ด๋ž€?: ๋ธŒ๋ผ์šฐ์ €์—์„œ ํ•ด์„ํ•  ์ˆ˜ ์žˆ๋Š” JS ๋ฒ„์ „์ด ๊ฐ๊ฐ ๋‹ค๋ฅธ๋ฐ, ์ด๋ฅผ ๋ชจ๋“  ๋ธŒ๋ผ์šฐ์ €์—์„œ ํ•ด์„ํ•  ์ˆ˜ ์žˆ๋„๋ก ๋ณ€ํ™˜์„ ํ•˜๋Š” ์ž‘์—….

  • Babel
  • ๋ฐฐํฌ ์‹œ ์ฝ”๋“œ ๋ฒˆ๋“ค๋ง
  • Webpack

Node.js / NPM

  • Create React App์œผ๋กœ React ํ”„๋กœ์ ํŠธ ์‹œ์ž‘ ์‹œ Node.js ๊ฐœ๋ฐœ ํ™˜๊ฒฝ์„ ์ œ๊ณตํ•œ๋‹ค.
  • Node.js์™€ NPM์— ๋Œ€ํ•ด ์•Œ๊ณ  ์žˆ๋‹ค๋ฉด ์ดํ•ด์— ํฐ ๋„์›€์ด ๋œ๋‹ค.

Node.js

  • ์ฃผ๋กœ ์„œ๋ฒ„ ํ”„๋กœ๊ทธ๋ž˜๋ฐ์— ์‚ฌ์šฉ๋˜๋Š” JavaScript ๊ธฐ๋ฐ˜์˜ ์†Œํ”„ํŠธ์›จ์–ด ํ”Œ๋žซํผ
  • 2009๋…„ ๋ฐœํ‘œ, 2021๋…„ ๊ธฐ์ค€ v16๊นŒ์ง€ ์—…๋ฐ์ดํŠธ ๋˜์–ด์žˆ๋‹ค.
  • ํ”„๋ก ํŠธ์—”๋“œ ๊ฐœ๋ฐœ์ž์˜ ์„œ๋ฒ„ ๊ฐœ๋ฐœ ์ ‘๊ทผ์„ฑ์„ ๋†’์—ฌ์ฃผ์—ˆ๋‹ค.
  • HTTP ํ†ต์‹  ๊ด€๋ จ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๋ฅผ ๋‚ด์žฅํ•˜๊ณ  ์žˆ๋‹ค.
  • NPM์„ ํ†ตํ•œ ๋ฐฉ๋Œ€ํ•œ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๋ฅผ ์ œ๊ณตํ•œ๋‹ค.
  • Create React App์œผ๋กœ ํ”„๋กœ์ ํŠธ ์ƒ์„ฑ ์‹œ ๊ฐœ๋ฐœ ํ™˜๊ฒฝ ๋ฐ ํ…Œ์ŠคํŠธ ์„œ๋ฒ„๋กœ ์ด์šฉ๋œ๋‹ค.

NPM

  • Node.js ํ™˜๊ฒฝ์—์„œ ์‚ฌ์šฉํ•˜๋Š” ๊ฐ์ข… ํŒจํ‚ค์ง€๋“ค์„ ๊ด€๋ฆฌํ•˜๋Š” ์ €์žฅ์†Œ.
  • Node.js ์„ค์น˜ ์‹œ ํ•จ๊ป˜ ์„ค์น˜๋œ๋‹ค.
  • ํŒจํ‚ค์ง€ ๊ด€๋ฆฌ ๋ฟ๋งŒ ์•„๋‹ˆ๋ผ ์„œ๋ฒ„ ์‹คํ–‰ ๋ฐ ๊ด€๋ฆฌ์— ํ•„์š”ํ•œ ๋‹ค์–‘ํ•˜๊ณ  ํŽธ๋ฆฌํ•œ ๋ช…๋ น์–ด๋ฅผ ์ œ๊ณตํ•œ๋‹ค.
  • React์—์„œ ์‚ฌ์šฉ๋˜๋Š” ๋‹ค์–‘ํ•œ ๋ชจ๋“ˆ๋“ค์ด NPM์—์„œ ๋ฐฐํฌ๋˜๊ณ  ์žˆ๋‹ค.

Node.js๋ฅผ ์„ค์น˜ํ•  ๊ฒฝ์šฐ, ์•ˆ์ •์ ์ธ LTS(Long-Term-Support) ๋ฒ„์ „์„ ์„ค์น˜ํ•˜๋Š” ๊ฒƒ์„ ๊ถŒ์žฅํ•œ๋‹ค.

React ํ”„๋กœ์ ํŠธ ์ƒ์„ฑ

bash

npx create-react-app <dir name>
cd <dir name>
npm start
  • npx: npm ํŒจํ‚ค์ง€๋ฅผ 1ํšŒ์„ฑ์œผ๋กœ ๋‚ด๋ ค ๋ฐ›์•„ ์‹คํ–‰ํ•  ๋•Œ ์‚ฌ์šฉํ•˜๋Š” ๋ช…๋ น์–ด.
  • cd: ๋””๋ ‰ํ† ๋ฆฌ ๋ช…์œผ๋กœ ์ด๋™ํ•œ๋‹ค.
  • npm start: ํ˜„์žฌ ๋””๋ ‰ํ† ๋ฆฌ์˜ ํ”„๋กœ์ ํŠธ๋ฅผ ์‹คํ–‰ํ•œ๋‹ค.
npm install(ํ˜น์€ i) 
npm install ํŒจํ‚ค์ง€๋ช… 
npm start
npm bulid
(ctrl + c)

npm install: package.json์— ์ •์˜๋œ depnedency(์˜์กด์„ฑ ํŒจํ‚ค์ง€)๋“ค์„ ์„ค์น˜ํ•œ๋‹ค.
npm install ํŒจํ‚ค์ง€๋ช…: npm ์„œ๋ฒ„๋กœ๋ถ€ํ„ฐ ์›ํ•˜๋Š” ํŒจํ‚ค์ง€๋ฅผ ๋‚ด๋ ค ๋ฐ›๋Š”๋‹ค.
npm start: ํ”„๋กœ์ ํŠธ๋ฅผ ์‹คํ–‰(Node.js ์„œ๋ฒ„ ์ด์šฉ.)
npm build: ํ”„๋กœ์ ํŠธ๋ฅผ ๋นŒ๋“œ
(Ctrl + C): ๋ช…๋ น์„ ์ค‘์ง€ํ•œ๋‹ค.(npm start ํ›„ ์ข…๋ฃŒํ•˜๊ธฐ).

CRA ๋””๋ ‰ํ† ๋ฆฌ ๊ตฌ์กฐ

  • ./.node_modules/: npm์„ ์ด์šฉํ•ด ์„ค์น˜ํ•œ ํŒจํ‚ค์ง€ ๋ชจ์Œ
  • ./public/: ์ •์ ์ธ ํŒŒ์ผ๋“ค์„ ๋ชจ์•„๋†“์€ ๊ณณ (index.html ๋“ฑ)
  • ./src/: ๋ฆฌ์•กํŠธ ๊ฐœ๋ฐœ์„ ์œ„ํ•œ ํŒŒ์ผ๋“ค์„ ๋ชจ์•„ ๋†“์€ ๊ณณ (App.js, index.js)
  • ./.gitignore: Git์„ ์ด์šฉํ•  ๊ฒฝ์šฐ ๋ถˆํ•„์š”ํ•œ ํŒŒ์ผ์„ ๋ฌด์‹œํ•  ์ˆ˜ ์žˆ๋„๋ก ํ•˜๋Š” ์„ค์ •ํŒŒ์ผ
  • ./package.json: ํ”„๋กœ์ ํŠธ์— ๊ด€ํ•œ ์ •๋ณด์™€ ์‚ฌ์šฉํ•˜๋Š” ํŒจํ‚ค์ง€๋“ค์„ ๋ช…์„ธํ•˜๋Š” ํŒŒ์ผ
  • ./README.md: ๋‚ด ํ”„๋กœ์ ํŠธ์— ๊ด€ํ•œ ์„ค๋ช…์„ ์ž‘์„ฑํ•˜๋Š” ํŒŒ์ผ

๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ ์„ค์น˜ ๋ฐ ๋ถˆ๋Ÿฌ์˜ค๊ธฐ

๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ ์„ค์น˜

bash

npm install 
//package.json ํŒŒ์ผ ๋‚ด์— ์ •์˜๋œ ํŒจํ‚ค์ง€ ๋ชจ๋‘ ์„ค์น˜

npm install ํŒจํ‚ค์ง€๋ช… 
//npm ์„œ๋ฒ„๋กœ๋ถ€ํ„ฐ ํŒจํ‚ค์ง€ ๋‚ด๋ ค๋ฐ›๊ธฐ

npm install ํŒจํ‚ค์ง€๋ช… @version 
//ํŠน์ • ๋ฒ„์ „์˜ ํŒจํ‚ค์ง€ ๋‚ด๋ ค๋ฐ›๊ธฐ

npm install Git ๋ ˆํฌ์ง€ํ† ๋ฆฌ ์ฃผ์†Œ 
//npm์ด ์•„๋‹Œ Git ๋ ˆํฌ์ง€ํ† ๋ฆฌ๋กœ๋ถ€ํ„ฐ ํŒจํ‚ค์ง€ ๋‚ด๋ ค๋ฐ›๊ธฐ

Package.json

dependencies(์˜์กด์„ฑ)๋ผ๋Š” ํ‚ค ์•„๋ž˜์— ์„ค์น˜ํ•œ ํŒจํ‚ค์ง€ ๋ชฉ๋ก์ด ๋‚˜์—ด๋œ๋‹ค.

์„ค์น˜ํ•œ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ ํ”„๋กœ์ ํŠธ ๋‚ด์—์„œ ๋ถˆ๋Ÿฌ์˜ค๊ธฐ

JS

1. CSS๋‚˜ importํ•˜๋Š” ๊ฒƒ ๋งŒ์œผ๋กœ ์—ญํ• ์„ ํ•˜๋Š” ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ์ธ ๊ฒฝ์šฐ ํŒจํ‚ค์ง€๋ช… ๋ฐ”๋กœ import
import 'ํŒจํ‚ค์ง€๋ช…'

2. ๊ธฐ๋ณธ์ ์œผ๋กœ ํŒจํ‚ค์ง€๋ฅผ ๋ถˆ๋Ÿฌ์™€ ํ™œ์šฉํ•  ๋•Œ์—๋Š” ํ• ๋‹นํ•  ์ด๋ฆ„์„ ์ž‘์„ฑ
import something from 'ํŒจํ‚ค์ง€๋ช…'

3. ํŒจํ‚ค์ง€ ๋‚ด์˜ ์ผ๋ถ€ ๋ฉ”์†Œ๋“œ๋‚˜ ๋ณ€์ˆ˜๋งŒ ๊ฐ€์ ธ์˜ฌ ๋•Œ๋Š” ๊ตฌ์กฐ๋ถ„ํ•ดํ• ๋‹น์œผ๋กœ import
import { a, b } from 'ํŒจํ‚ค์ง€๋ช…'

4. ํŒจํ‚ค์ง€์— default๋กœ export๋˜๋Š” ๊ฐ์ฒด๊ฐ€ ์กด์žฌํ•˜์ง€ ์•Š์„ ๊ฒฝ์šฐ * as '์ด๋ฆ„'์œผ๋กœ ๋ถˆ๋Ÿฌ์›€
import * as something from 'ํŒจํ‚ค์ง€๋ช…'

5. ๋ณ„๋„์˜ CSS ํŒŒ์ผ์„ ์ž‘์„ฑ ํ›„ ํ”„๋กœ์ ํŠธ์— ์ ์šฉํ•  ๊ฒฝ์šฐ, import์‹œ ์Šคํƒ€์ผ ์ ์šฉ
import './App.css';

์ข‹์€ ์›นํŽ˜์ด์ง€ ์ฆ๊ฒจ์ฐพ๊ธฐ