사실 이번 블로그 포스팅과 프로젝트는 다음과 같은 이유로 시작되었다.
지하에 구내식당이 있는데 점심메뉴를 항상 매일 오전 11시에 확인할 수 있다. 너무 답답하다.
나는 그래서 React와 Spring Boot를 활용하여 일주일에 메뉴를 한번에 확인할 수 있는 나만의 점심메뉴 웹/앱을 만들어볼까 한다.
FRONT
-
일단 디자인에 비중을 줄이기 위해 FreeCss(https://www.free-css.com/template-categories/responsive) 에서 제공해주는 소스를 참고했다.
-
리액트를 통해 프론트엔드쪽 작업을 진행하기 위해 간단히 컴포넌트를 나눠주었고, fetch를 통해 내가 만든 api를 요청했다.
Back
-
어느정도 UI와 가상데이터를 통해 프로젝트를 구현하고 구내식당에 데이터를 부탁드리려고 일단 Controller에 하드코딩으로 점심메뉴 리스트를 담았다(DB연결은 이후에 할거다 ㅠ)
-
그리고 springBootApplation을 통해 api서버를 활성화 시켰다.
-
이후 postMan을 통해 api 데이터 정상적으로 나오는지 확인하였다.
CORS
-
postMan으로 api데이터가 정상적으로 나오는 것도 확인했고, fetch를 통해서 요청도 완료하였으나 다음 화면과 같이 CORS에러가 발생하였다. 예전에 node.js에서도 경험해봤지만 상당히 거슬린다 ㅠ... 근데 구글링 해보니까 생각보다 간단히 해결할 수 있었고, 방법도 여러가지가 있었다. 오늘 설명할 내용은 전역적으로 CORS를 설정해주는 작업이다.
CORS발생
-
일단 src/main/java에 configure라고 따로 패키지를 생성해주었다.
package / class 생성
3 . 이후 다음과 같은 설정을 진행한다.
3-1. 클래스 상단에 @Configuration 어노테이션을 통해 설정파일이라는 것을 알려준다.
3-2. WebMvcConfigurer를 implements한다.
3-3. addCorsMappings메소드를 오버라이드 한다.
3-4. registry.addMapping을 이용해서 CORS를 적용할 URL패턴을 정의해준다.
3-5. allowedOrigins 메소드를 이용해서 자원 공유를 허락할 Origin을 지정한다.
URL패턴 정의 시 위 처럼 "/**" 와일드 카드를 사용할 수도 있지만 Ant-style도 지원하며, "/somePath/**" 이렇게 적용할 수도 있다. Default값은 아래와 같다. - Allow all origins. - Allow "simple" methods GET, HEAD and POST. - Allow all headers. - Set max age to 1800 seconds (30 minutes).자원공유 설정 시 위 처럼 "*"로 모든 Origin을 허용할 수 있지만, .allowedOrigins("http://localhost:8080", "http://localhost:8081"); 등의 방식으로 각각의 자원을 지정할 수 있다.
이렇게 CORS 설정 후 마친 뒤 브라우저 콘솔창의 결과를 확인했다.
CORS 에러는 사라지고 정상적으로 데이터가 들어온걸 확인하였다!
스프링부트는 오늘 처음 시작해서 내용정리를 못했지만 천천히 진행해볼 생각이다. 개인적으로 추후에 springboot쪽으로 계속 공부할 생각이라서 개인플젝을 진행하면서 열심히 해보겠다🔥
