LG CNS 부트캠프 학습일지 26일차

학습 내용

• 프론트엔드 블로그 앱 연동
• Swagger 사용법

프론트엔드 블로그 앱 연동

몇 주 전 프론트엔드 블로그 앱을 만들 때는 백엔드 서버가 없었기 때문에 JSON Server를 사용해서 간이 서버를 만들었다. 하지만 이제는 스프링부트로 만든 백엔드 서버가 있기 때문에 프론트엔드에서 사용자를 등록하고 등록한 사용자로 로그인하는 것을 구현했다. 코드를 작성하는 것은 어렵지 않았으나 개발 모든 일이 그렇듯이 문제를 해결하는데 많은 시간을 보냈다.

CORS (Cross Origin Resource Sharing)

프론트엔드에서 백엔드로 통신을 시도했으나 오류가 발생했다. 웹브라우저 콘솔 메세지를 확인해보니 CORS 정책으로 인해 접근이 제한된다고 한다. 이를 해결하기 위해서는 백엔드에서 따로 설정을 해주어야 했다.

@Configuration
public class CorsConfig implements WebMvcConfigurer {
    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**")
                .allowedHeaders("*")
                .allowedOriginPatterns("http://localhost:5173/")
                .allowedMethods("GET", "POST", "PUT", "DELETE", "OPTIONS")
                .allowCredentials(true);
    }
}

@Configuration 어노테이션은 스프링부트 프레임워크에게 스프링부트 설정값을 갖는 클래스라는 것을 알려준다. WebMvcConfigurer 인터페이스를 상속해야 한다. 꽤 많은 것을 설정해주어야 했는데, allowedOriginPatterns에서 CORS 접근 제한 여부를 설정할 수 있다. 프론트엔드의 주소값을 넣어주면 된다.

Acess Token 과 Refresh Token

토큰은 Single Page Application에서 중요한 개념이다. 적어도 강사님이 몇 번이고 이야기하는 것으로 미루어봤을 때 그 중요성을 간접적으로 느낄 수 있었다. SPA가 아닌 웹 환경을 생각해보자. 사용자가 웹 서버에 접속하는 것을 세션 (Session) 으로 만들어서 서버 쪽에 관련 데이터를 저장한다. 하지만 SPA 환경에서는 서버에서 클라이언트의 세션 정보를 저장하지 않는다. 따라서 만약에 다른 인증 방식이 없다면 클라이언트는 서버가 통신할 때마다 새로 인증을 해야한다. 이렇게 된다면 클라이언트는 불편해할 것이다.

토큰은 인증 정보를 서버에서 발생해서 클라이언트에 저장한다. 그러면 문제가 해결된 것인가. 안타깝게도 그렇지 않다. 클라이언트가 인증을 위해 발급받은 토큰을 서버로 보낸다. 하지만 만약 해커가 그 토큰을 중간에 탈취한다면 어떨까. 이 문제를 해결하는 방법 중 하나는 토큰에 유효기간을 두는 것이다. 하지만 유효기간이 길면 해커가 중간에 탈취해서 사용하기 쉬워지고 유효기간이 짧으면 사용자는 자주 인증을 해야하기 때문에 불편하다.

그래서 Access Token과 Refresh Token 두 가지를 용도를 구분해서 따로 두는 것이다. Access Token은 인증에 사용되고 따라서 공격의 대상이 되기 때문에 유효기간을 짧게 한다. Refresh Token은 Access Token의 유효기간을 연장하기 위해 사용된다. 인증에 직접적으로 사용되지 않기 때문에 유효기간을 길게 만든다.

하지만 이런 궁금증이 들었다. Refresh Token 탈취당하면 Access Token을 탈취당하는 것이랑 다를게 없지 않은가? ChatGPT에 질문하면서 궁금증을 해결했는데, 이렇게 정리할 수 있을 것 같다.

1. Access Token은 클라이언트 쪽에 저장되고 서버 쪽에서는 추적 관리하지 않는다.
2. Refresh Token은 클라이언트 쪽에 저장되고 서버 쪽에서도 추적 관리한다.
3. Access Token은 자주 사용된다.
4. Refresh Token은 자주 사용되지 않는다.
5. 토큰을 추적 관리하기 위해 데이터베이스를 참조한다.
6. Access Token을 추적 관리하지 않는 이유는 데이터베이스 참조 횟수를 줄일 수 있기 때문이다.

Swagger 사용법

처음보는 것이라서 정확하게 설명하지는 못하겠지만, 백엔드 엔드포인트에 대한 문서를 코드 안에서 작성하게 해주는 라이브러리 같다.

@Operation(summary = "회원가입", description = "신규가입")
@ApiResponses(value = {
        @ApiResponse(responseCode = "200", description = "가입성공"),
        @ApiResponse(responseCode = "500", description = "가입실패")
})
@PostMapping("/signin")
public ResponseEntity<UserResponseDTO> signin(@RequestBody UserRequestDTO request) {
    ...
}

생소한 것 투성이라 뭐가 뭔지는 모르겠지만 직접 사용하면서 사용법을 익히게 될 것 같다. API 문서를 코드와 같이 관리할 수 있다는 점이 꽤 유용할 것 같다.