자바스크립트에서 Facade 패턴 도입

자바스크립트에서 Facade 패턴 도입

2022-10-19 last update

10 minutes reading webdev javascript architecture productivity
오늘 우리는 프로그래밍에서 인기있는 또 다른 디자인 패턴 중 하나 인 Facade Pattern에 대해 논의 할 것입니다. 📖

세부 사항으로 넘어가기 전에 이 특정 패턴으로 해결될 몇 가지 예를 논의하겠습니다.

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

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

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

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

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

잠시 후 그는 또한 이 세 번째 페이지 API를 사방에서 사용하기 시작했습니다. 불행히도 주말 동안 그의 PM은 John에게 전화를 걸어 이 제3자 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,
    })
  }
}


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

이 파사드 패턴에 대한 간략한 소개가 우리가 행복한 프로그래머가 되도록 코드를 설계하는 방법에 대한 새로운 관점을 제공할 수 있기를 바랍니다. 🤓