Private

    ํ”„๋ก ํŠธ์—”๋“œ ๋ฉด์ ‘(HTTP ํ†ต์‹ )

    1. HTTP ํ†ต์‹ ์— ๋Œ€ํ•ด์„œ ์„ค๋ช…ํ•ด์ฃผ์„ธ์š”.HTTP๋Š” HyperText transfer protocol๋กœ ์›น์—์„œ ์ •๋ณด๋ฅผ ์ฃผ๊ณ ๋ฐ›์„ ์ˆ˜ ์žˆ๋Š” ํ”„๋กœํ† ์ฝœ์ž…๋‹ˆ๋‹ค. ๊ทธ๋ž˜์„œ ํด๋ผ์ด์–ธํŠธ์™€ ์„œ๋ฒ„๊ฐ„์— ํ†ต์‹ ์„ ๊ฐ€๋Šฅํ•˜๊ฒŒ ํ•ฉ๋‹ˆ๋‹ค. ํด๋ผ์ด์–ธํŠธ๊ฐ€ ์„œ๋ฒ„๋กœ ์›นํŽ˜์ด์ง€๋‚˜ ๋ฐ์ดํ„ฐ๋ฅผ ์š”์ฒญํ•˜๋ฉด ์„œ๋ฒ„๋Š” ํด๋ผ์ด์–ธํŠธ์—๊ฒŒ ์š”์ฒญ๋ฐ›์€ ์›นํŽ˜์ด์ง€๋‚˜ ๋ฐ์ดํ„ฐ๋ฅผ ์ „์†กํ•˜๊ฒŒ ๋ฉ๋‹ˆ๋‹ค.2. HTTP์˜ stateless์— ๋Œ€ํ•ด์„œ ์„ค๋ช…ํ•ด์ฃผ์„ธ์š”.HTTP ํ†ต์‹ ์€ stateless์˜ ํŠน์ง•์„ ๊ฐ€์ง€๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค. stateless๋Š” ์ด์ „ ์š”์ฒญ์˜ ๊ฒฐ๊ณผ, ์ฆ‰ ์ƒํƒœ๋ฅผ ์ €์žฅํ•˜๊ณ  ์žˆ์ง€ ์•Š์Œ์„ ์˜๋ฏธํ•ฉ๋‹ˆ๋‹ค. ๋”ฐ๋ผ์„œ ๋ชจ๋“  ์š”์ฒญ์€ ๋…๋ฆฝ์ ์ธ ํŠน์ง•์„ ๊ฐ€์ง€๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค.3. HTTP ํ”„๋กœํ† ์ฝœ์˜ request์™€ response ๊ตฌ์กฐ์— ๋Œ€ํ•ด ์„ค๋ช…ํ•ด๋ณด์„ธ์š”.HTTP request๋ฅผ ๋ณด๋‚ผ๋•Œ๋Š” ๊ตฌ์กฐ์— ๋งž๊ฒŒ ๋ณด๋‚ด์•ผ ํ•˜๋Š”..

    ์˜จ๋ผ์ธ ๋””๊ทธ๋ฆฌ ์กธ์—…์ „์‹œํšŒ ํ”„๋กœ์ ํŠธ ํšŒ๊ณ (24.08-24.11)

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

    ํ”„๋ก ํŠธ์—”๋“œ ๋ฉด์ ‘(props, state)

    1. ๋ฆฌ์•กํŠธ์˜ props์™€ state์— ๋Œ€ํ•ด ์„ค๋ช…ํ•ด์ฃผ์„ธ์š”.props๋Š” ๋ถ€๋ชจ์ปดํฌ๋„ŒํŠธ์—์„œ ์ž์‹ ์ปดํฌ๋„ŒํŠธ๋กœ ์ „๋‹ฌํ•˜๋Š” ๋ฐ์ดํ„ฐ๋กœ ์ „๋‹ฌ๋œ ๋ฐ์ดํ„ฐ๋Š” ์ž์‹์ปดํฌ๋„ŒํŠธ์—์„œ ์ˆ˜์ •์ด ๋ถˆ๊ฐ€๋Šฅํ•ฉ๋‹ˆ๋‹ค. ์ด๋ฅผ ํ†ตํ•ด ์ปดํฌ๋„ŒํŠธ ๊ฐ„์— ๋ฐ์ดํ„ฐ ํ๋ฆ„์˜ ์˜ˆ์ธก์ด ๊ฐ€๋Šฅํ•˜๊ณ  ๋ฐ์ดํ„ฐ๋ฅผ ๋ฐ”๊ฟ€ ์ˆ˜ ์—†๊ธฐ๋•Œ๋ฌธ์— ์ปดํฌ๋„ŒํŠธ๋ฅผ ์žฌ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. state๋Š” ์ปดํฌ๋„ŒํŠธ ๋‚ด์—์„œ ๊ด€๋ฆฌ๋˜๋Š” ๋ฐ์ดํ„ฐ๋กœ setState๋กœ ๊ฐ’์„ ๋ณ€๊ฒฝํ•  ์ˆ˜ ์žˆ์œผ๋ฉฐ ๊ฐ’์ด ๋ฐ”๋€”๋•Œ๋งˆ๋‹ค ๋ฆฌ๋žœ๋”๋ง์ด ์ด๋ฃจ์–ด ์ง‘๋‹ˆ๋‹ค. ๋”ฐ๋ผ์„œ state๊ฐ€ ๋ณ€๊ฒฝ๋˜๋ฉด ๋ฆฌ๋žœ๋”๋ง์„ ํ†ตํ•ด UI๊ฐ€ ์—…๋ฐ์ดํŠธ ๋ฉ๋‹ˆ๋‹ค.

    ํ”„๋ก ํŠธ์—”๋“œ ๋ฉด์ ‘(์ด๋ฒคํŠธ ๋ฃจํ”„)

    1. ์ด๋ฒคํŠธ๋ฃจํ”„์— ๋Œ€ํ•ด ์„ค๋ช…ํ•ด์ฃผ์„ธ์š”.์ด๋ฒคํŠธ ๋ฃจํ”„๋Š” ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ์—”์ง„์ด ๋น„๋™๊ธฐ ์ž‘์—…์„ ์ฒ˜๋ฆฌํ•˜๋Š” ๋ฐฉ์‹์ž…๋‹ˆ๋‹ค. ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ๋Š” ์‹ฑ๊ธ€์Šค๋ ˆ๋“œ ๊ธฐ๋ฐ˜์œผ๋กœ ๋™์ž‘ํ•˜๊ธฐ ๋•Œ๋ฌธ์— ๋ชจ๋“  ์ž‘์—…๋“ค์€ ํ•˜๋‚˜์”ฉ ์ฒ˜๋ฆฌ๋˜๊ณ , ์ฝœ์Šคํƒ์— ์ž‘์—…์ด ์Œ“์ด๊ฒŒ ๋ฉ๋‹ˆ๋‹ค. API๋ฅผ ํ†ตํ•ด ๋ฐ์ดํ„ฐ๋ฅผ ๋ฐ›๊ฑฐ๋‚˜ ์˜ค๋ž˜๊ฑธ๋ฆฌ๋Š” ์ž‘์—… ๋“ฑ์˜ ์ฒ˜๋ฆฌ๋ฅผ ์œ„ํ•ด ๋น„๋™๊ธฐ ์ฒ˜๋ฆฌ๊ฐ€ ํ•„์ˆ˜์ ์œผ๋Ÿฌ ์ด๋ฃจ์–ด์ ธ์•ผ ํ•˜๋Š”๋ฐ์š”, ์ด๋•Œ Web API๋ฅผ ํ†ตํ•ด ๋น„๋™๊ธฐ ์ž‘์—…์ด ์ด๋ฃจ์–ด์งˆ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ์ฝœ์Šคํƒ์— ๋น„๋™๊ธฐ ์ž‘์—…์ด ์‹คํ–‰๋˜๋ฉด ๋น„๋™๊ธฐํ•จ์ˆ˜๋Š” Web API๋ฅผ ํ˜ธ์ถœํ•˜๊ณ  Web API๋Š” Task queue๋ผ๊ณ ๋„ ํ•˜๋Š” Callback Queue์— ์ฝœ๋ฐฑ ํ•จ์ˆ˜๋ฅผ ๋„ฃ์Šต๋‹ˆ๋‹ค. ์ด๋ฒคํŠธ ๋ฃจํ”„๋Š” ์ฝœ์Šคํƒ๊ณผ ์ฝœ๋ฐฑํ๋ฅผ ๊ณ„์† ํ™•์ธํ•˜์—ฌ ์ฝœ์Šคํƒ์— ์žˆ๋Š” ์ž‘์—…์„ ์šฐ์„ ์ ์œผ๋กœ ์ฒ˜๋ฆฌํ•˜๊ณ  ์ฝœ์Šคํƒ์ด ๋น„๋ฉด ์ฝœ๋ฐฑํ์— ์žˆ๋Š” ์ž‘์—…์„ ์ฝœ์Šคํƒ์— ๋„ฃ์–ด ์ฒ˜๋ฆฌํ•˜๋Š” ๋ฐฉ..

    ํ”„๋ก ํŠธ์—”๋“œ ๋ฉด์ ‘(์ด๋ฏธ์ง€ ์ตœ์ ํ™”)

    1. ์ด๋ฏธ์ง€ ์ตœ์ ํ™” ๊ฒฝํ—˜์ด ์žˆ๋˜๋ฐ ์–ด๋–ค ๋ฐฉ์‹์œผ๋กœ ์ง„ํ–‰๋˜์—ˆ๋Š”์ง€ ์„ค๋ช…ํ•ด์ฃผ์„ธ์š”.์˜จ๋ผ์ธ ์กธ์—…์ „์‹œ ์‚ฌ์ดํŠธ๋ฅผ ์šด์˜ํ•˜๋ฉฐ ์ด๋ฏธ์ง€ ์ตœ์ ํ™”๋ฅผ ์ง„ํ–‰ํ–ˆ์Šต๋‹ˆ๋‹ค. 20MB์ด์ƒ์˜ ์šฉ๋Ÿ‰์ด ํฐ ์ด๋ฏธ์ง€๋ฅผ ์ฃผ๋กœ ์‚ฌ์šฉํ•˜๊ณ  ์žˆ๋˜ ์กธ์—…์ž‘ํ’ˆ ์‚ฌ์ดํŠธ์˜ ํŠน์„ฑ์„ ๊ณ ๋ คํ•˜์—ฌ ์‚ฌ์šฉ์ž๊ฐ€ ๊ธด ๋กœ๋”ฉ์—†์ด ๋น ๋ฅด๊ฒŒ ์ž‘ํ’ˆ์„ ๊ฐ์ƒํ•  ์ˆ˜ ์žˆ๋„๋ก ์ด๋ฏธ์ง€ ์ตœ์ ํ™”๋ฅผ ์ง„ํ–‰ํ–ˆ์Šต๋‹ˆ๋‹ค. ๋จผ์ € ํŒŒ์ผ ํฌ๋งท์„ ๋ณ€๊ฒฝํ•˜๋Š” ์ž‘์—…์„ ์ง„ํ–‰ํ–ˆ์Šต๋‹ˆ๋‹ค. webp ํฌ๋งท์„ ์‚ฌ์šฉํ•˜์—ฌ ์šฉ๋Ÿ‰์„ ๊ฐœ์„ ํ–ˆ๋Š”๋ฐ์š”, webp ํฌ๋งท์€ ๊ตฌ๊ธ€์—์„œ ๋ฐœํ‘œํ•œ ํฌ๋งท์œผ๋กœ ์••์ถ• ํšจ๊ณผ๊ฐ€ ์ข‹์•„ ๋งŽ์€ ์šฉ๋Ÿ‰์„ ์ค„์ผ ์ˆ˜ ์žˆ๊ธฐ ๋•Œ๋ฌธ์— png ํฌ๋งท์—์„œ webp๋กœ ๋ณ€๊ฒฝํ•˜๊ฒŒ ๋˜์—ˆ์Šต๋‹ˆ๋‹ค. ๊ทธ ๊ฒฐ๊ณผ png ํฌ๋งท์ผ๋•Œ๋ณด๋‹ค 31%์˜ ์šฉ๋Ÿ‰ ๊ฐœ์„ ์ด ์žˆ์—ˆ์Šต๋‹ˆ๋‹ค.  ๋‘๋ฒˆ์งธ๋กœ ์ด๋ฏธ์ง€ ์‚ฌ์ด์ฆˆ๊ฐ€ ์‹ค์ œ ์›น์‚ฌ์ดํŠธ์—์„œ ์‚ฌ์šฉํ•˜๋Š” ๊ฒƒ๋ณด๋‹ค 1.5๋ฐฐ์ •๋„ ํฐ ์‚ฌ์ด์ฆˆ๋กœ ์‚ฌ์šฉ๋˜๊ณ  ์žˆ์–ด์„œ ์›น..

    ํ”„๋ก ํŠธ์—”๋“œ ๋ฉด์ ‘(์‹คํ–‰์ปจํ…์ŠคํŠธ, ์Šค์ฝ”ํ”„ ์ฒด์ธ)

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

    ํ”„๋ก ํŠธ์—”๋“œ ๋ฉด์ ‘(reflow, repaint)

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

    ํ”„๋ก ํŠธ์—”๋“œ ๋ฉด์ ‘(ํด๋กœ์ €, ํด๋กœ์ €์˜ ๋‹จ์ )

    1. ํด๋กœ์ €์— ๋Œ€ํ•ด ์„ค๋ช…ํ•ด์ฃผ์„ธ์š”.ํด๋กœ์ €๋Š” ์„ ์–ธ๋์„๋•Œ ๊ทธ๋•Œ์˜ ๋ ‰์‹œ์ปฌ ์Šค์ฝ”ํ”„๋ฅผ ๊ธฐ์–ตํ•˜๋Š” ํ•จ์ˆ˜์ž…๋‹ˆ๋‹ค. ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ์—์„œ ๋ชจ๋“  ํ•จ์ˆ˜๋“ค์„ Environment๋ผ๋Š” ํ”„๋กœํผํ‹ฐ๋ฅผ ๊ฐ€์ง€๋Š”๋ฐ ์—ฌ๊ธฐ์— ์™ธ๋ถ€ ํ•จ์ˆ˜์˜ ๋ณ€์ˆ˜์˜ ์ฐธ์กฐ๊ฐ’์ด ์ €์žฅ๋˜์–ด ์™ธ๋ถ€ ํ•จ์ˆ˜์˜ ๋ณ€์ˆ˜์— ์ ‘๊ทผ์ด ๊ฐ€๋Šฅํ•ฉ๋‹ˆ๋‹ค.https://enjoydev.life/blog/javascript/6-closure JavaScript์˜ ํด๋กœ์ €(Closure)๋ž€? (feat. React์˜ useState)JavaScript์˜ ํด๋กœ์ €์˜ ์›๋ฆฌ๋ฅผ ์‰ฝ๊ฒŒ ๋ฐฐ์›Œ๋ณด๊ณ  ์–ด๋–ค ์ƒํ™ฉ์— ์‚ฌ์šฉ๋˜๋Š”์ง€ ์•Œ์•„๋ณด๋„๋ก ํ•˜๊ฒ ์Šต๋‹ˆ๋‹ค.enjoydev.life2. ํด๋กœ์ €์˜ ๋‹จ์ ๊ณผ ํ•ด๊ฒฐ๋ฐฉ๋ฒ•์— ๋Œ€ํ•ด ์„ค๋ช…ํ•ด์ฃผ์„ธ์š”.ํด๋กœ์ €๋Š” ์™ธ๋ถ€ํ™˜๊ฒฝ์˜ ๋ณ€์ˆ˜๋ฅผ ๊ณ„์† ๊ธฐ์–ตํ•˜๊ณ  ์žˆ๊ธฐ ๋•Œ๋ฌธ์— ๊ฐ€๋น„์ง€์ปฌ๋ž™ํ„ฐ์˜ ๋Œ€์ƒ์ด ๋˜์ง€ ์•Š์•„ ๋ฉ”๋ชจ๋ฆฌ ๋ˆ„์ˆ˜๊ฐ€ ์ผ์–ด๋‚  ์ˆ˜ ์žˆ..

    ํ”„๋ก ํŠธ์—”๋“œ ๋ฉด์ ‘(Sync, Async, ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ์˜ ๋™์ž‘ ์›๋ฆฌ, Call Stack, TaskQueue, Event Loop)

    1. Sync, Async์˜ ์ฐจ์ด์ (๋™๊ธฐ, ๋น„๋™๊ธฐ์˜ ์ฐจ์ด์ )์— ๋Œ€ํ•ด์„œ ์„ค๋ช…ํ•ด์ฃผ์„ธ์š”.Sync๋Š” ์ž‘์—… ์š”์ฒญ์ด ์ด๋ค„์ง€๊ณ , ์š”์ฒญ ์‘๋‹ต์„ ๊ธฐ๋‹ค๋ฆฌ๋Š” ๊ฒƒ์„ ์˜๋ฏธํ•ฉ๋‹ˆ๋‹ค. Async๋Š” ํŠน์ •ํ•œ ์š”์ฒญ์˜ ์‘๋‹ต์„ ๊ธฐ๋‹ค๋ฆฌ์ง€ ์•Š๊ณ  ๋‹ค์Œ ์ž‘์—…์„ ์ˆ˜ํ–‰ํ•˜๋Š” ๊ฒƒ์„ ์˜๋ฏธํ•ฉ๋‹ˆ๋‹ค. ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ๋Š” ๊ธฐ๋ณธ์ ์œผ๋กœ ์‹ฑ๊ธ€์Šค๋ ˆ๋“œ์ด๊ธฐ ๋•Œ๋ฌธ์— ์š”์ฒญ๋œ ์ž‘์—…์„ ํ•˜๋‚˜์”ฉ ์ˆ˜ํ–‰ํ•˜์ง€๋งŒ setTimeout์ด๋‚˜ fetch๊ณผ ๊ฐ™์€ Web API๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ ๋น„๋™๊ธฐ๋กœ ์ฒ˜๋ฆฌํ•  ์ˆ˜ ์žˆ๊ฒŒ ๋ฉ๋‹ˆ๋‹ค. 2. ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ์˜ ๋™์ž‘ ์›๋ฆฌ์— ๋Œ€ํ•ด ์„ค๋ช…ํ•ด์ฃผ์„ธ์š”.์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ๋Š” ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ์—”์ง„ ์œ„์—์„œ ๋™์ž‘ํ•˜๋Š”๋ฐ์š”, ๋Œ€ํ‘œ์ ์œผ๋กœ ๊ตฌ๊ธ€์˜ V8์—”์ง„์ด ์žˆ์Šต๋‹ˆ๋‹ค. ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ์—”์ง„์€ ๋ฉ”๋ชจ๋ฆฌํž™๊ณผ ์ฝœ์Šคํƒ์œผ๋กœ ๊ตฌ์„ฑ๋˜์–ด ์žˆ์Šต๋‹ˆ๋‹ค. ๋ฉ”๋ชจ๋ฆฌ ํž™์€ ๋ณ€์ˆ˜, ํ•จ์ˆ˜ ๋“ฑ ๋ฉ”๋ชจ๋ฆฌ ํ• ๋‹น์ด ์ด๋ฃจ์–ด์ง€๋Š” ๊ณต๊ฐ„์ž…๋‹ˆ๋‹ค. ์ฝœ์Šคํƒ์—๋Š” ์ž๋ฐ”์Šคํฌ๋ฆฝ..