Javascript에서 Facade 패턴 소개

오늘은 프로그래밍에서 인기 있는 또 다른 디자인 패턴인 파사드 패턴(Facade Pattern)에 대해 알아보겠습니다. 📖

자세한 내용을 살펴보기 전에 이 특정 패턴으로 해결할 수 있는 몇 가지 예를 살펴보겠습니다.

이름에서 알 수 있듯이 Facade는 건물의 얼굴을 의미합니다. 🏢

거리를 지나가며 건물을 바라보는 사람들은 그 건물의 배선이나 파이프 또는 기타 복잡한 사항이 어떤지 알 필요가 없습니다. 그것은 건물의 모든 복잡성을 숨기고 친근한 얼굴을 보여줍니다.

내가 생각할 수 있는 다른 간단한 비유는 고객 서비스입니다. 문의사항이나 불만사항은 누구나 고객센터로 문의하실 수 있습니다. 고객은 배송 지연 문제를 물류에 직접 문의하거나 잘못된 청구 문제에 대해 금융에 직접 불만을 제기할 필요가 없었습니다. 고객 서비스에 문의하면 고객 서비스에서 이 문제를 해결하고 필요한 정보를 제공합니다.

좋아, 우리는 Facade Pattern이 무엇인지에 대한 아이디어를 얻었습니다. 이것이 프로그래밍과 어떤 관련이 있습니까?

제품 관리자가 John에게 회사 제품 목록을 표시하는 페이지를 만들라고 지시했다고 가정해 보겠습니다. 이 경우 John First 본능은 데이터베이스에서 데이터를 신속하게 검색할 수 있도록 하는 타사 API에 대한 npm 저장소를 즉시 검색합니다. 그는 자신이 찾은 이 타사 API에 대해 매우 확신하고 이 API로 페이지를 만들기 시작했으며 모든 것이 John에게 순조롭게 진행되었습니다. 🚗

잠시 후 그는 또한 모든 곳에서 이 세 번째 페이지 API를 사용하기 시작합니다. 불행히도 주말 동안 그의 PM은 John에게 전화를 걸어 이 타사 API에서 생성된 고약한 버그로 인해 애플리케이션이 손상되었다고 말했습니다. 존이 사용하는 것. 타사 API가 애플리케이션 내에서 긴밀하게 연결되어 있기 때문에 주말 내내 애플리케이션의 버그를 수정했습니다. 🐞



위의 경우에서 볼 수 있듯이. 애플리케이션 내에서 John이 사용하는 API 간에 긴밀하게 연결된 것이 문제의 원인입니다. 이런 일이 우리에게 일어나는 것을 어떻게 막을 수 있습니까? 구출에 외관 패턴! ✨

아래 코드를 살펴보자

import React from 'react'
import axios from 'axios'

function ProductPage({ productId }) {
  const [data, setData] = React.useState(null)

  React.useEffect(() => {
    axios
      .get(`product_end_url/${productId}`)
      .then(res => res.json())
      .then(json => {
        setData(json)
      })
  }, [id])

  return data !== null && <div>{JSON.stringify(data, null, 2)}</div>
}

위의 코드에서 axios 라이브러리를 사용하여 구성 요소의 제품 데이터를 가져옵니다. 작은 응용 프로그램에는 문제가 되지 않습니다. 이제 응용 프로그램이 더 커지고 유사한 구성 요소가 여러 개, 수십 또는 수백 개 있다고 상상해 보십시오. 그들은 axios를 직접 사용하여 모든 곳에서 데이터를 가져오고 게시합니다. 그리고 나중에 우리 팀은 axios 종속성을 삭제하고 fetch 사용으로 전환하기로 결정했습니다. 이제 우리는 John과 같은 위치에 있습니다. 🥹

아래의 파사드 구현을 살펴보겠습니다.

// API.js
import axios from 'axios'

export default class API {
  get(url) {
    return axios.get(url)
  }f
  post(url, options) {
    return axios.post(url, options)
  }
}

// DetailPage.js
import React from 'react'
import API from './API'

function ProductPage({ productId }) {
  const [data, setData] = React.useState(null)

  React.ProductPage(() => {
    API.get(`product_end_url/${productId}`)
      .then(res => res.json())
      .then(json => {
        setData(json)
      })
  }, [id])

  return data !== null && <div>{JSON.stringify(data, null, 2)}</div>
}

위의 코드에서 코드를 약간 수정했습니다. 코드에 추가 레이어를 추가합니다. axios 메서드를 사용하여 호출하거나 get() 클래스에서 데이터를 업데이트하기 위해 post()를 호출하는 대신 데이터를 가져오기 위해 API에 직접 액세스하지 않았습니다.

이 예제에서 API 계층의 주요 목적은 API 액세스를 위한 모든 논리를 캡슐화하는 것입니다. 따라서 소비자는 API 클래스에서 논리의 구현 세부 사항을 알 필요가 없으며 그냥 소비하면 예상대로 작동합니다. API 클래스의 구현을 fetch 를 사용하도록 변경해 봅시다.

// API.js
export default class API {
  get(url) {
    return fetch(url)
  }

  post(url, options) {
    return fetch(url, {
      method: 'POST',
      ...options,
    })
  }
}

우리는 이 고안된 예제에서 파사드 패턴을 성공적으로 구현했습니다. 파사드 패턴을 사용함으로써 코드가 더 이상 긴밀하게 결합되지 않습니다. 코드를 더 깔끔하고 모듈식으로 만들 뿐만 아니라 노출된 메서드의 논리 복잡성을 최종 소비자에게 숨겨 가독성을 높이고 코드를 더 쉽게 유지 관리할 수 있도록 합니다.

파사드 패턴에 대한 이 짧은 소개가 우리를 행복한 프로그래머로 만들기 위해 코드를 디자인하는 방법에 대한 새로운 관점을 제공하기를 바랍니다. 🤓