MapleStory Finger Point

๐Ÿ”ต React

[React] React ๋ฆฌ์•กํŠธ ๊ฐœ๋…, ๊ธฐ์ดˆ (+์„ค์น˜)

HYEJU01 2024. 8. 28. 20:24

1. ๋ฆฌ์•กํŠธ ๊ธฐ๋ณธ๊ฐœ๋…

 

โ—ˆ ๋ฆฌ์•กํŠธ๋ž€?

๋ฆฌ์•กํŠธ(React)๋Š” ์‚ฌ์šฉ์ž ์ธํ„ฐํŽ˜์ด์Šค๋ฅผ ๊ตฌ์ถ•ํ•˜๊ธฐ ์œ„ํ•œ JavaScript ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ์ž…๋‹ˆ๋‹ค. ๋ฆฌ์•กํŠธ์˜ ์ฃผ์š” ํŠน์ง•๊ณผ ๊ฐœ๋…์€ ๋‹ค์Œ๊ณผ ๊ฐ™์Šต๋‹ˆ๋‹ค:

  • ์ปดํฌ๋„ŒํŠธ ๊ธฐ๋ฐ˜: ๋ฆฌ์•กํŠธ๋Š” ์žฌ์‚ฌ์šฉ ๊ฐ€๋Šฅํ•œ UI ์กฐ๊ฐ์ธ ์ปดํฌ๋„ŒํŠธ๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜์„ ๊ตฌ์ถ•ํ•ฉ๋‹ˆ๋‹ค.
  • ๊ฐ€์ƒ DOM (Virtual DOM): ์‹ค์ œ DOM์˜ ๊ฐ€๋ฒผ์šด ๋ณต์‚ฌ๋ณธ์„ ์‚ฌ์šฉํ•˜์—ฌ ์„ฑ๋Šฅ์„ ์ตœ์ ํ™”ํ•ฉ๋‹ˆ๋‹ค.
  • ๋‹จ๋ฐฉํ–ฅ ๋ฐ์ดํ„ฐ ํ๋ฆ„: ๋ฐ์ดํ„ฐ๋Š” ๋ถ€๋ชจ ์ปดํฌ๋„ŒํŠธ์—์„œ ์ž์‹ ์ปดํฌ๋„ŒํŠธ๋กœ ํ•œ ๋ฐฉํ–ฅ์œผ๋กœ๋งŒ ํ๋ฆ…๋‹ˆ๋‹ค.
  • JSX: JavaScript์˜ ํ™•์žฅ ๋ฌธ๋ฒ•์œผ๋กœ, HTML๊ณผ ์œ ์‚ฌํ•œ ๊ตฌ๋ฌธ์„ ์‚ฌ์šฉํ•˜์—ฌ ์ปดํฌ๋„ŒํŠธ์˜ ๊ตฌ์กฐ๋ฅผ ์ •์˜ํ•ฉ๋‹ˆ๋‹ค.
  • ์ƒํƒœ ๊ด€๋ฆฌ: ์ปดํฌ๋„ŒํŠธ์˜ ๋ฐ์ดํ„ฐ๋ฅผ ๊ด€๋ฆฌํ•˜๊ณ  ์—…๋ฐ์ดํŠธํ•˜๋Š” ๋ฉ”์ปค๋‹ˆ์ฆ˜์„ ์ œ๊ณตํ•ฉ๋‹ˆ๋‹ค.

๋ฆฌ์•กํŠธ๋Š” ์›น ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜ ๊ฐœ๋ฐœ์— ๋„๋ฆฌ ์‚ฌ์šฉ๋˜๋ฉฐ, ํšจ์œจ์ ์ด๊ณ  ์œ ์ง€๋ณด์ˆ˜๊ฐ€ ์šฉ์ดํ•œ UI๋ฅผ ๋งŒ๋“œ๋Š” ๋ฐ ๋„์›€์„ ์ค๋‹ˆ๋‹ค.

 

โ—ˆ SPA

single page application

spa ๋ฐฉ์‹์ด๋‹ค

SPA๋Š” Single Page Application์˜ ์•ฝ์ž์ž…๋‹ˆ๋‹ค. SPA๋Š” ์›น ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜ ๊ฐœ๋ฐœ ๋ฐฉ์‹ ์ค‘ ํ•˜๋‚˜๋กœ, ๋‹จ์ผ ํŽ˜์ด์ง€๋กœ ๊ตฌ์„ฑ๋œ ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜์„ ์˜๋ฏธํ•ฉ๋‹ˆ๋‹ค. ์ด ๋ฐฉ์‹์˜ ์ฃผ์š” ํŠน์ง•์€ ๋‹ค์Œ๊ณผ ๊ฐ™์Šต๋‹ˆ๋‹ค:

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

SPA๋Š” ํ˜„๋Œ€์ ์ธ ์›น ๊ฐœ๋ฐœ์—์„œ ๋„๋ฆฌ ์‚ฌ์šฉ๋˜๋Š” ๋ฐฉ์‹์œผ๋กœ, React, Angular, Vue.js ๋“ฑ์˜ ํ”„๋ ˆ์ž„์›Œํฌ๋ฅผ ํ†ตํ•ด ๊ตฌํ˜„ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

 

โ—ˆ webpack

webPack ๋ฒˆ๋“ค๋Ÿฌ ๋ฐฉ์‹ (ํ•˜๋‚˜๋กœ ๋ฌถ์–ด์„œ ๊ฒฝ๋Ÿ‰ํ™”์‹œ์ผœ ๊ฒฐ๊ณผ๋ฌผ ๋งŒ๋“ค์–ด์คŒ)

Webpack์€ ํ˜„๋Œ€์ ์ธ JavaScript ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜์„ ์œ„ํ•œ ์ •์  ๋ชจ๋“ˆ ๋ฒˆ๋“ค๋Ÿฌ์ž…๋‹ˆ๋‹ค. ์ฃผ์š” ํŠน์ง•๊ณผ ๊ธฐ๋Šฅ์€ ๋‹ค์Œ๊ณผ ๊ฐ™์Šต๋‹ˆ๋‹ค:

  • ๋ชจ๋“ˆ ๋ฒˆ๋“ค๋ง: ์—ฌ๋Ÿฌ ๊ฐœ์˜ JavaScript ํŒŒ์ผ๊ณผ ๊ธฐํƒ€ ๋ฆฌ์†Œ์Šค(CSS, ์ด๋ฏธ์ง€ ๋“ฑ)๋ฅผ ํ•˜๋‚˜ ๋˜๋Š” ์—ฌ๋Ÿฌ ๊ฐœ์˜ ํŒŒ์ผ๋กœ ๋ฌถ์–ด์ค๋‹ˆ๋‹ค.
  • ์˜์กด์„ฑ ๊ด€๋ฆฌ: ๋ชจ๋“ˆ ๊ฐ„์˜ ์˜์กด์„ฑ์„ ์ž๋™์œผ๋กœ ๋ถ„์„ํ•˜๊ณ  ๊ด€๋ฆฌํ•ฉ๋‹ˆ๋‹ค.
  • ์ฝ”๋“œ ์ตœ์ ํ™”: ๋ถˆํ•„์š”ํ•œ ์ฝ”๋“œ๋ฅผ ์ œ๊ฑฐํ•˜๊ณ , ์ฝ”๋“œ๋ฅผ ์••์ถ•ํ•˜์—ฌ ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜์˜ ์„ฑ๋Šฅ์„ ํ–ฅ์ƒ์‹œํ‚ต๋‹ˆ๋‹ค.
  • ๊ฐœ๋ฐœ ์„œ๋ฒ„: ์‹ค์‹œ๊ฐ„ ๋ฆฌ๋กœ๋”ฉ ๊ธฐ๋Šฅ์„ ์ œ๊ณตํ•˜๋Š” ๊ฐœ๋ฐœ ์„œ๋ฒ„๋ฅผ ํ†ตํ•ด ๊ฐœ๋ฐœ ํšจ์œจ์„ฑ์„ ๋†’์ž…๋‹ˆ๋‹ค.
  • ๋กœ๋” ์‹œ์Šคํ…œ: ๋‹ค์–‘ํ•œ ์œ ํ˜•์˜ ํŒŒ์ผ์„ ์ฒ˜๋ฆฌํ•  ์ˆ˜ ์žˆ๋Š” ๋กœ๋”๋ฅผ ์ œ๊ณตํ•˜์—ฌ JavaScript ์™ธ์˜ ๋ฆฌ์†Œ์Šค๋„ ๋ชจ๋“ˆ๋กœ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ๊ฒŒ ํ•ฉ๋‹ˆ๋‹ค.

Webpack์€ ๋ณต์žกํ•œ ์›น ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜์˜ ์ž์‚ฐ์„ ํšจ์œจ์ ์œผ๋กœ ๊ด€๋ฆฌํ•˜๊ณ , ์ตœ์ ํ™”๋œ ๋ฒˆ๋“ค์„ ์ƒ์„ฑํ•˜์—ฌ ์›น ์„ฑ๋Šฅ ํ–ฅ์ƒ์— ๊ธฐ์—ฌํ•ฉ๋‹ˆ๋‹ค.

 

โ—ˆ virtual DOM

js ๋ฐ์ดํ„ฐ ๊ฐ€์ ธ์™€์„œ ์ง์ ‘์  ํ•ธ๋“ค๋ง

view ๊ฐ€ ๋ฐ”๋€Œ๋ฉด (๋ณ€ํ™”) ์ง€์šฐ๊ณ  ๋‹ค์‹œ ๊ทธ๋ ค์คŒ

ํ™”๋ฉด์—์„œ ๋ณ€๊ฒฝ๋œ ๋ถ€๋ถ„๋งŒ ๊ฐ์ง€ํ•จ

virtual DOM (๋ฐ”๋€๋ถ€๋ถ„๋งŒ ๋ถ€๋ถ„์ ์œผ๋กœ ๋ฆฌ๋ Œ๋”๋งํ•ด์ค€๋‹ค(

React์˜ Virtual DOM (๊ฐ€์ƒ DOM)์€ ์‹ค์ œ DOM์˜ ๊ฐ€๋ฒผ์šด ๋ณต์‚ฌ๋ณธ์œผ๋กœ, React๊ฐ€ ์„ฑ๋Šฅ์„ ์ตœ์ ํ™”ํ•˜๋Š” ๋ฐ ์‚ฌ์šฉํ•˜๋Š” ํ•ต์‹ฌ ๊ฐœ๋…์ž…๋‹ˆ๋‹ค. ์ฃผ์š” ํŠน์ง•์€ ๋‹ค์Œ๊ณผ ๊ฐ™์Šต๋‹ˆ๋‹ค:

  • ํ™”๋ฉด์—์„œ ๋ณ€๊ฒฝ๋œ ๋ถ€๋ถ„๋งŒ ๊ฐ์ง€ํ•ฉ๋‹ˆ๋‹ค.
  • ๋ณ€๊ฒฝ๋œ ๋ถ€๋ถ„๋งŒ ๋ถ€๋ถ„์ ์œผ๋กœ ๋ฆฌ๋ Œ๋”๋งํ•ฉ๋‹ˆ๋‹ค.

์ด๋Ÿฌํ•œ ๋ฐฉ์‹์œผ๋กœ Virtual DOM์€ ์‹ค์ œ DOM์„ ์ง์ ‘ ์กฐ์ž‘ํ•˜๋Š” ๊ฒƒ๋ณด๋‹ค ํšจ์œจ์ ์œผ๋กœ UI๋ฅผ ์—…๋ฐ์ดํŠธํ•  ์ˆ˜ ์žˆ๊ฒŒ ํ•ด์ค๋‹ˆ๋‹ค. ์ด๋Š” ํŠนํžˆ ๋ณต์žกํ•œ ์›น ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜์—์„œ ์„ฑ๋Šฅ ํ–ฅ์ƒ์— ํฌ๊ฒŒ ๊ธฐ์—ฌํ•ฉ๋‹ˆ๋‹ค.

 

โ—ˆ Jsx

js ๊ฐ™์ง€๋งŒ html+js๋ฅผ ๋…น์—ฌ์„œ ์‚ฌ์šฉํ• ์ˆ˜์žˆ๊ฒŒ ํ˜ผํ•ฉ๋œ .jsx

jsํ™•์žฅ ๋ฌธ๋ฒ•

JSX(JavaScript XML)๋Š” React์—์„œ ์‚ฌ์šฉ๋˜๋Š” JavaScript์˜ ํ™•์žฅ ๋ฌธ๋ฒ•์ž…๋‹ˆ๋‹ค. JSX์˜ ์ฃผ์š” ํŠน์ง•๊ณผ ์‚ฌ์šฉ ๋ชฉ์ ์€ ๋‹ค์Œ๊ณผ ๊ฐ™์Šต๋‹ˆ๋‹ค:

  • HTML๊ณผ ์œ ์‚ฌํ•œ ๊ตฌ๋ฌธ: JSX๋Š” JavaScript ์ฝ”๋“œ ์•ˆ์—์„œ HTML๊ณผ ์œ ์‚ฌํ•œ ๊ตฌ๋ฌธ์„ ์‚ฌ์šฉํ•˜์—ฌ UI ๊ตฌ์กฐ๋ฅผ ์ •์˜ํ•  ์ˆ˜ ์žˆ๊ฒŒ ํ•ด์ค๋‹ˆ๋‹ค.
  • ์ปดํฌ๋„ŒํŠธ ๊ตฌ์กฐํ™”: JSX๋ฅผ ํ†ตํ•ด React ์ปดํฌ๋„ŒํŠธ๋ฅผ ๋” ์ง๊ด€์ ์ด๊ณ  ๊ตฌ์กฐํ™”๋œ ๋ฐฉ์‹์œผ๋กœ ์ž‘์„ฑํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.
  • JavaScript ํ‘œํ˜„์‹ ์‚ฝ์ž…: ์ค‘๊ด„ํ˜ธ {}๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ JSX ๋‚ด์— JavaScript ํ‘œํ˜„์‹์„ ์‰ฝ๊ฒŒ ์‚ฝ์ž…ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.
  • ์„ ์–ธ์  UI: JSX๋ฅผ ์‚ฌ์šฉํ•˜๋ฉด UI๊ฐ€ ์–ด๋–ป๊ฒŒ ๋ณด์—ฌ์•ผ ํ•˜๋Š”์ง€๋ฅผ ์„ ์–ธ์ ์œผ๋กœ ๊ธฐ์ˆ ํ•  ์ˆ˜ ์žˆ์–ด, ์ฝ”๋“œ์˜ ๊ฐ€๋…์„ฑ๊ณผ ์œ ์ง€๋ณด์ˆ˜์„ฑ์ด ํ–ฅ์ƒ๋ฉ๋‹ˆ๋‹ค.
  • JSX๋Š” React์—์„œ ํ•„์ˆ˜๋Š” ์•„๋‹ˆ์ง€๋งŒ, ๋Œ€๋ถ€๋ถ„์˜ React ๊ฐœ๋ฐœ์ž๋“ค์ด UI ์ž‘์—…์„ ํ•  ๋•Œ JSX๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ ๋” ํšจ์œจ์ ์œผ๋กœ ๊ฐœ๋ฐœํ•ฉ๋‹ˆ๋‹ค.

 

โ—ˆ  web pack loader

์ž๋™ ๋ฆฌ๋กœ๋“œ๋จ (์ €์žฅํ•˜๋ฉด)

์›นํŒฉ ๋กœ๋”๋Š” ์ง์ ‘ ์„ค์น˜๊ฐ€ ๊ฐ€๋Šฅํ•˜๋‹ค.

๋ณด์ผ๋Ÿฌ ํ”Œ๋ ˆ์ดํŠธ๋กœ ๋งŒ๋“ค ๊ฒฝ์šฐ๋Š” ์ž๋™ ์„ค์ • ๋œ๋‹ค.

์›นํŒฉ ๋กœ๋”์•ˆ์— babel ๋ผ๋Š” ๋„๊ตฌ๊ฐ€ es6๋ฅผ es6๋กœ ๋‹ค์šด๊ทธ๋ ˆ์ด๋“œ ์‹œํ‚ด

 

โ—ˆnpm 

ํŒจํ‚ค์ง€ ๊ด€๋ฆฌ์ž

๋‹ค์šด or ๊ด€๋ฆฌ

 

 

โ—ˆnpx

npm ์— ๊น”๋ ค์žˆ๋Š” ํ•˜๋‚˜์˜ ํŒจํ‚ค์ง€๋ฅผ ์‹คํ–‰์‹œ์ผœ์ฃผ๋Š” ์‹คํ–‰ ๋„๊ตฌ ์ด๋‹ค.

 

 

โ—ˆyam

npm, npx ๊ฒฐ๊ณผ ๋‹ค๋ฅธ ํŒจํ‚ค์ง€์ธ๋ฐ

(maven, gradle ๊ฐ™์ด ๋˜๋‹ค๋ฅธ ํŒจํ‚ค์ง€ ๊ด€๋ฆฌ์ž์ด๋‹ค)

 

 

โ—ˆpublic

css > public ํด๋”์— ๋„ฃ์–ด์„œ ์‚ฌ์šฉ (์„ ํ˜ธ๋˜๋Š”๋ฐฉ์‹์€์•„๋‹˜

 

 


2. React ์„ค์น˜ ๋ฐฉ๋ฒ• 

 

โ—ˆ https://nodejs.org/en/download/prebuilt-installer

 

Node.js — Download Node.js®

Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine.

nodejs.org

 

20.17 ๋‹ค์šด๋กœ๋“œ

 

 

ctrl + c : ์ค‘์ง€

npm start : ์‹œ์ž‘

 


 

3. ๋ฆฌ์•กํŠธ ๊ธฐ๋ณธ ๋ฌธ๋ฒ•

      <ul>
        <h3> </h3>
        <li> js ํŒŒ์ผ์€ jsx ๋ผ๊ณ  ๋ถ€๋ฆ…๋‹ˆ๋‹ค. ์ฃผ์„์€ alt+shift+a</li>
        <li> jsx ๋ฌธ๋ฒ•์€ ๋ฐ˜๋“œ์‹œ ํ•˜๋‚˜์˜ ํƒœ๊ทธ๋ฅผ ๋ฆฌํ„ด ํ•ด์•ผํ•œ๋‹ค.</li>
        <li> div ๋ฅผ ์‚ฌ์šฉํ•ด์„œ ๋ฌถ์–ด๋„ ๋˜๊ณ , Fragment, <></> ๋ชจํ˜•์œผ๋กœ ๋ฌถ์–ด์ค€๋‹ค. </li>
        <li> ๋ณ€์ˆ˜ ๊ฐ’์„ ์‚ฌ์šฉํ•  ๋•Œ๋Š” {name} ๋กœ ์ฐธ์กฐํ•จ </li>
        <li> if ๋ฌธ ๋ณด๋‹ค๋Š” ์‚ผํ•ญ์—ฐ์‚ฐ์‹ ์‚ฌ์šฉ</li>
        <li> ํ™”๋ฉด์— ๋ณด์—ฌ์ฃผ๊ณ  ์‹ถ์€ ๋ฌธ์žฅ์ด ์—†๋‹ค๋ฉด null ๋ฆฌํ„ด, undefined  ๋ฐ˜ํ™˜ ๊ฐ€๋Šฅํ•˜์ง€๋งŒ ์ง€์–‘ </li>
        <li> dom ์š”์†Œ์— css ๋ฅผ ์ง์ ‘ ๋„ฃ์„ ๋• ๊ฐ์ฒดํ˜•์œผ๋กœ ๋ฌถ์–ด์•ผํ•œ๋‹ค, ์†์„ฑ์€ ์นด๋ฉœ ํ‘œ๊ธฐ๋ฒ•์œผ๋กœ ์‚ฌ์šฉ !</li>
        <li> class ์†์„ฑ์€ className ์†์„ฑ์œผ๋กœ ๋ณ€๊ฒฝ๋จ</li>
        <li> ํ™€๋กœ ์‚ฌ์šฉ๋˜๋Š” ํƒœ๊ทธ๋Š” ๋ฐ˜๋“œ์‹œ / ๋กœ ๋‹ซ๋Š” ํƒœ๊ทธ ์ž‘์„ฑ {/* <input /> */}</li>
        <li> </li>
      </ul>

 

 

 


 

 

4. ๋ฆฌ์•กํŠธ ์‹ค์Šต

 

 

function App() {


  let name = "ํ™๊ธธ๋™";
  
  return (
    <>
    <div className="ex">
      <input name="name" />
    </div>

    <div style={{color:"red" , backgroundColor:"yellow", fontSize : 20}}>
      { name ===  'ํ™๊ธธ๋™' ? '๋ฆฌ์•กํŠธ ์ž…๋‹ˆ๋‹ค.' : '๋ฆฌ์•กํŠธ๊ฐ€ ์•„๋‹™๋‹ˆ๋‹ค' }
    </div>
    
    </>
   );

}


export default App;

 

    <div className="ex">
      <input name="name" />
    </div>

 

ํด๋ž˜์Šค ์†์„ฑ ์ฃผ๊ธฐ๋Š” className ์‚ฌ์šฉ

input ํƒœ๊ทธ์™€ name ์†์„ฑ ์ฃผ๋Š” ๋ฐฉ๋ฒ•

 

 

 

  <div style={{color:"red" , backgroundColor:"yellow", fontSize : 20}}>
      { name ===  'ํ™๊ธธ๋™' ? '๋ฆฌ์•กํŠธ ์ž…๋‹ˆ๋‹ค.' : '๋ฆฌ์•กํŠธ๊ฐ€ ์•„๋‹™๋‹ˆ๋‹ค' }
    </div>

name ๊ฐ’์ด ํ™๊ธธ๋™์ด๋ฉด ๋ฆฌ์•กํŠธ์ž…๋‹ˆ๋‹ค (ํ˜„์žฌ ํ™๊ธธ๋™์ธ ์ƒํƒœ) 

์•„๋‹ˆ๋ฉด ๋ฆฌ์•กํŠธ๊ฐ€ ์•„๋‹™๋‹ˆ๋‹ค๋ฅผ ์ถœ๋ ฅํ•œ๋‹ค.