[프로젝트] 1. SPRINGBOOT + REACT 연동하기

1인 프로젝트로 문화센터 웹사이트를 주제로 정하여 진행을 하려 한다.

 

앞서 진행했던 프로젝트는 어떤 뚜렷한 주제도 없이 진행을 했기에 만들고 보니 이게 대체 뭔 사이트인지 나 자신도 물음표를 띄웠다. 그렇기에 이번엔 제대로 된 문화센터라는 주제를 정하여 레퍼런스로 삼을 사이트를 참고하여 프로젝트를 진행해보려 한다..!

 

작업 툴은 IntelliJ를 사용하며, FE는 React + TypeScript, BE은 Java/SpringBoot, DB는 MySQL로 선택하여 진행할 것이다.

 

 

1. Spring Boot + React.js 사용을 위한 설정

New Project에서 Spring Initializr로 들어가 아래와 같이 설정하였다.

여기서 springboot 3.x 이상은 JAVA 17 이상으로만 호환하기에 먼저 ORACLE로 가서 JDK 17을 설치해 주자

 

https://www.oracle.com/java/technologies/downloads/#java17

Download the Latest Java LTS Free

 

그리고 다시 IntelliJ로 돌아와 JDK를 17 버전으로 설정해 주었다.

 

 

이외에 패키징을 war로 해주고 type은 gradle로 해준다.  이외에는 별다른 설정은 하지 않았다.

 

 

 

 

다음으로 react.js를 사용하기 위해 우선적으로 아래 사이트에서 node.js를 다운로드하여 설치를 해준다.

https://nodejs.org/ko

Node.js

 

 

 

그리고 다시 돌아와 settings -> plugins에서 아래와 같이 node.js와 EJS를 Install 해준다.

 

 

 

이후 Languages & Frameworks -> Node.js로 가서 설치한 node.js 경로를 add 해준다.

 

728x90

 

 

 

 

 

 

 

 

 

 

2. React.js 설치

main/webapp 디렉터리를 생성해 주고 하단 터미널 창에서 생성한 디렉터리로 이동한 후

아래와 같이 npx create-react-app [원하는 이름] --template typescript를 입력해 준다.

typescript를 사용 안 하겠다면 --template tyepscript는 입력하지 말고 진행하면 된다.

 

설치를 완료하면 webapp 디렉터리에 아래와 같이 파일들이 생긴 것을 확인할 수 있다.

 

 

 

터미널 창에서 create-react-app을 통해 생성된 디렉터리로 이동을 하고 npm start를 입력해 준다.

그럼 아래와 같은 화면을 출력되는 것을 확인할 수 있다.

 

 

화면 출력을 확인한 후 다시 터미널 창으로 돌아와 ctrl + c를 입력하고 y를 입력한 다음

npm install -> npm run-script build -> npm run eject 순으로 입력을 해준다.

 

만약 commit-push 할 파일들이 있다면 앞 2가지 명령을 입력 후 commit-push를 진행하고 npm run eject를 입력하면 된다.

여기까지 해주었다면 설정이 대략적으로 끝났다.

 

반응형

 

 

 

 

 

 

 

 

 

 

 

3. Spring Boot와 React.js 연동

React와 Spring 간의 통신에서 CORS 이슈가 발생하였다.

CORS (Cross Origin Resource Sharing)
서버와 클라이언트가 동일한 IP주소에서 동작하고 있다면, resource를 제약 없이 서로 공유할 수 있지만, 만약 다른 도메인에 있다면 원칙적으로 어떤 데이터도 주고받을 수 없도록 하는 매커니즘입니다.

 

나는 Spring Security를 차후에 사용할 계획이므로 여기서 CORS 문제를 해결하기로 했다.

 

우선 아래 의존성을 build.gradle에 추가해 준다.

// spring-security dependency
implementation 'org.springframework.boot:spring-boot-starter-security'
testImplementation 'org.springframework.security:spring-security-test'

 

 

 

그리고 SecurityConfig 클래스를 작성해 준다.

예전에 사용하던 SecurityConfig은 Deprecated 되어 사용이 불가해 구글링을 통해 아래와 같이 새로 작성하였다.

@RequiredArgsConstructor
@Configuration
@EnableWebSecurity 
public class SecurityConfig {

    private final CorsConfig corsConfig;

    @Bean
    public SecurityFilterChain filterChain(HttpSecurity httpSecurity) throws Exception {
        httpSecurity
                .cors()
                .configurationSource(corsConfig.corsConfigurationSource())
                .and()
                .formLogin().disable()
                .csrf().disable() 
                .sessionManagement()
                .sessionCreationPolicy(SessionCreationPolicy.STATELESS)
                .and()
                .authorizeHttpRequests()
                .requestMatchers("/**").permitAll()
                .anyRequest().authenticated();

        return httpSecurity.build();
    }

}

 

 

 

CORS 허용 정책을 설정해 주는 CorsConfig 클래스를 작성하여 SecurityConfig에 넣어준다.

아래와 같이 AllowedOrigins에 React의 호스트 주소인 localhost:3000을 추가해 주면 React와 Spring 간의 통신에서 CORS 문제를 해결할 수 있다.

@Configuration
public class CorsConfig {

    @Bean
    public CorsConfigurationSource corsConfigurationSource() {
        CorsConfiguration configuration = new CorsConfiguration();

        configuration.setAllowedOrigins(List.of("http://localhost:3000"));
        configuration.setAllowedMethods(List.of("*"));
        configuration.setAllowedHeaders(List.of("*"));
        configuration.setAllowCredentials(true); 

        UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
        source.registerCorsConfiguration("/**", configuration);

        return source;
    }
}

 

 

만일 Spring Security를 사용하지 않는다면 React 디렉터리에 있는 package.json에 "proxy": "http://localhost:8080" 를 추가해 주는 것으로 CORS 문제를 해결할 수도 있다.

 

 

관련 포스팅

2024.06.10 - [React] - [React] CORS 오류 해결하기

[React] CORS 오류 해결하기