๋ฉ๋ชจ ์์ฑ ํ ์คํธ
๋ฉ๋ชจ๊ฐ ์ ์์ ์ผ๋ก ์ ์ฅ๋๋์ง ํ ์คํธ ํ๋์ค # ์ฃผ์ # ํ ์คํธ
๋ด์ผ์ ํ ์ผ๋ค
# ์ฃผ์ ์ ๋ฌด ## ์ฃผ๊ฐ๋ณด๊ณ ํ์ธ ## ๊ธ์ฃผ ์ํฌํธ ์ ๋ฆฌ ## ๊ธ์ฃผ ๋ฆด๋ฆฌํ ์ฒญ๊ตฌ ์ฌํญ ํ์ธ ## ํ๋ก์ ํธ ๋น์ฉ ํ์ธ ## ์ฃผ๋ง ํด์ผ ๊ทผ๋ฌด์ ํ์ธ ## ํ๋ ์บํผํ ๋ค์์ฃผ ๋ฐฉ๋ฌธ์ผ์ ์ค๋น
ํ๋ก์ ํธ ํ์ ์ค๋น
๋ค์ ์ฃผ ์์์ผ ์ค์ 10์ ํ๋ก์ ํธ ํฅ์คํ ๋ฏธํ ์ ์ํ ์ค๋น์ฌํญ: - ํ๋ก์ ํธ ๋ฒ์ ์ ์์ ์์ฑ - ํ์๋ณ ์ญํ ๋ถ๋ด - ์ผ์ ๊ณํ ์๋ฆฝ - ํ์ํ ๋ฆฌ์์ค ์ ๋ฆฌ
React 18 ์๋ก์ด ๊ธฐ๋ฅ ํ์ต
React 18์์ ์๋ก ์ถ๊ฐ๋ ๊ธฐ๋ฅ๋ค์ ํ์ตํด์ผ ํจ: 1. Concurrent Features 2. Automatic Batching 3. Suspense ๊ฐ์ ์ฌํญ 4. useId Hook 5. useDeferredValue Hook ์ด๋ฒ ์ฃผ๋ง์ ๊ณต์ ๋ฌธ์๋ฅผ ์ฝ๊ณ ๊ฐ๋จํ ์์ ๋ฅผ ๋ง๋ค์ด๋ณด์.
์๋ก์ด ์ฑ ์์ด๋์ด: ์ต๊ด ํธ๋์ปค
๋งค์ผ ์ค์ฒํ๊ณ ์ถ์ ์ต๊ด๋ค์ ๊ด๋ฆฌํ ์ ์๋ ์ฑ: ํต์ฌ ๊ธฐ๋ฅ: - ์ต๊ด ๋ฑ๋ก ๋ฐ ๊ด๋ฆฌ - ์ผ์ผ ์ฒดํฌ์ธ - ์งํ ์ํฉ ์๊ฐํ - ๋ชฉํ ๋ฌ์ฑ ์๋ฆผ - ํต๊ณ ๋ถ์ ๊ธฐ์ ์คํ: React Native + Supabase ์ถ์ ๋ชฉํ: 3๊ฐ์ ํ
์ฃผ๋ง ์ฌํ ๊ณํ
์ด๋ฒ ์ฃผ๋ง ์ ์ฃผ๋ ์ฌํ ๊ณํ: ํ ์์ผ: - ์ค์ : ํ๋ผ์ฐ ๋ฑ๋ฐ - ์คํ: ์ฑ์ฐ์ผ์ถ๋ด ๊ด๊ด - ์ ๋ : ํ๋ผ์ง ๋ง์ง ๋ฐฉ๋ฌธ ์ผ์์ผ: - ์ค์ : ์ฐ๋ ๊ด๊ด - ์คํ: ์ผํ ๋ฐ ๊ธฐ๋ ํ ๊ตฌ๋งค - ์ ๋ : ๊ณตํญ ์ด๋ ์ค๋น๋ฌผ: ๋ฑ์ฐํ, ์นด๋ฉ๋ผ, ์ ํฌ๋ฆผ
๋ ์ ๋ชฉ๋ก
์ฌํด ์ฝ๊ณ ์ถ์ ์ฑ ๋ค: ๊ฐ๋ฐ ๊ด๋ จ: - ํด๋ฆฐ ์ฝ๋ (๋ก๋ฒํธ C. ๋งํด) - ๋ฆฌํฉํ ๋ง 2ํ (๋งํด ํ์ธ๋ฌ) - ์์คํ ๋์์ธ ์ธํฐ๋ทฐ (์๋ ์ค ์ฌ) ์๊ธฐ๊ณ๋ฐ: - ์ํ ๋ฏน ํด๋น (์ ์์ค ํด๋ฆฌ์ด) - ๋ฐ์ผ ์นด๋ค๊ธฐ ์ธ๊ฐ๊ด๊ณ๋ก ์์ค: - 82๋ ์ ๊น์ง์ (์กฐ๋จ์ฃผ) - ๋ฏธ๋๋์ ๋ผ์ด๋ธ๋ฌ๋ฆฌ (๋งคํธ ํค์ด๊ทธ)
์ฑ๋ฅ ์ต์ ํ ์์ด๋์ด
์น ์ ํ๋ฆฌ์ผ์ด์ ์ฑ๋ฅ ์ต์ ํ ๋ฐฉ๋ฒ๋ค: ํ๋ก ํธ์๋: - ์ด๋ฏธ์ง ์ต์ ํ (WebP, lazy loading) - ์ฝ๋ ์คํ๋ฆฌํ - ๋ฒ๋ค ํฌ๊ธฐ ์ต์ ํ - ์บ์ฑ ์ ๋ต ๋ฐฑ์๋: - ๋ฐ์ดํฐ๋ฒ ์ด์ค ์ฟผ๋ฆฌ ์ต์ ํ - CDN ํ์ฉ - ์๋ฒ ์ฌ์ด๋ ๋ ๋๋ง - API ์๋ต ์บ์ฑ ๋ชจ๋ํฐ๋ง: - Core Web Vitals ์ธก์ - ์ฑ๋ฅ ์์ฐ ์ค์