๋กํฐ ๋ฅ๋ค์ด๋ธ 1๋ถ: ๋ณ๋ชฉ์ ์ฐพ๋ ๋ฒ
๋กํฐ ์ ๋๋ฉ์ด์ ์ด ๋ฆ๊ฒ ๋จ๋ ํ๋ฉด์์ ๋ฐฐํฌ ๋ฒ๋ค๊ณผ ์๋ต ํค๋, ์์ ๋ด๋ถ๋ฅผ ์ง์ ๋ฏ์ด ๋ณ๋ชฉ์ ํน์ ํ๋ ๊ณผ์ . ์ถ์ธก ๋์ ์ธก์ ์ผ๋ก ์์ํ๋ ์ฑ๋ฅ ์กฐ์ฌ
Slides and long-form research notes by yceffort โ deep dives into the frontend stack, presented one slide at a time.
๋กํฐ ์ ๋๋ฉ์ด์ ์ด ๋ฆ๊ฒ ๋จ๋ ํ๋ฉด์์ ๋ฐฐํฌ ๋ฒ๋ค๊ณผ ์๋ต ํค๋, ์์ ๋ด๋ถ๋ฅผ ์ง์ ๋ฏ์ด ๋ณ๋ชฉ์ ํน์ ํ๋ ๊ณผ์ . ์ถ์ธก ๋์ ์ธก์ ์ผ๋ก ์์ํ๋ ์ฑ๋ฅ ์กฐ์ฌ
dotlottie-web์ ์ธ์คํด์ค ์์ ์ ํ๋ ์ ๋ฃจํ, freezeOnOffscreen์ 3์ค ๋ฐฉ์ด๋ฅผ ๋ฒ๋ค ์ฝ๋๋ก ์ฝ๋๋ค. ์ฐ๋ฆฌ๊ฐ ์ง์ ๋ง๋ ์ต์ ํ๊ฐ ์ ์ค๋ณต์ด์๋์ง, ๊ธฐ๋ณธ๊ฐ์ ๋ฎ์ด์จ์ ์คํ๋ ค ๋น์ฉ์ ์ฌ๋ฆฐ ๊ณณ์ ์ด๋์ธ์ง
HTMLยทJSยท์ด๋ฏธ์งยทํฐํธยทAPI์ ์บ์ ์ ์ฑ ์ ์ ํ๊ณ , ๋ฐฐํฌ ์์์ DevTools๋ก ์บ์ ๋ฌธ์ ๋ฅผ ์ง๋จํ๋ ์ค๋ฌด ๊ฐ์
CDN์ ๋์๊ณผ HTTP ์บ์ ๊ท์น์ ์ตํ๊ณ , ์ฐ๋ฆฌ ์๋น์ค์ ์๋ต ํค๋๋ก ์ ์ฅยท์ ์ ๋ยท์ฌ๊ฒ์ฆ์ ํด์ํ๋ ๊ฐ์
๋งํฌ ๋ฏธ๋ฆฌ๋ณด๊ธฐ๋ ์ ํ์์ ์ผ๋ก ์คํจ์จ์ด ๋์๊ฐ๋ถํฐ, ๋ฐํ์ ์ ํ์ด ๊ฐ๋ฆฌ๋ ๋ค ์ง์ , User-Agent์ ์ธ์ฝ๋ฉ, ์บ์ ์คํฌํผ๋, ํํธ์จ ์ญ์ฐ๊น์ง
์ฌ์ฉ์๊ฐ ์ค URL์ ์๋ฒ๊ฐ ๋์ ์ฌ๋ ์ผ์ ์ํ, ํ์ดํธ๋ฆฌ์คํธ๋ฅผ ๋ซ๋ ์ฐํ ์ฌ์ฏ ๊ฐ์ง์ ๊ทธ๊ฒ์ ๋ง๋ ๋ฐฉ์ด ์๋ฆฌ ๋ค์ฏ ๊ฐ