횡단 관심사 - 클래스로 HTTP 통신 횡단 관심사 처리

횡단 관심사란 여러 서비스에 걸쳐서 동작해야 하는 코드를 의미한다. 관심사란 코드가 하고자 하는 목적, 동작을 의미하고 횡단 관심사란 애플리케이션 내 여러 핵심 비즈니스 로직들에 걸쳐서 실행되어야 하는 동작들을 의미한다.

 

횡단 관심사의 대표적인 예시로는 인증, 인가 처리나 로깅, 트랜잭션 처리, 에러 처리 정도가 있다. 횡단 관심사를 잘 처리하는 것은 애플리케이션의 유지보수에서 중요하다. 왜냐하면 횡단 관심사는 여러 비즈니스 로직들에 걸쳐서 실행되어야 하기 때문이다. 핵심 비즈니스 로직과 횡단 관심사가 혼재되어 버리면 추후 비즈니스 로직, 횡단 관심사 모두를 수정하기 힘들어지는 상황이 발생한다.

 

예를 들어 내가 인증 로직이 핵심 비즈니스 로직 안에 혼재된다면 일단 해당 코드의 관심사가 여러 개가 된다는 문제가 발생한다. 그리고 추후 인증 로직이 변경되었을 때 이를 수정하기 위해서 여러 모듈들을 건드리거나, 수정해야 한다는 문제 또한 발생한다.

 

HTTP 통신에서 횡단 관심사 처리하기

프론트엔드에서 가장 흔하게 생각할 수 있는 횡단 관심사는 인증, 인가다. 인증과 인가는 내가 누구인지 증명하고, 그에 걸맞은 권한을 획득하는 행위를 의미한다.

 

백엔드 서버와 통신에서 가장 기본적으로 사용하는 프로토콜은 HTTP이다. HTTP는 stateless라는 특징으로 인해 매 요청을 별개의 요청으로 처리한다. 따라서 HTTP 통신을 주고받을 때 내가 누구인지 증명하기 위해서는 클라이언트(프론트엔드)단에서 인증 정보를 매 통신마다 함께 전송해줘야 한다.

 

인증은 특정한 비즈니스 로직에 포함된 것이 아니라, 대부분의 HTTP 통신을 이용하는 비즈니스 로직에 걸쳐서 이루어져야 하는 동작이다. 여러 핵심 비즈니스 로직에 걸쳐서 수행되어야 하기에 이를 곧 횡단 관심사로 생각할 수 있다.

 

간단한 리액트 앱 코드 예제를 통해 횡단 관심사를 처리 해보자.

// App.js
import { httpClient } from "./httpClient";

export default function App() {
  const handleHttpRequest = () => {
    fetch("https://jsonplaceholder.typicode.com/todos", {
      headers: {
        Authorization: "accessToken"
      }
    });
  };

  return (
    <>
      <h1>횡단 관심사 처리 예제</h1>
      <button onClick={handleHttpRequest}>HTTP 요청 버튼</button>
    </>
  );
}

위 예제에서 Authorization, 인증, 횡단 관심사를 어떻게 처리할 수 있을까?

// httpClient.js

class HttpClient {

  constructor(baseURL) {
    this.baseURL = baseURL;
  }

  fetch(url, options = {}) {
    console.log("token 추가");

    return fetch(`${this.baseURL}${url}`, {
      ...options,
      headers: {
        Authorization: sessionStorage.getItem("accessToken"),
        ...options.headers
      }
    });
  }
}

export const httpClient = new HttpClient(
  "https://jsonplaceholder.typicode.com/"
);

 

위 예제는 HTTP 요청에 사용하는 공통 로직을 클래스로 만들어 횡단 관심사를 처리한 코드다.

• API 서버 주소(baseURL)를 클래스 생성자 메서드에 정의
• API fetch 시 요청 헤더에 인증 토큰을 추가하는 로직

클래스는 객체 지향 프로그래밍에서 특정 객체를 생성하기 위해 변수와 메서드를 정의하는 일종의 틀로, 객체를 정의하기 위한 상태(멤버 변수)와 메서드(함수)로 구성된다.