React, Angular, Vue.js, Svelte ๋ฑ ์ธ๊ธฐ ์๋ฐ์คํฌ๋ฆฝํธ ํ๋ ์์ํฌ์ ์ฑ๋ฅ ๋ฒค์น๋งํฌ ๋ถ์. ํต์ฌ ์งํ, ์ฌ์ฉ ์ฌ๋ก, ๊ณ ์ฑ๋ฅ ์น ์ ํ๋ฆฌ์ผ์ด์ ๊ตฌ์ถ ์ ๋ต์ ํ์ํฉ๋๋ค.
์๋ฐ์คํฌ๋ฆฝํธ ํ๋ ์์ํฌ ๋น๊ต: ์ฑ๋ฅ ๋ฒค์น๋งํฌ ๋ถ์
์ค๋๋ ๋น ๋ฅด๊ฒ ๋ณํํ๋ ์น ๊ฐ๋ฐ ํ๊ฒฝ์์ ์ฑ๋ฅ์ด ๋ฐ์ด๋๊ณ ํ์ฅ ๊ฐ๋ฅํ ์ ํ๋ฆฌ์ผ์ด์ ์ ๊ตฌ์ถํ๊ธฐ ์ํด ์ฌ๋ฐ๋ฅธ ์๋ฐ์คํฌ๋ฆฝํธ ํ๋ ์์ํฌ๋ฅผ ์ ํํ๋ ๊ฒ์ ๋งค์ฐ ์ค์ํฉ๋๋ค. ์๋ง์ ์ต์ ์ด ์๊ธฐ ๋๋ฌธ์ ๊ฐ๋ฐ์๋ ์ข ์ข ํน์ ํ๋ก์ ํธ ์๊ตฌ ์ฌํญ์ ๋ถํฉํ๊ณ ์ต์ ์ ์ฑ๋ฅ์ ์ ๊ณตํ๋ ํ๋ ์์ํฌ๋ฅผ ์ ํํ๋ ์ด๋ ค์ด ๊ณผ์ ์ ์ง๋ฉดํฉ๋๋ค. ์ด ํฌ๊ด์ ์ธ ๊ฐ์ด๋๋ ์ฌ๋ฌ ์ธ๊ธฐ ์๋ ์๋ฐ์คํฌ๋ฆฝํธ ํ๋ ์์ํฌ์ ๋ํ ์์ธํ ์ฑ๋ฅ ๋ฒค์น๋งํฌ ๋ถ์์ ์ ๊ณตํ์ฌ ์ ๋ณด์ ์ ๊ฐํ ๊ฒฐ์ ์ ๋ด๋ฆฌ๊ณ ์ ์ธ๊ณ ์ฌ์ฉ์๋ฅผ ์ํ ๊ณ ์ฑ๋ฅ ์น ์ ํ๋ฆฌ์ผ์ด์ ์ ๊ตฌ์ถํ๋๋ก ๋์ต๋๋ค.
์ฑ๋ฅ์ด ์ค์ํ ์ด์
์ฑ๋ฅ์ ์ฌ์ฉ์ ๊ฒฝํ์ ์ค์ํ ์ธก๋ฉด์ ๋๋ค. ๋๋ฆฌ๊ฑฐ๋ ์๋ต์ด ์๋ ์น ์ ํ๋ฆฌ์ผ์ด์ ์ ์ฌ์ฉ์ ๋ถ๋ง, ๋์ ์ดํ๋ฅ , ๊ถ๊ทน์ ์ผ๋ก๋ ๋น์ฆ๋์ค ์์ค๋ก ์ด์ด์ง ์ ์์ต๋๋ค. ์ฑ๋ฅ์ ์ต์ ํํ๋ฉด ๊ฒ์ ์์ง ์์๋ฅผ ๊ฐ์ ํ๊ณ , ๋์ญํญ ์ฌ์ฉ๋์ ์ค์ด๋ฉฐ, ์ ๋ฐ์ ์ธ ์ฌ์ฉ์ ๋ง์กฑ๋๋ฅผ ๋์ผ ์ ์์ต๋๋ค. ์ด๋ ํนํ ๋์ญํญ์ด ์ ํ์ ์ด๊ฑฐ๋ ๊ตฌํ ๊ธฐ๊ธฐ๋ฅผ ์ฌ์ฉํ๋ ์ง์ญ์ ์ฌ์ฉ์์๊ฒ ์ค์ํฉ๋๋ค. ์ ์ธ๊ณ์ ์ผ๋ก ์ก์ธ์ค ๊ฐ๋ฅํ ์ ํ๋ฆฌ์ผ์ด์ ์ ๋ค์ํ ๋คํธ์ํฌ ์กฐ๊ฑด๊ณผ ๊ธฐ๊ธฐ ๊ธฐ๋ฅ์์ ์ฑ๋ฅ์ด ๋ฐ์ด๋์ผ ํฉ๋๋ค.
ํต์ฌ ์ฑ๋ฅ ์งํ
ํ๋ ์์ํฌ ๋น๊ต์ ๋ค์ด๊ฐ๊ธฐ ์ ์ ์๋ฐ์คํฌ๋ฆฝํธ ํ๋ ์์ํฌ๋ฅผ ํ๊ฐํ๋ ๋ฐ ์ฌ์ฉ๋๋ ํต์ฌ ์ฑ๋ฅ ์งํ๋ฅผ ์ดํดํ๋ ๊ฒ์ด ํ์์ ์ ๋๋ค.
- ์ต์ด ๋ฐ์ดํธ ์๋ต ์๊ฐ (TTFB): ๋ธ๋ผ์ฐ์ ๊ฐ ์๋ฒ๋ก๋ถํฐ ๋ฐ์ดํฐ์ ์ฒซ ๋ฒ์งธ ๋ฐ์ดํธ๋ฅผ ๋ฐ๋ ๋ฐ ๊ฑธ๋ฆฌ๋ ์๊ฐ์ ๋๋ค. ๋ฎ์ TTFB๋ ๋ ๋น ๋ฅธ ์๋ฒ ์๋ต ์๊ฐ์ ๋ํ๋ ๋๋ค.
- ์ต์ด ์ฝํ ์ธ ๋ ๋๋ง (FCP): ๋ธ๋ผ์ฐ์ ๊ฐ DOM์์ ์ฒซ ๋ฒ์งธ ์ฝํ ์ธ ๋ฅผ ๋ ๋๋งํ๋ ๋ฐ ๊ฑธ๋ฆฌ๋ ์๊ฐ์ ๋๋ค. ์ด๋ ์ฌ์ฉ์์๊ฒ ํ์ด์ง๊ฐ ๋ก๋ฉ ์ค์์ ์๊ฐ์ ์ผ๋ก ์๋ฆฝ๋๋ค.
- ๊ฐ์ฅ ํฐ ์ฝํ ์ธ ๋ ๋๋ง (LCP): ๋ทฐํฌํธ์์ ๋ณด์ด๋ ๊ฐ์ฅ ํฐ ์ฝํ ์ธ ์์๊ฐ ๋ ๋๋ง์ ๋ง์น๋ ์์ ์ ์ธก์ ํฉ๋๋ค. ์ด๋ ์ธ์๋๋ ๋ก๋ ์๋๋ฅผ ๋ ์ ์ดํดํ๋ ๋ฐ ๋์์ด ๋ฉ๋๋ค.
- ์ํธ์์ฉ ๊ฐ๋ฅ ์๊ฐ (TTI): ํ์ด์ง๊ฐ ์์ ํ ์ํธ์์ฉ ๊ฐ๋ฅํด์ง๋ ๋ฐ ๊ฑธ๋ฆฌ๋ ์๊ฐ์ ๋๋ค. ์ฆ, ์ฌ์ฉ์๊ฐ ๋์ ๋๋ ์ง์ฐ ์์ด ๋ชจ๋ ์์์ ์ํธ์์ฉํ ์ ์์ต๋๋ค.
- ์ด ์ฐจ๋จ ์๊ฐ (TBT): ํ์ด์ง ๋ก๋ ๊ณผ์ ์์ JavaScript ์คํ์ผ๋ก ์ธํด ํ์ด์ง๊ฐ ์ฐจ๋จ๋ ์ด ์๊ฐ์ ์ธก์ ํฉ๋๋ค. ๋์ TBT ๊ฐ์ ์ฑ๋ฅ ๋ณ๋ชฉ ํ์์ ๋ํ๋ผ ์ ์์ต๋๋ค.
- ๋ฉ๋ชจ๋ฆฌ ์ฌ์ฉ๋: ์ ํ๋ฆฌ์ผ์ด์ ์ด ๋ฐํ์ ๋์ ์๋นํ๋ ๋ฉ๋ชจ๋ฆฌ ์์ ๋๋ค. ๊ณผ๋ํ ๋ฉ๋ชจ๋ฆฌ ์ฌ์ฉ๋์ ํนํ ๋ฆฌ์์ค๊ฐ ์ ํ๋ ๊ธฐ๊ธฐ์์ ์ฑ๋ฅ ๋ฌธ์ ์ ์ถฉ๋์ ์ผ์ผํฌ ์ ์์ต๋๋ค.
- CPU ์ฌ์ฉ๋: ์ ํ๋ฆฌ์ผ์ด์ ์ด ํ์๋ก ํ๋ ์ฒ๋ฆฌ ๋ฅ๋ ฅ์ ์์ ๋๋ค. ๋์ CPU ์ฌ์ฉ๋์ ๋ฐฐํฐ๋ฆฌ ์๋ช ์ ์๋ชจํ๊ณ ์ฌ์ฉ์์ ๊ธฐ๊ธฐ์์ ์คํ๋๋ ๋ค๋ฅธ ์ ํ๋ฆฌ์ผ์ด์ ์ ๋๋ฆฌ๊ฒ ํ ์ ์์ต๋๋ค.
- ๋ฒ๋ค ํฌ๊ธฐ: ๋ธ๋ผ์ฐ์ ์์ ๋ค์ด๋ก๋ํด์ผ ํ๋ JavaScript ํ์ผ์ ํฌ๊ธฐ์ ๋๋ค. ๋ ์์ ๋ฒ๋ค ํฌ๊ธฐ๋ ๋ ๋น ๋ฅธ ๋ก๋ ์๊ฐ์ ์ด๋ํฉ๋๋ค.
๊ณ ๋ ค ์ค์ธ ํ๋ ์์ํฌ
์ด ๋ถ์์ ๋ค์๊ณผ ๊ฐ์ ์ธ๊ธฐ ์๋ ์๋ฐ์คํฌ๋ฆฝํธ ํ๋ ์์ํฌ์ ์ค์ ์ ๋ ๊ฒ์ ๋๋ค.
- React: ๊ตฌ์ฑ ์์ ๊ธฐ๋ฐ ์ํคํ ์ฒ์ ๊ฐ์ DOM์ผ๋ก ์ ๋ช ํ ์ฌ์ฉ์ ์ธํฐํ์ด์ค ๊ตฌ์ถ์ ๋๋ฆฌ ์ฌ์ฉ๋๋ ๋ผ์ด๋ธ๋ฌ๋ฆฌ์ ๋๋ค.
- Angular: Google์์ ๊ฐ๋ฐํ ํฌ๊ด์ ์ธ ํ๋ ์์ํฌ๋ก, ๋ณต์กํ ์น ์ ํ๋ฆฌ์ผ์ด์ ๊ตฌ์ถ์ ์ํ ๊ฐ๋ ฅํ ๊ธฐ๋ฅ๊ณผ ๋๊ตฌ๋ฅผ ์ ๊ณตํฉ๋๋ค.
- Vue.js: ํ์ต์ด ์ฝ๊ณ ๊ธฐ์กด ํ๋ก์ ํธ์ ํตํฉํ๊ธฐ ์ฌ์ด ์ ์ง์ ์ธ ํ๋ ์์ํฌ๋ก, ์ ์ฐ์ฑ๊ณผ ์ฑ๋ฅ์ผ๋ก ์ ๋ช ํฉ๋๋ค.
- Svelte: ์ปดํฌ๋ํธ๋ฅผ ๋น๋ ์์ ์ ๋งค์ฐ ํจ์จ์ ์ธ ์ผ๋ฐ JavaScript๋ก ๋ณํํ๋ ์ปดํ์ผ๋ฌ๋ก, ๋ ์์ ๋ฒ๋ค ํฌ๊ธฐ์ ํฅ์๋ ๋ฐํ์ ์ฑ๋ฅ์ ์ ๊ณตํฉ๋๋ค.
- Preact: React์ ๋น ๋ฅด๊ณ 3kB ๋์์ผ๋ก, ๋์ผํ ์ต์ API๋ฅผ ์ ๊ณตํฉ๋๋ค.
- SolidJS: ์ฌ์ฉ์ ์ธํฐํ์ด์ค ๊ตฌ์ถ์ ์ํ ์ ์ธ์ ์ด๊ณ ํจ์จ์ ์ด๋ฉฐ ๊ฐ๋จํ JavaScript ๋ผ์ด๋ธ๋ฌ๋ฆฌ์ ๋๋ค.
- Ember.js: ์ผ์ฌ์ฐฌ ์น ์ ํ๋ฆฌ์ผ์ด์ ์ ์ํด ์ค๊ณ๋ ํ๋ ์์ํฌ์ ๋๋ค. ๊ตฌ์กฐํ๋ ์ ๊ทผ ๋ฐฉ์์ ์ ๊ณตํ๋ฉฐ ๋๊ท๋ชจ ํ๋ก์ ํธ์ ์ ํฉํฉ๋๋ค.
๋ฒค์น๋งํฌ ๋ฐฉ๋ฒ๋ก
๊ณต์ ํ๊ณ ์ ํํ ๋น๊ต๋ฅผ ๋ณด์ฅํ๊ธฐ ์ํด ๋ค์ ๋จ๊ณ๋ฅผ ํฌํจํ๋ ํ์คํ๋ ๋ฒค์น๋งํฌ ๋ฐฉ๋ฒ๋ก ์ ์ฌ์ฉํ ๊ฒ์ ๋๋ค.
- ๋ํ ์ ํ๋ฆฌ์ผ์ด์ ๊ตฌ์ถ: ๋ฐ์ดํฐ ๊ธฐ๋ฐ ๋์๋ณด๋ ๋๋ ์ ์ ์๊ฑฐ๋ ์ ํ ๋ชฉ๋ก ํ์ด์ง์ ๊ฐ์ ์ผ๋ฐ์ ์ธ ์ฌ์ฉ ์ฌ๋ก๋ฅผ ๋ํ๋ด๋ ์ํ ์ ํ๋ฆฌ์ผ์ด์ ์ ๋ง๋ญ๋๋ค. ์ด ์ ํ๋ฆฌ์ผ์ด์ ์๋ ๋ฐ์ดํฐ ๊ฐ์ ธ์ค๊ธฐ, ๋ชฉ๋ก ๋ ๋๋ง, ์ฌ์ฉ์ ์ํธ ์์ฉ ์ฒ๋ฆฌ์ ๊ฐ์ ์ผ๋ฐ์ ์ธ ๊ธฐ๋ฅ์ด ํฌํจ๋์ด์ผ ํฉ๋๋ค.
- ์ฑ๋ฅ ์ธก์ ๋๊ตฌ: Google Lighthouse, WebPageTest ๋ฐ ๋ธ๋ผ์ฐ์ ๊ฐ๋ฐ์ ๋๊ตฌ์ ๊ฐ์ ์ ๊ณ ํ์ค ์ฑ๋ฅ ์ธก์ ๋๊ตฌ๋ฅผ ์ฌ์ฉํ์ฌ ์ฑ๋ฅ ์งํ๋ฅผ ์์งํฉ๋๋ค.
- ์ผ๊ด๋ ํ ์คํธ ํ๊ฒฝ: ๋์ผํ ํ๋์จ์ด, ๋ธ๋ผ์ฐ์ ๋ฒ์ ๋ฐ ๋คํธ์ํฌ ์กฐ๊ฑด์ ํฌํจํ์ฌ ์ผ๊ด๋ ํ๊ฒฝ์์ ํ ์คํธ๋ฅผ ์ํํฉ๋๋ค. ๋ณ๋์ฑ์ ์ต์ํํ๊ธฐ ์ํด ํด๋ผ์ฐ๋ ๊ธฐ๋ฐ ํ ์คํธ ์๋น์ค๋ฅผ ์ฌ์ฉํ๋ ๊ฒ์ ๊ณ ๋ คํ์ญ์์ค. ์ด์์ ์ผ๋ก๋ ์ค์ ์ฌ์ฉ์ ๊ฒฝํ์ ์๋ฎฌ๋ ์ด์ ํ๊ธฐ ์ํด ๋ค์ํ ์ง๋ฆฌ์ ์์น์์ ํ ์คํธํฉ๋๋ค.
- ์ฌ๋ฌ ๋ฒ ๋ฐ๋ณต: ์์ ๋ณ๋์ ์ํฅ์ ์ค์ด๊ธฐ ์ํด ๊ฐ ํ ์คํธ๋ฅผ ์ฌ๋ฌ ๋ฒ ์คํํ๊ณ ํ๊ท ์ฑ๋ฅ ์งํ๋ฅผ ๊ณ์ฐํฉ๋๋ค.
- ์ฝ๋ ์ต์ ํ: ๋ชจ๋ฒ ์ฌ๋ก๋ฅผ ๋ฐ๋ฅด๊ณ ์ ์ฌ์ ์ธ ์ฑ๋ฅ ๋ณ๋ชฉ ํ์์ ํด๊ฒฐํ์ฌ ๊ฐ ํ๋ ์์ํฌ์ ๋ํด ์ฝ๋๋ฅผ ์ต๋ํ ์ต์ ํํฉ๋๋ค.
- ๋ฐ์ดํฐ ๋ถ์ ๋ฐ ๋ณด๊ณ : ์์ง๋ ๋ฐ์ดํฐ๋ฅผ ๋ถ์ํ๊ณ ๊ฒฐ๊ณผ๋ฅผ ๋ช ํํ๊ณ ๊ฐ๊ฒฐํ๊ฒ ์ ์ํ์ฌ ๊ฐ ํ๋ ์์ํฌ์ ๊ฐ์ ๊ณผ ์ฝ์ ์ ๊ฐ์กฐํฉ๋๋ค.
์ฑ๋ฅ ๋ฒค์น๋งํฌ ๊ฒฐ๊ณผ
๋ค์ ์น์ ์์๋ ์์ ์ค๋ช ํ ์งํ๋ฅผ ๊ธฐ๋ฐ์ผ๋ก ๊ฐ ํ๋ ์์ํฌ์ ์ฑ๋ฅ ๋ฒค์น๋งํฌ ๊ฒฐ๊ณผ๋ฅผ ์ ์ํฉ๋๋ค.
React
React๋ ๊ตฌ์ฑ ์์ ๊ธฐ๋ฐ ์ํคํ ์ฒ์ ๊ฐ์ DOM์ผ๋ก ์ ๋ช ํ ์ฌ์ฉ์ ์ธํฐํ์ด์ค ๊ตฌ์ถ์ ์ธ๊ธฐ ์๋ ์ ํ์ ๋๋ค. ๊ทธ๋ฌ๋ ์ ํ๋ฆฌ์ผ์ด์ ์ ๋ณต์ก์ฑ๊ณผ ์ฝ๋์ ํจ์จ์ฑ์ ๋ฐ๋ผ ์ฑ๋ฅ์ด ๋ฌ๋ผ์ง ์ ์์ต๋๋ค. ๊ฐ์ DOM์ ์ถ์ํ ๊ณ์ธต์ ์ถ๊ฐํ์ฌ ๋๋๋ก ์ฑ๋ฅ ์ค๋ฒํค๋๋ฅผ ์ ๋ฐํ ์ ์์ต๋๋ค. ๋ฉ๋ชจ์ด์ ์ด์ ๋ฐ ์ฝ๋ ๋ถ๋ฆฌ์ ๊ฐ์ ์ต์ ํ๋ React์์ ์ต์ ์ ์ฑ๋ฅ์ ๋ฌ์ฑํ๋ ๋ฐ ์ค์ํฉ๋๋ค.
๋ฒค์น๋งํฌ ์์ฝ:
- ์ฅ์ : ๋๊ท๋ชจ ์ํ๊ณ, ๊ตฌ์ฑ ์์ ์ฌ์ฌ์ฉ์ฑ, ๊ฐ๋ ฅํ ์ปค๋ฎค๋ํฐ ์ง์.
- ๋จ์ : ์ฅํฉํ ์ ์์, ์ํ ๊ด๋ฆฌ ๋ฐ ๋ผ์ฐํ ์ ์ํด ์ถ๊ฐ ๋ผ์ด๋ธ๋ฌ๋ฆฌ๊ฐ ํ์ํจ, ๊ฐ์ DOM์ผ๋ก ์ธํ ์ ์ฌ์ ์ฑ๋ฅ ์ค๋ฒํค๋.
- ์ผ๋ฐ์ ์ธ ์ฑ๋ฅ ํ๋กํ: ์ข์ ์ด๊ธฐ ๋ก๋ ์๊ฐ, ํฉ๋ฆฌ์ ์ธ ์ํธ ์์ฉ, ์ต์ ํ๋์ง ์์ ๊ฒฝ์ฐ ๋ณต์กํ ์ ๋ฐ์ดํธ์ ์ด๋ ค์์ ๊ฒช์ ์ ์์ต๋๋ค.
์์ ์ต์ ํ ๊ธฐ๋ฒ:
React.memo๋ฅผ ์ฌ์ฉํ์ฌ ๊ตฌ์ฑ ์์์ ๋ถํ์ํ ๋ค์ ๋ ๋๋ง์ ๋ฐฉ์งํฉ๋๋ค.- ์ด๊ธฐ ๋ฒ๋ค ํฌ๊ธฐ๋ฅผ ์ค์ด๊ธฐ ์ํด ์ฝ๋ ๋ถํ ์ ๊ตฌํํฉ๋๋ค.
- ๋๊ท๋ชจ ๋ชฉ๋ก ๋ ๋๋ง์ ์ํด ๊ฐ์ํ ๊ธฐ๋ฒ์ ์ฌ์ฉํฉ๋๋ค.
Angular
Angular๋ ๋ณต์กํ ์น ์ ํ๋ฆฌ์ผ์ด์ ์ ๊ตฌ์ถํ๊ธฐ ์ํ ๊ตฌ์กฐํ๋ ์ ๊ทผ ๋ฐฉ์์ ์ ๊ณตํ๋ ํฌ๊ด์ ์ธ ํ๋ ์์ํฌ์ ๋๋ค. ์ข ์์ฑ ์ฃผ์ , ๋ฐ์ดํฐ ๋ฐ์ธ๋ฉ ๋ฐ ๋ผ์ฐํ ์ ํฌํจํ ํ๋ถํ ๊ธฐ๋ฅ ์ธํธ๋ฅผ ์ ๊ณตํฉ๋๋ค. ๊ทธ๋ฌ๋ Angular๋ ๋ฐฐ์ฐ๊ธฐ ๋ ์ด๋ ต๊ณ ๋ค๋ฅธ ํ๋ ์์ํฌ์ ๋นํด ๋ฒ๋ค ํฌ๊ธฐ๊ฐ ๋ ํฝ๋๋ค. ํ๋ ์์ํฌ์ ๋ณ๊ฒฝ ๊ฐ์ง ๋ฉ์ปค๋์ฆ์ ์ ๋๋ก ๊ด๋ฆฌ๋์ง ์์ผ๋ฉด ์ฑ๋ฅ์ ์ํฅ์ ๋ฏธ์น ์๋ ์์ต๋๋ค.
๋ฒค์น๋งํฌ ์์ฝ:
- ์ฅ์ : ์ ๊ตฌ์กฐํ๋ ํ๋ ์์ํฌ, ๊ฐ๋ ฅํ ๋๊ตฌ, ๋๊ท๋ชจ ์ ํ๋ฆฌ์ผ์ด์ ์ ์ ํฉํฉ๋๋ค.
- ๋จ์ : ๊ฐํ๋ฅธ ํ์ต ๊ณก์ , ๋ ํฐ ๋ฒ๋ค ํฌ๊ธฐ, ์ฅํฉํ ์ ์์ต๋๋ค.
- ์ผ๋ฐ์ ์ธ ์ฑ๋ฅ ํ๋กํ: ๊ด์ฐฎ์ ์ด๊ธฐ ๋ก๋ ์๊ฐ (์ง์ฐ ๋ก๋ฉ์ผ๋ก ๊ฐ์ ๊ฐ๋ฅ), ์ข์ ์ํธ ์์ฉ, ๋ณ๊ฒฝ ๊ฐ์ง๊ฐ ๋ณ๋ชฉ ํ์์ด ๋ ์ ์์ต๋๋ค.
์์ ์ต์ ํ ๊ธฐ๋ฒ:
- ์ง์ฐ ๋ก๋ฉ์ ์ฌ์ฉํ์ฌ ์ด๊ธฐ ๋ฒ๋ค ํฌ๊ธฐ๋ฅผ ์ค์ ๋๋ค.
OnPush๋ณ๊ฒฝ ๊ฐ์ง ์ ๋ต์ ์ฌ์ฉํ์ฌ ๋ณ๊ฒฝ ๊ฐ์ง๋ฅผ ์ต์ ํํฉ๋๋ค.- ์ฌ์ ์ปดํ์ผ (AOT)์ ์ฌ์ฉํฉ๋๋ค.
Vue.js
Vue.js๋ ํ์ตํ๊ธฐ ์ฝ๊ณ ๊ธฐ์กด ํ๋ก์ ํธ์ ํตํฉํ๊ธฐ ์ฌ์ด ์ ์ง์ ์ธ ํ๋ ์์ํฌ์ ๋๋ค. ์ ์ฐํ๊ณ ์ง๊ด์ ์ธ API๋ฅผ ์ ๊ณตํ์ฌ ์ฑ๊ธ ํ์ด์ง ์ ํ๋ฆฌ์ผ์ด์ ๊ตฌ์ถ์ ์ธ๊ธฐ ์๋ ์ ํ์ด ๋ฉ๋๋ค. Vue.js๋ React ๋ฐ Angular์ ๋นํด ๋ฒ๋ค ํฌ๊ธฐ๊ฐ ์๊ณ ์ผ๋ฐ์ ์ผ๋ก ์ฑ๋ฅ์ด ๋ ์ข์ต๋๋ค. ๋ฐ์์ฑ ์์คํ ์ด ์ธ๋ฐํ๊ฒ ์กฐ์ ๋์ด ๋ถํ์ํ ์ ๋ฐ์ดํธ๋ฅผ ์ค์ ๋๋ค.
๋ฒค์น๋งํฌ ์์ฝ:
- ์ฅ์ : ๋ฐฐ์ฐ๊ธฐ ์ฌ์, ์ ์ฐํจ, ์์ ๋ฒ๋ค ํฌ๊ธฐ, ์ข์ ์ฑ๋ฅ.
- ๋จ์ : React ๋ฐ Angular์ ๋นํด ์ํ๊ณ๊ฐ ์์, ๋ ๊ฒฐ์ ์ ์ผ ์ ์์ต๋๋ค.
- ์ผ๋ฐ์ ์ธ ์ฑ๋ฅ ํ๋กํ: ๋น ๋ฅธ ์ด๊ธฐ ๋ก๋ ์๊ฐ, ๋ฐ์ด๋ ์ํธ ์์ฉ, ํจ์จ์ ์ธ ๋ฐ์์ฑ ์์คํ .
์์ ์ต์ ํ ๊ธฐ๋ฒ:
- ๋น๋๊ธฐ ๊ตฌ์ฑ ์์๋ฅผ ์ฌ์ฉํ์ฌ ์ด๊ธฐ ๋ ๋๋ง ์๊ฐ์ ์ค์ ๋๋ค.
- ๋ถํ์ํ ๋ค์ ๊ณ์ฐ์ ๋ฐฉ์งํ๊ธฐ ์ํด ๊ณ์ฐ๋ ์์ฑ์ ์ต์ ํํฉ๋๋ค.
- ์ ์ ์ฝํ
์ธ ์
v-once์ง์๋ฌธ์ ์ฌ์ฉํฉ๋๋ค.
Svelte
Svelte๋ ์ปดํฌ๋ํธ๋ฅผ ๋น๋ ์์ ์ ๋งค์ฐ ํจ์จ์ ์ธ ์ผ๋ฐ JavaScript๋ก ๋ณํํ๋ ์ปดํ์ผ๋ฌ์ ๋๋ค. ์ด ์ ๊ทผ ๋ฐฉ์์ ๊ฐ์ DOM์ ํ์์ฑ์ ์ ๊ฑฐํ๊ณ ๋ ์์ ๋ฒ๋ค ํฌ๊ธฐ์ ํฅ์๋ ๋ฐํ์ ์ฑ๋ฅ์ ์ ๊ณตํฉ๋๋ค. Svelte๋ ๋จ์์ฑ๊ณผ ์๋๋ก ์ธ๊ธฐ๋ฅผ ์ป๊ณ ์์ต๋๋ค.
๋ฒค์น๋งํฌ ์์ฝ:
- ์ฅ์ : ๊ฐ์ฅ ์์ ๋ฒ๋ค ํฌ๊ธฐ, ๋ฐ์ด๋ ์ฑ๋ฅ, ๊ฐ์ DOM ์์.
- ๋จ์ : ๋ ์์ ์ํ๊ณ, React ๋ฐ Angular์ ๋ค๋ฅธ ๊ตฌ์ฑ ์์ ๋ชจ๋ธ.
- ์ผ๋ฐ์ ์ธ ์ฑ๋ฅ ํ๋กํ: ๊ฐ์ฅ ๋น ๋ฅธ ์ด๊ธฐ ๋ก๋ ์๊ฐ, ๋ฐ์ด๋ ์ํธ ์์ฉ, ๋งค์ฐ ํจ์จ์ ์ธ ๋ฐํ์.
์์ ์ต์ ํ ๊ธฐ๋ฒ:
Svelte๋ ์ปดํ์ผ ํ๋ก์ธ์ค๋ก ์ธํด ๋ณธ์ง์ ์ผ๋ก ์ต์ ํ๋์ด ์์ต๋๋ค. ๊ทธ๋ฌ๋ ๊ฐ๋ฐ์๋ ๋ค์์ ํตํด ์ฝ๋๋ฅผ ์ต์ ํํ ์ ์์ต๋๋ค.
- ๋ถํ์ํ DOM ์กฐ์์ ํผํฉ๋๋ค.
- ํจ์จ์ ์ธ ์๊ณ ๋ฆฌ์ฆ์ ์ฌ์ฉํฉ๋๋ค.
Preact
Preact๋ React์ ๊ฐ๋ฒผ์ด ๋์์ผ๋ก, ์์ ํฌ๊ธฐ์ ๋์ ์ฑ๋ฅ์ ์ค์ ์ ๋ก๋๋ค. React์ ๊ฑฐ์ ํธํ๋๋ API๋ฅผ ์ ๊ณตํ์ฌ ๋ง์ ํ๋ก์ ํธ์์ ์ฝ๊ฒ ์ ํํ ์ ์์ต๋๋ค.
๋ฒค์น๋งํฌ ์์ฝ:
- ์ฅ์ : ๋งค์ฐ ์์ ํฌ๊ธฐ, ๋์ ์ฑ๋ฅ, React ํธํ API.
- ๋จ์ : React๋ณด๋ค ๊ธฐ๋ฅ์ด ์ ๊ณ ์ผ๋ถ React ๊ธฐ๋ฅ์ ์ง์๋์ง ์์ต๋๋ค.
- ์ผ๋ฐ์ ์ธ ์ฑ๋ฅ ํ๋กํ: ๋งค์ฐ ๋น ๋ฅธ ์ด๊ธฐ ๋ก๋, ๋ฐ์ด๋ ์ํธ ์์ฉ.
์์ ์ต์ ํ ๊ธฐ๋ฒ:
- Preact์ ์ต์ ํ๋ ๊ตฌ์ฑ ์์ ๋ชจ๋ธ์ ์ฌ์ฉํฉ๋๋ค.
- ๋ฒ๋ค ํฌ๊ธฐ๋ฅผ ์๊ฒ ์ ์งํ๊ธฐ ์ํด ์ข ์์ฑ์ ์ต์ํํฉ๋๋ค.
SolidJS
SolidJS๋ React์ ์ ์ฌํ ์ ์ธ์ JavaScript ๋ผ์ด๋ธ๋ฌ๋ฆฌ์ด์ง๋ง, ์ ์ฌ์ ์ผ๋ก ๋ ๋์ ์ฑ๋ฅ์ ์ ๊ณตํ๋ ๋ค๋ฅธ ๋ฐ์์ฑ ์ ๊ทผ ๋ฐฉ์์ ํ์ฉํฉ๋๋ค. ์ต์ ํ๋ ์ผ๋ฐ JavaScript๋ก ์ปดํ์ผ๋ฉ๋๋ค.
๋ฒค์น๋งํฌ ์์ฝ:
- ์ฅ์ : ๋์ ์ฑ๋ฅ, ์ธ๋ฐํ ๋ฐ์์ฑ, ๊ฐ๋จํ API.
- ๋จ์ : ๋น๊ต์ ์๋ก์ด, ๋ ์์ ์ปค๋ฎค๋ํฐ.
- ์ผ๋ฐ์ ์ธ ์ฑ๋ฅ ํ๋กํ: ๋งค์ฐ ๋น ๋ฅด๊ณ ํจ์จ์ ์ธ ๋ ๋๋ง.
์์ ์ต์ ํ ๊ธฐ๋ฒ:
- ์ต์ ์ ์ ๋ฐ์ดํธ๋ฅผ ์ํด SolidJS์ ๋ฐ์์ฑ ๊ธฐ๋ณธ ์์๋ฅผ ํ์ฉํฉ๋๋ค.
- ๋ถํ์ํ ๊ตฌ์ฑ ์์ ๋ค์ ๋ ๋๋ง์ ํผํฉ๋๋ค.
Ember.js
Ember.js๋ ๊ตฌ์ฑ๋ณด๋ค ์ฝ์์ ์ฐ์ ์ํ๋ ์์ ํ ํ๋ ์์ํฌ์ ๋๋ค. ๋๊ท๋ชจ ์น ์ ํ๋ฆฌ์ผ์ด์ ์ ๊ตฌ์ถํ๊ธฐ ์ํ ๊ตฌ์กฐํ๋ ์ ๊ทผ ๋ฐฉ์์ ์ ๊ณตํฉ๋๋ค.
๋ฒค์น๋งํฌ ์์ฝ:
- ์ฅ์ : ๋งค์ฐ ๊ตฌ์กฐํ๋์ด ์์, ๋๊ท๋ชจ ์ ํ๋ฆฌ์ผ์ด์ ์ ์ ํฉ, ๊ฐ๋ ฅํ ์ฝ์.
- ๋จ์ : ๊ฐํ๋ฅธ ํ์ต ๊ณก์ , ๋ ํฐ ๋ฒ๋ค ํฌ๊ธฐ.
- ์ผ๋ฐ์ ์ธ ์ฑ๋ฅ ํ๋กํ: ์ ์คํ ์ต์ ํ๋ฅผ ํตํด ์ฑ๋ฅ์ด ์ข์ ์ ์์ต๋๋ค.
์์ ์ต์ ํ ๊ธฐ๋ฒ:
- Ember์ ๋ด์ฅ ์ฑ๋ฅ ๋๊ตฌ๋ฅผ ์ฌ์ฉํฉ๋๋ค.
- ๋ฐ์ดํฐ ๋ก๋ฉ ๋ฐ ๋ ๋๋ง์ ์ต์ ํํฉ๋๋ค.
๋น๊ต ๋ถ์ ํ ์ด๋ธ
๋ค์ ํ๋ ํต์ฌ ์ฑ๋ฅ ์งํ๋ฅผ ๊ธฐ๋ฐ์ผ๋ก ํ๋ ์์ํฌ์ ๋ํ ๊ฐ๋ต์ ์ธ ๋น๊ต๋ฅผ ์ ๊ณตํฉ๋๋ค.
| ํ๋ ์์ํฌ | TTFB | FCP | LCP | TTI | ๋ฒ๋ค ํฌ๊ธฐ |
|---|---|---|---|---|---|
| React | ์ค๊ฐ | ์ค๊ฐ | ์ค๊ฐ | ์ค๊ฐ | ์ค๊ฐ |
| Angular | ์ค๊ฐ | ์ค๊ฐ | ์ค๊ฐ | ์ค๊ฐ | ๋ํ |
| Vue.js | ๋น ๋ฆ | ๋น ๋ฆ | ๋น ๋ฆ | ๋น ๋ฆ | ์ํ |
| Svelte | ๊ฐ์ฅ ๋น ๋ฆ | ๊ฐ์ฅ ๋น ๋ฆ | ๊ฐ์ฅ ๋น ๋ฆ | ๊ฐ์ฅ ๋น ๋ฆ | ๊ฐ์ฅ ์์ |
| Preact | ๊ฐ์ฅ ๋น ๋ฆ | ๊ฐ์ฅ ๋น ๋ฆ | ๊ฐ์ฅ ๋น ๋ฆ | ๊ฐ์ฅ ๋น ๋ฆ | ๋งค์ฐ ์์ |
| SolidJS | ๊ฐ์ฅ ๋น ๋ฆ | ๊ฐ์ฅ ๋น ๋ฆ | ๊ฐ์ฅ ๋น ๋ฆ | ๊ฐ์ฅ ๋น ๋ฆ | ์ํ |
| Ember.js | ์ค๊ฐ | ์ค๊ฐ | ์ค๊ฐ | ์ค๊ฐ | ๋ํ |
์ฐธ๊ณ : ํ์ ๊ฐ์ ์๋์ ์ด๋ฉฐ ํน์ ์ ํ๋ฆฌ์ผ์ด์ ๋ฐ ์ฌ์ฉ๋ ์ต์ ํ ๊ธฐ๋ฒ์ ๋ฐ๋ผ ๋ฌ๋ผ์ง ์ ์์ต๋๋ค.
ํ๋ ์์ํฌ ์ ํ์ ์ํฅ์ ๋ฏธ์น๋ ์์ธ
์ฑ๋ฅ์ ์ค์ํ ์์์ด์ง๋ง, ์๋ฐ์คํฌ๋ฆฝํธ ํ๋ ์์ํฌ๋ฅผ ์ ํํ ๋ ์ ์ผํ ๊ณ ๋ ค ์ฌํญ์ ์๋๋๋ค. ๊ณ ๋ คํด์ผ ํ ๊ธฐํ ์์ธ์ ๋ค์๊ณผ ๊ฐ์ต๋๋ค.
- ํ๋ก์ ํธ ์๊ตฌ ์ฌํญ: ์ ํ๋ฆฌ์ผ์ด์ ์ ๋ณต์ก์ฑ, ํ์ํ ๊ธฐ๋ฅ, ํ์ฅ์ฑ ์๊ตฌ ์ฌํญ.
- ํ ์ ๋ฌธ์ฑ: ๊ฐ๋ฐํ์ ๊ธฐ์กด ๊ธฐ์ ๋ฐ ๊ฒฝํ.
- ์ํ๊ณ ๋ฐ ์ปค๋ฎค๋ํฐ: ๋ผ์ด๋ธ๋ฌ๋ฆฌ, ๋๊ตฌ ๋ฐ ์ปค๋ฎค๋ํฐ ์ง์์ ๊ฐ์ฉ์ฑ.
- ์ ์ง๋ณด์์ฑ: ์ฝ๋๋ฒ ์ด์ค์ ์ฅ๊ธฐ์ ์ธ ์ ์ง๋ณด์์ฑ.
- ํ์ต ๊ณก์ : ํ๋ ์์ํฌ๋ฅผ ๋ฐฐ์ฐ๊ณ ์ฌ์ฉํ๋ ์ฉ์ด์ฑ.
- ๋ณด์ ๊ณ ๋ ค ์ฌํญ: ์ ํํ ํ๋ ์์ํฌ์ ๋ํ ํ์ฑ ๋ณด์ ์ ๋ฐ์ดํธ๊ฐ ์๊ณ ์ผ๋ฐ์ ์ธ ์ทจ์ฝ์ ์ ์ํํ๋์ง ํ์ธํฉ๋๋ค.
๋ชจ๋ ํ๋ ์์ํฌ์ ๋ํ ์ต์ ํ ๊ธฐ๋ฒ
์ด๋ค ํ๋ ์์ํฌ๋ฅผ ์ ํํ๋ ์น ์ ํ๋ฆฌ์ผ์ด์ ์ ์ฑ๋ฅ์ ํฅ์์ํฌ ์ ์๋ ๋ช ๊ฐ์ง ์ผ๋ฐ์ ์ธ ์ต์ ํ ๊ธฐ๋ฒ์ด ์์ต๋๋ค.
- ์ฝ๋ ๋ถํ : ์ ํ๋ฆฌ์ผ์ด์ ์ ํ์์ ๋ฐ๋ผ ๋ก๋ํ ์ ์๋ ๋ ์์ ์ฒญํฌ๋ก ๋๋๋๋ค.
- ์ง์ฐ ๋ก๋ฉ: ๋ฆฌ์์ค (์ด๋ฏธ์ง, ๋น๋์ค ๋ฑ)๋ฅผ ํ์ํ ๋๋ง ๋ก๋ํฉ๋๋ค.
- ์ต์ํ ๋ฐ ์์ถ: ๋ถํ์ํ ๋ฌธ์๋ฅผ ์ ๊ฑฐํ๊ณ ์ฝ๋๋ฅผ ์์ถํ์ฌ JavaScript ๋ฐ CSS ํ์ผ์ ํฌ๊ธฐ๋ฅผ ์ค์ ๋๋ค.
- ์บ์ฑ: ๋ธ๋ผ์ฐ์ ์ ์๋ฒ์ ์ ์ ์์ (์ด๋ฏธ์ง, CSS, JavaScript)์ ์บ์ํฉ๋๋ค.
- ์ด๋ฏธ์ง ์ต์ ํ: ์ ์ ํ ํ์์ ์ฌ์ฉํ๊ณ , ์์ถํ๊ณ , ๋ฐ์ํ ์ด๋ฏธ์ง๋ฅผ ์ฌ์ฉํ์ฌ ์ด๋ฏธ์ง๋ฅผ ์ต์ ํํฉ๋๋ค.
- ์ฝํ ์ธ ์ ์ก ๋คํธ์ํฌ (CDN): CDN์ ์ฌ์ฉํ์ฌ ์ ์ธ๊ณ ์๋ฒ์ ์ ์ ์์ ์ ๋ฐฐํฌํ์ฌ ๋ค๋ฅธ ์ง๋ฆฌ์ ์์น์ ์ฌ์ฉ์์๊ฒ ์ง์ฐ ์๊ฐ์ ์ค์ ๋๋ค. ๋ ๊ณ ๊ธ ์ต์ ํ๋ฅผ ์ํด ์ฃ์ง ์ปดํจํ ๊ธฐ๋ฅ์ ๊ฐ์ถ CDN์ ๊ณ ๋ คํ์ญ์์ค.
- ๋๋ฐ์ด์ฑ ๋ฐ ์ค๋กํ๋ง: ์ด๋ฒคํธ ๋ฆฌ์ค๋์ ๊ฐ์ ๋น์ฉ์ด ๋ง์ด ๋๋ ์์ ์ ๋น๋๋ฅผ ์ ํํฉ๋๋ค.
- ํธ๋ฆฌ ์์ดํน: ์ต์ข ๋ฒ๋ค์์ ์ฌ์ฉ๋์ง ์๋ ์ฝ๋๋ฅผ ์ ๊ฑฐํฉ๋๋ค.
- HTTP/2 ๋ฐ HTTP/3: ์ฑ๋ฅ ํฅ์์ ์ํด ์ต์ HTTP ํ๋กํ ์ฝ์ ์ฌ์ฉํฉ๋๋ค.
์ค์ ์ฌ๋ก ๋ฐ ์ฌ๋ก ์ฐ๊ตฌ
๋ง์ ํ์ฌ๋ค์ด ๋ค์ํ ์๋ฐ์คํฌ๋ฆฝํธ ํ๋ ์์ํฌ๋ฅผ ์ฑ๊ณต์ ์ผ๋ก ์ฌ์ฉํ์ฌ ๊ณ ์ฑ๋ฅ ์น ์ ํ๋ฆฌ์ผ์ด์ ์ ๊ตฌ์ถํ์ต๋๋ค. ์๋ฅผ ๋ค์ด:
- Netflix: ์ฌ์ฉ์ ์ธํฐํ์ด์ค์ React๋ฅผ ์ฌ์ฉํ์ฌ ๊ตฌ์ฑ ์์ ๊ธฐ๋ฐ ์ํคํ ์ฒ๋ฅผ ํ์ฉํ์ฌ ํจ์จ์ ์ธ ๊ฐ๋ฐ ๋ฐ ์ ์ง๋ณด์๋ฅผ ์ํํฉ๋๋ค.
- Google: ๊ตฌ์กฐํ๋ ์ ๊ทผ ๋ฐฉ์๊ณผ ๊ฐ๋ ฅํ ๋๊ตฌ๋ฅผ ํ์ฉํ์ฌ ๋ด๋ถ ์ ํ๋ฆฌ์ผ์ด์ ์ Angular๋ฅผ ์ฌ์ฉํฉ๋๋ค.
- GitLab: ํ๋ก ํธ์๋์ Vue.js๋ฅผ ์ฌ์ฉํ์ฌ ์ ์ฐ์ฑ๊ณผ ํตํฉ ์ฉ์ด์ฑ์ ๋์ด ํ๊ฐํฉ๋๋ค.
- The New York Times: ์ฑ๋ฅ ์ด์ ์ ๋งค๋ ฅ์ ๋๊ปด ํน์ ์น์ ์ Svelte๋ฅผ ์คํํ์ต๋๋ค.
- Shopify: React๋ฅผ ๊ด๋ฒ์ํ๊ฒ ์ฌ์ฉํ๊ณ React ์ํ๊ณ ๋ด์์ ์ฑ๋ฅ ์ต์ ํ ๊ธฐ๋ฒ์ ๋ง์ ํฌ์๋ฅผ ํฉ๋๋ค.
์ด๋ฌํ ์๋ ํ๋ ์์ํฌ ์ ํ์ด ํน์ ํ๋ก์ ํธ ์๊ตฌ ์ฌํญ๊ณผ ํ ์ ๋ฌธ์ฑ์ ๋ฐ๋ผ ๋ฌ๋ผ์ง๋ค๋ ๊ฒ์ ๋ณด์ฌ์ค๋๋ค. ๋ชจ๋ ํ๋ ์์ํฌ๊ฐ ๋ณดํธ์ ์ผ๋ก ์ต๊ณ ์ธ ๊ฒ์ ์๋๋๋ค. ์ต์ ์ ์ ์คํ๊ฒ ํ๊ฐํ๊ณ ์๊ตฌ ์ฌํญ์ ๊ฐ์ฅ ์ ํฉํ ๊ฒ์ ์ ํํ๋ ๊ฒ์ด ์ค์ํฉ๋๋ค.
๊ฒฐ๋ก
์ฌ๋ฐ๋ฅธ ์๋ฐ์คํฌ๋ฆฝํธ ํ๋ ์์ํฌ๋ฅผ ์ ํํ๋ ๊ฒ์ ์น ์ ํ๋ฆฌ์ผ์ด์ ์ ์ฑ๋ฅ๊ณผ ํ์ฅ์ฑ์ ํฐ ์ํฅ์ ๋ฏธ์น ์ ์๋ ์ค์ํ ๊ฒฐ์ ์ ๋๋ค. ํต์ฌ ์ฑ๋ฅ ์งํ๋ฅผ ์ดํดํ๊ณ , ๋ค์ํ ํ๋ ์์ํฌ์ ๊ฐ์ ๊ณผ ์ฝ์ ์ ํ๊ฐํ๊ณ , ์ ์ ํ ์ต์ ํ ๊ธฐ๋ฒ์ ๊ตฌํํจ์ผ๋ก์จ ์ ์ธ๊ณ ์ฌ์ฉ์๋ฅผ ์ํ ํ๋ฅญํ ์ฌ์ฉ์ ๊ฒฝํ์ ์ ๊ณตํ๋ ๊ณ ์ฑ๋ฅ ์น ์ ํ๋ฆฌ์ผ์ด์ ์ ๊ตฌ์ถํ ์ ์์ต๋๋ค. ์ฅ๊ธฐ์ ์ธ ์ ์ง๋ณด์์ฑ, ํ์ ๊ท๋ชจ ๋ฐ ์ ๋ฌธ์ฑ, ํ๋ก์ ํธ์ ํน์ ์๊ตฌ ์ฌํญ์ ๊ณ ๋ คํ๋ ๊ฒ์ ์์ง ๋ง์ญ์์ค. ๊ถ๊ทน์ ์ผ๋ก ์ต๊ณ ์ ํ๋ ์์ํฌ๋ ๊ฐ๋ ฅํ๊ณ ํ์ฅ ๊ฐ๋ฅํ๋ฉฐ ์ฑ๋ฅ์ด ๋ฐ์ด๋ ์ ํ๋ฆฌ์ผ์ด์ ์ ํจ์จ์ ์ผ๋ก ๊ตฌ์ถํ ์ ์๋๋ก ํด์ฃผ๋ ํ๋ ์์ํฌ์ ๋๋ค.
๋ฏธ๋ ๋ํฅ
์๋ฐ์คํฌ๋ฆฝํธ ํ๋ ์์ํฌ ํ๊ฒฝ์ ๋์์์ด ์งํํ๊ณ ์์ต๋๋ค. ๋ค์๊ณผ ๊ฐ์ ์๋ก์ด ๋ํฅ์ ์ฃผ๋ชฉํ์ญ์์ค.
- ์๋ฒ๋ฆฌ์ค ๋ ๋๋ง: ์๋ฒ์์ ๊ตฌ์ฑ ์์๋ฅผ ๋ ๋๋งํ์ฌ ์ด๊ธฐ ๋ก๋ ์๊ฐ๊ณผ SEO๋ฅผ ๊ฐ์ ํฉ๋๋ค.
- WebAssembly (WASM): WASM์ ์ฌ์ฉํ์ฌ ๋ธ๋ผ์ฐ์ ์์ ์ฑ๋ฅ์ด ์ค์ํ ์ฝ๋๋ฅผ ์คํํฉ๋๋ค.
- ์ฃ์ง ์ปดํจํ : ์ฌ์ฉ์์๊ฒ ๋ ๊ฐ๊น์ด ์ ํ๋ฆฌ์ผ์ด์ ๋ก์ง์ ๋ฐฐํฌํ์ฌ ์ง์ฐ ์๊ฐ์ ์ค์ ๋๋ค.
- ๋ก์ฐ์ฝ๋/๋ ธ์ฝ๋ ํ๋ซํผ: ์ด๋ฌํ ํ๋ซํผ์ ์ข ์ข ๊ธฐ๋ณธ ์๋ฐ์คํฌ๋ฆฝํธ ํ๋ ์์ํฌ์ ์์กดํ๋ฉฐ ๊ตฌํ์ ๋ฐ๋ผ ์ฑ๋ฅ์ ์ํฅ์ ๋ฏธ์น ์ ์์ต๋๋ค.
์ด๋ฌํ ๋ํฅ์ ๋ํ ์ ๋ณด๋ฅผ ์ง์์ ์ผ๋ก ์ป์ผ๋ฉด ๋ฏธ๋์ ๋๋นํ ๊ฒฐ์ ์ ๋ด๋ฆฌ๊ณ ๋ด์ผ์ ๊ณผ์ ์ ๋๋น๋ ์น ์ ํ๋ฆฌ์ผ์ด์ ์ ๊ตฌ์ถํ๋ ๋ฐ ๋์์ด ๋ ๊ฒ์ ๋๋ค.