๐Ÿฐ ๋ ˆ์‹œํ”ผ

React

๋จผ์ € React ๋ฅผ ์œ„ํ•ด ๋‹ค์Œ ์˜์กด์„ฑ๋“ค์„ ์„ค์น˜ํ•ฉ๋‹ˆ๋‹ค.

Blog Post

npm install --save react
npm install --save react-dom
npm install --save-dev parcel-bundler

ํ˜น์‹œ yarn ํŒจํ‚ค์ง€ ๋งค๋‹ˆ์ €๋ฅผ ์‚ฌ์šฉํ•˜์‹ ๋‹ค๋ฉด ๋‹ค์Œ์˜ ๋ช…๋ น์–ด๋กœ ์„ค์น˜ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

yarn add react
yarn add react-dom
yarn add --dev parcel-bundler

๊ทธ๋ฆฌ๊ณ  ์‹œ์ž‘ ์Šคํฌ๋ฆฝํŠธ๋ฅผ package.json์— ์ง€์ •ํ•ด์ฃผ์„ธ์š”.

// package.json
"scripts": {
  "start": "parcel index.html"
}

Preact

๋จผ์ € Preact ๋ฅผ ์œ„ํ•ด ๋‹ค์Œ ์˜์กด์„ฑ๋“ค์„ ์„ค์น˜ํ•ฉ๋‹ˆ๋‹ค.

npm install --save preact
npm install --save-dev parcel-bundler

ํ˜น์‹œ yarn ํŒจํ‚ค์ง€ ๋งค๋‹ˆ์ €๋ฅผ ์‚ฌ์šฉํ•˜์‹ ๋‹ค๋ฉด ๋‹ค์Œ์˜ ๋ช…๋ น์–ด๋กœ ์„ค์น˜ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

yarn add preact
yarn add --dev parcel-bundler

๊ทธ๋ฆฌ๊ณ  ์‹œ์ž‘ ์Šคํฌ๋ฆฝํŠธ๋ฅผ package.json์— ์ง€์ •ํ•ด์ฃผ์„ธ์š”.

// package.json
"scripts": {
  "start": "parcel index.html"
}

Vue

๋จผ์ €, Vue ๋ฅผ ์‚ฌ์šฉํ•˜๊ธฐ ์œ„ํ•ด ์˜์กด์„ฑ์„ ์„ค์น˜ํ•ฉ๋‹ˆ๋‹ค.

npm install --save vue
npm install --save-dev parcel-bundler

ํ˜น์‹œ yarn ํŒจํ‚ค์ง€ ๋งค๋‹ˆ์ €๋ฅผ ์‚ฌ์šฉํ•˜์‹ ๋‹ค๋ฉด ๋‹ค์Œ์˜ ๋ช…๋ น์–ด๋กœ ์„ค์น˜ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

yarn add vue
yarn add --dev parcel-bundler

package.json์— ์‹œ์ž‘ ์Šคํฌ๋ฆฝํŠธ๋ฅผ ์ž‘์„ฑํ•ด์ฃผ์„ธ์š”.

// package.json
"scripts": {
  "start": "parcel index.html"
}

๋ฌธ์„œ์˜ ๊ฐœ์„ ์„ ๋„์™€์ฃผ์„ธ์š”

๋น ์ง„์ ์ด ์žˆ๊ฑฐ๋‚˜ ๋ช…ํ™•ํ•˜์ง€ ์•Š์€ ๊ฒฝ์šฐ, ์›น ์‚ฌ์ดํŠธ ์ €์žฅ์†Œ์— ์ด์Šˆ๋ฅผ ์ œ๊ธฐํ•ด ์ฃผ์‹œ๊ฑฐ๋‚˜ ํŽ˜์ด์ง€๋ฅผ ์ˆ˜์ •ํ•ด ์ฃผ์„ธ์š”..