항해99 5주차 WIL

Weekly I Learned

6/6 ~ 6/9 : 주특기 심화(Spring)

6/10 ~ 6/12 : 미니프로젝트2

---

주특기 심화과정 주차에서 익힌 주요 내용으로는 JPA영속성, DB연관 관계, ExceptionHandler, AOP 등이 대표적이였다. 기능 구현은 크게 어려움이 없었으나 아직까지 개념이해가 부족한 부분이 많아 시간을 조금 더 투자해야할듯 하다. 또한 지지난주에 배운 스프링 시큐리티를 활용한 JWT 인증 방식에대해 조금 이해도가 높아진거 같긴하나 이 역시도 약한 부분이 많아 이번 미니프로젝트 주차에서 다시 한번 개념을 잡고자 한다.

마지막으로 Bean Validation을 사용해보고 싶었는데 아쉬움이 남는다. 점점 시간이 부족해지는 ...

핵심 키워드

 

CORS (Cross-Origin Resource Sharing : 교차 출처 자원 공유)

다른 출처로 부터의 자원 공유를 뜻 한다. 그럼 출처(Origin)는 무엇 인가?

서버의 위치를 의미하는 URL은 하나의 문자열 같아 보여도 아래와 같이 여러개의 구성 요소로 되어있다.

이때 출처는 Protocol과 Host그리고 :80, :443과 같은 포트 번호까지 모두 합친 것으로 서버의 의치를 찾기 위한 가장 기본적인 주소라 할 수 있다. 웹상에서는 다른 출처로의 리소스 요청을 제한하는 두 가지 정책이 있다. 한 가지는 SOP(Same-Origin Policy)이고 나머지 하나가 오늘의 주제인 CORS 이다. 등장시기는 CORS가 SOP보다 앞선다.

웹이라는 오픈된 환경에서는 다른 출처로부터의 리소스를 가져오는 일은 굉장히 흔하기 때문에 몇 가지 예외 조항을 두고 이 조항에 맞은 출처가 다르다하여도 리소스를 요청 할 수 있게 허용 하기로 했는데, 그 중 하나가 CORS정책을 지킨 요청이다.

SOP는 이름에서도 유추 가능한, 같은 출처에서만 리소스를 공유할 수 있다는 정책이다. 만약 다른 출처로 리소스를 요청하면 SOP 정책을 위반하게 되고, SOP의 예외 조항인 CORS를 지키지 않는다면 출처 접근이 제한 되게 된다

---

스프링에서 CORS 해결하기

적용 방법 : WebMvcConfigurer 인터페이스 활용

 

1. WebMvcConfigurer 설정

import lombok.RequiredArgsConstructor;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.CorsRegistry;

@RequiredArgsConstructor
@Configuration
public class WebMvcConfigurer implements org.springframework.web.servlet.config.annotation.WebMvcConfigurer {

    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**")
                .allowedOrigins("<http://localhost:3000>")  // 허가할 출처
                .allowedMethods("OPTIONS","GET","POST","PUT","DELETE"); // 허가할 메소드

    }
}

2. WebSecurityConfig 설정

import lombok.RequiredArgsConstructor;
import org.springframework.http.HttpMethod;

@RequiredArgsConstructor
@EnableWebSecurity
public class WebSecurityConfig extends WebSecurityConfigurerAdapter {

    @Override
    protected void configure(HttpSecurity http) throws Exception {
        http
                .authorizeRequests()
                .mvcMatchers(HttpMethod.OPTIONS, "/**").permitAll() // Preflight Request 허용해주기
                .antMatchers("/api/v1/**").hasAnyAuthority(USER.name());
    }
}

 

참고자료

• https://evan-moon.github.io/2020/05/21/about-cors/  CORS는 왜 이렇게 우리를 힘들게 하는걸까?
• [Spring] Spring Security, React를 사용하면서 CORS 허용하는 방법 :: Gyun's 개발일지 (tistory.com) Gyun's 개발일지

 

주간 마무리

  주특기 심화 주차는 숙련주차에 비해 공부하기에 어려움이 없었던거 같다. 난이도가 높은 특정 기능을 배우기 보다는 그동안 익혀왔던 기능들을 가공하여 조금더 정돈 한다는 느낌이 강했다. 이전 까지 기능이 작동되는 것에만 초점을 맞췄다면 이번은 재사용성이나, DB 컨트롤 등을 거쳐 무결성을 높혀 간다는 느낌이였다.

  그리고 드디어 항해에서 처음으로 Back-end와 Front-end가 함께 하는 프로젝트가 시작되었다.  

처음에는 서로의 용어들이 달라 소통하기에 무척 어려움이 많았다. 사실 아직도 어려움이 많다.. 그래서 이번주차는 새로운 기능 구현을 목표로 하기보다는 Front와 소통하는 방식을 익혀가며 서로가 작업한 코드가 어떻게 하나의 서비스로 사용되게 되는지 그 과정을 알아가는 것에 포커싱하고자 한다.