์ฑ„๋„ํ†ก ์•„์ด์ฝ˜
BEST

React + API Server ํ”„๋กœ์ ํŠธ ๊ฐœ๋ฐœ๊ณผ ๋ฐฐํฌ (CI/CD)

SPA์˜ ๋Œ€๋ช…์‚ฌ์ธ React ๊ฐœ๋ฐœ ํ™˜๊ฒฝ์„ ๋งŒ๋“ค๊ณ , Node.js ๊ธฐ๋ฐ˜์˜ API Server์™€ Swagger๋ฅผ ํ†ตํ•œ API ๋ฌธ์„œ๋ฅผ ์ž๋™ ์ƒ์„ฑํ•ฉ๋‹ˆ๋‹ค. ๋กœ์ปฌ ๊ฐœ๋ฐœํ™˜๊ฒฝ๊ณผ ๊ฐœ๋ฐœ์„œ๋ฒ„์˜ ์ฐจ์ด๋ฅผ ์ดํ•ดํ•˜๊ณ , AWS๋ฅผ ์‰ฝ๊ฒŒ ๋”ฐ๋ผ์„œ ์ด์šฉํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

Thumbnail

์ดˆ๊ธ‰์ž๋ฅผ ์œ„ํ•ด ์ค€๋น„ํ•œ
[๋ฐ๋ธŒ์˜ต์Šค ยท ์ธํ”„๋ผ] ๊ฐ•์˜์ž…๋‹ˆ๋‹ค.

์ด๋Ÿฐ ๊ฑธ ๋ฐฐ์šธ ์ˆ˜ ์žˆ์–ด์š”

  • React ๊ฐœ๋ฐœ ํ™˜๊ฒฝ๊ณผ ์„œ๋ฒ„ ๊ตฌ์„ฑ

  • Vite ๊ธฐ๋ฐ˜์˜ React ๊ฐœ๋ฐœํ™˜๊ฒฝ ๋งŒ๋“ค๊ธฐ

  • Node.js ๊ธฐ๋ฐ˜์˜ API Server

  • Swagger๋ฅผ ํ†ตํ•œ API ๋ฌธ์„œ ์ž๋™ํ™”

  • ๋กœ์ปฌ ๊ฐœ๋ฐœํ™˜๊ฒฝ๊ณผ ๊ฐœ๋ฐœ์„œ๋ฒ„ ์ฐจ์ด

  • CORS ์ด์Šˆ ํ•ด๊ฒฐ

  • AWS EC2 ์„œ๋ฒ„ ๊ตฌ์ถ• ๊ธฐ๋ณธ

  • Nginx(์›น์„œ๋ฒ„) ๊ธฐ๋ณธ ์‚ฌ์šฉ๋ฒ•

  • Nginx์™€ Node.js ์—ฐ๊ฒฐ

  • ๋ฌด๋ฃŒ HTTPS ์ธ์ฆ์„œ ๋ฐœ๊ธ‰

  • GitHub Actions๋ฅผ ์ด์šฉํ•œ CI/CD ์ž๋™ํ™”

SPA ํ”„๋กœ์ ํŠธ ๋กœ์ปฌ ๊ฐœ๋ฐœํ™˜๊ฒฝ ๊ตฌ์ถ•๋ถ€ํ„ฐ 
์„œ๋ฒ„ ๋ฐฐํฌ ์ž๋™ํ™”๊นŒ์ง€ ์ง์ ‘ ๋„์ „ํ•ด๋ณด์„ธ์š”! โœŒ

๐Ÿ“ข ์ˆ˜๊ฐ• ์ „ ํ™•์ธํ•ด์ฃผ์„ธ์š”! 

  • ๋ณธ ๊ฐ•์˜๋Š” React ๋ฐ Node.js์˜ ๋ฌธ๋ฒ•์€ ์„ค๋ช…ํ•˜์ง€ ์•Š๊ณ , ๊ฐœ๋ฐœํ™˜๊ฒฝ ๊ตฌ์ถ•๊ณผ ๋ฐฐํฌ์— ๋Œ€ํ•ด ๋‹ค๋ฃน๋‹ˆ๋‹ค.
  • ๊ฐ•์˜ ์ž๋ฃŒ๋Š” ์„น์…˜ 1 - SPA ๊ฐœ๋ฐœ ํ™˜๊ฒฝ ๊ตฌ์„ฑ (1) ์ˆ˜์—…์—์„œ ๋‹ค์šด๋กœ๋“œํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

React SPA ํ”„๋กœ์ ํŠธ, 
์„œ๋ฒ„ ๋ฐฐํฌ + ์ž๋™ํ™”๊นŒ์ง€ ๐Ÿ’ก

ํ”„๋ก ํŠธ์—”๋“œ ํ™˜๊ฒฝ๊ณผ API ์„œ๋ฒ„๋ฅผ ๊ฐœ๋ฐœํ–ˆ์ง€๋งŒ ๋ง‰์ƒ ์–ด๋–ป๊ฒŒ ๋ฐฐํฌ๋ฅผ ํ•ด์•ผ ํ• ์ง€ ๋ง‰๋ง‰ํ•˜์‹ ๊ฐ€์š”? ์ƒ์†Œํ•œ ๊ฐœ๋ฐœ ํ™˜๊ฒฝ ์„ธํŒ…๊ณผ ๋ฐฐํฌ CI/CD๋ฅผ ์œ„ํ•œ ํ๋ฆ„์„ ์ตํžˆ๊ณ  ์‹ถ์œผ์‹ ๊ฐ€์š”

์ด ๊ฐ•์˜์—์„œ๋Š” ๋ฆฌ์•กํŠธ ํ”„๋กœ์ ํŠธ์˜ ๋กœ์ปฌ ๊ฐœ๋ฐœํ™˜๊ฒฝ ๊ตฌ์ถ• ๋ฐ ์„œ๋ฒ„ ๋ฐฐํฌ ์ž๋™ํ™” ๊ณผ์ •์„ ์ง์ ‘ ๊ฒฝํ—˜ํ•ด๋ด…๋‹ˆ๋‹ค. ๊ธฐ์กด ์›น ๊ฐœ๋ฐœ ๋ฐฉ์‹๊ณผ ๋‹ฌ๋ผ์ง„ ๋ฆฌ์•กํŠธ๋ฅผ ์ด์šฉํ•œ ์‹ฑ๊ธ€ ํŽ˜์ด์ง€ ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜(SPA) ๊ฐœ๋ฐœ ํ™˜๊ฒฝ์„ ๋‹ค๋ฃจ๋ฉฐ, ์ด๋ฅผ ์„œ๋ฒ„์— ๋ฐฐํฌํ•ด์„œ ์„œ๋น„์Šคํ•˜๋Š” ๋ฐฉ๋ฒ•์— ๋Œ€ํ•ด ์†Œ๊ฐœํ•ฉ๋‹ˆ๋‹ค. ๋˜ํ•œ Swagger๋ฅผ ์ด์šฉํ•œ API ๋ฌธ์„œ ์ž๋™ํ™”๋ฅผ ํ•จ๊ป˜ ๋‹ค๋ฃจ๋ฉฐ, ๋กœ์ปฌ ๊ฐœ๋ฐœ ํ™˜๊ฒฝ๊ณผ ๋ฐฐํฌ๋˜๋Š” ์„œ๋ฒ„ ํ™˜๊ฒฝ๊ณผ์˜ ์ฐจ์ด๋ฅผ ๋ฐฐ์šธ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

์œˆ๋„์šฐ ๊ธฐ์ค€์œผ๋กœ ์˜์ƒ์„ ๋งŒ๋“ค์—ˆ์ง€๋งŒ, ๋งฅ๊ณผ ๋ฆฌ๋ˆ…์Šค์—์„œ๋„ ๊ฑฐ์˜ ๋Œ€๋ถ€๋ถ„ ๋™์ผํ•˜๊ฒŒ ๋”ฐ๋ผํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ๊ฐœ๋ฐœ ํ™˜๊ฒฝ ์„ธํŒ…๋ถ€ํ„ฐ ๋ฐฐํฌ, ์ž๋™ํ™”๊ฐ€ ์–ด๋–ป๊ฒŒ ์ด๋ฃจ์–ด์ง€๋Š”์ง€ ๊ฐ•์˜์—์„œ ์ง์ ‘ ํ™•์ธํ•ด ๋ณด์„ธ์š”!


์ด๋Ÿฐ ๋ถ„๋“ค๊ป˜ ์ถ”์ฒœํ•ฉ๋‹ˆ๋‹ค ๐ŸŽ

  • โœ… ๋ฌธ๋ฒ• ์ค‘์‹ฌ๋ณด๋‹ค ์„œ๋น„์Šค ์ค‘์‹ฌ์˜ ๊ฐœ๋ฐœ์„ ์„ ํ˜ธํ•˜๋Š” ๋ถ„
  • โœ… ์„œ๋ฒ„์— ๋™์ž‘ํ•˜๋Š” ์ฝ”๋“œ๋ฅผ ์–ด๋–ป๊ฒŒ ์˜ฌ๋ฆฌ๋Š”์ง€ ๋ชจ๋ฅด์‹œ๋Š” ๋ถ„
  • โœ… ํด๋ž˜์‹ ์›น๊ณผ ์ฐจ์ด๋‚˜๋Š” ๋ฐฉ๋ฒ•์„ ์•Œ๊ณ  ์‹ถ์€ ๋ถ„
  • โœ… AWS ์‚ฌ์šฉ์ด ์ฒ˜์Œ์ด๊ฑฐ๋‚˜, HTTPS ์„œ๋ฒ„ ๊ตฌ์„ฑ์„ ๋ฐฐ์šฐ๊ณ  ์‹ถ์€ ๋ถ„

๐Ÿ“Œ ๊ฐ•์˜์—์„œ ์“ฐ์ด๋Š” ์Šคํ‚ฌ ๋ชจ์•„๋ณด๊ธฐ

VSCode

Node.js

Git

GitHub

GitHub Actions

AWS EC2

AWS Route53

Nginx + HTTPS
(SSL ์ธ์ฆ์„œ)


ํ•™์Šต ๋‚ด์šฉ ๋ฏธ๋ฆฌ๋ณด๊ธฐ ๐Ÿ“š

01. ์ค€๋น„ํ•˜๊ธฐ

๊ผญ ํ•„์š”ํ•œ ๊ฐœ๋ฐœ ํ”Œ๋žซํผ๊ณผ ๊ฐœ๋ฐœ ๋„๊ตฌ, ๊ด€๋ จ๋œ ๊ณ„์ • ๋“ฑ๋ก ์†Œ๊ฐœ

02. SPA ๊ฐœ๋ฐœ ํ™˜๊ฒฝ ๊ตฌ์„ฑ

๋กœ์ปฌ ์ปดํ“จํ„ฐ์—์„œ ์ž‘์—…ํ•˜๊ธฐ ์œ„ํ•œ ํ”„๋ก ํŠธ์—”๋“œ์™€ ๋ฐฑ์—”๋“œ์˜ ๊ธฐ๋ณธ์ ์ธ ํ”„๋กœ์ ํŠธ ํ™˜๊ฒฝ ๊ตฌ์„ฑ

03. ๋ฐฐํฌ ํ”„๋กœ์„ธ์Šค

์„œ๋น„์Šค๋ฅผ ์œ„ํ•ด ์„œ๋ฒ„์— ๋ฐฐํฌํ•˜๋Š” ์ ˆ์ฐจ, ๋ฐฉ๋ฒ• ์†Œ๊ฐœ

04. ๋„๋ฉ”์ธ ๋“ฑ๋ก๊ณผ HTTPS ์„ค์ •

๋„๋ฉ”์ธ๊ณผ ์„œ๋ฒ„๋ฅผ ์—ฐ๊ฒฐํ•˜๊ณ , HTTPS ์—ฐ๊ฒฐ์„ ์œ„ํ•œ ๋ฐฉ๋ฒ• ์†Œ๊ฐœ

05. ๋ฐฐํฌ ์ž๋™ํ™”ํ•˜๊ธฐ

์ฝ”๋“œ๊ฐ€ ๋ณ€๊ฒฝ๋˜๋ฉด ์ž๋™์œผ๋กœ ๊ฐœ๋ฐœ ์„œ๋ฒ„์— ๋ฐฐํฌ๋˜๋Š” ์ž‘์—… ์„ค๋ช…

06. CORS ์„ค์ •

๋กœ์ปฌ ๊ฐœ๋ฐœ ํ™˜๊ฒฝ์—์„œ ๋ฐœ์ƒํ•˜๋Š” CORS ์ด์Šˆ์™€ ๋นŒ๋“œ ํ™˜๊ฒฝ ๋ณ€์ˆ˜ ๊ตฌ์„ฑ


์ง€์‹๊ณต์œ ์ž ์†Œ๊ฐœ โœ’๏ธ

Kenu (ํ—ˆ๊ด‘๋‚จ)

์ข…์ข… ์œ ํŠœ๋ธŒ์—์„œ ํ”„๋กœ๊ทธ๋ž˜๋ฐ ๋ฐฉ์†ก์„ ํ•˜๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค.

  • 2000.12 OKJSP ์‹œ์ž‘ โ†’ ํ˜„์žฌ๋Š” okky.kr๋กœ ์šด์˜ ์ค‘
    • ์ผ ๋ฐฉ๋ฌธ 50,000๋ช…์˜ ๊ตญ๋‚ด ์ฃผ์š” ๊ฐœ๋ฐœ์ž ์ปค๋ฎค๋‹ˆํ‹ฐ
  • ็พ okdevtv.com ํ”„๋กœ๊ทธ๋ž˜๋ฐ ๋ฐฉ์†ก BJ
  • ๅ‰ '18~'19 ํŽซํ”„๋ Œ์ฆˆ CTO
  • ๅ‰ '17~'18 ํ—ฌ๋กœ๋„ค์ด์ฒ˜ CTO
  • ๅ‰ '15~'17 GS SHOP ๋ฒค์ฒ˜ํˆฌ์žํŒ€ CoE ํŒŒํŠธ
  • ๅ‰ '12~'16 ์ „์ž์ •๋ถ€ ํ‘œ์ค€ํ”„๋ ˆ์ž„์›Œํฌ ์—๋ฐ˜์ ค๋ฆฌ์ŠคํŠธ

๋ฐ˜๊ฐ‘์Šต๋‹ˆ๋‹ค, Kenu์ž…๋‹ˆ๋‹ค!

Hello World๋ฅผ ์ฐ์œผ๋ฉด ๊ฐœ๋ฐœ ์ค€๋น„๋Š” ๋๋‚ฌ์Šต๋‹ˆ๋‹ค! ๋‹จ์ˆœํžˆ ์ฝ”๋“œ๋ฅผ ์งœ๋ณธ ๊ฒฝํ—˜์ด ์žˆ๋‹ค๋Š” ์ˆ˜์ค€์—์„œ ๊ทธ์น˜๋Š” ๊ฒƒ์ด ์•„๋‹ˆ๋ผ, ๋‚ด๊ฐ€ ๋งŒ๋“  ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜์„ ์‚ฌ๋žŒ๋“ค์ด ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ๋„๋ก ์„œ๋ฒ„์— ์ž์‹ ์ด ๋งŒ๋“  ์ฝ”๋“œ๋ฅผ ์˜ฌ๋ ค์„œ ์„œ๋น„์Šคํ•  ์ˆ˜ ์žˆ๋Š” ์ž์‹ ๊ฐ์ด ์ƒ๊น๋‹ˆ๋‹ค.


Q&A๋ฅผ ํ™•์ธํ•ด๋ณด์„ธ์š”! ๐Ÿ’ฌ

Q. ๋น„์ „๊ณต์ž๋„ ๋“ค์„ ์ˆ˜ ์žˆ๋Š” ๊ฐ•์˜์ธ๊ฐ€์š”?

๋„ค, ๋น„์ „๊ณต์ž๋„ ์ถฉ๋ถ„ํžˆ ๋“ค์„ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ๊ด€๋ จ ํ”„๋กœ๊ทธ๋žจ ์„ค์น˜๋ถ€ํ„ฐ ์ด˜์ด˜ํ•˜๊ฒŒ ์„ค๋ช…ํ•ด๋“œ๋ ค์š”!
(์„ ์ˆ˜ ์ง€์‹์œผ๋กœ JavaScript๋ฅผ ์•Œ๊ณ  ๊ณ„์…”์•ผ ํ•ฉ๋‹ˆ๋‹ค!)

Q. ์ˆ˜์—… ๋‚ด์šฉ์„ ์–ด๋Š ์ˆ˜์ค€๊นŒ์ง€ ๋‹ค๋ฃจ๋‚˜์š”?

React์™€ Node.js์˜ ๋ฌธ๋ฒ•์€ ๋‹ค๋ฃจ์ง€ ์•Š๊ณ , ๊ฐœ๋ฐœํ™˜๊ฒฝ ๊ตฌ์ถ•๊ณผ ๋ฐฐํฌ ๋ฐ ์ž๋™ํ™”์— ๋Œ€ํ•˜์—ฌ ์„ค๋ช…ํ•ฉ๋‹ˆ๋‹ค.

Q. ๊ฐ•์˜์— ์‚ฌ์šฉ๋˜๋Š” ๊ธฐ์ˆ ๋“ค์˜ ๋ฒ„์ „์ด ์˜ฌ๋ผ๊ฐ€๋ฉด, ๊ฐ•์˜ ์—…๋ฐ์ดํŠธ๊ฐ€ ์ด๋ฃจ์–ด์ง€๋‚˜์š”?

๊ฐ•์˜ ์ง„ํ–‰์ด ์–ด๋ ค์šธ ์ •๋„๋กœ ๋ฉ”์ด์ € ๋ฒ„์ „์ด ์˜ฌ๋ผ๊ฐˆ ๊ฒฝ์šฐ ๊ฐ•์˜ ๋‚ด์šฉ ์—…๋ฐ์ดํŠธ๋Š” ํ•„์š”ํ•ฉ๋‹ˆ๋‹ค. ๋”ฐ๋ผ์„œ 2025๋…„๊นŒ์ง€๋Š” ์—…๋ฐ์ดํŠธ๋ฅผ ์—ผ๋‘์— ๋‘๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค.

์ด๋Ÿฐ ๋ถ„๋“ค๊ป˜
์ถ”์ฒœ๋“œ๋ ค์š”!

ํ•™์Šต ๋Œ€์ƒ์€
๋ˆ„๊ตฌ์ผ๊นŒ์š”?

  • ์Šคํƒ€ํŠธ์—… ๊ฐœ๋ฐœ์ž๋กœ ์ž…์‚ฌํ–ˆ๋Š”๋ฐ ์‚ฌ์ˆ˜ ์—†๋Š” ๋ถ„

  • SPA ๊ฐœ๋ฐœํ™˜๊ฒฝ๊ณผ ์„œ๋ฒ„ ๋ฐฐํฌ๊ฐ€ ์ฒ˜์Œ์ด์‹  ๋ถ„

  • AWS ์‚ฌ์šฉ์ด ์ฒ˜์Œ์ด์‹  ๋ถ„

  • HTTPS ์„œ๋ฒ„ ๊ตฌ์„ฑ์„ ๋ฐฐ์šฐ๊ณ  ์‹ถ์€ ๋ถ„

  • CI/CD ์ž…๋ฌธ์ž

์„ ์ˆ˜ ์ง€์‹,
ํ•„์š”ํ• ๊นŒ์š”?

  • JavaScript

์•ˆ๋…•ํ•˜์„ธ์š”
Kenu ํ—ˆ๊ด‘๋‚จ์ž…๋‹ˆ๋‹ค.

687

๋ช…

์ˆ˜๊ฐ•์ƒ

46

๊ฐœ

์ˆ˜๊ฐ•ํ‰

42

๊ฐœ

๋‹ต๋ณ€

4.6

์ 

๊ฐ•์˜ ํ‰์ 

2

๊ฐœ

๊ฐ•์˜

https://okky.kr ์ฐฝ๋ฆฝ์ž์ด๋ฉฐ, https://github.com/kenu/okdevtv ์—์„œ ๋ฐฐ์šด ๊ฒƒ์„ ๊ณต์œ ํ•˜๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค.

https://mp4.okdevtv.com ์— ๊ฐœ๋ฐœ๊ด€๋ จ ์ฑ„๋„์˜ ์ตœ์‹  ์˜์ƒ์„ ๋ชจ์œผ๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค.

KenuHeo ์œ ํŠœ๋ธŒ์—์„œ ํ”„๋กœ๊ทธ๋ž˜๋ฐ ๋ฐฉ์†ก์„ 500ํšŒ ์ด์ƒ ์ง„ํ–‰ํ•˜๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค.

 

์ปค๋ฆฌํ˜๋Ÿผ

์ „์ฒด

8๊ฐœ โˆ™ (1์‹œ๊ฐ„ 48๋ถ„)

ํ•ด๋‹น ๊ฐ•์˜์—์„œ ์ œ๊ณต:

์ˆ˜์—…์ž๋ฃŒ
๊ฐ•์˜ ๊ฒŒ์‹œ์ผ: 
๋งˆ์ง€๋ง‰ ์—…๋ฐ์ดํŠธ์ผ: 

์ˆ˜๊ฐ•ํ‰

์ „์ฒด

43๊ฐœ

4.6

43๊ฐœ์˜ ์ˆ˜๊ฐ•ํ‰

๋น„์Šทํ•œ ๊ฐ•์˜

๊ฐ™์€ ๋ถ„์•ผ์˜ ๋‹ค๋ฅธ ๊ฐ•์˜๋ฅผ ๋งŒ๋‚˜๋ณด์„ธ์š”!

์›” โ‚ฉ15,400

5๊ฐœ์›” ํ• ๋ถ€ ์‹œ

โ‚ฉ77,000