Inflearn brand logo image
Inflearn brand logo image
์ฑ„๋„ํ†ก ์•„์ด์ฝ˜
NEW

Spring Boot์™€ React๋กœ ๋ฐฐ์šฐ๋Š” ์ดˆ๊ฐ„๋‹จ REST API ๊ฒŒ์‹œํŒ ๋งŒ๋“ค๊ธฐ

Spring Boot์™€ React.js๋กœ ์ดˆ๊ฐ„๋‹จ ๊ฒŒ์‹œํŒ์„ ์†์‰ฝ๊ฒŒ ๊ตฌ์ถ•ํ•˜๋Š” ์‹ค์ „ ๊ฐ•์˜! ์ด ๊ฐ•์˜๋Š” ์ด๋ก ์€ ๋œ๊ณ , ์‹ค์Šต์— ์ง‘์ค‘ํ•˜์—ฌ ๋น ๋ฅด๊ฒŒ ์™„์„ฑํ•˜๋Š” ์›น ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜ ๊ฐœ๋ฐœ ๊ณผ์ •์„ ๋‹ด์•˜์Šต๋‹ˆ๋‹ค.

4๋ช… ์ด ์ˆ˜๊ฐ•ํ•˜๊ณ  ์žˆ์–ด์š”.

Thumbnail

์ž…๋ฌธ์ž๋ฅผ ์œ„ํ•ด ์ค€๋น„ํ•œ
[์›น ๊ฐœ๋ฐœ, ํ”„๋ก ํŠธ์—”๋“œ] ๊ฐ•์˜์ž…๋‹ˆ๋‹ค.

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

  • ๊ฒŒ์‹œํŒ ๋งŒ๋“ค๊ธฐ (CRUD)

  • Spring Boot๋ฅผ ์‚ฌ์šฉํ•œ API ์„œ๋ฒ„ ์ œ์ž‘

  • ๊ฐ„๋‹จํ•œ RestApi ์‹œ์Šคํ…œ

Spring Boot & React๋กœ ๋ฐฐ์šฐ๋Š”

์ดˆ๊ฐ„๋‹จ Rest API ๊ฒŒ์‹œํŒ ๋งŒ๋“ค๊ธฐ ๐Ÿ’ก

์ด ๊ฐ•์˜์—์„œ๋Š” Spring Boot์™€ React.js๋ฅผ ํ™œ์šฉํ•˜์—ฌ REST API ๊ตฌ์กฐ์˜ ๊ธฐ๋ณธ ๊ฐœ๋…์„ ์ตํžˆ๊ณ , ์‹ค์Šต์„ ํ†ตํ•ด ๊ฐ„๋‹จํ•œ ๊ฒŒ์‹œํŒ์„ ๋งŒ๋“ค์–ด๋ด…๋‹ˆ๋‹ค.
ํ”„๋ก ํŠธ์—”๋“œ์™€ ๋ฐฑ์—”๋“œ์˜ ์—ฐ๋™ ๊ณผ์ •์„ ์ดํ•ดํ•˜๋ฉฐ, ์‹ค์ œ ํ”„๋กœ์ ํŠธ์—์„œ ํ™œ์šฉํ•  ์ˆ˜ ์žˆ๋Š” RESTful API ์„ค๊ณ„ ๋ฐฉ๋ฒ•์„ ๋ฐฐ์›๋‹ˆ๋‹ค.
Spring Boot๋ฅผ ์ด์šฉํ•œ ๋ฐฑ์—”๋“œ ๊ตฌ์ถ•, React๋ฅผ ํ™œ์šฉํ•œ ํ”„๋ก ํŠธ์—”๋“œ ๊ฐœ๋ฐœ, ๊ทธ๋ฆฌ๊ณ  ์ด ๋‘˜์„ ์—ฐ๊ฒฐํ•˜๋Š” ๊ณผ์ •์„ ๋‹จ๊ณ„๋ณ„๋กœ ํ•™์Šตํ•ฉ๋‹ˆ๋‹ค.
๊ฒŒ์‹œํŒ ๊ตฌํ˜„์„ ํ†ตํ•ด CRUD(Create, Read, Update, Delete) ๊ธฐ๋Šฅ์„ ์ง์ ‘ ๊ตฌํ˜„ํ•˜๋ฉฐ REST API์˜ ๋™์ž‘ ์›๋ฆฌ๋ฅผ ์ž์—ฐ์Šค๋Ÿฝ๊ฒŒ ์ตํž ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.
์‹ค์ œ ๊ฐœ๋ฐœ ํ™˜๊ฒฝ๊ณผ ์œ ์‚ฌํ•œ ์‹ค์Šต์„ ์ง„ํ–‰ํ•˜์—ฌ, ์ด๋ก ๋ฟ๋งŒ ์•„๋‹ˆ๋ผ ์‹ค์ „ ๊ฒฝํ—˜๊นŒ์ง€ ์Œ“์„ ์ˆ˜ ์žˆ๋„๋ก ๊ตฌ์„ฑํ•˜์˜€์Šต๋‹ˆ๋‹ค.
์ด ๊ฐ•์˜๋ฅผ ์ˆ˜๊ฐ•ํ•˜๋ฉด REST API์˜ ํ•ต์‹ฌ ๊ฐœ๋…์„ ์ดํ•ดํ•˜๊ณ , ์ด๋ฅผ ํ™œ์šฉํ•œ ๊ธฐ๋ณธ์ ์ธ ์›น ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜ ๊ฐœ๋ฐœ ๋Šฅ๋ ฅ์„ ๊ฐ–์ถœ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

๐Ÿ‘ ๊ฐ•์˜๋ฅผ ๋ชจ๋‘ ์ˆ˜๊ฐ•ํ•˜์‹œ๋ฉด!

  • Rest API ์„ค๊ณ„ ๋ฐฉ๋ฒ•

  • Rest API ๋™์ž‘ ์›๋ฆฌ

  • CSR ๊ฐœ๋… ์ดํ•ด

์ด๋Ÿฐ ๋‚ด์šฉ์„ ๋ฐฐ์›Œ์š”

Spring Boot๋ฅผ ์‚ฌ์šฉํ•œ API ์„œ๋ฒ„ ๊ตฌ์ถ•

Spring Boot๋ฅผ ํ™œ์šฉํ•˜์—ฌ ๊ฐ„๋‹จํ•œ REST API ์„œ๋ฒ„๋ฅผ ๊ตฌ์ถ•ํ•˜๊ณ , ๊ฒŒ์‹œํŒ ๊ธฐ๋Šฅ์„ ๊ตฌํ˜„ํ•ฉ๋‹ˆ๋‹ค.
JPA, ๊ทธ๋ฆฌ๊ณ  MySql ๋ฐ์ดํ„ฐ๋ฒ ์ด์Šค๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ CRUD ๊ธฐ๋Šฅ์„ ๊ฐœ๋ฐœํ•˜๋ฉฐ, API์˜ ์š”์ฒญ๊ณผ ์‘๋‹ต ๊ตฌ์กฐ๋ฅผ ์ตํž™๋‹ˆ๋‹ค.
์‹ค์Šต์„ ํ†ตํ•ด ๋ฐฑ์—”๋“œ ๊ฐœ๋ฐœ์˜ ๊ธฐ๋ณธ ์›๋ฆฌ๋ฅผ ๋ฐฐ์šฐ๊ณ , ํ”„๋ก ํŠธ์—”๋“œ์™€ ์—ฐ๋™ํ•˜๋Š” ๊ณผ์ •์„ ๊ฒฝํ—˜ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

React.js๋ฅผ ์‚ฌ์šฉํ•œ ๊ฒŒ์‹œํŒ ์ž‘์„ฑ

React.js๋ฅผ ํ™œ์šฉํ•˜์—ฌ ์‚ฌ์šฉ์ž ์นœํ™”์ ์ธ ๊ฒŒ์‹œํŒ UI๋ฅผ ์ œ์ž‘ํ•˜๊ณ , REST API์™€ ์—ฐ๋™ํ•ฉ๋‹ˆ๋‹ค.
Axios๋ฅผ ์ด์šฉํ•ด ๋ฐฑ์—”๋“œ์™€ ํ†ต์‹ ํ•˜๋ฉฐ, ๊ธ€ ์ž‘์„ฑ, ์กฐํšŒ, ์ˆ˜์ •, ์‚ญ์ œ(CRUD) ๊ธฐ๋Šฅ์„ ๊ตฌํ˜„ํ•ฉ๋‹ˆ๋‹ค.
์ปดํฌ๋„ŒํŠธ ๊ธฐ๋ฐ˜ ๊ฐœ๋ฐœ์„ ํ†ตํ•ด ์žฌ์‚ฌ์šฉ์„ฑ๊ณผ ์œ ์ง€๋ณด์ˆ˜์„ฑ์„ ๋†’์ด๋Š” ๋ฐฉ๋ฒ•์„ ์ตํž™๋‹ˆ๋‹ค.

๊ฐ•์˜ ์ž๋ฃŒ ์ œ๊ณต ๐Ÿ“–

๊นƒ๋ถ์„ ํ™œ์šฉํ•ด ๊ฐ•์˜ ์ฝ”๋“œ์™€ ํ™˜๊ฒฝ ์„ค์ • ํŒŒ์ผ์„ ์ฒด๊ณ„์ ์œผ๋กœ ์ œ๊ณตํ•ฉ๋‹ˆ๋‹ค.
์ˆ˜๊ฐ•์ƒ๋“ค์€ ๋ณต์žกํ•œ ์„ค์ • ์—†์ด ๋ฐ”๋กœ ์‹ค์Šต์— ์ง‘์ค‘ํ•  ์ˆ˜ ์žˆ๋„๋ก ์ง€์›ํ•ฉ๋‹ˆ๋‹ค.
์ง€์†์ ์ธ ์—…๋ฐ์ดํŠธ๋ฅผ ํ†ตํ•ด ์ƒˆ๋กœ์šด ์ž๋ฃŒ๋ฅผ ์ œ๊ณตํ•ฉ๋‹ˆ๋‹ค.

์ˆ˜๊ฐ• ์ „ ์ฐธ๊ณ  ์‚ฌํ•ญ

์‹ค์Šต ํ™˜๊ฒฝ

  • ์šด์˜ ์ฒด์ œ ๋ฐ ๋ฒ„์ „(OS): Windows 10, Windows 11, macOS

  • ์‚ฌ์šฉ ๋„๊ตฌ: IntelliJ, MySQL Workbench


ํ•™์Šต ์ž๋ฃŒ

  • ์ œ๊ณตํ•˜๋Š” ํ•™์Šต ์ž๋ฃŒ ํ˜•์‹: ๊นƒ๋ถ์„ ํ™œ์šฉํ•œ ์†Œ์Šค์ฝ”๋“œ ์ œ๊ณต

์„ ์ˆ˜ ์ง€์‹ ๋ฐ ์œ ์˜์‚ฌํ•ญ

  • Java์™€ Javascript์— ๋Œ€ํ•ด ์‚ฌ์ „ ์ง€์‹์ด ์žˆ์–ด์•ผ ํ•ฉ๋‹ˆ๋‹ค.

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

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

  • CSR์„ ์‚ฌ์šฉํ•˜์—ฌ ์›น ์ œ์ž‘์„ ์›ํ•˜์‹œ๋Š” ๋ถ„

  • Spring Boot์™€ React.js๊ฐ„์˜ http ํ๋ฆ„์ด ์–ด๋–ป๊ฒŒ ๋˜๋Š”์ง€ ์•Œ๊ณ  ์‹ถ์œผ์‹  ๋ถ„

  • ์›น์˜ ๋™์ž‘๋˜๋Š” ๊ณผ์ •์˜ ์ „์ฒด์ ์ธ ํ๋ฆ„ ์ดํ•ด๋ฅผ ์›ํ•˜๋Š” ๋ถ„

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

  • Java

  • React.js

์•ˆ๋…•ํ•˜์„ธ์š”
์˜๋„จ์ž…๋‹ˆ๋‹ค.

์›น ๊ฐœ๋ฐœ์„ ํ•˜๋‹ค๊ฐ€ ๊ฒŒ์ž„ ๊ฐœ๋ฐœ์— ๋น ์ ธ ์‚ด๊ณ  ์žˆ๋Š” ๊ฐœ๋ฐœ์ž ์ž…๋‹ˆ๋‹ค!

ํ•ญ์ƒ ๋ฐฐ์šฐ๋Š” ๋งˆ์Œ๊ฐ€์ง์œผ๋กœ!

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

์ „์ฒด

14๊ฐœ โˆ™ (2์‹œ๊ฐ„ 59๋ถ„)

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

์ˆ˜๊ฐ•ํ‰

์•„์ง ์ถฉ๋ถ„ํ•œ ํ‰๊ฐ€๋ฅผ ๋ฐ›์ง€ ๋ชปํ•œ ๊ฐ•์˜์ž…๋‹ˆ๋‹ค.
๋ชจ๋‘์—๊ฒŒ ๋„์›€์ด ๋˜๋Š” ์ˆ˜๊ฐ•ํ‰์˜ ์ฃผ์ธ๊ณต์ด ๋˜์–ด์ฃผ์„ธ์š”!