외부 라이브러리를 관리하는 방법

외부 라이브러리를 관리 하는 방법

왜 의존성을 줄여야 할까요?

외부 라이브러리를 사용할 때 최대한 의존성을 줄이는 것이 중요합니다. 외부 라이브러리가 업데이트되거나 문제가 생기면, 우리 프로젝트에도 영향을 끼칠 수 있기 때문입니다. 그렇다면 외부 라이브러리와의 의존성을 최소화하는 방법은 무엇일까요?

의존성 줄이는 방법

최근 쏙쏙 들어오는 함수형 코딩책을 가지고하는 함수형 프로그래밍 스터디에 참여해서 많은 것을 배울 수 있었습니다. 그 중에서도 추상화 벽을 이용하여 외부 라이브러리의 의존성을 줄이는 방법을 배웠습니다.

추상화 벽은 우리가 필요한 인터페이스만을 노출시키고, 그 외의 기능들은 Wrapping 함수로 가려놓는 것입니다. 이렇게 하면 외부 라이브러리와의 의존성을 최소화할 수 있어서 유지보수성을 높일 수 있습니다.

추상화 벽 사용시, 장점

추상화 벽을 사용하면 여러 가지 장점이 있습니다.

외부 라이브러리와의 관리 포인트를 줄일 수 있습니다.
외부 라이브러리의 변경사항이 생기면, 해당 추상화 벽 코드만 수정하면 자동으로 사용하는 코드도 자연스럽게 반영이됩니다. 이렇게 하면 외부 라이브러리의 변경사항에 대해 사용하는 모든 코드를 다 고칠 필요가 없어서 유지보수성이 높아집니다.
추상화 벽은 외부 라이브러리의 복잡한 내부 구조를 사용하는 코드로부터 감춰줄 수 있어서 코드 의존성을 최소화할 수 있습니다. 이렇게 해서 코드의 가독성도 높아지고, 코드를 유연하게 변경할 수 있습니다.

추상화 벽 사용 예시

아래 코드는 카카오톡 공유하기 기능을 사용하기 위해 작성된 코드입니다. 이 코드에서는 추상화 벽을 세워서 우리가 필요한 인터페이스만 노출시키고, 그 외의 기능들은 Wrapping 함수로 가려놓았습니다.

따라서, 카카오톡 공유하기 기능에 대한 문제가 생기거나 변경사항이 있을 때, 아래의 코드를 수정하게 되면 자연스럽게 사용하는 쪽 코드에 모두 반영이 됩니다. 이렇게 해서 외부 라이브러리와의 의존성을 최소화하고 유지보수성을 높일 수 있습니다.

const shareKakao = ({
    title,
    description,
    imageUrl,
    url,
    campaign
}) => {
  if (typeof window.Kakao !== 'undefined') {
    window.Kakao.Share.sendDefault({
      objectType: 'feed',
      content: {
        title,
        description,
        imageUrl,
        link: {
          webUrl: url,
          mobileWebUrl: url,
        },
      },
    });
  }
};

export default shareKakao;

이외에 다른 예시

React에서는 Virtual DOM을 사용하여 추상화 벽을 만들어 놓았습니다. 이렇게 하면, 개발자들은 실제 DOM을 조작하지 않고, Virtual DOM을 조작함으로써 UI를 업데이트할 수 있습니다.
- useState의 setState 등
Redux는 상태 관리 라이브러리로서, 상태 변경을 위한 특정 함수들만 노출시켜 추상화 벽을 만들어 놓았습니다. 이렇게 하면, 애플리케이션 전체에서 상태 변경 함수들을 이용하여 상태를 변경할 수 있으며, 이를 통해 상태의 일관성을 유지할 수 있습니다.
- createStore, dispatch 등

느낀점

이번 개발을 통해, 일상적으로 사용하던 메서드들이 추상화 벽을 통해 관리하고 있다는 것을 깨달았습니다. 앞으로는 다른 사람의 코드를 볼 때, 작성 의도를 고려하고 특히 프레임워크나 라이브러리 메서드를 사용할 때, 문서에서 그 목적과 개발 패턴을 잘 파악해야 겠습니다.

그리고 이젠, 당연하게 받아들였던 것들이 이제는 당연하지 않게 느껴집니다.

참고

외부 라이브러리를 관리 하는 방법
이외에 다른 예시
느낀점
- 참고