๋ค์ ๊ธ์ ๋ฒ์ญํ์ต๋๋ค. ์๊ธ์ด ๊ถ๊ธํ๋ฉด ๊ณต์๋ฌธ์๋ฅผ ์ฐธ๊ณ ํ์ธ์. Introduction and Motivations behind React Static
๋ฒ์ญํ๊ธฐ ์ ๋งคํ ์ด๋ ค์ด ์ฉ์ด๋ค ๋ฏธ๋ฆฌ ์ ๋ฆฌ
1. isoporphic,์์ด์๋ชจํฝ, ๋ํ :๋์ผํ ์์ค๋ก ์๋ฒ์ ํด๋ผ์ด์ธํธ์์ ์๋ํ๋ ๊ฒ
2. colocation, ์ฝ๋ก์ผ์ด์ , ๋์ผ์ฅ์๋ฐฐ์น : ๋์ผํ ์ฅ์์ ๋ฐฐ์นํ๋ ๊ฒ
3. route, ๊ฒฝ๋ก, ๋ฃจํธ => ๊ฒฝ๋ก๋ก ํต์ผ
4. navigate => ํ์, navigation => ํ์
์ง๋ ์ ๋ฐ์ดํธ๋ 2018๋ 7์ 26์ผ์ด๋ค.
Nozzlie.io์์ , ์ฑ๋ฅ๊ณผ ์ ์ /๊ฐ๋ฐ์ ๊ฒฝํ์ ๋งค์ฐ ์ง์งํ๊ฒ ๊ณ ๋ คํฉ๋๋ค. ์ธ๊ณ์ ์ธ ๋ฌธ์ ๋ฅผ ํผ๋ค๊ณ ์ฃผ์ฅํ๋ ๋ค๋ฅธ ์ ์ ์ฌ์ดํธ ํด๋ค์ ์ฌ์ฉํด์ ์๋ง์ ์ฌ์ดํธ๋ค์ ์ถ์ํ์์ต๋๋ค. ํ์ง๋ง ์ฐ๋ฆฌ๋ ์์ง๋ ์ฐ๋ฆฌ์ ๋์ ๊ฟ์ ๋ง์กฑ์ํค๋ ํด์ ์ฐพ์ง ๋ชปํ์ต๋๋ค. ์ฐ๋ฆฌ๊ฐ ๋ค์์ ๋ผ์ด๋ธ๋ฌ๋ฆฌ๋ค(next.js, gatsby)์ด ์ค ํต์ฐฐ๋ ฅ์ ๊ฐ์ฌํ์ง๋ง, ๊ณ ๋ ค๋์ ์ฐ๋ฆฌ๋ ๋ ๋ง์ ๊ฒ์ ์ํ๊ฒ ๋์๋ค. ์ด ๊ธ์์ ์ฐ๋ฆฌ์ ํ๊ธฐ๋ฅผ ๋จ๊ฒจ๋ณด๊ณ ์ ํ๋ค.
next
๋ "์๋ฒ์ฌ์ด๋ ๋ฆฌ์กํธ ์ฑ์ ์ํ ๋ฏธ๋๋ฉํ ํ๋ ์์ํฌ"๋ก ์์ํ๋ค. ๊ทธ ์ดํ์๋ ์ ์ ์ฌ์ดํธ๋ฅผ ๋ด๋ณด๋ด๋ ์ง์์ ๋ฐํํ๋ค. ๊นํ์์ ๋ง์ ์์ ์คํ๋ค์ ๋ฐ์๊ณ ๊ฝค ๋น ๋ฅด๊ณ ์ค์ ์ ์ฌ์์ ๋งค์ฐ ์ ๋งํ๊ฒ ๊ฐ์๋ค. ํ์ง๋ง ์ฐ๋ฆฌ๋ ์ ์ ๋ด๋ณด๋ด๊ธฐ ๊ธฐ๋ฅ๋ค์ ์ฌ์ฉํ๊ธฐ ์์ํ ๋, ๋ํ์์ ์ ์ ์ผ๋ก ์ ํํ ๋ ๋งค์ฐ ํ๋ฃกํ์ง ๋ชปํ ๋ฌธ์ ์ ๋ง๋ฑ๋๋ ธ๋ค. ๋ฐ๋ก ํซ ๋ฆฌ๋ก๋ฉ์ ๊ฒฐํจ, ์ด์ํ ๋ผ์ฐํ
์ ๋ต๊ณผ ๋งค์ฐ ๋น๋ํ ๋ฒ๋ค๊ณผ ๊ฐ์ ๋จ์ ๋ค์ด์๋ค.
๋งค์ฐ ์ฌ์ด ์์
์ข์ ๋ฌธ์
๊ฑฐ๋ํ ์ปค๋ฎค๋ํฐ
๋ํ ์ฑ์ ์ํ ํ๋ฃกํ ๊ฒฝํ, ํ์ง๋ง ์ ์ ๊ธฐ๋ฅ์ฑ์ ๋ํ ๊ฒฝํ๊ณผ ์ ์ ํซ ๋ฆฌ๋ก๋ฉ์ ๋ถ์ฐจ์ ์ด์๋ค.(๋๋ถ๋ถ์ ์๊ฐ์ด, ์ ์ ๊ฒฝ๋ก์์ ํซ ๋ฆฌ๋ก๋ฉ์ด ์๋ํ์ง ์์๋ค)
ํ ํ๋ฆฟ๊ณผ ๋ฐ์ดํฐ ์๊ตฌ์ฌํญ์ ์ฝ๋ก์ผ์ด์ (์ข ์๋ค ์์ธํ ์ธ๊ธํ๊ฒ ์ง๋ง ๋ฏธ๋ฆฌ ๋งํ์๋ฉด ๊ฒฐ๊ตญ์ ๋งค์ฐ DX์ ์ฑ๋ฅ์ ํํธ์๋ค.)
dx๊ฐ ๋ญ์ง?
๊ฑฐ๋ํ JS ๋ฒ๋ค๊ณผ ๋ถํ์ํ ๊ฒ๋ค์ด ๋๋ฌด ๋ง๋ค! ๋ถํ์ํ๊ฒ ์ค๋ณต๋ ์ฝ๋๋ค์ด ์์ฑ๋๊ณ ๋ค์ด๋ก๋๋๋ ์๋ง์ JS ๋ฒ๋ค์ ๋ชจ๋ ๊ฒฝ๋ก๋ค์ด ๊ฐ๊ณ ์๋ค๋ ๊ฒ์ ์์๋ค. ๋ณดํต ์ฝ๋๋ถํ ์ ํ
ํ๋ฆฟ ์์ค์์ ์๋ํ๋ฉฐ, ํ์ํ ๋ ์ ์ง์ ์ผ๋ก ๊ฐ์ ธ์ฌ ๋งค์ฐ ์์ ๋ฐ์ดํธ-ํฌ๊ธฐ์ ์ฝ๋์ฒญํฌ๋ฅผ ์์ฑํ์ง๋ง, ์ด๋ค ์ด์ํ ์ด์ ๋ค ๋๋ฌธ์, Next
๋ ๊ฑฐ๋ํ ๋ฒ๋ค์ ํ
ํ๋ฆฟ ์์ค์ด ์๋๋ผ, ๊ฒฝ๋ก๋ง๋ค ๊ฐ๊ฒํ๋ค. ์์ฒญ๋ ์์ ์นํจํน๊ณผ ๊ทธ ์ด์์ ํ์ํ ๋ฌด์์ด ์ฐ๋ฆฌ ์
๋ง์๋ ๊ณผํ๋ค.
ํ๊ดด์ ์ธ ๋ผ์ฐํ . ๊ฒฝํ์ ๋ฐ๋ฅด๋ฉด, ํ์ด์ง๋ค ์ฌ์ด์์ ์๋ง์ ๋ถํ์ํ ์ปดํฌ๋ํธ ๋ ๋๋ง๊ณผ ์กฐ์กํ ๋ผ์ดํ์ฌ์ดํด ์์ค์ ๋ง๋ค์ด ๋ธ๋ค. ๋ ์ด์์ ์์ค์ ์ปดํฌ๋ํธ๋ค๋ ๋ค๋น๊ฒ์ด์ ๋์ ์ํ๋ฅผ ์ ์งํ๋๋ฐ ์ด๋ ต๋ค๋ ๊ฒ์ ์์๋ค. ์์ปจ๋, ๋น์ ์ด ๊ธฐ๋ํ๋ ๋ฆฌ์กํธ ์ฑ ํ๋์ด ๋จ์ํ๊ฒ ์ด๋ค์ง ์ ์๋ค.
๋ด๋ณด๋ด๊ธฐ(exporting)๊ฐ ๋๋ฆฌ๋ค. tree-walking ssr
์ ๋ต๊ณผ ๊ฒฐํฉ๋ ํ
ํ๋ฆฟ์ ๋ฐ์ดํฐ ์ฝ๋ ์
๋๋ฌธ์ด๋ค. ๋ํ, ํ์ด์ง ํ
ํ๋ฆฟ ๋์ ์ ๊ฒฝ๋ก๋ง๋ค ๋ฌด๊ฑฐ์ด JS ๋ฒ๋ค์ ๋ง๋๋ Next์ ์๊ตฌ์ฌํญ์ ์ฑ๋ฅ์ ๋จ์ดํธ๋ฆฐ๋ค.
์ด๋ ต๊ณ ๋ณต์กํ ์ฝ๋๋ฒ ์ด์ค. ์ฐ๋ฆฌ๋ ์คํ์์ค ๊ฐ๋ฐ์๋ค์ด๋ค. ๋น์ฐํ ์ฐ๋ฆฌ๊ฐ ์ฌ์ฉํ๋ ํ๋ก์ ํธ์ ๊ธฐ์ฌํ๊ธธ ์ํ๊ณ ์ฌ์ง์ด ๊ทธ๋ด๋ ค๊ณ ํ๋ค! Next์ ์ฝ๋๋ฒ ์ด์ค๋ ๋ถํํ๊ฒ๋ ์ ์ ์ฌ์ดํธ ์์ฑ๊ธฐ๋ฅผ ์ํด ๋๋ฌด ๋ณต์กํ๋ค. ์ฃผ๋ก ๋ํ์ผ๋ก ์ฌ์ฉํ๋ ๊ฒฝ์ฐ๋ฅผ ์ง์ํด์ผ ํ๊ธฐ ๋๋ฌธ์ด๋ค. ์ฐ๋ฆฌ๊ฐ ์ ์ ๋ด๋ณด๋ด๊ธฐ ๊ฐ๋ฐ์ ๋ ๋ฐ์ ์ํค๋ ค๊ณ ํ ๋ ๋งค์ฐ ๋ถํ์ํ๋ค.
Gatsby๋ ๋ฆฌ์กํธ๋ฅผ ์ํ ๋งค์ฐ ์ ๋ช
ํ ์ ์ -์ฌ์ดํธ ์์ฑ๊ธฐ๋ค. reactjs.org
๋ segment.io/blog
๊ฐ์ ๋งค์ฐ ์ฃผ๋ชฉํ ๋งํ ์ฌ์ดํธ๋ค์ด Gatsby๋ก ๋น๋๋์๋ค. ๊ทธ๋์ ๋ถ๋ช
ํ ์ง์งํ๊ฒ ๋ฐ์๋ค์ฌ์ง ์ ์๋ ๋ผ์ด๋ธ๋ฌ๋ฆฌ๋ค. ๋ค๋ฅธ ์ฌ๋๋ค๊ณผ ๋ง์ฐฌ๊ฐ์ง๋ก, ์ฐ๋ฆฌ๋ ์ ์ ์ฌ์ดํธ์ ๋ํด ์ง์ค๋๊ณ , ๋ ๋น ๋ฅธ ๋น๋์ ๋ค๋น๊ฒ์ด์
์ฑ๋ฅ์ ๋๋ ธ๋ค. ์๋ฌด๋ฆฌ ๋งํด๋ Next๋ณด๋ค 10๋ฐฐ๋ ๋์๋ค. ํ์ง๋ง ๋ช ์ฃผ ์ฌ์ฉํ์ ์ฐ๋ฆฌ์ ์๊ตฌ์ ๋น์ทํ์ง๋ง, ๊ฑธ๋ฆฌ์ ๊ฑฐ๋ฆฌ๋ ๊ฒ๋ค์ด ์์๋ค.
๋งค์ฐ ๋น ๋ฅธ ๋ธ๋ผ์ฐ์ง๊ณผ ๋ด๋ณด๋ด๊ธฐ. ์ด ๋ถ๋ถ์ React-Static์ ์ ์ฌํ ๊ตฌ์กฐ์ ๋ํด ์๊ฐ์ ์คฌ๋ค.
์ด๊ทธ๋ ์๋ธ ํ๋ฆฌ๋ก๋ฉ.(๊ณต๊ฒฉ์ ์ธ ํ๋ฆฌ๋ก๋ฉ)
์ ์ ํ ์ฝ๋-๋ถํ
์ฑ์ํ ํ๋ฌ๊ทธ์ธ ์ํ๊ณ์ ์ปค๋ฎค๋ํฐ
์ด๋ฏธ์ง ์ฒ๋ฆฌ
์ฐ๋ฆฌ ์ฌ์ดํธ๋ค์ ๋์ ์ธ ๋ฐ์ดํฐ๋ฅผ ๋์ ํ์ ๋, ๊ธฐ์กด ๊ฐ์ธ ๋น ์์ค ํ๋ฌ๊ทธ์ธ์ ์ฌ์ฉํ ์ง ์ฐ๋ฆฌ ๊ฒ์ ๋น๋ํ ์ง ๊ฒฐ์ ํด์ผ ํ๋ค. ์ฐ๋ฆฌ๊ฒ์ ๋น๋ํ์๊ณ ๊ฒฐ์ ํ์๋, ๊ทธ ํ๋ก์ธ์ค์ API๋ ๋งค์ฐ ํผ๋์ค๋ฝ๊ฒ ํ๊ณ , ๊ฐ๋ณ๊ฒ ๋ฌธ์ํ๋์์ผ๋ฉฐ, ์ฐ๋ฆฌ๊ฐ ๋ฐ๋ผ๋ ๊ฒ๋งํผ ์ ๋์ ์ด์ง ์์๋ค.
๊ฐ์ธ ๋น๋ ๋งค์ฐ ํ๋ฃกํ ํ๋ก๊ทธ์ธ ์ ํ์ง์ ์ด๋ฅผ ๊ตฌํํ ์ ์๋ ์์คํ
์ ๊ฐ์ง๊ณ ์๋ค. ์ด๊ฑด ์นํฉ/๋ฐ๋ฒจ/๋น๋ ๊ธฐ๋ฅ์ ํ์ฅํ๋ ๊ฒ๊ณผ ๊ฐ์ ๊ธฐ์ ์ ๊ตฌํ์ ์ ์ฉํ๋ฉฐ ์ฐ๋ฆฌ๋ ๋ง์์ ๋ค์๋ค. ๊ทธ๋ ์ง๋ง, ์์ค ํ๋ฌ๊ทธ์ธ์ ๊ดํด์ ์ค์ ์ต์
์ผ๋ก ๋๋ฌ๋๋ ํญ๋ชฉ๋ค์ ๋์ด์ ์ปค์คํฐ๋ง์ด์งํ๊ธฐ ์ด๋ ค์ ๋ค. ์ด๋ก ์ธํด creat-react-app๊ณผ ๊ฐ์ ๋๊ตฌ์์ eject
ํ๋๋ฐ ์ง์น ์ ์ ๋ค์๊ฒ ์น๊ทผํ ํ๋ซํผ์ด ๋์์ง๋ง, ๋ฐ์ดํฐ๋ฅผ ๊ฐ์ ธ์ค๊ธฐ ์ํด ํ๋ฌ๊ทธ์ธ์ ์ฌ์ฉํ๋๋ก ๊ฐ์๋นํ๋ ๋์ , ๋ฐ์ดํฐ๋ก ๋ ๋ง์ ์์ ๋ฅผ ์ํ๋ ์ฌ๋๋ค์๊ฒ๋ ์ ์ฝ์ ๋ฐ์๋ค.
ํ
ํ๋ฆฟ๊ณผ ๋ฐ์ดํฐ ์ฟผ๋ฆฌ๋ค์ด ๋์ผ๋ฐฐ์น(colocation)๋์ผํ๋ค. Next
์ ๋น์ทํ๊ฒ ๋ง์ ์ธ์ง์ ๋จ๊ณ๊ฐ ํ์ํ๊ณ ๋น๋์ ํ๋ก์ ํธ์์ ์ค๋ฒํค๋๋ฅผ ์ ๋ฐํ๋ค. ๊ฐ๋ฐ๊ณผ ๋น๋์์ ํ
ํ๋ฆฟ ํ์ผ์์ ์ฐพ์ ๋ชจ๋ ์ฟผ๋ฆฌ๋ฅผ ์คํํ์ฌ ๋ฐ์ดํฐ๋ฒ ์ด์ค์์ ๋ฐ์ดํฐ๋ฅผ ๋ค์ ๊ฒ์ํ๊ณ ๋ค์ ์ฟผ๋ฆฌ๋ฅผ ์ค์ผํ๋ค. ์ด๊ฑด ๋ฐ์ดํฐ๊ฐ ์ด๋์์ ์๋์ง ๋๋ ์ปดํผ๋ํธ์ ์ด๋ป๊ฒ ์ฃผ์
๋๊ณ ์๋์ง์ ๋ํด ํผ๋ผ์ค๋ฝ๊ฒ ํฉ๋๋ค.(์ฟผ๋ฆฌ๊ฐ ๋ฆฌ์กธ๋ธ๋ ํ์๋, ํ
ํ๋ฆฟ์ props๊ฐ ๋ง๋ฒ์ ์ผ๋ก ๋ฐฐ์น๋๋ค)์์ ๊ท๋ชจ์์ ์ด ์ฝ๋ก์ผ์ด์
์ ์ปดํฌ๋ํธ ๋ฐ์ดํฐ์ ๋ํ ์ถ๋ก ์ ๋ ์ฝ๊ฒ ๋ง๋ค ์ ์๋ค๊ณ ์๊ฐํ์ง๋ง, ๋ ํฐ ์์ค์์๋ ์ค์ ์์น์์ ๋ฐ์ดํฐ๋ฅผ ๊ด๋ฆฌํ๊ธฐ์ํ ์ถ์ํ๋ฅผ ํ ์ ์๊ฒ๋ฉ๋๋ค. ์ฐ๋ฆฌ๋ ๋ฐ์ดํฐ๋ฅผ ๊ด๋ฆฌํ๊ธฐ ์ํ ์ค์ ์์น์ ๋ฐ์ดํฐ๋ฅผ ๋ณด๋ค ๋ช
ํํ๊ฒ ์ฌ์ฉํ๊ธฐ๋ฅผ ์ํ์ต๋๋ค. ์ฐ๋ฆฌ๋ ์ฐ๋ฆฌ์ ์ปดํฌ๋ํธ๊ฐ ๋ฐ์ดํฐ ์์ฐ์๊ฐ ์๋ ์๋น์์ด๊ธฐ ๋๋ฌธ์
๋๋ค.
Graphql ์๋๋ฉด ์ฃฝ๊ธฐ. ๊ฒ์ธ ๋น์์ ์ธ๋ถ ๋ฐ์ดํฐ๋ฅผ ์ฌ์ฉํ๋ ๊ฑด(์ ์ด๋ ๊ทธ๋ค์ด ์๋ํ ๋๋ก๋ผ๋ฉด) Graphql์ ์์์ผํฉ๋๋ค. ๊ธฐ์กด ์์ค-ํ๋ฌ๊ทธ์ธ์ผ๋ก ๋ฐ์ดํฐ๋ฅผ ๊ฐ์ ธ์ค๊ณ ์ถ๋ค๊ณ ํด๋, GraphQl์ ์ฌ์ฉํด์ ์ฟผ๋ฆฌ๋ฅผ ๋ ๋ฆฌ๊ณ ํ ํ๋ฆฟ์ผ๋ก ๋ฐ์ดํฐ๋ฅผ ๊ฐ์ ธ์์ผ ํฉ๋๋ค. ๋ง์ฝ ๋น์ ์ ๋ฐ์ดํฐ์ ์์ค-ํ๋ฌ๊ธฐ์ธ์ด ์ฌ์ฉํ ์ ์๋ค๋ฉด, ๋น์ ์ ๋ฐ์ดํฐ๊ฐ Gatsby์ GraphQL ์คํค๋ง๋ก ์์ง๋๋๋ก ์ง์ ์์ฑํด์ผํ๋ค. ์ฌ์ง์ด ์ฐ๋ฆฌ๊ฐ ์ฌ์ฉํ๋ ๋งค์ฐ ๋จ์ํ๋๋ผ๋ ๋ง์ ๋๋ค. ๋๋ถ๋ถ์ ๊ฒฝ์ฐ์์ , ์ฐ๋ฆฌ์ ๋ฐ์ดํฐ๋ ๊ฑฐ์ ํญ์ ํค๋๋ฆฌ์ค CMD(GraphQl๊ธฐ๋ฐ๋ ์์), JSON ํ์ผ, ๋งํฌ๋ค์ด ํ์ผ ๋ฐ/ ๊ณต๊ฐ API์์ ๊ฐ์ ธ์จ ๊ฒ์ ๋๋ค.
์ฐ๋ฆฌ๋ ๋ง์นจ๋ด React๋ก ์ํฐํ๋ผ์ด์ฆ ์ฑ์ ๊ตฌ์ถํ๋๋ฐ ์ผ๋ง๋ ๋ง์ ์๊ฐ์ด ๊ฑธ๋ ธ๋์ง ์์์ผ๋ฉฐ SPA์ ๋ ์ ์ฌํ๊ณ ๋ํ ๋ ๋๋ง ํ๋ ์์ํฌ์๋ ๋ ์ ์ฌํ ๋๊ตฌ๊ฐ ํ์ํ๋ค๋ ๊ฒ์ด ๋ถ๋ช ํด์ก์ต๋๋ค. ์ฐ๋ฆฌ๋ ์ง๋ ํ ์๊ฒฌ๋ค๊ณผ (GraphQl์ ํฌํจํ๋)๋ ์ ์ ์ธ ์คํค๋ง๋ฅผ ๋ฒ๋ ธ๊ณ ๋ง์นจ๋ด ์ปดํฌ๋ํธ-๋์ผ๋ฐฐ์น๋ ๋ฐ์ดํฐ ์ฟผ๋ฆฌ๋ฅผ ํด์น์๋ฒ๋ ธ์ต๋๋ค.
์ฌ์ดํธ์ ์์ค๋ก๋ถํฐ ํ๋ก๋ํธ๋ก ๋๋๋ ๋ฐ์ดํฐ์ ํ๋ฆ์ ๋งค์ฐ ๋จ์ํด์ผ๋๊ณ ์ฐ๋ฆฌ๊ฐ ํ์ํ ๋ง์ ์ ์ฐ์ฑ์ ์ฃผ์ ์ต๋๋ค.
์ด๋ฌํ ๊ฒฝํ์ ๋ฐํ์ผ๋ก ์ค๊ณ๋ฅผ ์์ํ ๋๊ตฌ๋ ์ฌ์ฉ์์ ๊ฐ๋ฐ์ ๋ชจ๋์๊ฒ ๋ ๋์ ๊ฒฝํ์ ์ ๊ณตํ๊ณ React SPA๋ฅผ ์ ์ -์ฌ์ดํธ ์์ฑ๊ธฐ์๊ฒ ์์ ๋ฅผ ๊ฐ์ ธ๋ค์ฃผ์์ต๋๋ค.
๋ฆฌ์กํธ๋ฅผ ์ํ ์ง๋ณด์ ์ธ ์ ์ -์ฌ์ดํธ ์์ฑ๊ธฐ๋ React๋ฅผ ์์์ํค์ง ์์๋ฉด์ ๋น์ ์ ์ ์ ์ ๊ฐ๋ฐ๋ค ๋ชจ๋์๊ฒ ๋๋ผ์ด ๊ฒฝํ์ ์ฃผ๋ ค๊ณ ์ค๊ณ๋์์ต๋๋ค. ๋ฏธ์น ๋ฏํ ์๋์ SEO-์ค๋น๊ฐ ๋ ์ง๊ตฌ์์์ ๊ฐ์ฅ ๋ฆฌ์กํธ์๊ฒ ์น์ ํ ์ ์ -์ฌ์ดํธ ๋ผ์ด๋ธ๋ฌ๋ฆฌ์ ๋๋ค.
๋ฆฌ์กํธ๋ฅผ ์ํ ๋๋ถ๋ถ์ ๋ค๋ฅธ ์ ์ -์ฌ์ดํธ ์์ฑ๊ธฐ์ ๋ฌ๋ฆฌ React-Static์ ๋ฐ์ดํฐ๊ฐ ์์ค์์ ๊ฒฝ๋ก๋ก ํ๋ฅด๋ ๋ฐฉ์์ ๋งค์ฐ ์ง์ ์ ์ ๋๋ค. ์ด๋ ๋ชจ๋ ์ ์ ๋ฐ์ดํฐ๋ฅผ ๊ด๋ฆฌํ๊ธฐ์ํ ํธ๋ฆฌํ ์ถ์ํ ์ง์ ์ ์ ๊ณตํ ๋ฟ๋ง ์๋๋ผ ๋ฐ์ดํฐ ํ์ดํ ๋ผ์ด๋๊ณผ ๋ฆฌ์กํธ ํ ํ๋ฆฟ์ ๊ฐ๋ฅํ ๋ถ๋ฆฌํ์ฌ SSR์ ๋จ์ผ ํจ์ค๋ง์ผ๋ก "์ํ๊ฐ ์๋"์ผ๋ก ์ฌ์ดํธ๋ฅผ ๊ตฌ์ถํ ์ ์์ต๋๋ค!
1. ์ฌ์ดํธ์์ ๋ ๋๋งํด์ผํ๋ ๋ชจ๋ ๋ฐ์ดํฐ๋ ์ํ๋ ์๋จ์ ์ฌ์ฉํ์ฌ ์ค์ (configure)ํ์ผ์ ๋ฏธ๋ฆฌ ์์ง๋ฉ๋๋ค. ์ด ๋ฐ์ดํฐ๋ ๋งํฌ๋ค์ด ํ์ผ, ํค๋๋ฆฌ์ค CMS, Grapqhl ์๋ ํฌ์ธํธ, ๊ณต๊ฐ API ๋ฑ ์ด๋์๋ ์ป์ ์ ์์ต๋๋ค!
2. ๋ค์์ผ๋ก ์ฌ์ดํธ์ ๋ชจ๋ ๋ผ์ฐํธ ๋ชฉ๋ก์ ์์ฑํ๊ณ ๋ ๋๋งํ ํ
ํ๋ฆฟ์ ์ ์ํ ํ ๊ฐ ๋ผ์ฐํธ์ ์ ์ ํ ๋ฐ์ดํฐ๋ฅผ ์ ๊ณตํฉ๋๋ค. props๋ฅผ ์ ๋ฌํ๋ ๊ฒ๋งํผ ์ฝ์ต๋๋ค!
3.RouteProps
์ StieProps
์ ๊ฐ์ React-Stiatc์ ์ปดํฌ๋ํธ๋ฅผ ์ฌ์ฉํ๋ฉด ๊ฐ ๋ผ์ฐํธ๋น ๋ฐ์ดํฐ๋ฅผ ์ ๊ทผํ ์ ์๊ณ ๋น์ ์ด ์ผ๋ฐ์ ์ผ๋ก ํ๋ฏ ์ฑ์ ์์ฑํ ์ ์์ต๋๋ค.
4. ๋ฆฌ์กํธ-์คํํฑ์ ์ฌ์ดํธ์ ๋ชจ๋ ํ์ด์ง๋ฅผ ๊ฐ๋ ฅํ ์๋์ ์ ํ์ฑ์ผ๋ก ๋ด๋ณด๋ผ ์ ์๋ค.
5. ์ข
ํํ๋ ์ ์ ์ฌ์ดํธ ํธ์คํธ๋๋ CDN์ ์ฌ์ดํธ๋ฅผ ์
๋ก๋ํ์ธ์!!
dangeroushlySetInnerHTML
์ด๋ ๋ค๋น์ด๊ฒ์ด์
๋ ์ํด ์ฌ์ฉ๋๋ ์ด๋ค ๋ค๋ฅธ ํ๊ดด์ ์ธ ๋ฉ์๋๊ฐ ์๋ค๋ ๊ฒ์ ์๋ฏธํฉ๋๋ค. ์ด๊ฑด ๋จ์ง ์ค๋๋ React์ผ ๋ฟ์
๋๋ค. ์ฆ ๋น์ ์ด ์ผ๋ฐ์ ์ผ๋ก ๊ธฐ๋ํ๋ ๋ฐฉ์๋๋ก๋ชจ๋ ์๋๋๋ค๊ณ ์๋ฒฝํ๊ฒ ๋ฏฟ์ ์ ์์ต๋๋ค. ์ปดํฌ๋ํธ์ ๋ผ์ดํ์ฌ์ดํด๊ณผ ์ํ ๊ด๋ฆฌ๋ฅผ ํฌํจํด์์!react-staitc
์ ์ฌ์ฉํ๋ฉด, ๊ฒฝ๋ก์ ๋ฐ์ดํฐ๋ฅผ ์ฝ๊ฒ ์ ๊ณตํ ์ ์์ต๋๋ค. ํ์ํ ๊ฒ์ ๊ฐ์ ธ์ ํ ๋ฒ์ ๋ชจ๋ ๋ฐ์ดํฐ๋ฅผ ๊ฒฝ๋ก๋ก ์ ๋ฌํ์ธ์. ๋ค์ํ react-static
์ปดํฌ๋ํธ๋ฅผ ์ฌ์ฉํ์ฌreact-static
์ ์ ๊ทผ๋ฐฉ์์ ๋งค์ฐ ๋์ฐฉ์ ์ด๋ฉฐ ๋ชจ๋ ๊ฒฝ๋ก์ ํ
ํ๋ฆฟ๊ณผ ๋ฐ์ดํฐ๊ฐ ์ต์ ํ๋๊ณ ๊ตฌ์ฒดํ๋ ๋ถ์ฐ API๋ก ์ ๊ณต๋ฉ๋๋ค. ์ฆ, ์ฌ์ดํธ๋ ์๋ง ํ์ด์ง๋ก ํ์ฅ๋์ด ์ฆ์๋ก๋ ๋ ์ ์์ต๋๋ค. ๋ค์ ๋งํ์ง๋ง, ๋ชจ๋ ๋ฐ์ดํฐ ํ์นญ์ ๋์ผํ ๋จ์ผ ๋จ๊ณ์์ ์ํ๋๋ฏ๋ก react-static ๋น๋ ์๊ฐ์ ์์ฒญ๋๊ฒ ๋น ๋ฆ
๋๋ค.์ฐ๋ฆฌ์ React-Static์ผ๋ก ๊ตฌ์ถ๋ ์ฌ์ดํธ ๋ชฉ๋ก์ด ์ ์ ๋์ด๋๊ณ ์์ต๋๋ค!
60์ด ์์ ์์
react-static์ ์ ์ญ์ผ๋ก ์ค์นํ์ธ์
$ yarn global add react-static
# ๋๋
$ npm install -g react-static
์ ํ๋ก์ ํธ๋ฅผ ์์ฑํ์ญ์์ค.
$ react-static create
์ด์ ์์ ๋กญ๊ฒ ์ฝ๋ฉํ์ธ์!