[웹 게시판 만들기] 프로젝트 만들기

프로젝트를 만들 때마다 헷갈려서 정리했다.

 

| 사용 툴

intelliJ

 

| 사용 언어

프론트엔드 : React

백엔드 : Spring Boot, MySQL, JPA 

 

| 목차

1. Empty Project 생성

2. 프론트엔드 모듈 추가

3. 백엔드 모듈 추가

4. ~ 기타 설정

 

| 설명

1. Empty Project를 생성한다.

프로젝트 이름은 Board로 했다.

2. 프론트엔드 모듈 추가 (File -> New -> Module)

모듈 이름은 board_front로 했다.

모듈을 다운로드하는 데, 시간이 걸린다. 

 

3. 백엔드 모듈 추가 (File -> New -> Module)

SDK 1.8을 하니까 나중에 만들 CORS 클래스가 적용이 안되어서, 이후에 SDK 9로 바꾸었다.

Use auto-import 체크!!

다운 받는 중....

4. JDK 설정 (File -> Product Structure)

이후에 SDK 9로 바꾸었다.

Enable Annotation 설정까지 해주면

끝!

 

추가로 백엔드에 이 클래스를 넣어주면, CORS을 구현할 수 있다.

CORS가 다른 도메인과의 통신이 가능하게 해주고 요청을 걸러주는 역할을 한다고 들은 것 같은데, 사실 잘 모르겠다.

import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.http.HttpMethod;
import org.springframework.web.servlet.config.annotation.CorsRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;

@Configuration
public class CORS {

    @Bean
    public WebMvcConfigurer webMvcConfigurer(){

        return new WebMvcConfigurer() {
            @Override
            public void addCorsMappings(CorsRegistry registry){
                registry.addMapping("/**")
                        .allowedOrigins("*")
                        .allowedMethods(
                                HttpMethod.GET.name(),
                                HttpMethod.POST.name(),
                                HttpMethod.PUT.name(),
                                HttpMethod.DELETE.name(),
                                HttpMethod.OPTIONS.name()
                        )
                        .allowCredentials(false)
                        .maxAge(3000);
            }
        };

    }

}

이 클래스가 SDK 1.8에서 오류가 나길래, SDK 9로 바꾸었더니 잘 되었다.

 

 

백엔드와 프론트엔드를 구분해서 깔끔하게 프로젝트를 생성했다.