๐ช ๋ค์ด๊ฐ๋ฉฐ๋ธ๋ผ์ฐ์ ์ ๋ ๋๋ง ๊ณผ์ ์ ๋ํด์ ์์๋ณด์ ! ๋ธ๋ผ์ฐ์ ์ ๋ ๋๋ง ๊ณผ์ ์ ๋ณต์กํ ์ฌ๋ฌ ๋จ๊ณ๋ฅผ ๊ฑฐ์น๋ค.๐ชฝ ๋ ๋๋ง ๊ณผ์ DOM ํ์ฑ: HTML์ ํ์ฑํ์ฌ DOM ํธ๋ฆฌ(๋ฌธ์ ๊ฐ์ฒด ๋ชจ๋ธ)๋ฅผ ์์ฑCSSOM ์์ฑ: CSS๋ฅผ ํ์ฑํ์ฌ CSSOM ํธ๋ฆฌ(์คํ์ผ ๊ท์น ํธ๋ฆฌ)๋ฅผ ๋ง๋ฌ๋ ๋ ํธ๋ฆฌ ์์ฑ: DOM๊ณผ CSSOM์ ๊ฒฐํฉํ์ฌ ํ๋ฉด์ ๊ทธ๋ฆด ์์๋ฅผ ํฌํจํ ๋ ๋ ํธ๋ฆฌ๋ฅผ ๋ง๋ฌ๋ ์ด์์: ๊ฐ ์์์ ํฌ๊ธฐ์ ์์น๋ฅผ ๊ณ์ฐํ์ธํ
: ๊ณ์ฐ๋ ์คํ์ผ๊ณผ ์์น์ ๋ฐ๋ผ ํ๋ฉด์ ๊ทธ๋ฆผํฉ์ฑ ๋จ๊ณ: ๋ณต์กํ ๋ ์ด์ด๋ฅผ ๊ด๋ฆฌํ์ฌ ์ต์ ํ๋ ํ๋ฉด ์ถ๋ ฅ๐ฟ ์ด๋ฒคํธ ๋ฃจํ๋ ๋๋ง ๊ณผ์ ์ HTML๊ณผ CSS๋ฅผ ๊ธฐ๋ฐ์ผ๋ก ํ๋ฉด์ ํ์ํ๋ ๋ฐ ์ง์คํ๊ณ , ์ด๋ฒคํธ ๋ฃจํ๋ ๋น๋๊ธฐ ์์
์ ๊ด๋ฆฌํ์ฌ ์ฌ์ฉ์ ์ธํฐ๋์
์ ๋ํ ๋ฐ์์ฑ์ ์ ์งํฉ๋๋ค. ์ด๋ฒคํธ ๋ฃจํ๋ ๋ ๋๋ง ๊ณผ์ ์ ์ํ๊ณผ..
this๋ ํจ์๋ฅผ ํธ์ถํ ๊ฐ์ฒด์ด๋ค๐ก this โก๏ธ๏ฝโ๏ฝthis๋ ์ด๋ค ๊ฐ์ฒด๋ฅผ ๊ฐ๋ฆฌํค๋ ํค์๋์ด๋ค ! ๊ทธ๋ฐ๋ฐ this๊ฐ ๊ฐ๋ฆฌํค๋ ๊ฐ์ฒด๋ ์ํฉ์ ๋ฐ๋ผ ๋ณํ๋ค.1. mainํจ์๋ฅผ ๋ง๋ค๊ณ this๋ฅผ ์ถ๋ ฅํด๋ณด์.์ด๋ ๊ฒ main() ํจ์๋ฅผ ๋ง๋ค๊ณ ์คํ์์ผ ์ฃผ๋ฉด this๋ Window๊ฐ์ฒด๊ฐ ๋๋ค.์ฆ, main() === Window.main()๊ณผ ๊ฐ์ ์๋ฏธ์ธ ๊ฒ์ด๋ค ๐ ์ฐ๋ฆฌ๊ฐ ๋ง๋ main ํจ์๋ ์ ๋ค์ด์๋ค.2. object๊ฐ์ฒด๋ฅผ ๋ง๋ค๊ณ object์ main ๋ฉ์๋๋ฅผ ํธ์ถํ์ฌ this๋ฅผ ์ถ๋ ฅํด ๋ณด์.3. object.main์ ๋ด๋ main2๋ฅผ ์ถ๋ ฅํด ๋ณด์. main2 ํจ์๋ฅผ ํธ์ถํ ๊ฐ์ฒด๋ ๋ ์ด์ object๊ฐ ์๋๊ธฐ ๋๋ฌธ์ main2์ this๋ Window๊ฐ์ฒด๋ฅผ ์ถ๋ ฅํ๋ค.์ฌ๊ธฐ์ ์ฐ๋ฆฌ๊ฐ ์์์ผํ ์ !!..
interface์ธํฐํ์ด์ค๋ ๊ฐ์ฒด๊ฐ ๊ฐ์ ธ์ผ ํ ์์ฑ๊ณผ ๋ฉ์๋๋ฅผ ์ ์ํ๋ ๊ตฌ์กฐ์
๋๋ค. ๊ฐ์ฒด์ ๊ตฌ์กฐ๋ฅผ ์ ์ํ๊ฑฐ๋, ์์์ ํตํด ์ฝ๋์ ์ฌ์ฌ์ฉ์ฑ์ ๋์ด๋ ๋ฐ ์ฃผ๋ก ์ฌ์ฉํฉ๋๋ค.type aliasํน์ ํ์
์ ์ ์ํ๋ ๋ฐ ์ฌ์ฉ๋ฉ๋๋ค.๊ฐ์ฒด๋ฅผ ํฌํจํ ๋ค์ํ ํํ์ ํ์
์ ์ ์ํ๋ ๋ฐ ์ฌ์ฉ๋๋ฉฐ, ๋ ์ ์ฐํ ์ ์๊ฐ ๊ฐ๋ฅํฉ๋๋ค.๐จ interface๋ '๊ฐ์ฒด์ฉ์ด๋ค.','์์ํ๊ธฐ ์ํ ์ฉ์ด๋ค.'๋ผ๊ณ ๋งํ๋๋ฐ โ ์๋๋ค !! type alias ๋ฐฉ์๋ ๊ฐ์ฒด, ์์ ๋ชจ๋ ๊ฐ๋ฅํ๋ค !! 1๏ธโฃ ์ ์ฐ์ฑ / ์ ๋์จ ํ์
์ ํผ๋ ๋ฐ์type aliastype Dog = | { eat(): string; woof(): string; } | {};const jindo: Dog = { constructor(pri..
1. ํ๋ฆฌ๋ ๋๋ง(Pre-rendering)ํ๋ฆฌ๋ ๋๋ง์ ์๋ฒ๊ฐ ํ์ด์ง๋ฅผ ์ฌ์ฉ์๊ฐ ์์ฒญํ๊ธฐ ์ ์ ๋ฏธ๋ฆฌ ๋ ๋๋งํด์ ์ค๋นํด๋๋ ๋ฐฉ์์
๋๋ค. ํ์ด์ง๋ฅผ ๋ฏธ๋ฆฌ ์์ฑํ์ฌ ์บ์ฑํด ๋๋ ๊ฒ์ด ํน์ง์
๋๋ค.ํน์ง์ ์ ์์ฑ: ๋น๋ํ ๋ ๋ ๋๋ง์๋ฒ์ฌ์ด๋ ๋ ๋๋ง: ๋ฆฌํ์คํธ๊ฐ ๋ค์ด์ค๋ฉด ๋ ๋๋ง์ฅ์ : ๋น ๋ฅธ ๋ก๋ฉ ์๋ (ํ์ด์ง๊ฐ ๋ฏธ๋ฆฌ ์ค๋น๋์ด ์์), SEO์ ์ ๋ฆฌํ๋ฆฌ ๋ ๋๋ง์ ์ฌ์ฉํ๋ฉด ํ๋ฆฌํ์น๋ณด๋ค ํ์ ์๊ฐ์ด ๋นจ๋ฆฌ์ง๊ณ ๋ ๋ง์ ๋ฆฌ์์ค๋ฅผ ํ์๋ก ํ๋ ๋์ ์ฌ์ฉ์ ๊ฒฝํ์ด ํฅ์๋ฉ๋๋ค.๋จ์ : ๋์ ์ธ ์ปจํ
์ธ ์ ๋ํด ์ ์ฉํ๊ธฐ ์ด๋ ต๊ณ , ๋ฏธ๋ฆฌ ์ค๋น๋ ํ์ด์ง๋ง ์ ๊ณต ๊ฐ๋ฅํ๋ฆฌ๋ ๋๋ง์ด ์ ํฉํ ๊ฒฝ์ฐ์์ฃผ ๋ณ๊ฒฝ๋์ง ์๋ ์ฝํ
์ธ : ์๋ฅผ ๋ค์ด ๋ธ๋ก๊ทธ, ํฌํธํด๋ฆฌ์ค ์ฌ์ดํธ ๋ฑ ์์ฃผ ์
๋ฐ์ดํธ๋์ง ์๋ ์ฝํ
์ธ ๊ฐ ๋ง์ ๋.ex) ๋ธ๋ก๊ทธ, ํฌํธํด๋ฆฌ์ค ์ฌ์ดํธSEO๊ฐ ์ค์ํ ํ์ด..
๋ธ๋ผ์ฐ์ ์ ๊ฒฝ์ฐ setTimeout ์ ์๋ก ๋ค๋ฉด, Call Stack์์ Web API setTimeout ์์ฒญ ์ดํ ์ ๊ฑฐ๋ฉ๋๋ค.Web API์์ setTimeout ์ด ์๋ฃ๋๋ฉด setTimeout callback ํจ์๋ฅผ Callback Queue(์๋ฃ๊ตฌ์กฐ์ queue์ฒ๋ผ ๊ตฌํ๋ ์ ์ฅ์, ์ธ๋ถํ๋ queue๋ค์ด ์์)๋ก ์ฎ๊น๋๋ค.ํ์ฌ ์คํํ ์๋ฐ์คํฌ๋ฆฝํธ ์ฝ๋๋ฅผ ๋ชจ๋ ์คํํ ๋ค, Event Loop๊ฐ ์ง์์ ์ผ๋ก Call Stack์ด ๋น์ด์๋์ง ํ์ธํ๊ณ , ๋น์ด์๋ค๋ฉด Callback Queue์ ์๋ ์์
์์๋๋ก Call Stack์ผ๋ก ๋๊ฒจ ์คํํ๋๋ก ๋ง๋ญ๋๋ค.
1. PromisePromise๋ ๋น๋๊ธฐ ์์
์ ๊ฒฐ๊ณผ๋ฅผ ๋ํ๋ด๋ ๊ฐ์ฒด์
๋๋ค. ๋น๋๊ธฐ ์์
์ด ์ฑ๊ณต์ ์ผ๋ก ์๋ฃ๋๋ฉด ๊ฒฐ๊ณผ๊ฐ์ ์ ๊ณตํ๊ฑฐ๋, ์คํจํ๋ฉด ์๋ฌ๋ฅผ ๋ฐํํฉ๋๋ค.์ฃผ์ ํน์ง์ํ: Pending (๋๊ธฐ), Fulfilled (์ดํ), Rejected (๊ฑฐ๋ถ) ์ธ ๊ฐ์ง ์ํ๋ฅผ ๊ฐ์ง๋๋ค.๋ฉ์๋: then, catch, finally ๋ฉ์๋๋ฅผ ์ฌ์ฉํ์ฌ ๊ฒฐ๊ณผ๋ฅผ ์ฒ๋ฆฌํฉ๋๋ค.const fetchData = () => { return new Promise((resolve, reject) => { setTimeout(() => { resolve("๋ฐ์ดํฐ ์์ ์๋ฃ"); }, 1000); });};fetchData().then(result => { console.log(result); // "๋ฐ์ดํฐ ..