프로젝트를 만들 때마다 헷갈려서 정리했다.
| 사용 툴
intelliJ
| 사용 언어
프론트엔드 : React
백엔드 : Spring Boot, MySQL, JPA
| 목차
1. Empty Project 생성
2. 프론트엔드 모듈 추가
3. 백엔드 모듈 추가
4. ~ 기타 설정
| 설명
1. Empty Project를 생성한다.
2. 프론트엔드 모듈 추가 (File -> New -> Module)
모듈을 다운로드하는 데, 시간이 걸린다.
3. 백엔드 모듈 추가 (File -> New -> Module)
Use auto-import 체크!!
다운 받는 중....
4. JDK 설정 (File -> Product Structure)
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로 바꾸었더니 잘 되었다.
백엔드와 프론트엔드를 구분해서 깔끔하게 프로젝트를 생성했다.
'기타 > 웹' 카테고리의 다른 글
[Web] 웹 기초 정리 (0) | 2018.06.25 |
---|