"์์ ๋ง์ ํผํฉ์ฃผ ๋ ์ํผ์ ๋น์จ์ ํ์ธ๊ณผ ๊ณต์ ํ๋ ์ปค๋ฎค๋ํฐ ์ฌ์ดํธ"
- ์ ์ ์ฆ๊ธฐ๊ณ , ์์ ์ ์ทจํฅ์ ๋ง๋ ๋ค์ํ๊ณ ๋ง์๋ ์ ์ ์ง์ ๋ง๋ค์ด ๋ง์ ๋ณด๊ณ ์ถ์ ๋ชจ๋ ์ฌ๋.
- ๋ง์๋ ์์ฝ ์๋ฃ๋ฅผ ๊ณต์ ํ๊ณ ์ ํ๋ ์ฌ๋.
ํ๋ช
OHZU
์๋, ๋ด์ผ๋ฐฐ์์บ ํ์ ๊ธฐ๋๊ธด ์ฌ์ ์ ๋ง๋ฌด๋ฆฌํ๋ ์ต์ข
ํ๋ก์ ํธ 5์ฃผ
์ ๊ธฐ๊ฐ ๋์ ๋ชจ๋ ํ์๋ค์ด ํจ๊ป ์ต์ ์ ๋ค ํ๊ฒ ๋ค๋ ์์ง๋ฅผ ๋ด์์ต๋๋ค. ์ ํฌ๊ฐ 5์กฐ์ด๊ธฐ๋ ํ๊ณ ์! ์ ํฌ ํ๋ก์ ํธ ์ฃผ์ ๋ ์ฐ์์ํฌ ์ ์๋ ํ๋ช
์ ์ง์ด๋ดค๋๋ฐ, ์๋น์ค ๋ช
๋ ๋์ผํ๊ฒ ํ๊ธฐ๋ก ๊ฒฐ์ ๋์์ต๋๋ค!
์ต์์ง - ๊ธ ์์ฑ ํ์ด์ง, ๋ง์ด ํ์ด์ง, ๊ด๋ฆฌํ์ด์ง
๋ฐํ์ธ - ๋ก๊ทธ์ธ/ํ์๊ฐ์
ํค๋/ํธํฐ
๊น๋ํ - ๊ฒ์๋ฌผ ์์ธ ํ์ด์ง
๊นํ์ธ - ๋ฉ์ธ ํ์ด์ง
๊นํฌ์ - ์ ์ฒด UI ๋์์ธ
- ๊ตญ๋ฏผ ๊ณผ๋ฐ์ด ์ ์ ์ฆ๊ธฐ๋ ์ฐ๋ฆฌ๋๋ผ์์ ์ ์ ๋ํด ์ด์ผ๊ธฐ ๋๋ ์ ์๋ ์ปค๋ฎค๋ํฐ๋ฅผ ๋ง๋ค์ด ๋ณธ๋ค.
- ์์ฃผ ๋ง์๋ ์์ฃผ, ๋งฅ์ฃผ์ ๋ง์ด ์๋ ์๋ค๋ฅธ ๋ง์ ๊ฒฝํํ ์ ์๋ค.
- ์ ์๋ฆฌ์์ ๋ถ์๊ธฐ ๋ฉ์ด์ปค๊ฐ ๋ ์ ์๋ค.
- ๋น์ฃผ๋ฅ ์ฃผ์ข ์ ๋ํ ์๋น์์ ๊ด์ฌ์ ์ฆ๋์ํฌ ์ ์๋ค.
- ์ ์ ์ ์ข์ํ๋ ์ฌ๋๋ ์ ์ ๋ง์๊ฒ ์ฆ๊ธธ ์ ์๋ ๋ ์ํผ๋ฅผ ์ฐพ์๋ณผ ์ ์๋ค.
- ์์ ๋ง์ ๋ ์ํผ๋ฅผ ๊ณต์ ํ์ฌ ํจ๊ป ์ฆ๊ธธ ์ ์๋ค.
- ์ทจํฅ์ด ๋น์ทํ ์ฌ๋๋ผ๋ฆฌ ์ปค๋ฎค๋์ผ์ด์ ์ด ๊ฐ๋ฅํ๋ค.
- ์ฃผ ํ๊ฒ์ ๊ณ ๋ คํ์ฌ ๊ท์ฝ๊ณ ๋ฐ๋ํ ๋๋์ด ๋๋ฉด์๋ ์ง๊ด์ ์ด๊ณ ์ฌํํ UI ๊ตฌ์ฑ
- SNS์ ๋ถํฌ๋์ด ์๋ ํผํฉ์ฃผ์ ๋ ์ํผ๋ฅผ ํ ๊ณณ์์ ๋ณด๊ณ ์ถ๋ค.
- ๋์ ํผํฉ์ฃผ ๋ ์ํผ๋ฅผ ๊ณต์ ํ๊ณ ์ถ๋ค.
- ๋ค๋ฅธ ์ฌ๋์ ํผํฉ์ฃผ ๋ ์ํผ๊ฐ ๊ถ๊ธํ๋ค.
- ์๋ค๋ฅด๊ฒ ์ ์ ์ฆ๊ธฐ๊ณ ์ถ์๋ฐ, ์ด๋์ ์ ๋ณด๋ฅผ ์ฐพ์์ผ ํ ์ง ๋ชจ๋ฅด๊ฒ ๋ค.
- ์ ์ ์ข์ํ๋ ์ฌ๋๋ค, ๋น์ทํ ์ทจํฅ์ ์ฌ๋๋ค๊ณผ ์ํตํ๊ณ ์ถ๋ค.
1. ๋์ ๋ ์ํผ ๊ฒ์
- ๋์ ๋ ์ํผ๋ฅผ ์ฃผ์ข ๋ฐ ์ฌ๋ฃ๋ฅผ ๊ธฐ์ฌํ์ฌ ์์ฑํ ์ ์๋ค.
- ๊ฒ์๊ธ์ ๋ชจ๋ ์ ์ ๊ฐ ๋ณผ ์ ์์ง๋ง, ํ์๊ฐ์ ์ ํ ์ ์ ๋ง ๊ฒ์๊ฐ ๊ฐ๋ฅํ๋ค.
- ๊ฒ์๊ธ์์๋ ๋๊ธ ๋ฐ ๋ต๊ธ๋ก ์ํตํ ์ ์๊ณ , ๋ฌธ์ ๊ฐ ๋๋ ๊ธ์ด๋ ๋๊ธ์ ์ ๊ณ ํ ์ ์๋ค.
2. ์ ์ฒด ๋ ์ํผ ํ์ธ
- ์นดํ ๊ณ ๋ฆฌ๋ณ๋ก ๋ ์ํผ๋ฅผ ํ์ธํ ์ ์๋ค.
- ๊ฒ์๊ธ์ ์ธ๊ธฐ ์ / ์กฐํ์ ์ / ์ต์ ์์ผ๋ก ๋ถ๋ฅํ์ฌ ํ์ธํ ์ ์๋ค.
- ์ํ๋ ์ฃผ์ข ์ด๋ ์ฌ๋ฃ๋ฅผ ๊ฒ์ํ์ฌ ๊ฒ์๋ฌผ์ ์ฐพ์๋ณผ ์ ์๋ค.
3. ๋ง์ด ํ์ด์ง
- ๋ณธ์ธ์ด ์์ฑํ ๋ ์ํผ, ์ข์์ ๋๋ฅธ ๋ ์ํผ, ์ต๊ทผ ๋ณธ ๋ ์ํผ๋ฅผ ์นดํ ๊ณ ๋ฆฌ ๋ณ๋ก ํ์ธํ ์ ์๋ค.
- ํ๋ก์, ํ๋ก์ ๋ชฉ๋ก์ ํ์ธํ๊ณ ํด๋น ์ ์ ์ ํ๋กํ๋ก ์ด๋ํ ์ ์๋ค.
- ํ์ด์ง์ ๋ค์ด์์ ๋, 5~10์ด ์์ ์ด๋ค ์ปจ์ ์ ์๋น์ค์ธ์ง ์ ์ ๊ฐ ์ธ์งํ ์ ์๋๋ก ํ ๊ฒ
- ์ด๋ค ๋ฒํผ์ ๋๋ฅด๊ฑฐ๋, ์ก์ ์ ์ทจํ ๋ ์ ์ ๊ฐ ์์ํ๋ ๊ฒ๋ค์ ๋ณด์ฌ์ง๋๋ก ํ ๊ฒ
- ๋ชจ๋ฐ์ผ ํ๊ฒฝ์์๋ ์์ ๊ฐ์ ๋ชฉํ๋ฅผ ์ด๋ฃจ๋๋ก ํ ๊ฒ
1. Library & Language
React
- ์๋ก๊ณ ์นจ์ ํ์ง ์์ผ๋ฉฐ, ์ฌ์ฉ์ ์ธํฐ๋ ์ ์ ๋ฐ๋ผ ํ์ํ ๋ถ๋ถ๋ง ๋ฆฌ๋ ๋๋ง์ด ๋๋๋ก ํ๊ธฐ ์ํด ์ฌ์ฉํฉ๋๋ค.
- ์ปดํฌ๋ํธ ๋จ์์ ๊ฐ๋ฐ์ด ๊ฐ๋ฅํ์ฌ ์์ฐ์ฑ๊ณผ ์ ์ง๋ณด์๊ฐ ์ฉ์ดํ์ฌ ์ฌ์ฉํฉ๋๋ค.
Redux vs React Query (๋ฐ์ดํฐ ๊ด๋ฆฌ)
- React Query
- Redux๋ฅผ ์ฌ์ฉํ๊ธฐ ์ํ ๋ณด์ผ๋ฌํ๋ ์ดํธ ์ฝ๋๊ฐ ๋ง์ต๋๋ค. ๋ฐ๋ฉด React Query๋ฅผ ์ฌ์ฉํ๋ฉด Redux๋ณด๋ค ํ๋ก์ ํธ ๊ตฌ์กฐ๊ฐ ๋จ์ํด์ ธ ์ ํ๋ฆฌ์ผ์ด์ ์ ์ ์ง ๋ณด์ํ๊ธฐ ์ฝ๊ณ , ์๋ก์ด ๊ธฐ๋ฅ์ ์ฝ๊ฒ ๊ตฌ์ถํ ์ ์์ต๋๋ค.
- Redux๋ API ์ํ๋ฅผ ๊ด๋ฆฌํ๊ธฐ ์ํ ๊ท๊ฒฉํ๋ ๋ฐฉ์์ด ์์ต๋๋ค. ์ ์ญ ์ํ ๊ด๋ฆฌ ๋ผ์ด๋ธ๋ฌ๋ฆฌ์ด๊ธฐ ๋๋ฌธ์ ๋๋ค. ๋ฐ๋ฉด React Query๋ ์๋ฒ ์ํ๋ฅผ ๊ด๋ฆฌํ๋ ๋ผ์ด๋ธ๋ฌ๋ฆฌ์ ๋๋ค. Hook์ ์ฌ์ฉํ์ฌ React Component ๋ด๋ถ์์ ์์ฐ์ค๋ฝ๊ฒ ๋น๋๊ธฐ ์๋ฒ ๋ฐ์ดํฐ๋ฅผ ์ฌ์ฉํ ์ ์๋ ๋ฐฉ๋ฒ์ ์๋ ค์ค๋๋ค.
JavaScript vs TypeScript
- TypeScript
- JavaScript(์ดํ JS)๋ ๊ฐ๋ฐํ๊ฒฝ์์ ์๋ฌ๋ฅผ ๊ฐ์งํ๊ธฐ ์ด๋ ต์ต๋๋ค(๋ฐํ์ ์๋ฌ). ๋ฐ๋ฉด TS๋ ๊ฐ๋ฐ์ค์ ์กฐ๊ธฐ ๋ฒ๊ทธ๋ฅผ ๊ฐ์งํ ์ ์์ต๋๋ค(์ปดํ์ผ ์๋ฌ). ๋ฐ๋ผ์ ๋ฒ๊ทธ ๋ฐ ์์์น ๋ชปํ ๋์ ๊ฐ๋ฅ์ฑ์ ์ค์ผ ์ ์์ต๋๋ค.
- ๋ฒ๊ทธ ๋ฐ ์๋ฌ๋ฅผ ๋นจ๋ฆฌ ์บ์นํ ์ ์์ต๋๋ค. ์ด๋ ๊ณง ์๋น์ค ์ ์ง ๊ด๋ฆฌ๊ฐ ์์ํฉ๋๋ค.
2. Next.Js
- ๊ฒ์์ CSR์ ๋จ์ ์ธ SEO(๊ฒ์์์ง ์ต์ ํ) ๊ธฐ๋ฅ์ ๋ณด์ํ ์ ์์ต๋๋ค.
- SSR ๋ฐฉ์์ ์ฌ์ฉํ์ฌ ์ฌ์ฉ์๊ฐ ์ด๊ธฐํ๋ฉด์ ๋ณผ ๋ ๋ก๋ฉ์์ด HTML์ ๋ณผ ์ ์๊ณ , JS ๋ค์ด๋ก๋ ํ ํ์ด์ง ์ด๋์ CSR ๋ฐฉ์์ผ๋ก ๋ธ๋ผ์ฐ์ ์์ ์ฒ๋ฆฌํ๊ฒ ํ๋ฏ๋ก ๋ณด๊ธฐ ํธํฉ๋๋ค.
- ์ง๊ด์ ์ธ ํ์ด์ง ๊ธฐ๋ฐ ๋ผ์ฐํ (/pages/search/cocktail) ๊ธฐ๋ฅ์ด ์์ต๋๋ค. ****ํ์ด์ง ๊ธฐ๋ฐ ๋ผ์ฐํ ์์คํ ์ ์ฑํํ๋ Next.js๋ React๋ณด๋ค ํ์ด์ง ์ด๋์ ๊ตฌํํ๋ ๋ฐ ์์ด์ ์์ํฉ๋๋ค. (Client-Side-Navigatin)
- React๋ CSR๋ฐฉ์์ด๋ผ ๊ฒ์์์ง ์ต์ ํ์ ๋งค์ฐ ๋ถ๋ฆฌํฉ๋๋ค. ๋ฐ๋ฉด Next.js๋ ๊ฒ์์์ง ์ต์ ํ์ ์ ํฉํ SSR ๊ธฐ๋ฅ๊ณผ CSR์ ๊ตฌํํ์ฌ React์ ๋จ์ ์ ์ปค๋ฒํฉ๋๋ค.
3. Axios
Fetch๋ฅผ ์ฌ์ฉํ์ฌ ๋ฐ์ดํฐ๋ฅผ ์์ฒญ์ Response๊ฐ์ฒด๋ฅผ ๋ด๊ณ ์๋ Promise๋ฅผ ๋ฐํํฉ๋๋ค.- fetch๋ก ๋ฐ์ดํฐ๋ฅผ ์ฌ์ฉํ๊ธฐ ์ํด์๋ JSON.stringify()๋ฅผ ์ฌ์ฉํด์ผํฉ๋๋ค. Promise ๊ฐ์ฒด๋ฅผ ๋ฌธ์์ด๋ก ๋ณํํ ๋ค, ๋ฐ์ดํฐ๋ฅผ ์ฌ์ฉํ ์ ์์ต๋๋ค.
- ๋ฐ๋ฉด, Axios๋ ์ฆ์ ์ฌ์ฉํ ์ ์๋ JSON๊ฐ์ฒด๋ฅผ ๋ด๊ณ ์๋ Promise๋ฅผ ๋ฐํํฉ๋๋ค.
โ ์นด์นด์ค ํ์๊ฐ์ /๋ก๊ทธ์ธ ์,** **์ ์ ์ ๋ณด๋ฅผ JSON์ผ๋ก ์ฆ์ ์ฌ์ฉํ๊ธฐ ์ํด์ Axios๋ฅผ ์ ํํ์ต๋๋ค.
4. Tailwindcss
- ์๋น์ค ํน์ฑ์ ๋ชจ๋ฐ์ผ ์ ์ ๊ฐ ๋ง์ ๊ฒ์ผ๋ก ์์ํ์ฌ, ๋ชจ๋ฐ์ผ ๋ฐ์ํ ์คํ์ผ๋ง์ ์ ์ฉํ tailwind๋ฅผ ์ ํํ์ต๋๋ค.
- ํด๋์ค ์๋ช ์ ๋ง์ ์๊ฐ์ ์์ํ์ง ์๊ณ , ์ ์ง๋ณด์๊ฐ ํธ๋ฆฌํ์ฌ ์ฑํํ์ต๋๋ค.
- ์ผ๊ด์ฑ ์๋ ๋์์ธ ์์คํ ์ ์ ์ฉํ ์ ์๊ณ , JIT compiler๋ก ์ธํด ์ ํ์ ์ด์ง ์์์ ํ์ ์ ์์ด์ ํธ๋ฆฌํ ๋ถ๋ถ๋ค์ด ๋ง์ ์ฑํํ์ต๋๋ค.
5. Firebase
- ์ง์ Server๋ฅผ ๊ตฌ์ถํ์ง ์๊ณ ์์ฝ๊ฒ ๋ฐ์ดํฐ๋ฅผ ์ ์ฅ ๋ฐ ์กฐ์ํ ์ ์๊ธฐ ๋๋ฌธ์, ๋ฐฑ์๋ ํํธ์ ์์๋๋ ์๊ฐ์ ์ค์ฌ UI/UX ํฅ์์ ๋ ๋ง์ ์๊ฐ์ ํฌ์ํ ์ ์์ผ๋ฏ๋ก ์ฑํํ์์ต๋๋ค.
6. Vercel
- Git์ด ์ฐ๋๋์ด ๋ฐฐํฌ ๊ณผ์ ์ด ๋จ์ํ๊ณ ์ฌ์ฐ๋ฉฐ ๊ณผ์ ์ ํ์ธํ ์ ์์ด์ ์ฑํํ์ต๋๋ค.
- CDN์๋ฒ๊ฐ ์ฐ๋ฆฌ๋๋ผ์๋ ์์ด TTFB๊ฐ ๋น ๋ฅธํธ์ด์ด์ ์ฑํํ์ต๋๋ค.
Firebase Method๋ก ๊ฒ์ ๊ธฐ๋ฅ ๊ตฌํ
์ ํฌํ์ ๋ถ๋ถ ๊ฒ์(Full-text search) ๊ธฐ๋ฅ์ ์ํ์ต๋๋ค. ํ์ง๋ง Firebase method๋ก๋ ์ ํํ ํค์๋๋ฅผ ์ ๋ ฅํด์ผ ๊ฒ์(Exact-text search)์ด ๋์์ต๋๋ค. ex) โ๋ธ๋ฃจ๋ ๋ชฌ์์ด๋โ โ โ๋ธ๋ฃจ๋ ๋ชฌ์์ด๋โ ( O ) / โ๋ธ๋ฃจ๋ ๋ชฌโ โ โ๋ธ๋ฃจ๋ ๋ชฌ์์ด๋โ ( X )
์ค์ ๋ก Firebase Doc์์ ์๋ฃ๋ฅผ ์ฐพ์๋ณด๋ฉด, ๊ฒ์ ๋ผ์ด๋ธ๋ฌ๋ฆฌ๋ก Algoria(์ ๋ฃ) ๋ฑ์ ****๋ผ์ด๋ธ๋ฌ๋ฆฌ๋ฅผ ์ฌ์ฉํ๋ ๊ฒ์ ๊ถ์ฅํ๊ณ ์์ต๋๋ค.
fuse.js ๊ณต์ ์ฌ์ดํธ์ ๋ค์ด๊ฐ์ method๋ฅผ ๋ค ์ฐพ์๋ณด์์ต๋๋ค.
ํ๋์ฉ ์ ์ฉํด๋ณด๋ฉด์ โthreshold, distanceโ method์์ ํํธ๋ฅผ ์ป์์ต๋๋ค.
- threshould : ๋จ์ด ๊ฒ์ ์, ์๊ฒฉํจ์ ์กฐ์ ํฉ๋๋ค. (์๊ฒฉ 0.0 ~ 1.0)
- distance : ๊ฒ์ ๊ฒฐ๊ณผ์ ์ ์ฌ๋๋ฅผ ๊ฒฐ์ ํ๋ ๊ฐ์ค์น๋ฅผ ์ ๋ ฅํฉ๋๋ค. (์๊ฒฉ 0 ~ 1000)
โ ๋ ๊ฐ์ง method๋ฅผ ์ฌ์ฉํ์ฌ ๊ฒ์์ ์๊ฒฉํจ์ Settingํ์ต๋๋ค. ๊ทธ ๊ฒฐ๊ณผ, fuse.js๋ฅผ ์ฌ์ฉํ์ฌ ์ ํฌ ํ์ด ์ํ๋ ๋จ์ด ๊ฒ์ ๊ธฐ๋ฅ์ ๊ตฌํํด๋์ต๋๋ค.
๊ฒ์๋ฌผ ์์ฑ์ค ํ์ด์ง ์ด๋ ๋ฐฉ์ง
### **๋ฌธ์ **- ๊ฒ์๋ฌผ ์์ฑ์ค ํ์ด์ง ์ดํ์ ์์ฑ์ค์ธ ๋ฐ์ดํฐ ์์ค
- ์๋ก๊ณ ์นจ์ ๋ฐ์ดํฐ์ ์์ค
- ๋ค๋ก๊ฐ๊ธฐ ์คํ์ ๋ฐ์ดํฐ์ ์์ค ๋ฐ pathname์ ๋ณํ
- ๊ธ ์์ฑ ์๋ฃ ํ ํ์ด์ง ์ด๋์ ํ์ด์ง ์ด๋์ด ๋ฐฉ์ง๋จ
- router.events ์ค routeChangeStart ํจ์๋ฅผ ์ด์ฉํ์ฌ route์ ๊ฒฝ๋ก๊ฐ ๋ณ๊ฒฝ๋์ ์์ํ ๋ ์ด๋ํ์ธ ๋ชจ๋ฌ๊ณผ ๊ฐ์ ๋ก error๋ฅผ ๋ฐ์์์ผ ํ์ด์ง ์ด๋์ ๋ง๋๋ค.
- ์๋ก๊ณ ์นจ์ event beforeunload ๋ฅผ ์ฌ์ฉํ์ฌ ํ์ด์ง ์ด๋๋ฐฉ์ง ํ์ ์ผ๋ก ๋ง๋๋ค.
- ๋ค๋ก๊ฐ๊ธฐ ์ญ์ route ๋ณ๊ฒฝ์ด๊ธฐ ๋๋ฌธ์ 1๋ฒ๊ณผ ๊ฐ์ ๋ฐฉ๋ฒ์ผ๋ก ๋ง๋๋ฐ, ๋งํฌ๋ router.push ๋ก ์ธํด ๋ณ๊ฒฝ๋จ. ํ์ฌ์ pathname ๊ณผ router.asPath ๋ฅผ ๋น๊ตํ์ฌ ๋ค๋ฅผ ๊ฒฝ์ฐ ๋งํฌ๋ฅผ ๋ณ๊ฒฝํด์ค๋ค.
- ๊ธ ์๋ฃํ์ ํ์ด์ง ์ด๋์ด ์๊ธฐ๋๋ฐ ์ด๋๋ ํ์ด์ง ์ด๋๋ฐฉ์ง ๋ชจ๋ฌ์ด ๋ฐ์ํ๊ฒ๋๋ค. ๊ธ ์์ฑ ์๋ฃ์ ์๋ฃ ํ์ธ์ฒดํฌ state๋ฅผ ๋ณ๊ฒฝ์์ผ ๊ธ ์์ฑ์๋ฃ์ true๋ฅผ ๋ฐํํ๊ฒ ํ์ฌ ํ์ด์ง ์ด๋์ ์ํจ๋ค.
Dynamic Router ๋ก ๋ณด๋ด์ค query ๋ฅผ ์ฌ์ฉํ ์ ์๋ ๋ฌธ์
dynamic router๋ก query๋ฅผ ๋ณด๋ธ ํ์ ๋ฐ์์ ํด๋น ์ฟผ๋ฆฌ๋ก ๋ฐ์ดํฐ๋ฅผ ๋ถ๋ฌ์ค๋๋ฐ, ์๋ก๊ณ ์นจ์์๋ ๋ณด๋ด์ค ์ฟผ๋ฆฌ๊ฐ ์๊ธฐ ๋๋ฌธ์ ๋ฐ์ดํฐ๋ฅผ ๋ถ๋ฌ์ค์ง ๋ชปํ๋ ํ์
sessionStorage๋ฅผ ์ด์ฉํ์ฌ ์ฒ์์ ๋ฐ์ ์ฟผ๋ฆฌ๋ฅผ ์ ์ฅํ์ฌ ์ฌ์ฉ
๊ธด ๋ก๋ฉํ์
- ํ์ด์ง ์ ํ ์ ๋ก๋ฉ์๊ฐ์ด ๊ธธ์์
- ์ฑ๋ฅ ์ต์ ํ์ ํ์์ฑ
- ๋ก๋ฉ ํ์ด์ง ์ถ๊ฐ
- next/image๋ฅผ ์ด์ฉํ์ฌ network payloads total size๋ฅผ ๊ธฐ์กด 31,850 KiB์์ 12,829 KiB๋ก ์ค์ด๊ณ , interactive time๋ ์ ๋ฐ ๊ฐ๋์ผ๋ก ์ค์ผ ์ ์์์
- Next.js
<Image>
๋ฅผ ์ฌ์ฉํด ์ด๋ฏธ์ง ์ต์ ํ๋ฅผ ํ์ฌ Perfomance๋ฅผ ์ต๋ 30% ๊ฐ์ ํ์์ต๋๋ค. <button>
๊ณผ<Link>
ํ๊ทธ์ ๊ณ ์ ํ aria-lable๊ฐ์ ๋ถ์ฌํ์ฌ Accessibility๋ฅผ ์ต๋ 27% ๊ฐ์ ํ์์ต๋๋ค.