1. ํ์ด๋๋ ์ด์
2. Next.JS
1. ํ์ด๋๋ ์ด์ (Hydration) โญ๏ธ
- ํ์ด๋๋ ์ด์
- ๋ฆฌ์กํธ์์ ์๋ฒ์ฌ์ด๋ ๋ ๋๋ง ํน์ SSG(์คํํฑ ์ฌ์ดํธ ์ ๋ค๋ ์ด์
)์ ์คํํ HTML ๊ฒฐ๊ณผ๋ฌผ์ ๋ฐ์์จ ๋ค, ๋ธ๋ผ์ฐ์ ์์ ์ด๊ฒ์ ๋ค์ ๋ฆฌ์กํธ ํธ๋ฆฌ์ ๋ง๊ฒ ํ์ฑํ๋ ํ์
- ๋ฆฌ์กํธ์์ ์๋ฒ์ฌ์ด๋ ๋ ๋๋ง ํน์ SSG(์คํํฑ ์ฌ์ดํธ ์ ๋ค๋ ์ด์
)์ ์คํํ HTML ๊ฒฐ๊ณผ๋ฌผ์ ๋ฐ์์จ ๋ค, ๋ธ๋ผ์ฐ์ ์์ ์ด๊ฒ์ ๋ค์ ๋ฆฌ์กํธ ํธ๋ฆฌ์ ๋ง๊ฒ ํ์ฑํ๋ ํ์
- ๋ฆฌ์กํธ๋ DOM์ ๋ฆฌ์กํธ ์ปดํฌ๋ํธ๋ฅผ ๋ ๋๋งํด์ฃผ๋ render ๋ฉ์๋๋ฅผ ์ ๊ณตํจ ↓
/* ์ปจํ
์ด๋ DOM์ ๋ฆฌ์กํธ ์๋ฆฌ๋จผํธ๋ฅผ ๋ ๋๋งํ๋ ํจ์ */
ReactDOM.render(element, container[, callback])
- ์ด renderํจ์๋ ์ปดํ
์ด๋์ ์์์ผ๋ก ๋ฆฌ์กํธ ์ปดํฌ๋ํธ๋ฅผ ๋ฃ์ด์ฃผ๋๋ฐ, ๊ธฐ์กด์ ์ด๋ฏธ ๋ ๋๋ง ๋ ๋ฆฌ์กํธ ์ปดํฌ๋ํธ๊ฐ ์๋ค๋ฉด ์๋ก ๋ ๋๋ง ํ๋๊ฒ ์๋๋ผ ์
๋ฐ์ดํธ๋ง ํด์ค.
๊ทธ๋ฆฌ๊ณ ๋ ๋๋ง์ด ์๋ฃ๋๋ฉด ์ธ๋ฒ์งธ ์ธ์๋ก ์ ๋ฌ๋ ์ฝ๋ฐฑ์ด ์คํ๋๊ฒ ํ ์ ์์. - ์ฆ, ReactDomdml render๋ฉ์๋๋ ์ปดํฌ๋ํธ๋ฅผ ๋ ๋๋งํ ํ์ ์ฝ๋ฐฑ์ ์คํํจ
- ๋ฐ๋ฉด, ReactDOM์๋ hydrate๋ผ๋ ๋ฉ์๋๋ ์กด์ฌํจ ↓
ReactDOM.hydrate(element, container[, callback])
- ๋ฉ์๋ ๋ชจ์์ด render์ ๋๊ฐ์๋ฐ, hydrate๋ ๋ ๋๋ง ํ์ง ์๊ณ ์ด๋ฒคํธ ํธ๋ค๋ฌ๋ง ๋ถ์ฌ์ค.
- SSR(Server Side Rendering)์ ํด์ ์ด๋ฏธ ๋งํฌ์
์ด ์ฑ์์ ธ์๋ ๊ฒฝ์ฐ์๋ ๊ตณ์ด render๋ฉ์๋๋ฅผ ์ฌ์ฉํ ํ์์์ง๋ง,
hydrate๋ก ์ฝ๋ฐฑ์ ๋ถ์ฌ์ผ ํจ
CSR(Client Side Rendering)์ ํ๋ ๊ฒฝ์ฐ์๋ ํ๊ฒ ์ปจํ ์ด๋์ ๋ฆฌ์กํธ ์ปดํฌ๋ํธ๊ฐ ๋ ๋๋ง ๋ ์ ์ด ์์ ๊ฒ์ด๊ธฐ ๋๋ฌธ์ render๋ฉ์๋๋ฅผ ์ฌ์ฉ, ํ์ง๋ง SSR ํ๋ ์์ํฌ์ ํจ๊ป ๋ฆฌ์กํธ๋ฅผ ์ฌ์ฉํ ๋๋ hydrate ์ฌ์ฉ์ ๊ณ ๋ คํด์ผ ํจ.
2) Hydration ๊ณผ์ โญ๏ธ
- ์๋ฒ๊ฐ ์์ฑ๋ HTML์ ๋ด๋ ค์ค. ์ด๋ Dehydrate๋ ๋์ ์ธ ๊ฒ์ ์ ์ ์ผ๋ก ๋ง๋๋ ํ์๋ฅผ ๋งํจ.
- ๊ทธ๋ฆฌ๊ณ ๋์ JS๊ฐ ์คํ๋๋ฉด์ ๋ฆฌ์กํธ๊ฐ ์ ์ ์ธ HTML๊ณผ store๋ฅผ ๋์ ์ธ ๋ฆฌ์กํธ ์ปดํฌ๋ํธ ํธ๋ฆฌ์ store๋ก ๋ณํํ๋ ๊ณผ์ ์ด ์ผ์ด๋๋๋ฐ, ์ด๊ฑธ (Re)hydrate(์ ์ →๋์ )๋ผ๊ณ ํจ.
- ๋ฌธ์ ๋!
- ์ด๋ ๊ฒ rehydrate๊ฐ ์ผ์ด๋๋ฉด ํ๋ฉด์ด ํ ๋ฒ ๋ ๊ทธ๋ ค์ง๋ ํ์์ด ๋ฐ์ํ๊ฒ ๋๋๋ฐ, ๋ฆฌ์กํธ๋ ์๋ฒ์์ ์์ฑ๋ HTML์ด ๋ด๋ ค์์ ์ด๋ฏธ ํ๋ฉด์ ์ ๋๋ก ๋ ๋๋ง์ด ๋ฌ๋์ง ์๋ฌ๋์ง ๋ชจ๋ฅด๊ณ ์๊ธฐ ํ ์ผ์ ํ๊ธฐ ๋๋ฌธ์
- ๊ทธ๋์ SSR์ ํ๋ ๊ฒฝ์ฐ์๋ ReactDOM์ render๋ฉ์๋๊ฐ ์๋๋ผ hydrate๋ฉ์๋๋ฅผ ์ฌ์ฉํด์ผ ํ๋ ๊ฑฐ์~
- ์๋ฒ์์ ๋ด๋ ค์ค HTML๋ก ๋ ๋๋ง ๋ ํ๋ฉด์ ๊ทธ๋ฅ ๋จ์ํ ๊ทธ๋ฆผ์ผ ๋ฟ์;;(๋ฆฌ์กํธ๊ฐ ๊ด๋ฆฌํ์ง ์๋ ํ๋ฉด์ด๋ ๋ป)
SSR์ ํ๋๋ผ๋ ์ปดํฌ๋ํธ๋ฅผ ๋ฆฌ์กํธ๊ฐ ๊ด๋ฆฌํ๊ฒ ํ๊ธฐ ์ํด์๋ hydration์ ๊ผญ ํ์ํ ์์ !
3) Hydration ์ด์ โญ๏ธ
- hydrate ๋จ๊ณ์์,
- ๋ ๋๋งํ ๊ฒฐ๊ณผ๋ฌผ์ด ์ด๋ค ์ปดํฌ๋ํธ์ธ์ง ํ์ธํ๊ณ ,
- ๊ฐ ์ปดํฌ๋ํธ์ ๊ฑธ๋ฆฐ ์ด๋ฒคํธ๋ค์ ์ค์ DOM์ ๊ฑธ์ด์ฃผ๋ ๋์์ ํ๊ฒ ๋๋ค.
- ํ์ด๋๋ ์ด์
์ด ์๋ชป๋์์ ๋, ๋๋ถ๋ถ ๋ง์ฃผํ๋ ๋ฌธ์ ๋ค์ ๊ฑฐ์ 1๋ฒ ๊ณผ์ ์ด ์๋ชป๋์ด์ ์ผ์ด๋จ.
Q) ์ ๋ฐ์ํ๋๊ฐ!?
- Next.JS์์ ๋ด๋ถ์ ์ผ๋ก ์ฌ์ฉํ๋ ReactDOM.hydrate ํจ์๋ ๋ค์๊ณผ ๊ฐ์ ์ผ์ ํจ
- ์๋ฒ์์ ๋ฐ์์จ DOM tree์ ์์ฒด์ ์ผ๋ก ๋ ๋๋งํ tree๋ฅผ ๋น๊ต
- ๋ tree ์ฌ์ด์ ์ฐจ์ด(diff, difference)๋ฅผ ์ป์ด๋ธ ๋ค, ์์ฒด์ ์ผ๋ก(ํด๋ผ์ด์ธํธ์ฌ์ด๋) ๋ ๋๋ง ํ tree์ ๋น๊ตํ๋ฉด์ ์ด๋ค DOM์ด ์ด๋ป๊ฒ ๋งค์นญ๋๋์ง ์ดํดํจ
- ์ดํดํ ๋ด์ฉ์ ๋ฐ๋ผ CSR ๋์ ์คํ
- ๋ฆฌ์กํธ๋ DOM Element ๋จ์์์๋ง ๋น๊ตํ๋ฏ๋ก, className์ด๋ id ๊ฐ์ ํ๋กํผํฐ๊ฐ ์๋ฑํ ์๋ฆฌ๋จผํธ์ ์๋ชป ๋ถ๋ ํ์์ด ๋ฐ์ํ๊ฒ ๋๋ฉฐ, ์ด๋ก ์ธํด ์๋ชป๋ ์คํ์ผ์ด ๋จนํ๋ ๊ฒ์ด ๊ฐ์ฅ ์ผ๋ฐ์ ์ผ๋ก ๊ฒช์ ์ ์๋ ๋ฌธ์ ์.
- ์๋ฅผ ๋ค๋ฉด, ๋ชจ๋ฐ์ผ์์๋ง sticky Header ๋ฅผ ๋ ๋๋ง ํ๋๋ก ํ์๋๋ฐ, ๋ฐ์คํฌํ ํด๋ผ์ด์ธํธ์ Contents์ sticky Header์ ์คํ์ผ์ด ๋จนํ์๋ค๊ฑฐ๋, ํ๋ ์
Q) ์ด๋ป๊ฒ ํด๊ฒฐํ๋๊ฐ!?
- ์ ์์ ์ธ ํด๊ฒฐ ๋ฐฉ๋ฒ
- ํด๋ผ์ด์ธํธ ์ฌ์ด๋์์๋ง, ํน์ ์๋ฒ ์ฌ์ด๋์์๋ง ๋ ๋๋ง๋๋ ๋ก์ง์ ์ ๊ฑฐ(์ฝ๊ฒ ๋งํด return null์ ํ์ง ์์)
1. return null ๋์ return <div />
2. return null ๋์ visibility: hidden; ๋๋ display: none;
- ํด๋ผ์ด์ธํธ ์ฌ์ด๋์์๋ง, ํน์ ์๋ฒ ์ฌ์ด๋์์๋ง ๋ ๋๋ง๋๋ ๋ก์ง์ ์ ๊ฑฐ(์ฝ๊ฒ ๋งํด return null์ ํ์ง ์์)
- ๊ผผ์ ํด๊ฒฐ ๋ฐฉ๋ฒ
- ์ด ๋ฌธ์ ๊ฐ ๋ฐ์ํ๋ ์ปดํฌ๋ํธ๊ฐ ๋น๋๊ธฐ๋ก ๋ฐ์์ฌ ํน์ ๋ฐ์ดํฐ๋ฅผ ๊ผญ ํ์๋ก ํ๋ค๊ฑฐ๋, return null์ด ์๋๋ฉด ๋ ์ด์์์ด ๊นจ์ง๋ค๊ฑฐ๋, ์ปดํฌ๋ํธ ๋ก์ง์ด ๋ณต์กํด ์ ๋ฐฉ๋ฒ์ผ๋ก ๊ณ ์น๊ธฐ์ ์๊ฐ์ด ์๋ค๊ฑฐ๋ ํ ๋ ๋ค์๊ณผ ๊ฐ์ ๋ฐฉ๋ฒ์ ์ฌ์ฉํ ์ ์์- ๋ฆฌ์กํธ๊ฐ ๋ ์ปดํฌ๋ํธ๋ฅผ ์ด๋ป๊ฒ๋ ๊ตฌ๋ถํ ์ ์๊ฒ ํด์ฃผ๊ธฐ!
1. ์๋ก ๋ค๋ฅธ ์๋ฆฌ๋จผํธ๋ฅผ ์ฌ์ฉ. ํนํ ์ด๋ ๊ฒ ๋ ๋๋ง์ด ๋๋ค ๋ง๋ค ํ๋ ์ปดํฌ๋ํธ์ ๋ฃจํธ๋ฅผ div, span, section, p, ๊ฐ์ ๋์ฒด ๊ฐ๋ฅํ ์๋ฆฌ๋จผํธ๋ก ๋ณ๊ฒฝ
2. ํน์, ์ฌ์ด ์ฌ์ด์ <div />๊ฐ ์๋ ์์๋ฅผ ์ฝ์
- ๋ฆฌ์กํธ๊ฐ ๋ ์ปดํฌ๋ํธ๋ฅผ ์ด๋ป๊ฒ๋ ๊ตฌ๋ถํ ์ ์๊ฒ ํด์ฃผ๊ธฐ!
2. Next
๋๋ณด๊ธฐ
CSR : ์ฒซ ๋ ๋์ ๊ทธ๋ฅ ํ์ด์ง ๋ก๋, ๋ค์ ๋ ๋๋งํจ์ผ๋ก์จ ๋ฐ์ดํฐ๋ฅผ ๋ถ๋ฌ์ด. ๊ทธ๋์ ๋ฐ์ดํฐ๊ฐ ๊ฒ์์์ง์ ์ ๊ฑธ๋ฆผ. ๊ทธ๋ฌ๋ ํ ๋ฒ์ ๋ฐ์ดํฐ๋ฅผ ์์ฐฝ ๋ถ๋ฌ์ค๊ธฐ ๋๋ฌธ์ ํ์ด์ง ์ด๋ํ ๋ ๋น ๋ฆ
SSR : ์ฒซ ๋ ๋์ ๋ฐ์ดํฐ๋ ์๋ฒ์ธก์์ ํจ๊ป ๋ก๋. ๋ ๋ ํ ๋ฒ์ด๋ผ ์ด๊ธฐ ๋ก๋ฉ์๋ ๋น ๋ฅด๊ณ , ๊ฒ์์์ง์ ๋ฐ์ดํฐ๋ค์ด ๊ฑธ๋ฆผ. ๊ทธ๋ฌ๋ ํ์ด์ง ๋ถ๋ฌ์ฌ ๋๋ง๋ค ์ค๋ณต ๋ฐ์ดํฐ ๋ถ๋ฌ์์ผ ํด์ ํ์ด์ง ์ด๋์ ๋๋ฆผ.
- CSR์ ๊ฒฝ์ฐ, ์ด๊ธฐ์ ํ์ด์ง๊ฐ ์ผ๋จ ๋ ๋๊ฐ ๋ ์ดํ, ํด๋ผ์ด์ธํธ์์ ๋ฐ์ดํฐ๋ฅผ ๋ถ๋ฌ์ค๋ฉฐ ๋ค์ ํ ๋ฒ ๋ ๋๋ง
- ํํธ, SSR์ ์ํํ๋ ๊ฒฝ์ฐ, ์ฒ์ ๋ ๋๊ฐ ๋ ๋ ์๋ฒ ์ธก์์ ๋ฐ์ดํฐ๋ ํจ๊ป ๊ฐ์ ธ์์ ๊ทธ๋ ค์ค.
- ๊ทธ๋ ๊ธฐ ๋๋ฌธ์ SSR์ ๊ฒฝ์ฐ, ํ ๋ฒ์ ๋ ๋๋ง์ด ๋๊ธฐ ๋๋ฌธ์ ์ด๊ธฐ ๋ก๋ฉ์๋๊ฐ ๋น ๋ฅด์ง๋ง,
ํ์ด์ง๋ฅผ ๋๊ธธ ๋๋ง๋ค ์ค๋ณต๋๋ ๋ฐ์ดํฐ์ผ์ง๋ ์๋ฒ์ธก์์ ๋ค์ ๋ถ๋ฌ์์ค์ผํ๊ธฐ ๋๋ฌธ์ ํ์ด์ง ๊ณผ๋ถํ๊ฐ ๊ฑธ๋ฆด ์ํ์ฑ์ด CSR์ ๋นํด ํผ. - ๊ทธ๋ผ์๋ SSR์ ์ฌ์ฉํ๋ ์ด์ ๋ ํ์ด์ง๊ฐ ๋ก๋ฉ๋ ๋ ๋ฐ์ดํฐ๋ ๋์์ ๋ก๋๋๊ธฐ ๋๋ฌธ์ ๊ฒ์์์ง์ ํด๋น ๋ฐ์ดํฐ๋ค์ด ๊ฑธ๋ฆฌ๊ธฐ ๋๋ฌธ์
- ๋ฐ๋ผ์ ์ฒซ ๋ก๋์ ๋น ์ํ์ธ CSR๊ณผ ๋ฌ๋ฆฌ ๊ฒ์์์ง ์ต์ ํ์ ํจ๊ณผ์ ์ด๋ค~
1) Next์ ๋ ๋๋ง ์ํ ๋ฐฉ์ โญ๏ธ
- Next.js๋ SSR์ ๊ธฐ๋ฐ์ผ๋ก ํ์ง๋ง, ํ์ด์ง๊ฐ ๋ก๋๋ ์ดํ์ React์์ CSR์ ์ด์ฉํ๋ ๋ฐฉ์์ ์ฐจ์ฉํจ
- ํ์ด์ง๋ ์๋ฒ๊ฐ ๊ทธ๋ฆฌ๊ณ
- pages/์์ ํด๋๋ฅผ ๋ง๋ค๋ฉด, ํด๋น ๋ผ์ฐํ ์ ํ์ด์ง๋ค์ ์๋ฒ์ธก์์ ๋จผ์ ๋ก๋ํด์ค(SSR ๊ธฐ๋ฐ์ผ๋ก ์๋ฒ์ ์ฌ์ ์ ์ ์ฅ๋ ๋ ๋ํธ๋ฆฌ์ HTML ๋ก๋ → ์ฌ์ ๋ ๋๋ง(pre-render))
- ํ์ด์ง๊ฐ ๊ทธ๋ ค์ง ์ดํ์ ํ์ด์ง ๋ด๋ถ์์ ๋์ ์ธ ๋ฐ์ดํฐ๋ฅผ ํจ์นํ๋ ๊ณผ์ (axios,swr, fetch, XMLHttpRequest)์ CSR์ ๋ฐฉ์์ ๋ฐ๋ฆ.
! ์ด๋์ ๋ฐ์ดํฐ๋ค์ ์ผ๋จ ํ์ด์ง๊ฐ ๋ก๋๋ ์ดํ์ ํด๋ผ์ด์ธํธ ์ธก์์ ๋ค์ ๋ ๋๋๋ฉฐ ๋ถ๋ฌ์์ง๊ธฐ ๋๋ฌธ์ SEO์ ๊ฑธ๋ฆฌ์ง ์์.
- ๋ง์ฝ ํ์ด์ง๊ฐ ๋ก๋๋ ๋ ํจ๊ป ๋ฐ์ดํฐ๊ฐ ํจ์นญ๋์ด์ผ ํ๋ ์ํฉ์ด๋ผ๋ฉด(pre-rendering)
- next.js์ ๋ฐ์ดํฐ ํจ์นญ ๋ฐฉ์ (getInitialProps, getStaticProps, getStaticPath, getServerSideProps)์ ์ด์ฉํด ์ฒซ ๋ ๋์ ๋ฐ์ดํฐ๊ฐ ํจ์นญ๋ ์ ์๋๋ก ์ฒ๋ฆฌ๋ฅผ ํด์ฃผ์ด์ผ ํจ (์ฐธ๊ณ )
- Q) Next๋ฅผ ์ฌ์ฉํ๋ ์ด์ โญ๏ธ
- โ ์ฌ์ ๋ ๋๋ง ๋ฐ ์๋ฒ ์ฌ์ด๋ ๋ ๋๋ง
- ์๋ฒ ์ฌ์ด๋ ๋ ๋๋ง ๊ธฐ๋ฅ์ ์ ๊ณตํด ํด๋ผ์ด์ธํธ ์ฌ์ด๋ ๋ ๋๋ง ํ๊ฒฝ๋ณด๋ค ๋น ๋ฅธ ๋ ๋๋ง์ ๋ถ๋ฌ์ฌ ์ ์์
โก Hot Code Reloading ์ง์
- Next ๊ฐ๋ฐ ํ๊ฒฝ์์๋ ์ฝ๋ ๋ณ๊ฒฝ ์ฌํญ์ด ์ ์ฅ๋๋ฉด ์์ฉ ํ๋ก๊ทธ๋จ์ ์๋์ผ๋ก ๋ค์ ๋ก๋
โข ์๋ ์ฝ๋ ๋ถํ
- ์ฝ๋์ ๋ชจ๋ ๊ฐ์ ธ์ค๊ธฐ๊ฐ ๋ฒ๋ค๋ก ๋ฌถ์ฌ ๊ฐ ํ์ด์ง์ ํจ๊ป ์ ๊ณต๋จ. ๊ฒฐ๊ณผ์ ์ผ๋ก, ๋ถํ์ํ ์ฝ๋๊ฐ ํ์ด์ง์ ๋ก๋๋์ง ์๊ฒ ๋จ
โฃ ์ค๋ช ํ์X
- Next๋ ๊ธฐ๋ณธ์ ์ผ๋ก ์นํฉ๊ณผ ๋ฐ๋ฒจ์ ์ฌ์ฉํจ. ์ด๋ฏธ ์๋ฒ ์ฌ์ด๋ ๋ ๋๋ง ๋ฐ ๊ฐ๋ฐ์ ํ์ํ ์ค์ ์ด ๋์ด ์์ผ๋ฏ๋ก ๋น ๋ฅด๊ฒ ๊ฐ๋ฐ ์์ ๊ฐ๋ฅ
- ์ฌ์ฉํ๊ณ ์ถ์ ํ๋ฌ๊ทธ์ธ์ด ์๋ค๋ฉด ์์ฝ๊ฒ ์ถ๊ฐํด ์ฌ์ฉํ ์ ์๋๋ก ์ง์ํจ
โค ํ์ ์คํฌ๋ฆฝํธ ๋ด์ฅ
โฅ ํ์ผ๊ธฐ๋ฐ ๋ค๋น๊ฒ์ด์ ๊ฐ๋ฅ
- ๋ฆฌ์กํธ์์๋ `react-router`๋ผ๋ ๋ผ์ด๋ธ๋ฌ๋ฆฌ๋ฅผ ์ฌ์ฉํด ๋ผ์ฐํ ์ค์ ์ ํด์ค์ผํจ. ๊ทธ๋ก ์ธํด ํ์ด์ง์ ๊ฒฝ๋ก์ ๋ํด ์ง์ ์ค์ ์ ํด์ค์ผ ํจ
- ํ์ง๋ง Next๋ ํ์ผ ์์คํ ๊ธฐ๋ฐ ๋ผ์ฐํ ์ ์ฌ์ฉํด, ํด๋์ ๊ฒฝ๋ก์ ๋ฐ๋ผ ํ์ด์ง์ด ๊ฒฝ๋ก๊ฐ ์ค์ ๋์ด ๊ตฌ์ถ์ด ๋น ๋ฅด๊ณ ๊ด๋ฆฌ๊ฐ ํธ๋ฆฌํ๋ค๋ ์ฅ์ - Q) Next๋ฅผ ๊ตฌ์ฑํ๋ ๊ธฐ๋ณธ ์ค์ ํ์ผ์? โญ๏ธ
- A) _app.jsx, _document.jsx, _error.jsx, 404.jsx
- _app.jsx
- App ์ปดํฌ๋ํธ๋ ๋ชจ๋ ํ์ด์ง์ ๊ณตํต ํ์ด์ง ์ญํ
- App ์ปดํฌ๋ํธ๋ฅผ ์ด์ฉํ์ฌ ๋ชจ๋ ํ์ด์ง๋ค์ ์ด๊ธฐํํ์ฌ ๋ค์๊ณผ ๊ฐ์ ์ญํ ์ ํ ์ ์์
- ํ์ด์ง๋ค์ ๊ณตํต๋ ๋ ์ด์์, ํ์ด์ง๋ฅผ ํ์ํ ๋ ์ํ ์ ์ง, ์ถ๊ฐ ๋ฐ์ดํฐ๋ฅผ ํ์ด์ง์ ์ฃผ์ , ๊ธ๋ก๋ฒ CSS ์ถ๊ฐ
- _document.jsx
- ์ผ๋ฐ์ ์ผ๋ก ์์ฉ ํ๋ก๊ทธ๋จ <HTML>๋ฐ <body> ํ๊ทธ๋ฅผ ๋ณด๊ฐํ๋๋ฐ ์ฌ์ฉ
- ๋ํ๋จผํธ๋ฅผ ์ด์ฉํ์ฌ <title>, <description>, <meta>๋ฑ ํ๋ก์ ํธ์ ์ ๋ณด๋ฅผ ์ ๊ณตํ๋ HTML ์ฝ๋๋ฅผ ์์ฑํ ์ ์๊ณ ,
- ํฐํธ๋ ์ธ๋ถ api, cdn ๋ฑ์ ๋ถ๋ฌ์ค๋๋ก ํ ์ ์์
- ๋ํ CSS-in-JS์ ์๋ฒ ์ฌ์ด๋ ๋ ๋๋ง์ ์ํ ์ค์ ์ ํ ๋ ์ฌ์ฉ
- Head ํ๊ทธ์ meta ํ๊ทธ๋ฅผ ์ถ๊ฐํ์ฌ ํด๋น ํ๋ก์ ํธ์ ๋ํ ์ ๋ณด๋ฅผ ์ถ๊ฐํ ์ ์๊ณ , ๊ตฌ๊ธ ํฐํธ ๋ฑ์์ ์ ๊ณตํ๋ ํฐํธ๋ฅผ link ๋ก ๋ถ๋ฌ์ ์ ์ญ์ผ๋ก ์ ์ฉ์ํฌ ์ ์์ - _error.jsx
- next์์ ๋น๋ ๋ ํ๋ก๋์ ํ๊ฒฝ์์ ์๋ฌ๊ฐ ๋ฐ์ํ๋ฉด ์๋ฌ ํ์ด์ง๋ก ๋์ด๊ฐ
- ๋ฐ๋ก ๋ผ์ฐํ ๊ฒฝ๋ก๋ฅผ ์ค์ ํ์ง ์๋๋ผ๋, ๋น๋ ๋ ํ๋ก๋ํธ ํ๊ฒฝ์์ ์๋ฌ๊ฐ ๋ฐ์ํ๋ค๋ฉด ์๋ฌ ํ์ด์ง๋ก ์๋์ ์ผ๋ก ๋์ด๊ฐ
- ์ถ๊ฐ์ ์ผ๋ก ์๋ฌ ์ํฉ์ ๋ฐ๋ผ์ 500, 404 ๋ฑ๋ ์ถ๊ฐํ ์ ์์
- _app.jsx
/* pages/_app.jsx */
import Header from '../components/Header';
const MyApp = ({ Component, pageProps }) => {
return (
<>
<Header />
<Component {...pageProps} />
<style jsx global>
{`
body {
margin: 0;
}
`}
</style>
</>
);
};
export default MyApp;
/* pages/_document.jsx */
import Document, { Html, Head, Main, NextScript } from 'next/document';
class MyDocument extends Document {
render() {
return (
<Html lang="ko">
<Head>
<meta name="title" content="๊นํ๋ธ ๋ ํฌ์งํ ๋ฆฌ" />
<meta name="description" content="๊นํ๋ธ ๋ ํผ์งํ ๋ฆฌ ๋ฆฌ์คํธ์
๋๋ค" />
<link
href="https://fonts.googleapis.com/css?family=Noto+Sans:400,700&display=swap"
rel="stylesheet"
/>
<link
href="https://fonts.googleapis.com/css?family=Noto+Sans+KR:400,700&display=swap&subset=korean"
rel="stylesheet"
/>
</Head>
<body>
<Main />
<NextScript />
</body>
</Html>
);
}
}
export default MyDocument;
/* pages/_error.jsx */
const Error = () => {
return (
<div>
<p>์๋ฌ๊ฐ ๋ฐ์ํ์ต๋๋ค</p>
</div>
);
};
export default Error;
'Frontend ๐ > React' ์นดํ ๊ณ ๋ฆฌ์ ๋ค๋ฅธ ๊ธ
[React] controlled pattern, uncontrolled pattern etc. (0) | 2024.07.25 |
---|---|
[React] ์ฌ์ ๋ ๋๋ง, Suspense etc. (1) | 2024.07.24 |
[React] SPA, SSR, SEO etc. (1) | 2024.07.05 |
[React] useLayoutEffect, ์ด๋ฒคํธ ํธ๋ค๋ง etc. (1) | 2024.07.05 |
[React] ์ปดํฌ๋ํธ ๋ผ์ดํ ์ฌ์ดํด, Hooks etc. (0) | 2024.07.04 |