TIL 44: [๋ฐฐํฌ] ํด๋ผ์ด์ธํธ ๋น๋์ ๋ฐฐํฌ
๋์ ์น์ฌ์ดํธ์ ์ ์ ์น์ฌ์ดํธ
์ด ๋ถ๋ถ์ ์ด์ ์ ํ ๋ฒ ํ์ตํ๋ ๋ถ๋ถ์ธ๋ฐ์! ๋ ์ฌ์ดํธ์ ์ฃผ์ ์ฐจ์ด์ ์ '์ด๋์ ๋ ๋๋ง์ด ๋๋๋' ์ ๋๋ค. ๋์ ์น์ฌ์ดํธ๋ Server Side Rendering์ ํตํด ์์ฑ๋๋ ์ฌ์ดํธ์ ๋๋ค. ์ ์ ์น์ฌ์ดํธ๋ Client Side Rendering์ ํตํด ์์ฑ๋๋ ์ฌ์ดํธ์ ๋๋ค. ๋์ ์ด๋ผ๋ ๋จ์ด ๋๋ฌธ์ ๋์ ์น์ฌ์ดํธ๊ฐ ๋ ๋ฐ์ ๋ ํํ์ฒ๋ผ ๋ณด์ผ ์ ์๊ฒ ์ง๋ง, ๋ธ๋ผ์ฐ์ ์ ๋ฐ๋ฌ๊ณผ AJAX๊ธฐ์ ์ด ๋ณดํธํ ๋๋ฉด์ ์ ์ ์น์ฌ์ดํธ๊ฐ ๋ ๊ณ ๋ํ๋๊ณ ์์ต๋๋ค. ๋ฐ๋ผ์ ์ด๋ค ์น์ฌ์ดํธ๋ฅผ ๊ตฌํํ๋ ค๊ณ ํ๋์ง์ ๋ฐ๋ผ ๋์ /์ ์ ์น์ฌ์ดํธ๋ฅผ ์ ํฉํ๊ฒ ์ฌ์ฉํ๋ฉด ๋ ๊ฒ ๊ฐ์ต๋๋ค.
์น ์ดํ๋ฆฌ์ผ์ด์ ์ ์น์ ๋ ธ์ถ์ํค๋ ์์ ์ ๋งํฉ๋๋ค. ๋ก์ปฌ ํ๊ฒฝ์์ ๊ฐ๋ฐํ ์ฝ๋๋ฅผ ์ค์ ์๋น์ค๋ก ๋ง๋ค๊ธฐ ์ํด์๋, ๋น๋์ ์ด๋ฅผ ์น์ ๋ ธ์ถ์ํค๋ ๋ฐฐํฌ ๊ณผ์ ์ด ํ์ํฉ๋๋ค. ๋น๋๋ฅผ ํตํด ๋ง๋ ์ ์ ํ์ผ์ด ์น์ ํตํด ์ ๊ณต(serve)๋๋ ค๋ฉด, ์ด๋ฌํ ์ ์ ํ์ผ์ ์ ๊ณตํ๋ ์น ์๋ฒ๊ฐ ํ์ํฉ๋๋ค.
๋น๋
์ํํธ์จ์ด ๋น๋๋ ์์ค์ฝ๋๋ฅผ ์คํ ๊ฐ๋ฅํ ๊ฒฐ๊ณผ๋ฌผ๋ก ๋ณํํ๋ ์์ ์ ๋งํฉ๋๋ค. ๋น๋์ ์ฅ์ ์ ๋ค์ด๋ฐ์์ผํ๋ ์ฉ๋์ ํฌ๊ธฐ๋ฅผ ์ค์ผ ์ ์๋ค๋ ์ ์ ๋๋ค.Create React App์ผ๋ก ๋ง๋ ํ๋ก์ ํธ์ ๊ฒฝ์ฐ์๋, react-scripts๋ผ๋ ๋ชจ๋์ ์ฌ์ฉํด์ ๋น๋ํ ์ ์์ต๋๋ค. npm build ๋ช ๋ น์ด๊ฐ ํฌํจ๋ package.json ํ์ผ์ ํตํด ๊ฐ๋ฅํฉ๋๋ค. ๋๋ Next.js๋ผ๋ ํ๋ก์ ํธ ์์ฑ ํด์ด ์กด์ฌํ๋๋ฐ next ๋ชจ๋์ ์ฌ์ฉํด์ ๋น๋๊ฐ ๊ฐ๋ฅํฉ๋๋ค. Next.js๋ CSR๊ณผ SSR์ ์ฅ์ ์์ฃผ๋ก ๋ชจ์๋์ Hybrid์ ๋๋ค. ํ๋ก์ ํธ ์์ฑ ํด์ ๋ด๋ถ์ ์ผ๋ก ์๋์ ๊ฐ์ด ๋ค์ํ ํด์ ์กฐํฉ์ผ๋ก ์ด๋ฃจ์ด์ ธ ์์ต๋๋ค. ์๋ ๊ทธ๋ฆผ๊ณผ ๊ฐ์ด webpack์ด๋ผ๋ ๋ชจ๋๋ฒ๋ค๋ฌ๋ฅผ ํตํด index.js, util.js, Lodash, Babel, Sass ๋ฑ์ ๋ฌถ์ด์ ์ฌ์ฉํ ์ ์์ต๋๋ค.
๋ฐฐํฌ
์น ์ดํ๋ฆฌ์ผ์ด์ ์ ์น์ ๋ ธ์ถ์ํค๋ ์์ ์ ๋งํฉ๋๋ค. ์ผ๋ฐ์ ์ผ๋ก ์น ์๋ฒ๋ผ๊ณ ํ๋ฉด ์น ์๋น์ค๋ฅผ ์ ๊ณตํ๋ ๋ชจ๋ ์ข ๋ฅ์ ์น ์๋ฒ์ผ ์ ์์ผ๋, ํน๋ณํ ์ ์ ํ์ผ์ ์ ๊ณตํ ์ ์๋๋ก ์๋ฒ์ ๊ณต๊ฐ์ ๋์ฌํด์ฃผ๋ ์๋น์ค๋ฅผ ํธ์คํ ์๋น์ค๋ผ๊ณ ๋ถ๋ฆ ๋๋ค. ํธ์คํ ์๋น์ค๋ ๋จ์ ํ์ผ์ ์น์์ ์ ๊ทผ ๊ฐ๋ฅํ๊ฒ ํด์ค๋๋ค. ํ์ฌ ๋ค์ํ ์น ํธ์คํ ์๋น์ค๋ค์ด ์์ต๋๋ค. AWS, Google Cloud Storage, Vercel, Github Pages ๋ฑ์ด ์์ต๋๋ค. ์ด๋ฒ์๋ ์ฝ๋ ์ฐ๊ฒฐ, ๋น๋, ๋ฐฐํฌ๊น์ง์ ๊ณผ์ ์ ๋งค์ฐ ๋จ์ํ๊ฒ ๋ง๋ค์ด์ฃผ๋ Vercel์ ์ด์ฉํ์ฌ ์ค์ต์ ํด๋ณด์์ต๋๋ค. Vercel์ด ๋จ์ํ ์ด์ ๋ GitHub์ ๊ฐ์ ์ฝ๋๋ฒ ์ด์ค(์ ์ฅ์)๋ฅผ ์ฐ๊ฒฐํ์ฌ, ์ฆ์ ๋น๋๋ฅผ ์คํํ๊ณ , ๋ฐฐํฌ๊น์ง ์ํด๋ฆญ์ผ๋ก ํ ์ ์๋ค๋ ์ ๋๋ฌธ์ ๋๋ค. ์ค์ ๋ก ๋ฐฐํฌ๋ Vercel ์๋น์ค ๋ด์์ ์ด๋ฃจ์ด์ง๋๋ค.๊ทธ๋ฆฌ๊ณ ์ผ์ ์ ์ดํด๋ณด๋ ์น์ 3์์๋ Infrastructure ์์ฒด๋ฅผ ์ ๊ณตํ๋ AWS๋ฅผ ํตํด ๋น๋ ๋ฐฐํฌ๋ฅผ ํ๋ ๊ฒ ๊ฐ์์ต๋๋ค.์ฐธ๊ณ ๋ก ๋์ ์น์ฌ์ดํธ๋ API ์๋ฒ๋ฅผ ์ ๊ณตํ๋ ค๋ฉด ๋ณ๋์ ํด๋ผ์ฐ๋ ์ปดํจํ ์๋น์ค๊ฐ ํ์ํฉ๋๋ค.