TIL

TIL 44: [๋ฐฐํฌ] ํด๋ผ์ด์–ธํŠธ ๋นŒ๋“œ์™€ ๋ฐฐํฌ

Deviloper๐Ÿ˜ˆ 2021. 9. 30. 19:32

๋™์  ์›น์‚ฌ์ดํŠธ์™€ ์ •์  ์›น์‚ฌ์ดํŠธ

์ด ๋ถ€๋ถ„์€ ์ด์ „์— ํ•œ ๋ฒˆ ํ•™์Šตํ–ˆ๋˜ ๋ถ€๋ถ„์ธ๋ฐ์š”! ๋‘ ์‚ฌ์ดํŠธ์˜ ์ฃผ์š” ์ฐจ์ด์ ์€ '์–ด๋””์„œ ๋ Œ๋”๋ง์ด ๋˜๋А๋ƒ' ์ž…๋‹ˆ๋‹ค. ๋™์  ์›น์‚ฌ์ดํŠธ๋Š” 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 ์„œ๋ฒ„๋ฅผ ์ œ๊ณตํ•˜๋ ค๋ฉด ๋ณ„๋„์˜ ํด๋ผ์šฐ๋“œ ์ปดํ“จํŒ… ์„œ๋น„์Šค๊ฐ€ ํ•„์š”ํ•ฉ๋‹ˆ๋‹ค. 

 

Vercel ๋ฐฐํฌ ์™„๋ฃŒ ํ™”๋ฉด