@RestController
public class HelloController {
@GetMapping("/hello")
public String hello() {
return "์๋
์คํ๋ง!";
}
}
Spring์ ๋ฐฐ์ฐ๊ธฐ ์ด์ ์ ์์ฃผ ๊ทผ๋ณธ์ ์ธ ๊ถ๊ธ์ฆ๋ถํฐ ํด๊ฒฐํด ๋ณด๊ธฐ๋ก ํ๋ค.
[์ฌ์ฉ์ (๋ธ๋ผ์ฐ์ )]
V ํด๋ฆญ
[React/Next.js] ——— ์์ฒญ(fetch/axios) ———โถ [Spring ์๋ฒ]
V
[Service → DB]
V
์๋ต(JSON ํํ๋ก ๋ณด๋ด์ค)
์ด์ ๋ถํฐ๋ ํ๋ก ํธ์์ API๋ง ์ฐ๋ ๊ฒ ์๋๋ผ, ๊ทธ API ์์ฒด๋ฅผ ๋ง๋๋ ์ชฝ
์ด๊ฒ ์คํ๋ง ๋ฐฑ์๋์ ๋ณธ์ง.
Spring์ด๋?
์๋ฐ๋ก ๋ฐฑ์๋ ์น ์๋น์ค๋ฅผ ์ฝ๊ฒ ๋ง๋ค ์ ์๊ฒ ๋์์ฃผ๋ ํ๋ ์์ํฌ!
Java๋ฐฑ์๋=์๋ฒ๋ฅผ ๋ง๋๋ ๊ฒ (์์ฒญ๋ฐ๊ณ ์ฒ๋ฆฌํ๊ณ ์๋ต๊น์ง)
๊ทธ๋ฐ๋ฐ ์๋ฐ๋ก ์ง์ ๋ค ๋ง๋ค๋ ค๋ฉด ๋๋ฌด ๋ณต์กํ๊ณ ํ์ด ๋ ๋ค. ๐ฅฒ
๊ทธ๋์ Spring์ด๋ผ๋ ํ๋ ์์ํฌ๊ฐ ๋ฑ์ฅ..
Spring
๋ฐ๋ณต ์์ ์ ์ค์ฌ์ฃผ๊ณ ๊ธฐ๋ณธ ๊ตฌ์กฐ๋ฅผ ๋ง๋ค์ด์ค์ ๊ฐ๋ฐ์๊ฐ ํต์ฌ ๋ก์ง์๋ง ์ง์คํ ์ ์๋ค.
๋น๊ต) ํ๋ก ํธ ์ ์ฅ์์ ๋ณด๋ฉด, React๋ ํ๋ฉด(UI)์ ๊ตฌ์ฑํ๋ ํ๋ ์์ํฌ, Spring์ ๋ฐ์ดํฐ๋ฅผ ์ฒ๋ฆฌํ๊ณ ์๋ตํ๋ ์๋ฒ ์ญํ .
์คํ๋ง์ ํต์ฌ ๊ธฐ๋ฅ
- Controller : React์ ๋ผ์ฐํฐ ๊ฐ์ด URL์ ๋งคํํด์ฃผ๋ ๊ณณ.
→ /users ์์ฒญ์ด ๋ค์ด์ค๋ฉด ์ด๋ค ํจ์๊ฐ ์ฒ๋ฆฌํ ์ง ์ฐ๊ฒฐ
- Service : ์ง์ง ์ค์ํ ๋น์ฆ๋์ค ๋ก์ง (๊ณ์ฐ, ์กฐ๊ฑด์ฒ๋ฆฌ ๋ฑ)
- Repository : DB๋ ์ฐ๊ฒฐํด์ฃผ๋ ์ญํ (๋ฐ์ดํฐ ์ ์ฅ/์กฐํ)
- Model/ Entity : DBํ ์ด๋ธ์ฒ๋ผ ์๊ธด ์๋ฐ ํด๋์ค (User, Produce ๋ฑ)
- DI (์์กด์ฑ ์ฃผ์ ) : ํ์ํ ๊ฐ์ฒด๋ฅผ ์๋์ผ๋ก ์ฐ๊ฒฐํด์ฃผ๋ ๊ธฐ๋ฅ (React์์ props, context, useEffect์ฒ๋ผ ๋ญ๊ฐ ์ฐ๊ฒฐํด์ฃผ๋ ๋๋)
์คํ๋ง ๋ถํธ???
์คํ๋ง์ ๋ ์ฝ๊ฒ ๋น ๋ฅด๊ฒ ์ธ ์ ์๋๊ณ ๋ง๋ค์ด์ง ํดํท
์คํ๋ง ์ค์ ์ด ๋๋ฌด ๋ณต์กํด์ Spring Boot๊ฐ ๋ฑ์ฅ
React์์ CRA(Create React App)์ฒ๋ผ ํ๋ก์ ํธ ๋ผ๋๋ฅผ ๋ง๋ค์ด์ฃผ๋ ๋๋
๋ด์ฅ Tomcat ์๋ฒ ๋๋ถ์ main()๋ง ์คํํ๋ฉด ๋ฐ๋ก ์๋ฒ๊ฐ ๋์ํจ
์ฝ๊ฒ ๋งํด ์คํ๋ง ๋ถํธ๋ "์คํ๋ง์ ๊ท์ฐฎ์ ์ค์ ์ ์๋์ผ๋ก ์ฒ๋ฆฌํด์ฃผ๋ ๋์ฐ๋ฏธ"
์คํ๋ง(Spring) ์คํ๋ง ๋ถํธ(Spring Boot)
| ์คํ๋ง(Spring) | ์คํ๋ง ๋ถํธ(Spring Boot) | |
| ์ ์ | ๋ฐฑ์๋ ์น ์ ํ๋ฆฌ์ผ์ด์ ํ๋ ์์ํฌ | ์คํ๋ง์ ์ฝ๊ฒ ์ธ ์ ์๊ฒ ๋์์ฃผ๋ ํดํท |
| ํน์ง | ์ค์ ์ด ๋๋ฌด ๋ณต์กํจ(XML, ์๋์ค์ ๋ฑ) | ์ค์ ์ ์๋์ผ๋ก ํด์ค!(์๋ ์ค์ , ๋ด์ฅ ์๋ฒ ๋ฑ) |
| ์คํ ๋ฐฉ์ | ๋ฐ๋ก ์๋ฒ ํ์ (Tomcat ์ค์น) | ์คํ๋ง ํ๋ฉด ์๋ฒ๊ฐ ๋ฐ๋ก ๋ธ (main() ๋๋ฅด๋ฉด ๋) |
| ๊ฐ๋ฐ ์๋ | ๋๋ฆผ (์ด๊ธฐ ์ธํ ๊ท์ฐฎ์) | ๋น ๋ฆ (๊ฐ๋ฐ์ ํ๋ณต๋ ์์น) |
๊ตฌ๋ถ React/Next (ํ๋ก ํธ) Spring (๋ฐฑ์๋)
| React/Next (ํ๋ก ํธ) | Spring (๋ฐฑ์๋) | |
| ๊ตฌ์ฑ | ์ปดํฌ๋ํธ ์ค์ฌ | ๊ณ์ธต ๊ตฌ์กฐ (Controller → Service → Repository) |
| ๋ผ์ฐํ | react-router | @GetMapping("/url") |
| ์ํ๊ด๋ฆฌ | useState, Redux | ์๋น์ค/DB ๋ด๋ถ ์ฒ๋ฆฌ |
| ๋น๋๊ธฐ ์ฒ๋ฆฌ | fetch, axios | ๋ด๋ถ์์ @Async or ๋๊ธฐ ๊ธฐ๋ณธ |
| ์์ | npm start | main() ์คํ ๋๋ ./gradlew bootRun |
๊ฐ๋จ์ ๋ฆฌ
| 1 | ์คํ๋ง ๋ถํธ ํ๋ก์ ํธ ์์ฑ๋ฒ | CRA์ฒ๋ผ ์คํ๋ง ๋ถํธ ํ๋ก์ ํธ ๋ผ๋ ๋ง๋๋ ๋ฐฉ๋ฒ |
| 2 | Controller ๊ฐ๋ + @GetMapping, @PostMapping | URL → ํจ์ ์ฐ๊ฒฐ. ๋ผ์ฐํ . react-router-dom ๋๋ |
| 3 | ์์ฒญ ๋ฐ๊ธฐ: @RequestParam, @PathVariable, @RequestBody | ์ฌ์ฉ์ ์ ๋ ฅ๊ฐ์ ์๋ฒ์์ ๋ฐ๋ ๋ฒ (ํผ, fetch ๋ฑ๊ณผ ์ฐ๋) |
| 4 | ์๋ต ๋ณด๋ด๊ธฐ: JSON ์๋ต | React๋ก fetch ํ์ ๋ JSON์ผ๋ก ์๋ต ์ฃผ๋ ๋ฐฉ๋ฒ |
| 5 | DTO๋? | ์์ฒญ, ์๋ต ๋ฐ์ดํฐ ๊ตฌ์กฐํ ํด๋์ค (props ๋๋) |
| 6 | Service ๊ฐ๋ | ๋ก์ง ์ฒ๋ฆฌํ๋ ๋ ์ด์ด. ๊ณ์ฐ, ์กฐ๊ฑด, ๋ก์ง ๋ฑ ์ํ |
| 7 | Repository + DB ์ฐ๊ฒฐ | ์ค์ ๋ก ๋ฐ์ดํฐ๋ฅผ ์ ์ฅํ๊ฑฐ๋ ๋ถ๋ฌ์ด (JPA, H2๋ถํฐ ์์) |
| 8 | ์์กด์ฑ ์ฃผ์ (DI) | Spring์ด ์๋์ผ๋ก ๊ฐ์ฒด ๋ฃ์ด์ฃผ๋ ๊ธฐ๋ฅ (์์ฑ์ ๊ธฐ๋ฐ์ผ๋ก ์ฃผ์ ) |
| 9 | application.properties ์ค์ | ํ๋ก์ ํธ ์ค์ ํ์ผ. ํฌํธ, DB ์ฐ๊ฒฐ, ๋ก๊ทธ ์ค์ ๋ฑ |
| 10 | (๋ณด๋์ค) Postman, Swagger | API ํ ์คํธ ํด. ํ๋ก ํธ ์์ด๋ API ํ ์คํธ ๊ฐ๋ฅ! |
์ง๋ฌธ ์ ๋ฆฌ
Q1. @GetMapping("/url") ์ด๊ฑฐ ๋ผ์ด๋ธ๋ฌ๋ฆฌ์ธ๊ฐ? (npm install react-router-dom ๊ฐ์)
No. ์ด๊ฑด ์๋ฐ์ "์ด๋ ธํ ์ด์ "์ด๋ผ๋ ๋ฌธ๋ฒ์ด๊ณ , ์ปดํ์ผ ์ ์๋์ผ๋ก ์๋๋๋ ์ค์
@GetMapping("/url")๋ Spring Web์ด๋ผ๋ ์คํ๋ง ๋ผ์ด๋ธ๋ฌ๋ฆฌ์ ์ผ๋ถ ๊ธฐ๋ฅ
์ด๊ฑธ ์ฐ๊ธฐ ์ํด์ ํ๋ก์ ํธ ์์ฑ ์ spring-boot-starter-web์ ํฌํจํด์ผ ํจ
React์์๋ npm install react-router-dom์ผ๋ก ๋ผ์ฐํ ์ค์ ํ๋๋ฐ,
์คํ๋ง์์๋ @GetMapping, @PostMapping์ผ๋ก URL์ ๋ฐ๋ผ ๋ฉ์๋๋ฅผ ๋งตํํด์ฃผ๋ ๋ฐฉ์์.
@RestController
public class HelloController {
@GetMapping("/hello")
public String hello() {
return "Hello from Spring!";
}
}
///hello๋ก ์์ฒญํ๋ฉด ์ ํจ์๊ฐ ์คํ๋จ → ๋ฐํ๊ฐ "Hello from Spring!"์ด ๋ธ๋ผ์ฐ์ ์ ์ถ๋ ฅ๋จ
Q2. ์๋ฐ์ธ์์๋ ํจํค์ง ๋งค๋์ ๊ฐ ์๋๊ฐ?
No. ์๋ฐ ์ชฝ์์๋ Maven์ด๋ Gradle์ด๋ผ๋ ํจํค์ง ๋งค๋์ ๊ฐ ์กด์ฌํจ.
ํ๋ก ํธ (JS) ๋ฐฑ์๋ (Java)
| npm, yarn | Gradle, Maven |
| npm start | ./gradlew bootRun ๋๋ main() ์คํ |
- package.json → build.gradle
- npm install → ./gradlew build (๋๋ IntelliJ๊ฐ ์๋ ๊ด๋ฆฌ)
๋๋ IntelliJ์์ main() ์ฐํด๋ฆญ → Run ํ๋ฉด ๋ฐ๋ก ์คํ๋จ
→ localhost:8080์ผ๋ก ์๋ฒ๊ฐ ๋ธ (React์ฒ๋ผ 3000 ์๋๊ณ )
Q3. fetch/axios๋ ์ธ๋ถ API ์์ฒญ์ธ๋ฐ, ์คํ๋ง์ ์์ฒด๊ฐ API ๋ง๋๋ ๊ฑฐ ์๋๊ฐ??
Yes. ์ ๋ง ๋ ์นด๋ก์ด ์ง๋ฌธ
- React์์๋ ์ธ๋ถ API ํธ์ถ(fetch/axios)
- Spring์ API๋ฅผ ์ง์ ๋ง๋๋ ์ชฝ (์๋ฒ ์ญํ )
์คํ๋ง๋ ๋ค๋ฅธ ์ธ๋ถ ์๋ฒ์ ์์ฒญํ๊ณ ์ถ์ ๋๊ฐ ์์.
→ ์ด๋ด ๋ ์๋ฐ์์๋ RestTemplate, WebClient๋ฅผ ์ฌ์ฉํด fetch/axios์ ์ ์ฌํ ์ญํ
@RestController
public class ExternalApiController {
@GetMapping("/external")
public String callOtherApi() {
RestTemplate rt = new RestTemplate();
String response = rt.getForObject("https://api.example.com/data", String.class);
return response;
}
}
@Async๋ ๋ญ๋๋ฉด, ๋ด๋ถ์์ ๋น๋๊ธฐ ์์ ์ ์ฒ๋ฆฌํ๊ณ ์ถ์ ๋ ์ฐ๋ ๊ฑฐ์
@Async
public void backgroundJob() {
// ์ค๋ ๊ฑธ๋ฆฌ๋ ์์
}
Q4. ์๋น์ค/DB ๋ด๋ถ ์ฒ๋ฆฌ??
useState๋ ํด๋ผ์ด์ธํธ(๋ธ๋ผ์ฐ์ )์์ ๋ฐ์ดํฐ ์ ์ฅ์ด์ง๋ง
์คํ๋ง์ Service/Repository๋ ์๋ฒ ๋ด์์ ๋ก์ง ์ฒ๋ฆฌ + DB ์ ์ฅ
์์: ์ฌ์ฉ์๊ฐ ์ด๋ฆ์ ์ ๋ ฅํ๋ฉด → ์๋ฒ์์ DB์ ์ ์ฅ → ๋ค์ ๋ชฉ๋ก ๋ณด์ฌ์ค
์์ ์ฝ๋ (์คํ๋ง ๊ตฌ์กฐ)
- useState๋ ๋ธ๋ผ์ฐ์ ๋ฉ๋ชจ๋ฆฌ์ ์ ์ฅ
- Spring์ ์ค์ DB์ ์ ์ฅํ๊ณ → ์์ฒญ๋ฐ์์ ์๋ต๊น์ง ํจ
// 1. Entity (DB ํ
์ด๋ธ์ฒ๋ผ ์๊น)
@Entity
public class User {
@Id @GeneratedValue
private Long id;
private String name;
}
// 2. Repository (DB ์ ์ฅ์)
@Repository
public interface UserRepository extends JpaRepository<User, Long> {
}
// 3. Service (๋ก์ง ์ฒ๋ฆฌ)
@Service
public class UserService {
private final UserRepository repo;
public UserService(UserRepository repo) {
this.repo = repo;
}
public void saveUser(String name) {
User user = new User();
user.setName(name);
repo.save(user); // DB์ ์ ์ฅ
}
public List<User> findAllUsers() {
return repo.findAll(); // ์ ์ฒด ๋ชฉ๋ก ๋ถ๋ฌ์ค๊ธฐ
}
}
// 4. Controller (API ๋
ธ์ถ)
@RestController
public class UserController {
private final UserService service;
public UserController(UserService service) {
this.service = service;
}
@PostMapping("/user")
public void createUser(@RequestParam String name) {
service.saveUser(name);
}
@GetMapping("/user")
public List<User> getUsers() {
return service.findAllUsers();
}
}
'Backend > ๐ฑ Spring' ์นดํ ๊ณ ๋ฆฌ์ ๋ค๋ฅธ ๊ธ
| [Spring]์์กด๊ด๊ณ ์ฃผ์ (DI) (2) | 2025.07.28 |
|---|---|
| [Spring]Spring Bean (2) | 2025.07.28 |
| [Spring] Layered Architecture (3) | 2025.07.26 |
| [Spring] Mapping (1) | 2025.07.23 |
| [Spring]MVC (4) | 2025.07.23 |