๋ณธ๋ฌธ ๋ฐ”๋กœ๊ฐ€๊ธฐ
๐Ÿ“ ํšŒ๊ณ /๐Ÿ—“ ์ผ์ผ, ์ฃผ๊ฐ„ ํšŒ๊ณ 

[์˜์‚ฌ๊ฒฐ์ •, ์ผ์ผํšŒ๊ณ ] 22.06.14 - "ํ”„๋ก ํŠธ์—”๋“œ(React) ๋ฐฐํฌ์™€ ์•„ํ‚คํ…์ฒ˜"

by kukim 2022. 6. 15.

๐Ÿ“š ๋ฐฐ์šด ๊ฒƒ

ํ”„๋ก ํŠธ์—”๋“œ(React) ๋ฐฐํฌ ๋ฐฉ๋ฒ• ๊ณ ๋ฏผ

(์–ด์ œ ๊ธ€์„ ๋‚จ๊ฒผ์ง€๋งŒ) ์ฝ”๋“œ์Šค์ฟผ๋“œ์—์„œ์˜ 3์ฃผ๊ฐ„์˜ ๋งˆ์ง€๋ง‰ ํŒ€ ํ”„๋กœ์ ํŠธ๋ฅผ ์‹œ์ž‘ํ–ˆ๋‹ค. ์ด๋ฒˆ ํ”„๋กœ์ ํŠธ๋Š” FE(2๋ช…)/BE(1๋ช…)์œผ๋กœ BE๋ฅผ ๋‹ด๋‹นํ–ˆ๋‹ค.

FE - react / BE - Spring๋ฅผ ์‚ฌ์šฉํ•œ๋‹ค. BE๊ฐ€ FE ์›น๊นŒ์ง€ ๋ฐฐํฌ๋ฅผ ๋‹ด๋‹นํ•˜๊ธฐ๋กœ ํ–ˆ๋‹ค. 

 

React๋Š” SPA(Single Page Application), CSR(Client side rendering)์œผ๋กœ build ํ•˜๋ฉด ์ •์  ํŒŒ์ผ์ด ์ƒ๊ธด๋‹ค.

์ด๋ฅผ ๋ฐฐํฌํ•˜๋ฉด ๋˜๊ฒ ๋‹ค ์ƒ๊ฐํ–ˆ๊ณ  3๊ฐ€์ง€๊ฐ€ ๋– ์˜ฌ๋ž๋‹ค.

 

Case 1 : Spring + react ๋ฌถ์–ด ๋ฐฐํฌํ•˜๊ธฐ

react๋ฅผ ๋นŒ๋“œํ•˜๋ฉด /build ์ •์  ๋ฆฌ์†Œ์Šค ํŒŒ์ผ์„ spring์˜ src/main/resources/main/static ์— ๋„ฃ์–ด ๋ฐฐํฌํ•œ๋‹ค.

์žฅ์ 

  • ํ•œ ๋ฒˆ์— ๋ฌถ์–ด ๋ฐฐํฌํ•  ์ˆ˜ ์žˆ๋‹ค.
  • ๊ฐ„ํŽธํ•˜๋‹ค
  • ์„œ๋ฒ„ ํ•œ๋Œ€๋กœ ๋„์šธ ์ˆ˜ ์žˆ๋‹ค.

๋‹จ์ 

  • FE/BE ๊ฒฐ๊ณผ, ์„œ๋ฒ„ ๊ตฌ๋ถ„์ด ๋˜์–ด ์žˆ์ง€ ์•Š๋‹ค.
  • BE๋งŒ ํ™•์žฅํ•˜๊ธฐ ์–ด๋ ต๋‹ค.

Case 2 : nginx + react ๋ฐฐํฌํ•˜๊ธฐ

react ๋นŒ๋“œ ๊ฒฐ๊ณผ์˜ ์ •์  ๋ฆฌ์†Œ์Šค ํŒŒ์ผ์„ nginx์™€ ๊ฐ™์€ ์›น์„œ๋ฒ„์™€ ์—ฐ๊ฒฐํ•˜์—ฌ ๋ฐฐํฌํ•œ๋‹ค.

์žฅ์ 

  • FE/BE ์„œ๋ฒ„ ๋ถ„๋ฆฌํ•˜์—ฌ ๋ฐฐํฌํ•  ์ˆ˜ ์žˆ๋‹ค.
  • FE๋งŒ ์„œ๋ฒ„ ํ™•์žฅ ๊ฐ€๋Šฅํ•˜๋‹ค.

๋‹จ์ 

  • BE์—์„œ CORS ๋ฌธ์ œ ํ•ด๊ฒฐํ•ด์•ผ ํ•œ๋‹ค.

Case 3 : AWS์˜ S3 + CloudFront๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ ๋ฐฐํฌํ•œ๋‹ค.

react ๋นŒ๋“œ ๊ฒฐ๊ณผ์˜ ์ •์  ๋ฆฌ์†Œ์Šค ํŒŒ์ผ์„ S3์— ์˜ฌ๋ฆฐ๋‹ค. ์ •์  ๋ฆฌ์†Œ์Šค ํŒŒ์ผ์ด๊ธฐ์— S3์—์„œ index.html๋งŒ ์—ฐ๊ฒฐ์‹œ์ผœ์ฃผ๋ฉด ํ•„์š”ํ•œ ๋ฆฌ์†Œ์Šค๋ฅผ s3๋งํฌ๋กœ ์š”์ฒญํ•ด ๋ฐ›๋Š”๋‹ค. FE๋ฅผ ์„œ๋ฒ„ ์—†์ด ๋ฐฐํฌํ•  ์ˆ˜ ์žˆ๋‹ค. ์—ฌ๊ธฐ์— CloudFront์˜ ๊ธฐ๋Šฅ์„ ์ถ”๊ฐ€ํ•˜๋ฉด ๋” ์ข‹๋‹ค. ๋ณ„๋„์˜ ์ƒํƒœ ์ฝ”๋“œ ์ง€์ •๊ณผ, AWS ์ „ ์„ธ๊ณ„ CDN์— ์ •์  ๋ฆฌ์†Œ์Šค๋ฅผ ๋ณด๋‚ด ์บ์‹œ๋ฅผ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ๋‹ค.

 

Case 3์œผ๋กœ ์ผ๋‹จ ์„ฑ๊ณต์ (?)์œผ๋กœ ๋ฐฐํฌํ–ˆ๋‹ค. ์ด ๊ณผ์ •์„ ๋ฌธ์„œํ™”ํ•˜์˜€๋‹ค.

2022.06.14 - [๐Ÿ‘พ Server/โ˜๏ธAWS] - Github Actions๋ฅผ ํ™œ์šฉํ•ด React๋ฅผ S3, CloudFront๋ฅผ ์‚ฌ์šฉํ•ด ๋ฐฐํฌํ•˜๊ธฐ (์„œ๋ฒ„ ์—†์ด(?) ํ”„๋ก ํŠธ ๋ฐฐํฌํ•˜๊ธฐ)

 

๋””ํ…Œ์ผํ•œ ์˜ต์…˜ ์„ค์ •์„ ๊ฑด๋“œ๋ฆฌ์ง€ ๋ชปํ–ˆ๋‹ค. ํ”„๋กœ์ ํŠธ๊ฐ€ ๋ฐœ์ „ํ•˜๋ฉฐ ์‚ฝ์งˆ ๊ธฐ๋Œ€๋ฅผ(?) ํ•ด๋ณธ๋‹ค.

๋ฌด๋ฃŒ ์ œ๊ณต๋˜๋Š” CloudFront ์บ์‹œ ๋ฌดํšจํ™” ์ˆ˜๊ฐ€ ์ƒ๊ฐ๋ณด๋‹ค ์ ์–ด ๊ณผ๊ธˆ์ด ๋‘๋ ต๋‹ค. 


๐Ÿ‘ Keep

  • ์ฒ˜์Œ ๋ณด๋Š” ๊ธฐ์ˆ ์„ ์‹ค์Šต, ํ•™์Šตํ•˜๊ณ  ์ •๋ฆฌํ•˜์—ฌ ๊ธ€์„ ์ž‘์„ฑํ–ˆ๋‹ค.!

๐Ÿ”ฅProblem

  • ์–ด์ œ ๋ชปํ–ˆ๋˜ ์‚ฐ์ฑ…์€ ํ–ˆ๋‹ค. ์ด์   ์šด๋™์„ ํ•ด๋ณด์ž

๐Ÿš’ Try

  • ๋‚ด์ผ ํ‘ธ์‹œ์—… 3์„ธํŠธ ํ•ด๋ณด์ž!
 
 
 
 

'๐Ÿ“ ํšŒ๊ณ  > ๐Ÿ—“ ์ผ์ผ, ์ฃผ๊ฐ„ ํšŒ๊ณ ' ์นดํ…Œ๊ณ ๋ฆฌ์˜ ๋‹ค๋ฅธ ๊ธ€

[์˜์‚ฌ๊ฒฐ์ •, ์ผ์ผํšŒ๊ณ ] 22.06.15 - "๋ฐฑ์—”๋“œ(Spring) ๋ฐฐํฌ์™€ ์•„ํ‚คํ…์ฒ˜"  (0) 2022.06.16
[์ผ์ผํšŒ๊ณ ] 22.06.13 - "AWS Auto Scaling, ์ฝ”๋“œ ์Šค์ฟผ๋“œ์—์„œ์˜ ๋งˆ์ง€๋ง‰ ํ”„๋กœ์ ํŠธ ์‹œ์ž‘"  (0) 2022.06.13
[์ผ์ผํšŒ๊ณ ] 22.06.02 - "๊ฒ€์ฆ๋ฌธ ์‹คํŒจํ•ด๋„ ๊ณ„์†ํ•˜๊ธฐ, ํ†ตํ•ฉํ…Œ์ŠคํŠธ๋ฅผ ์œ„ํ•œ ๋”๋ฏธ๋ฐ์ดํ„ฐ ์„ธํŒ…, ์ฝ”๋“œ์Šค์ฟผ๋“œ ์„ ๋ฐฐ ๊ธฐ์ˆ˜์™€ ์˜จ๋ผ์ธ ๋งŒ๋‚จ"  (2) 2022.06.02
[์ผ์ผํšŒ๊ณ ] 22.05.31 - "Github Actions์„ ํ™œ์šฉํ•œ ๋ฐฐํฌ ์ž๋™ํ™”, ๋นŒ๋“œ(ํ…Œ์ŠคํŠธ ํ†ต๊ณผ)์— ๋ฌธ์ œ ์—†์—ˆ์ง€๋งŒ ๋Ÿฐํƒ€์ž„์—๋Š” ์—๋Ÿฌ๊ฐ€ ๋ฐœ์ƒํ•œ ๋ฌธ์ œ"  (0) 2022.06.01
[์ผ์ผ ํšŒ๊ณ ] 22.05.23 - "AWS VPC, ์ˆ™๋ฐ•์•ฑ ํ”„๋กœ์ ํŠธ์™€ Events storming, Boris diagram, Snap-E"  (2) 2022.05.23

๋Œ“๊ธ€0