Web-Client DIP(Dependency inversion principle)

 

😗 DIP(Dependency inversion principle)란?

상위모듈은 하위모듈에 의존해서는 안된다.

즉 구현체에 의존하지 말고 인터페이스에 의존해야한다 이다

 

 

🧐 Web - Client 의 DIP

웹 클라이언트에서 서로 구현체에 의존하지 않아야 한다

index.html <-> main.js <-> auth-service.js <-> api-client.js <-> fetch

 

파일	역할
index.html	view
main.js	UI/사용자 흐름
auth-service.js	비즈니스 로직
api-client.js	HTTP 추상화
fetch	실제 구현 기술

 

api-client.js

import { mapHttpError, mapUnknownError } from "./errors/error-mapper.js";
export async function post(url, data) {
  try {
    const response = await fetch(url, {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
      },
      body: JSON.stringify(data),
    });

    const error = mapHttpError(response);
    if (error) {
      throw error;
    }
    return await response.json();
  } catch (e) {
    throw mapUnknownError(e);
  }
}

api-client은 http를 추상화 한것이다.

post를 호출시에 fetch를 호출하고, http error가 발생하면 최종적으로 mapUnknownError에서 처리한다.

 

 

auth-service.js

import { post } from "./app-client.js";

export const authService = {
  async login(email, password) {
    return await post("http://localhost:3000/login", {
      email,
      password,
    });
  },
};

앞에서 http를 추상화 하였다.

auth-service.js에서는 post를 호출하여, "/login"을 호출한다.

 

auth-service.js에서는 fetch를 직접사용하지 않는 다는것에서 추상화되었다고 볼 수 있다.

 

main.js

import { authService } from "./auth-service.js";

const loginBtn = document.querySelector("button#loginBtn");
const email = document.querySelector("input#email");
const password = document.querySelector("input#password");
function validate() {
  if (!email.value || !password.value) {
    throw new Error("값을 입력해주세요");
  }
}

loginBtn.addEventListener("click", async () => {
  try {
    validate();
    await authService.login(email.value, password.value);
    alert("로그인 성공");
  } catch (error) {
    alert(error.message);
  }
});

main.js에서는 로그인 버튼 이벤트에 대한 기능이다.

main.js에서는 fetch의 존재도 모르고, http status code도 모른다.

그러한 관점에서는 추상화가 이루어졌다고 볼 수 있다.