๋ฒŒ์จ ํ•ญํ•ด 2์ฃผ์ฐจ! ํ•˜๋ฃจ๊ฐ€ ๋‹ค๋ฅด๊ฒŒ ๋งŽ์ด ๋ฐฐ์šฐ๊ณ  ์žˆ์ง€๋งŒ, ๊ทธ ๋ณด๋‹ค ๋ชจ๋ฅด๋Š” ๊ฒƒ์ด ๋” ๋งŽ์ด ์ƒ๊ฒจ๋ฒ„๋ ธ๋‹ค. ์ค‘๊ฐ„์— ๋‚€ ์—ฐํœด๋กœ ๋Š์Šจํ•ด์ง„ ๋‚˜์—๊ฒŒ ์ฃผํŠน๊ธฐ ๊ธฐ๋ณธ์ฃผ์ฐจ๋Š” ๊ฝค๋‚˜ ํž˜๋“ค๊ฒŒ ๋‹ค๊ฐ€์™”๋‹ค. React๋ฅผ ํ•ญํ•ด์— ์™€์„œ์•ผ ์ฒ˜์Œ ์ ‘ํ–ˆ๊ธฐ ๋•Œ๋ฌธ์— ํž˜๋“ค์—ˆ๋˜ ์ ๋„ ์žˆ์ง€๋งŒ ๊ฐ•์˜๋ฅผ ๋“ค์œผ๋ฉด์„œ ๋”์šฑ ์ฒด๊ฐ๋œ ์–ด๋ ค์›€์ด ์žˆ๋‹ค. ๋ฐ”๋กœ JavaScript ์ˆ™๋ จ๋„ ๋ถ€์กฑ์ด๋‹ค. ์ด ๋•Œ๋ฌธ์— React์˜ ๊ธฐ๋ณธ์ ์ธ ๊ธฐ๋Šฅ๋“ค์„ ์ตํ˜€๋ณด๋Š” 2์ฃผ์ฐจ ๊ฐ•์˜์—์„œ๋ถ€ํ„ฐ ์–ด๋ ค์›€์„ ๊ฒช์—ˆ๋‹ค. 1์ฃผ์ฐจ์—์„œ ๊ฐ„๋žตํ•˜๊ฒŒ ๊ธฐ๋ณธ์ ์œผ๋กœ ์•Œ๊ณ  ์žˆ์–ด์•ผ ํ•  JavaScript ๋ฌธ๋ฒ•๋“ค์„ ๋ฐฐ์› ์ง€๋งŒ ์‹œ๊ฐ„์— ์ซ“๊ธฐ๋‹ค๋ณด๋‹ˆ ์ œ๋Œ€๋กœ ์ˆ™์ง€ํ•˜์ง€ ๋ชปํ•œ ์ฑ„ 2์ฃผ์ฐจ๋กœ ๋„˜์–ด๊ฐ”๊ณ , ์–ด๋ ดํ’‹์ด ์ž๋ฆฌ ์žก์€ JavaScript ์ง€์‹์œผ๋กœ๋Š” React์˜ ๊ธฐ๋ณธ์ ์ธ ํ๋ฆ„ ๋งˆ์ € ์ดํ•ดํ•˜๊ธฐ ๋ฒ…์ฐผ๋‹ค. ์ผ๋‹จ ๊ฐœ์ธ ํ”„๋กœ์ ํŠธ ์™„์„ฑ์„ ์œ„ํ•ด Skimming ย ํ•˜๋“ฏ์ด ์ˆ˜๊ฐ•์„ ์ด์–ด๋‚˜๊ฐ”์œผ๋‚˜ ์ดํ•ด๊ฐ€ ๋˜์ง€ ์•Š์€ ์ƒํƒœ์—์„œ ์ฝ”๋“œ๋งŒ ๋”ฐ๋ผ ์“ธ ๋ฟ์ด์—ˆ๋‹ค. ๊ฐ•์˜๋ฅผ ๋ฐ˜๋ณตํ•ด์„œ ๋“ฃ๋Š” ํƒ“์— ์ง„๋„๊ฐ€ ์‰ฝ์‚ฌ๋ฆฌ ๋‚˜๊ฐ€์ง€ ์•Š์•„ ์ ์  ๋ถˆ์•ˆํ•ด์ง€๋˜ ์™€์ค‘์— ํŒ€์› ๋ถ„๋“ค์˜ ์กฐ์–ธ์ด ๋„์›€์ด ๋๋‹ค. ๋„ˆ๋ฌด ์กฐ๊ธ‰ํ•ดํ•˜์ง€ ์•Š์•„๋„ ๋œ๋‹ค. ์ผ๋‹จ ๊ธฐ๋Šฅ ๊ตฌํ˜„์— ํž˜์จ๋ณด์ž. ํ•ญํ•ด์— ๋“ค์–ด์˜ค๊ธธ ์ž˜ํ–ˆ๋‹ค๋Š” ์ƒ๊ฐ์ด ๋“œ๋Š” ์ˆœ๊ฐ„์ด์—ˆ๋‹ค. ์ผ๋‹จ ์ง€๊ธˆ ๋ฐฐ์šฐ๋Š” ๊ฒƒ์— ๋จผ์ € ์ต์ˆ™ํ•ด์ง€์ž๋Š” ๋งˆ์Œ๊ฐ€์ง๊ณผ ํ•จ๊ป˜ React ์ฝ”๋“œ๋ฅผ ์จ๋‚ด๋ ค๊ฐ”๋‹ค. ๊ทธ๋ ‡๊ฒŒ ๊ณต๋ถ€ํ–ˆ๋˜ React๋ฅผ ์ด๋ฒˆ์ฃผ WIL ํ‚ค์›Œ๋“œ์™€ ํ•จ๊ป˜ ์ •๋ฆฌํ•ด๋ณด๋ ค ํ•œ๋‹ค.

DOM(Document Object Model) - ๋ฌธ์„œ ๊ฐ์ฒด ๋ชจ๋ธ

DOM Tree ๊ตฌ์กฐ

HTML์€ ๊ฐ์ข… ํƒœ๊ทธ๋กœ ์ด๋ฃจ์–ด์ ธ ์žˆ๋Š”๋ฐ, ๋ฌธ์„œ ๊ฐ์ฒด ๋ชจ๋ธ(DOM)์€ 'head', 'body' ๊ทธ๋ฆฌ๊ณ  'div' ์™€ ๊ฐ™์€ ํƒœ๊ทธ๋“ค์„ ๊ฐ๊ฐ์˜ ๊ฐ์ฒด๋กœ ๋ณธ๋‹ค. ๊ฐ ๊ฐ์ฒด๋“ค์€ ์•„๋ž˜์ฒ˜๋Ÿผ ํ…์ŠคํŠธ ๋…ธ๋“œ, ์ž์‹ ๋…ธ๋“œ ๋“ฑ๋“ฑ ํ•˜์œ„ ๊ฐ’๋“ค์„ ๊ฐ€์ง€๊ณ  ์žˆ๊ณ ,

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div>
    	<p>ํ…์ŠคํŠธ</p>  
    </div>
</body>
</html>

์ด๋Ÿฌํ•œ ๊ตฌ์กฐ๋ฅผ ํŠธ๋ฆฌ ๊ตฌ์กฐ๋ผ๊ณ  ํ•œ๋‹ค.

Virtual(๊ฐ€์ƒ) DOM

React๋Š” html ํŒŒ์ผ์ด ํ•˜๋‚˜๋งŒ ์กด์žฌํ•œ๋‹ค. ์ด๋ฅผ SPA(Single Page Application)๋ผ ํ•˜๋Š”๋ฐ, SPA์—์„œ๋Š” ์‚ฌ์ดํŠธ์— ๋ณ€ํ™”๊ฐ€ ์ผ์–ด๋‚  ๋•Œ ๋งˆ๋‹ค DOM์˜ ์กฐ์ž‘์ด ์žฆ์•„์งˆ ์ˆ˜ ๋ฐ–์— ์—†๋‹ค. ์ด๋Š” ์ž์—ฐ์Šค๋Ÿฝ๊ฒŒ ๋ธŒ๋ผ์šฐ์ €์˜ ์—ฐ์‚ฐ ์ฆ๊ฐ€๋กœ ์ด์–ด์ง€๊ณ  ์›น ๊ตฌ๋™์„ ๋น„ํšจ์œจ์ ์ด๊ฒŒ ๋งŒ๋“ ๋‹ค. ๊ทธ๋ž˜์„œ React์—์„œ๋Š” Virtual DOM - ๊ฐ€์ƒ DOM์ด ์“ฐ์ธ๋‹ค. ๊ฐ€์ƒ DOM์„ ์‚ฌ์šฉํ•˜๋ฉด ๋ทฐ ๋‹จ์— ๋ณ€ํ™”๊ฐ€ ์ƒ๊ธธ ๋•Œ ์ด๋ฅผ ์‹ค์ œ DOM์— ์ ์šฉํ•˜๊ธฐ ์ „์— ๊ฐ€์ƒ DOM์— ๋จผ์ € ์ ์šฉํ•œ๋‹ค. ๊ทธ๋ฆฌ๊ณ  ์ตœ์ข…์ ์œผ๋กœ ๋ณ€ํ•œ ๊ฒฐ๊ณผ๋งŒ ์‹ค์ œ DOM์— ์ ์šฉ์‹œํ‚จ๋‹ค. ์ด๋ฅผ ํ†ตํ•ด ํด๋ผ์ด์–ธํŠธ์—์„œ ์ด๋ค„์ง€๋Š” ์—ฐ์‚ฐ์˜ ์–‘์„ ์ค„์ด๊ณ  ์„ฑ๋Šฅ์„ ํ–ฅ์ƒ์‹œํ‚ฌ ์ˆ˜๊ฐ€ ์žˆ๋‹ค.

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

Serverless

์„œ๋ฒ„๋ฆฌ์Šค๋Š” ์„œ๋ฒ„๊ฐ€ ์—†๋‹ค๋Š” ์ด์•ผ๊ธฐ๊ฐ€ ์•„๋‹ˆ๋ผ ์„œ๋ฒ„๋ฅผ ์ผ์ผํžˆ ๊ด€๋ฆฌํ•˜๊ณ  ์‹ ๊ฒฝ ์“ธ ํ•„์š”๊ฐ€ ์—†๋‹ค๋Š” ์˜๋ฏธ์ด๋‹ค. ์‚ฌ์‹ค ์„œ๋ฒ„๋ฆฌ์Šค์— ๊ด€ํ•œ ๋‚ด์šฉ์€ ์•„์ง 4์ฃผ์ฐจ์˜ ๊ฐ•์˜ ๋‚ด์šฉ์„ ๊นŠ๊ฒŒ ์ดํ•ดํ•˜์ง€ ๋ชปํ–ˆ๊ธฐ ๋•Œ๋ฌธ์— ์ž์„ธํ•œ ์„ค๋ช…์„ ๋ถ™์ด๊ธฐ๊ฐ€ ์–ด๋ ต๋‹ค.

profile
๊ทธ๋Š” ํŠนํžˆ ์š”๋ฆฌ ์‹ค๋ ฅ์„ ๊ฐ–์ถ˜ ์ƒํƒœ์—์„œ ๋‹ค๋ฅธ ์‚ฌ๋žŒ์˜ ๋„์›€์„ ๋ฐ›์•„

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