TIL. React Tool

ichbinmin2ยท2021๋…„ 1์›” 13์ผ
0

React

๋ชฉ๋ก ๋ณด๊ธฐ
11/25
post-thumbnail

๐Ÿ‘ฉ๐Ÿปโ€๐Ÿ’ป React ํ”„๋กœ์ ํŠธ๋ฅผ ์œ„ํ•œ ํ™˜๊ฒฝ์„ค์ •๊ณผ ํ•„์š”ํ•œ ๊ธฐ๋ณธ์ ์ธ React Tool์— ๋Œ€ํ•ด ์•Œ์•„๋ณด๊ณ  ์ด๋ฅผ ์ •๋ฆฌํ•ด๋ณด์•˜๋‹ค.

๐Ÿ”น React basic tool ์†Œ๊ฐœ

node.js

JavaScript runtime environment (framework) that executes JavaScript code outside a web browser "JavaScript everywhere"

JavaScript๋ฅผ ์‹คํ–‰ํ•  ์ˆ˜ ์žˆ๋Š” ํ™˜๊ฒฝ์„ ๋งํ•œ๋‹ค. JavaScript๋Š” ๊ณผ๊ฑฐ ๋ธŒ๋ผ์šฐ์ € ์œ„์—์„œ ๋™์ž‘ํ•˜๋Š” ์›นํŽ˜์ด์ง€๋‚˜ ์›น ์–ดํ”Œ๋ฆฌ์ผ€์ด์…˜์„ ์œ„ํ•ด์„œ ์ž‘์„ฑํ•˜๋Š” ์–ธ์–ด์˜€๋‹ค. ํ•˜์ง€๋งŒ ์ด์ œ๋Š” node.js ๋•๋ถ„์— ์›น ๋ธŒ๋ผ์šฐ์ € ๋ฐ–์—์„œ๋„ node.js ํ™˜๊ฒฝ์— ์žˆ๋‹ค๋ฉด ์šด์˜์ฒด์ œ ์œ„์—์„œ JavaScript ์ฝ”๋“œ๋ฅผ ์ž‘์„ฑํ•˜๊ณ  ์‹คํ–‰ํ•  ์ˆ˜ ์žˆ๋‹ค. ๊ทธ๋Ÿฌ๋‹ˆ๊นŒ node.js ๋Š” ์šด์˜์ฒด์ œ ์œ„์—์„œ ๋‚ด ํŒŒ์ผ์„ ์ฝ๊ฑฐ๋‚˜ ์ˆ˜์ •ํ•˜๊ณ  ๋˜ ๋‹ค์‹œ ์ €์žฅํ•˜๋Š” ์ผ๋„ JavaScript์—์„œ ์ถฉ๋ถ„ํžˆ ๊ฐ€๋Šฅ์ผ€ํ•˜๋„๋ก ํ™˜๊ฒฝ์„ ๋งŒ๋“ค์–ด์ฃผ๋Š” ์—ญํ• ์ด๋‹ค. ์ฆ‰, node.js๋Š” ์–ด๋Š ๊ณณ์—์„œ๋‚˜ JavaScript๋กœ ํ”„๋กœ๊ทธ๋ž˜๋ฐ์ด ๊ฐ€๋Šฅํ•˜๊ฒŒ ํ•˜๋Š” ํ”„๋ ˆ์ž„์›Œํฌ๋ผ๊ณ  ๋งํ•  ์ˆ˜ ์žˆ๋‹ค. ์‹ฌ์ง€์–ด ๋ฐฑ์—”๋“œ ์„œ๋ฒ„๋ฅผ ๋งŒ๋“ค๊ฑฐ๋‚˜ ์„œ๋ฒ„ ์‚ฌ์ด๋“œ ๋ Œ๋”๋ง์„ ๋งŒ๋“ค ๋•Œ๋„, ๋˜ํ•œ ์ปค๋งจ๋“œ๋ผ์ธ ํˆด์ด๋‚˜ ์Šคํฌ๋ฆฝํŠธ๋ฅผ ๋งŒ๋“ค ๋•Œ๋„ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ๋‹ค.

npm

Package Manager ํŒจํ‚ค์ง€ ๋งค๋‹ˆ์ €.

npm์€ ์™ธ๋ถ€ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ(ํŒจํ‚ค์ง€)๋ฅผ ๊ด€๋ฆฌํ•  ์ˆ˜ ์žˆ๊ฒŒ ๋„์™€์ค€๋‹ค. npm์„ ์ด์šฉํ•˜๋ฉด ๊ฐ„๋‹จํ•˜๊ฒŒ ๋ช…๋ ์–ด ํ•˜๋‚˜๋กœ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๋ฅผ ์„ค์น˜ํ•˜๊ฑฐ๋‚˜ ์—…๋ฐ์ดํŠธํ•˜๋ฉฐ ์‚ญ์ œํ•  ์ˆ˜๋„ ์žˆ๋‹ค. ์ด๋ ‡๋“ฏ, npm์€ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๋ฅผ ์†์‰ฝ๊ฒŒ ๊ด€๋ฆฌํ•  ์ˆ˜ ์žˆ๊ฒŒ ๋„์™€์ค€๋‹ค. ๋˜ํ•œ npm์„ ์ด์šฉํ•˜๋ฉด ํ”„๋กœ์ ํŠธ์— pakage.json ํŒŒ์ผ์ด ์ƒ๊ธฐ๋Š”๋ฐ ์ด pakage ํŒŒ์ผ ์•ˆ์— ์šฐ๋ฆฌ๊ฐ€ ์‚ฌ์šฉํ•˜๊ณ  ์žˆ๋Š” ์™ธ๋ถ€ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๋“ค๊ณผ ์ด ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ์˜ ๋ฒ„์ „ ๋“ฑ๊ณผ ๊ฐ™์€ ์ •๋ณด๋“ค์ด ๋“ค์–ด์žˆ๋‹ค. npm์€ ์™ธ๋ถ€ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๋ฅผ ๋‹ค์šด๋กœ๋“œ ๋ฐ›๊ณ  ์—…๋ฐ์ดํŠธํ•˜๊ฒŒ ๋„์™€์ฃผ๋Š” ํŒจํ‚ค์ง€ ๋งค๋‹ˆ์ €์ด๋‹ค.

npx

budled with npm 5.2+. ํŒจํ‚ค์ง€๋ฅผ ์‹คํ–‰ํ•  ์ˆ˜ ์žˆ๋Š” tool.

npm ์•ฑ๋งค๋‹ˆ์ € npx๋Š” npm๊ณผ๋Š” ๋‹ค๋ฅด๊ฒŒ ์„ค์น˜ํ•˜๋Š” ๊ฒƒ์ด ์•„๋‹ˆ๋ผ ์šฐ๋ฆฌ๊ฐ€ ์›ํ•˜๋Š” ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๋ฅผ ์‹คํ–‰ํ•  ์ˆ˜ ์žˆ๊ฒŒ ๋„์™€์ฃผ๋Š” ์—ญํ• ์„ ํ•œ๋‹ค. npm์€ ์„ค์น˜ํ•˜๊ณ  ์—…๋ฐ์ดํŠธ๋ฅผ ํ•  ์ˆ˜ ์žˆ๊ฒŒ ๋„์™€์ฃผ์ง€๋งŒ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๋ฅผ ์‹คํ–‰ํ•˜์ง€๋Š” ๋ชปํ•˜๋Š”๋ฐ(๋งŒ์•ฝ, ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๋ฅผ ์‹คํ–‰ํ•˜๊ธฐ ์œ„ํ•ด์„œ๋Š” ํ”„๋กœ์ ํŠธ์— ์ง์ ‘ ์ถ”๊ฐ€ํ•ด์„œ ํ”„๋กœ์ ํŠธ ์ž์ฒด๋ฅผ ์‹คํ–‰ํ•ด์•ผ ํ•˜๋Š” ๋ฒˆ๊ฑฐ๋กœ์›€์ด ์žˆ๋‹ค.) npx๋Š” ์›ํ•˜๋Š” ํŒจํ‚ค์ง€๋ฅผ ์‹คํ–‰ํ•  ์ˆ˜ ์žˆ๊ฒŒ ๋„์™€์ฃผ๋Š” tool์ด๋ผ๊ณ  ํ•  ์ˆ˜ ์žˆ๋‹ค. ์ฆ‰, ์‹คํ–‰ํ•˜๊ณ ์ž ํ•˜๋Š” ์™ธ๋ถ€ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๋‚˜ ํŒจํ‚ค์ง€๊ฐ€ ์žˆ๋‹ค๋ฉด npx ๋‹ค์Œ์— ์›ํ•˜๋Š” ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ ์ด๋ฆ„๋งŒ ์ž‘์„ฑํ•˜๋ฉด ์ด ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๋ฅผ ๋ฐ”๋กœ ์‹คํ–‰ํ•  ์ˆ˜ ์žˆ๋‹ค.

yarn (npm ์„ค์น˜ ํ›„ ์„ค์น˜)

facebook์—์„œ ๋งŒ๋“  Package Manager Tool ํŒจํ‚ค์ง€ ๋งค๋‹ˆ์ € ํˆด

npm ๋‹ค์Œ์— ๋“ฑ์žฅํ•œ yarn์€ ์กฐ๊ธˆ ๋” ์„ฑ๋Šฅ์„ ๊ฐœ์„ ํ•˜๊ณ  npm์—์„œ ๋ถ€์กฑํ–ˆ๋˜ ๋ถ€๋ถ„(๋ฒ„์ „๊ด€๋ฆฌ, ๋ณด์•ˆ ์ด์Šˆ)์„ ๋ณด์™„ํ•˜๊ธฐ ์œ„ํ•ด์„œ ํŽ˜์ด์Šค๋ถ์—์„œ ๊ฐœ๋ฐœํ•œ ์ƒˆ๋กœ์šด Package Manager tool์ด๋‹ค. yarn์€ npm ์œ„์—์„œ ๋™์ž‘ํ•˜๊ธฐ ๋•Œ๋ฌธ์— pakage.json์„ ์œ ์ง€ํ•˜๋ฉด์„œ npm๊ณผ ํ˜ธํ™˜์ด ๊ฐ€๋Šฅํ•˜๊ฒŒ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ๋‹ค. ๊ทธ๋ž˜์„œ ํ”„๋กœ์ ํŠธ๋ฅผ ๊ด€๋ฆฌํ•  ๋•Œ yarn๊ณผ npm ๋‘˜์ค‘์— ์›ํ•˜๋Š” ๊ฒƒ์„ ์‚ฌ์šฉํ•˜๋ฉด ๋œ๋‹ค. yarn์€ npm๋ณด๋‹ค ์„ฑ๋Šฅ์ด ๋น ๋ฅด๊ณ  ์กฐ๊ธˆ ๋” ์ผ๊ด€์ ์œผ๋กœ ๋ฒ„์ „ ๊ด€๋ฆฌ๊ฐ€ ์ด๋ฃจ์–ด์ง€๋ฉฐ ๋ณด์•ˆ์ ์œผ๋กœ๋„ ์•ˆ์ „ํ•˜๋‹ค.


๐Ÿ”น create-react-app

create-react-app์—๋Š” hot module reloading์ด ํฌํ•จ๋˜์–ด์ ธ ์žˆ๋‹ค. ์šฐ๋ฆฌ๊ฐ€ ์ž‘์„ฑํ•˜๋Š” ์ฝ”๋“œ๊ฐ€ ๋ธŒ๋ผ์šฐ์ €์— ์—…๋ฐ์ดํŠธ ๋˜๋Š” ๊ฒƒ๊นŒ์ง€ ํฌํ•จ์ด ๋˜์–ด์žˆ์–ด์„œ ๊ฐœ๋ฐœํ•˜๊ธฐ๊ฐ€ ํŽธํ•˜๋‹ค.

๐Ÿ”น create-react-app๋ฅผ ์„ค์น˜ํ•˜๋ฉด ํ”„๋กœ์ ํŠธ ์•ˆ์— ์–ด๋–ค ๊ฒƒ๋“ค์ด ์„ค์น˜๋˜์–ด ์žˆ์„๊นŒ?

  • .gitignore

์ด ํŒŒ์ผ์— ๋ช…์‹œ๋˜์–ด ์žˆ๋Š” ํŒŒ์ผ์ด๋‚˜ ํด๋”๋Š” git์— ์—…๋กœ๋”ฉ๋˜์ง€ ์•Š๋Š”๋‹ค. ํ”„๋กœ์ ํŠธ๋ฅผ ์‹คํ–‰ํ•˜๋ฉด ํŒŒ์ผ์„ ์‹คํ–‰ํ•˜๊ธฐ ์œ„ํ•ด์„œ ๋งŒ๋“ค์–ด์ง€๋Š” ์ž„์‹œํŒŒ์ผ๋“ค์ด ๋“ค์–ด๊ฐ€์žˆ์œผ๋ฉฐ, ์ด๋Ÿฐ ๊ฒƒ๋“ค์„ ๋”ฐ๋กœ ์ถ”์ ํ•˜์—ฌ ํŒŒ์ผ๋“ค์˜ ๋ฒ„์ „์„ ๊ด€๋ฆฌํ•  ํ•„์š”๊ฐ€ ์—†๊ธฐ ๋•Œ๋ฌธ์— ๊นƒ์— ๋”์ด์ƒ ์ถ”๊ฐ€ํ•˜๊ณ  ์‹ถ์ง€ ์•Š์€ ํŒŒ์ผ๋“ค์ด ๋“ค์–ด๊ฐ€์žˆ๋‹ค.

  • package.json

npm์—์„œ ๋ฒ„์ „์„ ๊ด€๋ฆฌํ•  ๋•Œ, ์ฆ‰ ํ”„๋กœ์ ํŠธ ๋‚ด์—์„œ ์™ธ๋ถ€ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ์™€ ๋ฒ„์ „์ด ๋ช…์‹œ๋˜์–ด์ ธ ์žˆ๋‹ค. ์ง์ ‘์ ์œผ๋กœ ์ˆ˜์ •ํ•  ์ผ์€ ๊ฑฐ์˜ ์—†์œผ๋ฉฐ, ๋‚˜์ค‘์— ๋ช…๋ น์–ด๋ฅผ ํ†ตํ•ด์„œ ์™ธ๋ถ€ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๋ฅผ ์ถ”๊ฐ€ํ•˜๊ณ  ์—…๋ฐ์ดํŠธ ํ•  ์ˆ˜ ์žˆ๋‹ค.

  • node_modules

์šฐ๋ฆฌ๊ฐ€ ์„ค์น˜ํ•œ ์™ธ๋ถ€ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ ํŒŒ์ผ์ด ๋“ค์–ด์žˆ๋Š” ํด๋”.

  • public

์ •์ ์ธ ํŒŒ์ผ๋“ค์„ ์ €์žฅํ•ด๋†“์€ ํด๋”. ์‚ฌ์šฉ์ž๊ฐ€ ์„ค์น˜ํ•˜๊ณ  ๋‚œ ์ดํ›„๋กœ ํ•œ ๋ฒˆ๋„ ๋ณ€ํ•˜์ง€ ์•Š๋Š” ํŒŒ์ผ๋“ค, ์ฆ‰ html์ด๋‚˜ ์ด๋ฏธ์ง€, ๋ฆฌ์†Œ์Šค์™€ ๊ฐ™์€ ํŒŒ์ผ๋“ค์ด ํฌํ•จ์ด ๋œ๋‹ค.

  • src

๋™์ ์œผ๋กœ ๋ณ€ํ™”๋˜๋Š” ์†Œ์Šค์ฝ”๋“œ๋“ค, ์ฆ‰ JavaScript ์ฝ”๋“œ๊ฐ€ ๋“ค์–ด์žˆ๋Š” ํด๋”.


BABEL ์ด๋ž€ ๋ฌด์—‡์ผ๊นŒ?

JavaScript transcompiler

ECMA 2015๋…„๋„ ์ดํ›„ ๋ฒ„์ „์˜ ๊ฒƒ๋“ค์„ ์˜ˆ์ „ ๋ฒ„์ „์œผ๋กœ ๋ณ€ํ™˜ํ•ด์ฃผ๋Š” ํ”„๋กœ๊ทธ๋žจ์ด๋‹ค. ๊ฐœ๋ฐœ์ž๋“ค์ด ์ตœ์‹  ๋ฒ„์ „์˜ ๊น”๋”ํ•˜๊ณ  ์ฟจํ•œ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ๋ฌธ๋ฒ•์„ ์‚ฌ์šฉํ•˜๋ฉด์„œ ๋ฐฐํฌํ•  ๋•Œ๋Š” ๋ฐ”๋ฒจ์„ ์ด์šฉํ•ด์„œ ์˜ˆ์ „ ๋ธŒ๋ผ์šฐ์ €๋„ ์ดํ•ดํ•  ์ˆ˜ ์žˆ๋Š” JavaScript ์ฝ”๋“œ๋กœ ๋ณ€ํ™˜ํ•ด์ค€๋‹ค. ๋˜ํ•œ ํƒ€์ž…์Šคํฌ๋ฆฝํŠธ๋‚˜ jsx๋ผ๋Š” ์ˆœ์ˆ˜์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ๊ฐ€ ์•„๋‹Œ ์–ธ์–ด๋„ JavaScript๋กœ ๋ณ€ํ™˜ํ•ด์ฃผ๋Š” ์—ญํ• ๋„ ํ•˜๊ณ  ์žˆ๋‹ค. ๋˜ํ•œ, BABEL์€ ํŠน์ • ๋ฒ„์ „์˜ ์–ธ์–ด๋กœ ๋ณ€ํ™˜ํ•  ๊ฒƒ์ธ์ง€์— ๋Œ€ํ•ด์„œ๋„ ์„ธ๋ถ€์ ์œผ๋กœ ์„ค์ • ๊ฐ€๋Šฅํ•˜๋‹ค. (์ค‘์š”ํ•œ ์—ญํ• )

Webpack ์ด๋ž€ ๋ฌด์—‡์ผ๊นŒ?

Bundling the code, javaScript module bundler

์†Œ์Šค์ฝ”๋“œ๋‚˜ ๋ฆฌ์†Œ์Šค ์ด๋ฏธ์ง€๋“ค์„ ํ•œ ๋ฒˆ์— ๋ฌถ์–ด์„œ ๋ฒˆ๋“ค ๋‹จ์œ„๋กœ ์‚ฌ์šฉ์ž์—๊ฒŒ ์ œ๊ณตํ•  ์ˆ˜ ์žˆ๋„๋ก ๋„์™€์ค€๋‹ค. ๋ฉ”์ธ ํŽ˜์ด์ง€๋ฅผ ์—ด์—ˆ์„ ๋•Œ JavaScript๊ฐ€ ํ•„์š”ํ•˜๊ณ  ์ด๋ฏธ์ง€๊ฐ€ ์“ฐ์ด๋ฉด ์ด๊ฒƒ์„ ์ž˜ ๋ฒˆ๋“ค๋งํ•ด์„œ ์‚ฌ์šฉ์ž์—๊ฒŒ ๋ณด์—ฌ์ค€๋‹ค. ๋งŒ์•ฝ ์‚ฌ์šฉ์ž๊ฐ€ ๋‹ค๋ฅธ ํŽ˜์ด์ง€๋ฅผ ์—ด์–ด์„œ ์ƒˆ๋กœ์šด ํŽ˜์ด์ง€์—์„œ ํ•„์š”ํ•œ JavaScript๋‚˜ ์ด๋ฏธ์ง€๊ฐ€ ์žˆ๋‹ค๋ฉด ๊ทธ๊ฒƒ๋“ค์„ ๋˜ ๋ชจ์•„์„œ ๋ฒˆ๋“ค๋งํ•ด์ฃผ๋Š” ์—ญํ• ์„ ํ•œ๋‹ค. ๋˜ํ•œ JavaScript๋ฅผ ์ž‘์„ฑํ•  ๋•Œ ์†Œ์Šค ์ฝ”๋“œ์˜ ์–‘์„ ์ค„์—ฌ์ฃผ๊ณ  ๊ธด ๋ณ€์ˆ˜๋‚˜ ํ•จ์ˆ˜์˜ ์ด๋ฆ„์„ ๋‹ค๋ฅธ ์‚ฌ๋žŒ๋“ค ์ฆ‰, ํ•ด์ปค๋“ค์ด ์•Œ์•„๋ณด์ง€ ๋ชปํ•˜๋„๋ก ์ด๋ฆ„์„ ๋ณ€ํ™˜์‹œ์ผœ์ฃผ๋Š” ๋ณด์•ˆ์˜ ์—ญํ• ๋„ ํ•œ๋‹ค.

ESLint ๋ž€ ๋ฌด์—‡์ผ๊นŒ?

์ฆ‰๊ฐ์ ์œผ๋กœ ์ฝ”๋“œ์˜ ์ž˜๋ชป๋œ ์ ์ด ์žˆ๋‹ค๋ฉด ๊ฒฝ๊ณ  ์‚ฌ์ธ์„ ๋ณด๋‚ด์ค€๋‹ค. ์ฝ”๋“œ์— ๋ฌธ์ œ๊ฐ€ ์žˆ์œผ๋ฉด ESLint์—์„œ ๊ฒฝ๊ณ ๋ฉ”์„ธ์ง€๋ฅผ ๋ณด๋‚ธ๋‹ค

Jest ๋ž€ ๋ฌด์—‡์ผ๊นŒ?

Delightlful JavaScript testing franework

JavaScript๋กœ ์ฝ”๋“œ๋ฅผ ์ž‘์„ฑํ•  ๋•Œ ์œ ๋‹› ํ…Œ์ŠคํŠธ๋ฅผ ํ•  ์ˆ˜ ์žˆ๊ฒŒ ๋„์™€์ฃผ๋Š” ํ…Œ์ŠคํŒ… Framework์ด๋‹ค.

PostCSS ๋ž€ ๋ฌด์—‡์ผ๊นŒ?

expandable CSS libraries
tool for transforming CSS with JavaScript

CSS ์ „์ฒ˜๋ฆฌ๊ธฐ ์ค‘์— ํ•˜๋‚˜๋ผ๊ณ  ๋ณผ ์ˆ˜ ์žˆ๋‹ค. ๋‹ค๋งŒ, Sass๋Š” ์ •ํ•ด์ง„ ๊ฒƒ๋“ค๋งŒ ํ•  ์ˆ˜ ์žˆ๋Š” ๋ฐ˜๋ฉด์— PostCSS๋Š” ๋‹ค์–‘ํ•œ ํ”Œ๋Ÿฌ๊ทธ์ธ์ด ์žˆ์–ด์„œ ์šฐ๋ฆฌ๊ฐ€ ์›ํ•˜๋Š” ๊ฒƒ์„ ์ถ”๊ฐ€ํ•  ์ˆ˜ ์žˆ๋‹ค. ํ˜„์—…์—์„œ ๋งŽ์ด ์“ฐ์ธ๋‹ค.

profile
์ผ๋‹จ ๊ณต๋ถ€๊ฐ€ '์ ์„ฑ'์— ๋งž๋Š” ๊ฐœ๋ฐœ์ž. ๊ทผ์„ฑ์žˆ์Šต๋‹ˆ๋‹ค.

0๊ฐœ์˜ ๋Œ“๊ธ€