JavaScript를 사용하는 프런트 엔드에 대한 가장 일반적인 디자인 패턴(실제 예)

안녕하세요 여러분, 이 게시물에서는 프로젝트에서 몇 가지 일반적인 디자인 패턴을 쉽게 구현할 수 있는 방법을 보여드리고자 합니다. 이러한 패턴은 유지 관리 가능하고 유연하며 읽기 쉬운 코드를 갖도록 도와줍니다. 코드를 많이 수정하지 않고 더 많은 기능을 추가해야 할 때 이점을 볼 수 있습니다.

그럼 이제 코딩을 해보자!! 💻

1.- 모듈 패턴.

모듈 패턴은 JavaScript 세계에서 가장 일반적인 패턴 중 하나이며 동일한 범위에서 함수 및 변수의 논리를 캡슐화하고 액세스 수정자(공용, 개인 등)와 유사한 액세스를 관리하는 데 매우 유용합니다. ).

인터넷에는 다양한 변형이 있는 많은 예가 있지만 가능한 한 간단하게 예를 만들려고 노력했습니다.
참고: 가져오기/내보내기 구문을 사용하여 ES6에서 이 패턴을 볼 수 있습니다.
복잡성: ⚡

var module = (function () {
  let options = {color:"red"}
  /*
    private code here
  */
  const setSize = function () {
    options["size"] = 12;
  };

  /*
    public code here
  */
  return {
    getOptions: function () {
      setSize();
      return options;
    }
  };
})();
module.getOptions();

2.- 전략 패턴.

전략 디자인 패턴은 유사한 작업이 있고 런타임에서 작업 간에 변경해야 할 때 매우 사용됩니다.
이 패턴은 많은 if-else 문장을 제거하는 데 도움이 됩니다. 그렇게 하려면 작업을 작은 덩어리로 캡슐화하고 객체 리터럴을 사용하여 구체적인 전략에 액세스해야 합니다.



이 패턴은 인터페이스나 하드 구현이 필요하지 않기 때문에 자바스크립트로 구현하기가 매우 간단합니다.
사용 사례: 다양한 사용자 유형(일반 사용자, 관리자 및 게스트)이 있는 드롭다운이 있고 선택한 사용자 유형에 따라 동일한 페이지에 양식을 표시하려고 한다고 가정합니다.

다음은 React를 사용한 예시이지만 다른 JS 프레임워크에도 적용할 수 있습니다.

복잡성: ⚡⚡

// React components section
import React from "react";
import UserForm  from "./userForm";
import AdminForm from "./adminForm";
import GuestForm from "./guestForm";

/*
* This object literal will help to encapsulate all the forms that could we have.
*/
const FormsManage = {
  user : {
    render(props){
      return <UserForm {...props} />
    }
  },
  admin:{
    render(props){
      return <AdminForm {...props} />
    }
  },
  guest:{
    render(props) {
      return <GuestForm {...props}/> 
    }
  }
};

/*
* Main form component
*/
const Form = (props) => {
  // here we are getting the form by type
  const userForm = FormsManage[props.type];
  return userForm.render(props);
};
export default Form;

3.- 빌더 패턴.

빌더 패턴은 변형이 다른 복잡한 객체를 생성해야 할 때 사용되며 자체 객체 표현에 영향을 주지 않고 구성 프로세스를 수정할 수 있는 유연성을 원할 때 사용됩니다.
실생활에서 사용할 수 있는 예시를 만들어 보았습니다.

사용 사례: API 데이터를 타사 구성 요소가 이해하는 형식으로 변환해야 하는 횟수, 이 경우 빌더 패턴을 사용하여 구성 요소에 필요한 개체를 생성하고 구성 논리를 분리할 수 있습니다.

복잡성: ⚡⚡⚡

/*
* Mock class
*/
class DataTable{
  constructor(data ,options){
    this.data = data;
    this.options = options
  }
  getData(){
    return this.data;
  }
}

/*
* Builder class to create DataTable objects.
*/
function DataTableBuilder () {
  let defualtOptions ={ width:100, height:200, headerFixed: false };

  /*
  * Method to make the format required.
  */
  function generateFormattedData(data,header){
    return data.map(item => {
      let result = {};
      item.forEach((val,idx) => {
          result[header[idx] || "df"+idx] = val;
      });
      return result;
    });
  };

  /*
  * Public steps methods
  */
  return {
    addHeader(header){
      this.header = header || [];
      return this;
    },
    addData(data){
      this.data = data || [];
      return this;
    },
    addOptions(options){
      this.options = { ...defualtOptions, ...options};
      return this;
    },
    build(){
      const formattedData = generateFormattedData(this.data,this.header);
      return new DataTable(formattedData,this.options);
    }
  }
};

/*
* Data needed to build the Datatable object 
*/
const header=["name","age","position"];
const rows = [["Luis",19,"Dev"],["Bob",23,"HR"], ["Michel",25,"Accounter"]];
const options = { headerFixed:true };

/*
*  Start to the builder process
*/
const dt = new DataTableBuilder()
                  .addHeader(header)
                  .addData(rows)
                  .addOptions(options)
                  .build();
dt.getData();

결론.

소프트웨어 개발 세계에는 많은 디자인 패턴이 존재하고 모든 패턴에는 고유한 특성이 있지만 개발자로서 우리의 작업은 문제나 복잡성이 아니라 프로젝트에 실제 가치를 추가하는 패턴을 이해하고 분석합니다.

유용한 디자인 패턴이 있는 경우 토론 섹션에서 공유하거나 이전 패턴 중 하나를 구현하고 싶은데 도움이 필요한 경우 알려주시면 도와드리겠습니다. 😉