📋 작업 설명:

• 상세 설명:

  ApiService 예시에서 싱글톤(Singleton) 패턴을 사용하면, 클래스형 객체와 함수형 객체 모두 단일 인스턴스를 내보내기 때문에, 메모리 사용 측면에서 큰 차이가 발생하지 않습니다.

  싱글톤 패턴은 하나의 인스턴스만 생성되도록 보장하며, 여러 컴포넌트에서 이를 참조할 때 동일한 인스턴스를 공유하게 됩니다.

  싱글톤 패턴에서의 클래스형과 함수형 객체의 차이점:

  1. 클래스형 객체의 싱글톤 패턴

  // ApiService.js (클래스형 싱글톤)
  class ApiService {
      constructor() {
          this.baseUrl = process.env.NEXT_PUBLIC_API_BASE_URL ?? '';
          this.lastCallMap = {}; // 각 요청별 마지막 호출 시간을 저장
      }
  
      get(url) {
          console.log(`Fetching data from ${url}`);
          // API 호출 로직
      }
  }
  
  // 싱글톤 패턴: 단일 인스턴스를 생성하여 내보냄
  const api = new ApiService();
  export default api;
  
  

  동작 설명:

  • 이 클래스형 싱글톤에서 ApiService 객체는 한 번만 생성되며, 모든 컴포넌트에서 동일한 인스턴스를 참조합니다.
  • 메모리 효율성: 메서드와 상태(lastCallMap)는 프로토타입을 통해 한 번만 생성되며, 모든 컴포넌트가 이를 공유하므로 메모리 사용량이 최소화됩니다.

  ---

  2. 함수형 객체의 싱글톤 패턴

  // ApiService.js (함수형 싱글톤)
  function createApiService() {
      const baseUrl = process.env.NEXT_PUBLIC_API_BASE_URL ?? '';
      const lastCallMap = {}; // 각 요청별 마지막 호출 시간을 저장
  
      return {
          get(url) {
              console.log(`Fetching data from ${url}`);
              // API 호출 로직
          }
      };
  }
  
  // 싱글톤 패턴: 단일 객체를 생성하여 내보냄
  const api = createApiService();
  export default api;
  
  

  동작 설명:

  • 이 함수형 싱글톤에서 createApiService()는 한 번만 호출되며, 단일 객체를 반환합니다.
  • 모든 컴포넌트에서 이 객체를 참조하게 됩니다.
  • 메모리 효율성: 함수형 객체도 단일 객체로 생성되어 메서드와 상태가 한 번만 메모리에 존재하므로, 메모리 사용량이 효율적입니다.

  ---

  싱글톤 패턴에서의 차이점:

  1. 클래스형 객체:
     • 클래스형 객체는 프로토타입을 통해 메서드가 자동으로 공유되므로, 메모리 효율성이 높습니다.
     • 여러 인스턴스가 생성되더라도, 프로토타입 기반으로 메서드는 메모리에 한 번만 존재합니다. 하지만 싱글톤 패턴에서는 인스턴스가 단 하나만 존재하므로, 이 점은 크게 부각되지 않습니다.
  2. 함수형 객체:
     • 함수형 객체에서는 메서드가 매번 새로 생성되는 경우가 있을 수 있지만, 싱글톤 패턴을 적용하면 단일 객체만 생성되므로, 메모리 사용량은 클래스형 객체와 비슷해집니다.
     • 함수형 객체에서의 메모리 비효율 문제는 여러 인스턴스가 생성될 때 발생하지만, 싱글톤 패턴에서는 이러한 문제가 발생하지 않습니다.

  ---

  결론:

  • 싱글톤 패턴을 적용하면, 클래스형 객체와 함수형 객체 모두 단일 인스턴스만 생성되기 때문에 메모리 사용 측면에서 큰 차이가 없습니다.
  • 클래스형 객체는 프로토타입 기반으로 메서드를 효율적으로 공유할 수 있지만, 싱글톤 패턴을 사용하면 함수형 객체에서도 동일한 효율성을 가질 수 있습니다.
  • 따라서, 싱글톤 패턴을 사용할 경우 두 방식 모두 동일한 인스턴스를 공유하므로, 메모리 효율성에서 차이가 없습니다.

  이제 ApiService의 경우에도 싱글톤 패턴을 적용하면, 클래스형이든 함수형이든 큰 차이 없이 동작합니다.

  delete라는 이름을 함수명으로 사용하지 않은 이유

  delete가 JavaScript의 예약어이기 때문입니다. 예약어는 언어 자체의 문법이나 기능을 정의하는 단어로, 사용자 코드에서 식별자(변수명, 함수명 등)로 사용할 수 없습니다.

  1. 예약어란?

  JavaScript에서 **예약어(reserved words)**는 특정 기능을 수행하기 위해 미리 정의된 단어입니다. 예를 들어, if, for, return, class와 같은 예약어들은 이미 JavaScript 엔진에 의해 특별한 역할을 하도록 정의되어 있기 때문에, 개발자가 이런 예약어를 변수명, 함수명, 클래스명으로 사용할 수 없습니다.

  delete는 JavaScript에서 객체의 속성(property)을 삭제하는 연산자입니다.

  2. 클래스의 메서드에서는 왜 가능할까?

  클래스에서 메서드 이름으로는 delete를 사용할 수 있습니다. 이는 클래스 내부에서 메서드가 프로퍼티처럼 정의되기 때문에 가능한 것입니다. JavaScript 엔진은 클래스의 메서드와 일반 함수의 식별자를 다르게 처리합니다. 클래스 내부에서는 메서드 이름이 예약어라도 컨텍스트에 따라 충돌하지 않기 때문에 사용할 수 있습니다.

  javascript
  코드 복사
  class MyClass {
      delete() {
          console.log("This is a method named delete.");
      }
  }
  
  const obj = new MyClass();
  obj.delete();  // 출력: This is a method named delete.
  
  

  이 경우, delete는 메서드 이름으로 문제없이 동작합니다.

  3. 함수에서 delete를 사용할 수 없는 이유

  반면, 함수명으로는 delete를 사용할 수 없습니다. 함수명은 전역적인 컨텍스트에서 선언되기 때문에, 자바스크립트 엔진은 이를 예약어와 혼동하게 됩니다. 따라서, 다음과 같은 코드는 문법 오류를 발생시킵니다.

  javascript
  코드 복사
  function delete() {
      // 문법 오류 발생
  }
  
  

  delete는 이미 객체 프로퍼티를 삭제하는 연산자로 정의되어 있으므로, 이를 함수명으로 사용하면 자바스크립트 엔진이 이를 처리하지 못하고 오류를 발생시킵니다.

📂 작업 세부 사항:

• class 형태 에서 function 형태로 변경