[TIL] 20210902

SPA(Single Page Application)

화면에 그리는 내용을 서버가 아닌 브라우저에서 처리하는 방식.

• SPA의 진행방식
  사용자의 클릭
  -> 화면에 그려져야할 html 을 한번만 로딩
  -> ajax를 이용해서 back단에서 서버에 http 요청을 보냄
  -> 서버가 json으로 응답
  -> 클라가 받아서 처리(DOM 조작을 통해 렌더링)
  서버는 확실히 프론트와 더 분리가 가능해짐.

---

HTTP (stateless 때문에)
사용자 정보를 알리기 위해 쿠키에 sessionId를 함께 실어 보냄.
세션은 서버에서 관리하고, 쿠키로 세션 정보를 주고 받음

• SPA
  • 세션에 메뉴정보나, 설정 정보를 담으면 세션이 점점 커진다.
    • 이런 정보(사용자 데이터 모델의 일부)는 브라우저의 local storage에 담는다.
    • 그래서 정보 변경등 필요할때 데이터를 요청이 가능하다.

서버사이드 라우팅	클라이언트 라우팅
요청받는 URL에 따라 리소스 반환	URL의 변화에 따라 화면상태를 변경
URL 받아 웹 페이지를 반환
리다이렉트시 서버요청 있음	서버요청 없음

CORS(Cross Origin Resource Sharing)

1. 상황

하나의 web application은 여러개의 호스트와 다양한 리소스에 접근하게됨.
사용자를 악의적인 행위에서 보호하기 위해 
브라우저는 동일 출처에서만 리소스 접근을 허용하도록 함.
따라서 다양한 리소스에 접근하게 해주는게 CORS

👿 악의적인 상황이란?

1. 내가 A 사이트에 로그인하면 브라우저에 ID등 세션정보(토큰)를 쿠키에 저장함
2. 그 상황에서 우연히 특정 악성 사이트에 접근하게된다.
3. 악성사이트는 브라우저에게 시켜 내 쿠키를 읽어 토큰을 갈취함
4. 악성사이트에서 A 사이트에 내 세션 토큰으로 요청해 로그인하고 나쁜짓함 

---

2. SOP와 CORS

• Same Origin(동일한 출처): 프로토콜, 호스트,포트가 동일한 경우.

• 동일출처가 아닐 때 에러발생
  -> SOP(same Origin Policy)가 막음.
  -> CORS가 이를 해결

• CORS: http 헤더를 이용해서 application의 다른 출처 리소스에 접근하게 하는 메커니즘.
  -> 어떤 기준을 충족시키면 리소스 공유가 되도록 함.

---

3.CORS 흐름

• 예비요청(preflight)을 보내냐에 따라 CORS 흐름이 달라짐.

• 단순요청이 아닐때는 예비요청을 보냄

• 단순요청의 경우: 단순요청의 기준들을 모두 만족하는 경우

• 예비요청이 있는 경우

  • OPTION 메소드로 보내고
    • Origin(호스트 uri)을 실어서 보냄
    • 서버가 Origin의 요청을 허가할 경우 답변으로 OK랑 Access-Control-Allow-Origin: (어쩌구)를 보낸다
    • 허용을 확인후 본 요청을 보내게 된다.

• 예비요청이 없는 경우

  • 단순요청(본요청)을 보낸다.
    • 서버가 OK랑 Access-Control-Allow-Origin를 보낸다
    • Access-Control-Allow-Origin이 안오면 본요청이 fail된다.

---

4. CORS 지원방식

CORS 방식 1. 프론트엔드의 프록시 이용

• url에 대한 요청을 프론트엔드 웹서버에 보내고
• 웹서버가 요청을 정제해 back단에서 백엔드 스프링서버에 http 요청을 보내고 받아 처리한다.

CORS 방식 2. 스프링 서버 전역적으로 CORS 설정

<static class AppConfig implements WebMvcConfigurer, ApplicationContextAware {
        @Override
        public void addCorsMappings(CorsRegistry registry) {
            registry.addMapping("/api/**")
                    .allowedMethods("GET", "POST") //메소드 지정 가능
                    .allowedOrigins("*"); //전체 다 허락
        }
    }   

CORS 방식 3. 특정 컨트롤러나 메소드에 개별적 CORS 설정

@Controller
//특정 컨트롤러에만 CORS 적용하고 싶을때.
@CrossOrigin(origins = "*", methods = RequestMethod.GET) 
public class customController {
   
    @GetMapping("/url")  
    //특정 메소드에만 CORS 적용 가능
    @CrossOrigin(origins = "*", methods = RequestMethod.GET) 
    @ResponseBody
    public List< > findAll(){
        return service.getAll();
    }

}

** 도메인과 DTO

• http 리퀘스트가 안받아진다고 도메인을 건들지 말것.
• 도메인은 도메인의 룰을 유지 해줘야함.
• request를 처리할 DTO를 만들어서 처리해주자.
• 비즈니스 도메인의 룰(validation 등)은 모두 도메인 클래스에 넣을것
• DTO의 validation 룰은 컨트롤러 요청에 맞춰 정한다.