목차
1. 스프링 부트와 React 프로젝트 설정
스프링 부트와 React를 함께 사용하는 프로젝트를 설정하는 방법에 대해 알아봅니다. 먼저 create-react-app으로 React 프로젝트를 생성한 다음, Spring Initializr를 이용하여 스프링 부트 프로젝트를 생성합니다. 각 프로젝트를 따로 구성한 뒤, React 앱을 빌드하고 스프링 앱에 포함시켜야 합니다.
예시 코드:
React 프로젝트 생성:
npx create-react-app my-react-app
스프링 부트 프로젝트 생성:
https://start.spring.io/
2. 스프링과 React를 연동하는 방법
스프링과 React 애플리케이션을 연동하여 두 애플리케이션 간의 통신을 설정하는 방법을 알아봅니다. 이를 위해 Axios나 Fetch API 등을 이용하여 React 앱에서 스프링 앱으로 HTTP 요청을 보내고, 스프링 앱에서 React 앱으로 데이터를 응답하는 방법을 학습합니다.
예시 코드:
React에서 스프링으로 POST 요청 보내기:
axios.post('/api/data', {name: 'John'})
.then(response => {
console.log(response.data);
});
3. 스프링과 React를 이용한 REST API 호출
스프링과 React 애플리케이션에서 REST API를 호출하고 응답을 처리하는 방법에 대해 알아봅니다. 스프링에서 RESTful API를 작성하고 React에서 이를 호출하여 데이터를 표시하는 방법을 실습합니다.
예시 코드:
스프링에서 REST API 작성:
@RestController
public class ApiController {
@GetMapping("/api/data")
public ResponseEntity<String> getData() {
return ResponseEntity.ok("Hello, from Spring!");
}
}
React에서 REST API 호출:
fetch('/api/data')
.then(response => response.text())
.then(data => {
console.log(data);
});
4. 스프링 시큐리티와 React 통합
스프링 시큐리티와 React를 함께 사용하여 사용자 인증 및 권한 부여를 구현하는 방법에 대해 알아봅니다. React에서 사용자 로그인 폼을 제공하고, 스프링 시큐리티를 사용하여 사용자의 인증을 처리하고 인가를 관리하는 방법을 학습합니다.
예시 코드:
React에서 사용자 로그인 폼:
<form onSubmit={handleSubmit}>
<input type="text" name="username" />
<input type="password" name="password" />
<button type="submit">Log In</button>
</form>
스프링 시큐리티 설정:
@EnableWebSecurity
public class SecurityConfig extends WebSecurityConfigurerAdapter {
// ...
}
이를 통해, 스프링과 React를 함께 사용하는 프로젝트에서의 설정과 연동 방법에 대해 알아보았습니다. 각 섹션에서 제시된 예시 코드를 활용하여 실제 프로젝트에서 적용해볼 수 있습니다.
참고 문헌:
- Spring Boot Official Documentation (https://spring.io/projects/spring-boot)
- React Official Documentation (https://reactjs.org/)