스프링(Spring)은 Java 언어로 개발된 경량 애플리케이션 프레임워크로, 엔터프라이즈급 Java 애플리케이션을 구축하는 데 많이 사용됩니다. 여기에 스프링 시큐리티(Spring Security)를 통합하면 강력한 보안 기능을 추가할 수 있습니다. 반면, React는 사용자 인터페이스를 구축하기 위한 JavaScript 라이브러리로, 단일 페이지 애플리케이션을 만들 수 있습니다. 이번 블로그에서는 스프링 시큐리티와 React 앱을 통합하는 방법에 대해 다뤄보겠습니다.
목차
1. 스프링 시큐리티 설정
먼저, 스프링 시큐리티를 프로젝트에 통합합니다. pom.xml 파일에서 다음과 같이 스프링 시큐리티 의존성을 추가합니다.
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-security</artifactId>
</dependency>
그리고 WebSecurityConfig 클래스를 생성하여 보안 구성을 합니다.
@Configuration
@EnableWebSecurity
public class WebSecurityConfig extends WebSecurityConfigurerAdapter {
@Override
protected void configure(HttpSecurity http) throws Exception {
http
.authorizeRequests()
.antMatchers("/", "/home").permitAll()
.anyRequest().authenticated()
.and()
.formLogin()
.loginPage("/login")
.permitAll()
.and()
.logout()
.permitAll();
}
@Bean
public PasswordEncoder passwordEncoder() {
return new BCryptPasswordEncoder();
}
}
2. React 앱과의 연동
React 앱과의 연동을 위해 스프링은 REST API를 제공하고, React 앱은 해당 API를 호출하여 데이터를 주고받습니다. 먼저, 스프링 컨트롤러(Controller)에서 REST 엔드포인트를 구성합니다.
@RestController
public class DataController {
@GetMapping("/api/data")
public String getData() {
return "This data is secured";
}
}
그리고 React 앱에서는 fetch나 axios 등을 이용하여 해당 엔드포인트에 요청을 보냅니다.
fetch('/api/data')
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.log(error));
3. 시큐리티 토큰 처리
스프링 시큐리티에서 생성된 인증 토큰을 React 앱에서 사용하려면, 클라이언트 측에서 해당 토큰을 저장하여 인증된 요청을 보내야 합니다. 주로 로컬스토리지 or 세션스토리지를 사용하여 토큰을 저장하고, API 호출 시 헤더에 포함시켜 보냅니다.
// 토큰 저장
localStorage.setItem('accessToken', 'your_token_here');
// API 요청 시 헤더에 토큰 포함
fetch('/api/data', {
headers: {
'Authorization': `Bearer ${localStorage.getItem('accessToken')}`
}
})
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.log(error));
4. 결론
이렇게 스프링 시큐리티와 React 앱을 통합함으로써, 안전한 백엔드 서비스와 사용자 친화적인 프론트엔드를 함께 제공할 수 있습니다. 이는 모던 웹 애플리케이션을 구축할 때 중요한 부분 중 하나입니다.
이상으로 스프링 시큐리티와 React 앱의 통합에 대해 알아보았습니다. 감사합니다.