Class를 활용해서 모듈화, 브라우저 저장소 각각의 장단점

김겜김·2024년 4월 3일

😕클래스(class)란?

Class는 객체를 생성하기 위한 템플릿입니다. 클래스는 데이터와 이를 조작하는 코드를 하나로 추상화합니다. JavaScript에서 클래스는 프로토타입을 이용해서 만들어졌지만 ES5의 클래스 의미와는 다른 문법과 의미를 가집니다.

클래스(class)를 선언하는법

class square {
  constructor(height, width) {
    this.height = height;
    this.width = width;
  }
}

🧐class를 사용하는이유

자바스크립트는 프로토타입 기반의 객체지향 프로그래밍 언어입니다. 그런데 굳이 class를 사용하는 이유가 있을까요?

가독성이 좋아지면서 훨씬 간단하게 코드를 작성할 수 있습니다😊

모듈화와 구조화: 클래스를 사용하면 코드를 모듈화하고 구조화할 수 있습니다. 클래스는 관련된 속성과 메서드를 묶어 더 명확한 코드 구조를 만들어줍니다.

상속과 다형성: 클래스를 사용하면 상속을 통해 코드를 재사용할 수 있습니다. 부모 클래스의 속성과 메서드를 하위 클래스에서 상속하여 새로운 기능을 추가하거나 수정할 수 있습니다. 이는 다형성을 활용하여 객체 간에 유연하게 상호작용할 수 있는 기능을 제공합니다.

가독성과 유지보수성: 클래스를 사용하면 코드의 가독성을 높일 수 있습니다. 관련된 코드를 함께 그룹화하고, 명확한 인터페이스를 제공하여 코드를 이해하고 수정하기 쉽게 만들어줍니다. 또한 클래스는 객체지향 프로그래밍의 원칙을 따르므로 코드의 유지보수성을 높일 수 있습니다.

코드 재사용성: 클래스를 사용하면 동일한 클래스를 여러 번 인스턴스화하여 여러 객체를 생성할 수 있습니다. 이를 통해 코드를 재사용하고 비슷한 기능을 가진 여러 객체를 생성할 수 있습니다.

디자인 패턴 적용: 클래스를 사용하면 일반적인 디자인 패턴을 적용할 수 있습니다. 예를 들어, 싱글톤, 팩토리, 옵저버 등의 디자인 패턴을 클래스로 구현하여 코드를 더 유연하고 확장 가능하게 만들 수 있습니다.

🚊Class를 활용한 모듈화

두 가지 클래스를 생성하고 모듈화할 것입니다 : Person 클래스와 Team 클래스입니다. Person 클래스는 개별 사람의 이름과 나이를 저장하고 출력하는 기능을 제공하며, Team 클래스는 여러 Person 객체를 관리하고 팀원들의 정보를 출력하는 기능을 제공합니다.

// Person
class Person {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }

  introduce() {
    console.log(`안녕 ${this.name} 나는 ${this.age} 살이야.`);
  }
}

// export the Person class
export default Person;

// Team
class Team {
  constructor() {
    this.members = [];
  }

  addMember(person) {
    this.members.push(person);
  }

  listMembers() {
    console.log("Team members:");
    this.members.forEach((person) => {
      console.log(`${person.name}, ${person.age}`);
    });
  }
}

// export the Team class
export default Team;

🎃브라우저(browser) 저장소의 장단점

브라우저 저장소는 클라이언트 측에서 데이터를 저장하는 다양한 방법을 제공합니다. 각각의 저장소에는 자신만의 장점이 있습니다. 쿠키, 로컬 스토리지, 세션 스토리지,웹 데이터베이스 등 있고, 각각의 브라우저 저장소는 서로 다른 용도와 제약 조건을 가지고 있으므로, 애플리케이션의 요구 사항에 맞게 적절히 선택해야 합니다.

쿠키 (Cookies):

장점:

서버와의 통신: 쿠키는 HTTP 요청과 함께 서버로 전송되므로, 서버와의 통신에 사용될 수 있습니다. 세션 관리, 사용자 식별 등에 활용될 수 있습니다.

간단한 데이터 저장: 쿠키는 간단한 키-값 쌍의 데이터를 저장하는 데 사용됩니다. 세션 식별자, 사용자 설정 등을 저장할 수 있습니다.

만료 및 유효 기간 설정: 쿠키에는 만료 날짜와 유효 기간을 설정하여 데이터의 수명을 관리할 수 있습니다.

단점:

용량 제한: 쿠키에 저장할 수 있는 데이터의 용량은 제한적이며, 일반적으로 4KB로 제한됩니다.

도메인 제한: 쿠키는 도메인에 바인딩되어 있으며, 하위 도메인 간에도 공유되지 않습니다. 또한, 동일한 출처 정책(Same Origin Policy)에 따라 동일한 출처에서만 접근할 수 있습니다.

보안 취약점: 쿠키는 클라이언트 측에서 수정 가능하므로, 민감한 데이터를 저장하는 데 적합하지 않을 수 있습니다.

쿠키는 주로 세션 관리, 사용자 식별 및 추적, 사용자 설정 등의 용도로 사용됩니다. 하지만 용량 제한과 보안 취약점으로 인해 민감한 데이터를 저장하기에는 적합하지 않을 수 있습니다. 따라서 쿠키의 사용은 주로 세션 관리와 간단한 설정 정보 저장 등에 사용되며, 보다 복잡한 데이터 저장이 필요한 경우에는 다른 브라우저 저장소를 고려하는 것이 좋습니다.

localStorage, sessionStorage 및 IndexedDB는 모두 브라우저에서 클라이언트 측 데이터를 저장하는 방법입니다. 각각의 방법은 고유한 특징과 장단점이 있습니다.

localStorage:

장점:

데이터 영속성: localStorage에 저장된 데이터는 사용자가 브라우저를 종료하고 다시 열어도 유지됩니다.

간편한 사용: localStorage는 간단한 키-값 쌍의 데이터를 저장하는 데 사용되며, 사용법이 매우 간단합니다.

비교적 큰 용량: 일반적으로 브라우저당 5MB의 용량을 가지며, 작은 규모의 데이터에 적합합니다.

단점:

동일 출처 제한: localStorage에 저장된 데이터는 동일한 출처(Origin)에서만 접근할 수 있습니다. 따라서 다른 도메인 간의 데이터 공유에는 사용할 수 없습니다.

동기식 인터페이스: localStorage에 데이터를 저장하거나 읽을 때는 동기식 인터페이스를 사용해야 하므로, 대량의 데이터를 다루기에는 적합하지 않을 수 있습니다.

sessionStorage:

장점:

세션 기간 동안만 유지: sessionStorage에 저장된 데이터는 브라우저 세션이 유지되는 동안에만 유지되며, 브라우저를 닫으면 데이터가 삭제됩니다.

데이터 보안: sessionStorage는 로컬 파일에 저장되지 않으므로, 민감한 데이터를 저장하는 데 더 안전합니다.
동일 출처 제한: localStorage와 마찬가지로 동일한 출처에서만 접근할 수 있습니다.

단점:

세션 종료 시 데이터 손실: 브라우저 세션이 종료되면 sessionStorage에 저장된 데이터가 삭제되므로, 장기적인 데이터 저장에는 적합하지 않습니다.

IndexedDB:

장점:

대용량 데이터 저장: IndexedDB는 대용량의 구조화된 데이터를 저장할 수 있으며, 복잡한 데이터 구조를 처리하는 데 적합합니다.

비동기적 데이터 액세스: IndexedDB는 비동기적으로 데이터를 읽고 쓸 수 있으므로, 대규모 데이터베이스 작업을 수행할 때 성능을 향상시킬 수 있습니다.

다양한 쿼리 및 인덱싱: IndexedDB는 데이터를 쿼리하고 인덱싱할 수 있는 기능을 제공하여 데이터 검색 및 조작을 용이하게 합니다.

단점:

복잡한 사용법: IndexedDB는 localStorage나 sessionStorage보다 사용법이 더 복잡하며, 학습 곡선이 높을 수 있습니다.

비교적 지원 범위 제한: 모든 브라우저에서 IndexedDB를 지원하지 않을 수 있으며, 일부 브라우저에서는 사용을 제한할 수 있습니다.