0412 - 0418

0412

코드 스플리팅

코드 스플리팅?

• 뷰에서는 app.js 안에 모든 페이지의 정보가 들어가 있어서, 그 많은 페이지들을 한 번에 다 로딩해오는 것은 많은 시간이 소요된다.
• 따라서 이동하는 페이지에 맞게 페이지를 들고 오게 하는 것이 코드 스플리팅의 역할이다.

const routes = [
  {
    path: "/",
    redirect: "/login",
  },
  {
    path: "/login",
    name: "Login",
    component: () => import("@/views/Login.vue"),
  },
  {
    path: "/signup",
    name: "Signup",
    component: () => import("@/views/Signup.vue"),
  },
  {
    path: "/main",
    name: "Main",
    component: () => import("@/views/Main.vue"),
  },
];

• component에 페이지를 바로 넣는 것이 아니라, 화살표 함수를 이용해서 코드 스플리팅을 한다.
• 최초의 모든 파일을 다 들고 오지 않고, 해당 url로 이동했을 때 필요한 JS 파일을 그 때 그 때 들고 오게 된다.
• 초기 진입 페이지를 /login으로 설정하기 위해서 redirect 해 주었다.

0413

프론트 측에서 아이디와 비밀번호를 입력하여 로그인 api를 호출하면 백엔드 서버에서 정보를 확인하고 일치하다면 쿠키로 토큰 값을 보내준다.
결과가 정상적으로 처리가 되면 브라우저에 쿠키가 저장되어야 하는데, 응답 헤더의 set-cookie에는 토큰 값이 있었지만 브라우저에는 저장되지 않았다.

해결책

• 이것은 CORS와 관련이 있는 문제인데, CORS는 다른 origin에 대한 요청을 허용하는 정책이다.
• 같은 origin에서 http 통신을 하는 경우 알아서 cookie가 request header에 들어가게 되지만 origin이 다른 http 통신에서는 우리가 직접 설정을 해주어야 한다.
• 쿠키를 요청에 포함하고 싶거나, 응답으로 쿠키를 받아 브라우저에 저장하고 싶다면 프론트와 백엔드 서버에 각각 설정을 해주어야 한다.

프론트

withCredentials: true

const login = (data) => {
  return axiosService.post("members/login", data, { withCredentials: true });
};

• axios로 메소드를 호출할 때, 옵션으로 withCredentials: true로 지정해주어야 한다.

백엔드

Access-Control-Allow-Credentials : true

@Override
public void addCorsMappings(CorsRegistry registry) {
    // 모든 uri에 대해 http://localhost:3000의 접근을 허용한다.
    registry.addMapping("/**")
            .allowedOrigins("http://localhost:3000")
            .allowCredentials(true);
}

• 백엔드는 스프링 프레임워크에서 구현하였는데, WebMvcConfigurer를 구현한 클래스에서 addCorsMappings를 오버라이딩 해서 Cors를 설정하고, allowCredentials(true)를 추가해주어야 쿠키가 정상적으로 작동한다.
• 주의할 점은 allowedOrigins()에 와일드 카드를 넣게 되면 에러가 발생하게 된다.

0414 ~ 0418

중간고사 준비 기간