[TIL] 221117 - SpringBoot Part3 : 단일 페이지 웹 어플리케이션, CORS

SpringBoot Part3 (4) : 단일 페이지 웹 어플리케이션, CORS

 

단일 페이지 웹 어플리케이션

URL 변경시 모든 페이지가 다시 렌더링 되는 일반 웹 애플리케이션과 달리 특정 영역만 렌더링된다.

이때 주로 DOM 조작을 통해 렌더링이 이루워진다. → 공유 자원인 server에 이접을 볼 수 있다.

: 다이나믹한 렌더링을 서버가 아닌 브라우저에서 처리

: 화면에서 그려져야할 부분을 DOM 프로그램을 이용해 동적으로 브라우저에서 그린다.

: 애플리케이션 로드가 처음에 한번되면 그 다음부턴 AJAX를 이용해 url이 변경되지않고 server에 요청을 보낸다. server가 그 응답을 받아 JSON 응답을 주고 client가 JSON을 parsing하여 데이터를 읽고, 해당 데이터로 DOM 프로그래밍을 하여 화면을 업로드한다.

 

: 사용자 세션이 커지면 server에 부담이 될 수 있다.(사용자 메뉴 같은 데이터) SPA 기반일 경우, 사용자 데이터 모델의 일부를 브라우저에 메모리(local storage)에 담아두어 해당 데이터를 이용하려 처리할 수 있다.

 

 

라우팅 처리

DOM만 변경한 경우 refresh하면 url이 고정되어있기 때문에 이전 화면이 보일 것이다.

해시태그나 HTML5 히스토리를 이용하면 url 변경되고 대신 서버에게 요청을 보내지않고 client쪽에서 그 url에 필요한 렌더링을 하게된다. → server에는 view를 렌더링하는 코드가 없어진다.

react <Router/> 내부에서 자동으로 제공해줌.

 

 

---

not found 처리하기

• not found error를 throw하고 에러를 공통 처리하는 모듈에서 처리하기
• HTTP response에 대한 헤더나 상태코드를 처리하기 위해 Spring에서 제공하는 ResponseEntity

@GetMapping( "/api/v1/customers/{customerId}")
@ResponseBody
public ResponseEntity<Customer> findCustomer(@PathVariable("customerId") UUID customerId){
    var customer = customerService.getCustomer(customerId);
    return customer.map(v -> ResponseEntity.ok(v)).orElse(ResponseEntity.notFound().build()); 
		// ok -> 202, notFound -> 404
}

---

 

CORS

web application은 동일한 출처의 리소스에만 접근이 가능하다. (same-origin)

다양한 호스트에 접근(다양한 리소스의 출처에 접근)을 하기위해 허용해 주는것이 CORS다.

기본 요청 : 예비 요청 + 본 요청

 

 

단순요청의 경우 예비 요청을 보내지 않는다.

단순요청이란?

https://developer.mozilla.org/ko/docs/Web/HTTP/CORS

단순요청

 

 

post의 경우 (단순요청이 아님으로) 2번의 요청이 간것을 확인할 수 있다. 

 

Proxy처리

package.json

"proxy" : "<http://localhost:8080>"

 

CORS를 지원하는 API

Spring MVC configuration 설정

 

1. WebMvcConfigurer의 addCorsMappings 오바라이딩

@EnableWebMvc
@Configuration
@ComponentScan(basePackages = "org.prgrms.kdt.customer",
    includeFilters = @ComponentScan.Filter(type = FilterType.ASSIGNABLE_TYPE, value = CustomerController.class),
    useDefaultFilters = false)
static class ServletConfig implements WebMvcConfigurer, ApplicationContextAware {

    ApplicationContext applicationContext;

    @Override
    public void configureViewResolvers(ViewResolverRegistry registry) {
         ...
    }

    // 정적 리소스
    @Override
    public void addResourceHandlers(ResourceHandlerRegistry registry) {
         ...
    }

    @Override
    public void setApplicationContext(ApplicationContext applicationContext) throws BeansException {
        this.applicationContext = applicationContext;
    }

    @Override
    public void extendMessageConverters(List<HttpMessageConverter<?>> converters) {
				...
    }

    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/api/**")
                .allowedMethods("GET","POST") // method 지정가능
                .allowedOrigins("*");
    }
}

 

Jackson을 이용하려면 default 생성자가 있어야한다. → domain을 변경하려하지말기!! DTO 만들기

public class CustomerDTO { // DTO는 불변
    private final UUID customerId;
    private final String name;
    private final String email;
    private final LocalDateTime lastLoginAt;
    private final LocalDateTime createdAt;

    public CustomerDTO(UUID customerId,
                       String name,
                       String email,
                       LocalDateTime lastLoginAt,
                       LocalDateTime createdAt) {
        this.customerId = customerId;
        this.name = name;
        this.email = email;
        this.lastLoginAt = lastLoginAt;
        this.createdAt = createdAt;
    }

    // dto로 mapping
    static  CustomerDTO of(Customer customer){
        return new CustomerDTO(customer.getCustomerId(),
                customer.getName(),
                customer.getEmail(),
                customer.getLastLoginAt(),
                customer.getCreatedAt());
    }

    // domain으로 mapping -> domain을 생성하는 것은 보통 서비스에서 만드는게 좀 더 낫다.
    static Customer to(CustomerDTO dto){
        return new Customer(dto.customerId,
                dto.name,
                dto.email,
                dto.lastLoginAt,
                dto.createdAt);
    }
}public class CustomerDTO { // DTO는 불변
    private final UUID customerId;
    private final String name;
    private final String email;
    private final LocalDateTime lastLoginAt;
    private final LocalDateTime createdAt;

    public CustomerDTO(UUID customerId,
                       String name,
                       String email,
                       LocalDateTime lastLoginAt,
                       LocalDateTime createdAt) {
        this.customerId = customerId;
        this.name = name;
        this.email = email;
        this.lastLoginAt = lastLoginAt;
        this.createdAt = createdAt;
    }

    // dto로 mapping
    static  CustomerDTO of(Customer customer){
        return new CustomerDTO(customer.getCustomerId(),
                customer.getName(),
                customer.getEmail(),
                customer.getLastLoginAt(),
                customer.getCreatedAt());
    }

    // domain으로 mapping -> domain을 생성하는 것은 보통 서비스에서 만드는게 좀 더 낫다.
    static Customer to(CustomerDTO dto){
        return new Customer(dto.customerId,
                dto.name,
                dto.email,
                dto.lastLoginAt,
                dto.createdAt);
    }
}

validation은 domain entity에 존재 (비지니스 domian에 대한 룰)

controller 로직에서는 validation 로직이나, 예외 핸들링 (DTO 요청에 대한 룰)

 

 

2. 특정 controller에서만 origin을 적용하고 싶을때, 어노테이션 사용

@CrossOrigin(origins ="*")

특정 controller 클래스나 메소드에 지정 가능.

 

 

 

출처 - 해리 : SpringBoot Part3