1️⃣ 클래스를 활용한 모듈화
클래스를 사용하여 코드를 모듈화하는 것은 객체지향 프로그래밍(OOP)의 핵심 개념 중 하나이다.
클래스를 활용하면 관련 있는 데이터와 함수를 하나의 단위로 묶어 관리할 수 있으며, 코드의 재사용성과 유지보수성을 높일 수 있다.
각 클래스는 특정한 기능과 속성을 가지며, 다른 클래스와 조합하여 복잡한 기능을 구현할 수 있다.
📌 기본 구조
-
클래스는 객체의 청사진으로 속성(attributes)과 메소드(methods)를 정의합니다.
-
인스턴스는 클래스에 의해 생성된 객체로, 클래스의 속성과 메소드를 실제 값과 동작으로 가지게 됩니다.
-
상속은 한 클래스가 다른 클래스의 속성과 메소드를 물려받을 수 있게 하며 코드의 재사용성을 높여줍니다.
📝 코드예제 : 자동차와 전기 자동차를 나타내는 클래스
class Vehicle {
constructor(name, speed) {
this.name = name;
this.speed = speed;
}
introduce() {
console.log(`I am a ${this.name}, and I can run at ${this.speed} km/h!`);
}
}
class Car extends Vehicle {
constructor(name, speed, mileage) {
super(name, speed); // 부모 클래스의 생성자 호출
this.mileage = mileage;
}
showMileage() {
console.log(`My mileage is ${this.mileage} km per litre.`);
}
}
class ElectricCar extends Car {
constructor(name, speed, mileage, batteryCapacity) {
super(name, speed, mileage); // Car 클래스의 생성자 호출
this.batteryCapacity = batteryCapacity;
}
showBattery() {
console.log(`My battery capacity is ${this.batteryCapacity} kWh.`);
}
}
// 객체 생성 및 메소드 사용 예시
const myCar = new Car("Sedan", 120, 18);
myCar.introduce(); // I am a Sedan, and I can run at 120 km/h!
myCar.showMileage(); // My mileage is 18 km per litre.
const myElectricCar = new ElectricCar("Tesla", 150, 22, 100);
myElectricCar.introduce(); // I am a Tesla, and I can run at 150 km/h!
myElectricCar.showMileage(); // My mileage is 22 km per litre.
myElectricCar.showBattery(); // My battery capacity is 100 kWh.
이 코드는 자바스크립트에서 클래스 기반 상속을 활용하는 방법을 보여주며,
- Vehicle 클래스는 모든 차량의 기본을 나타냅니다.
- Car 클래스는 일반 자동차를, ElectricCar 클래스는 전기 자동차를 나타냅니다.
- 각 클래스는 특정 속성(예: name, speed, mileage, batteryCapacity)과
메소드(예: introduce(), showMileage(), showBattery())를 가지며, 상속을 통해 코드의 재사용성을 높입니다.
2️⃣ 브라우저 저장소의 장단점
브라우저 저장소 기술은 웹 애플리케이션에서 사용자의 데이터를 클라이언트 측에서 안전하게 저장하기 위해 사용된다.
주요 저장소 기술에는 localStorage, sessionStorage, IndexedDB 가 있다.
📌 localStorage
-
장점: 브라우저를 닫아도 데이터가 유지됩니다. 간단한 키-값 쌍으로 데이터를 저장할 수 있어 사용이 간편합니다.
-
단점: 모든 데이터가 문자열로 저장되므로, 복잡한 객체는 직렬화가 필요합니다. 동기적으로만 작동하여 대량의 데이터를 처리할 때 성능 문제가 발생할 수 있습니다.
📌 sessionStorage
-
장점: localStorage와 유사하지만, 브라우저 탭이나 창을 닫으면 데이터가 사라집니다. 탭 간에 데이터를 공유하지 않으므로 보안성이 높습니다.
-
단점: 세션이 끝나면 데이터가 사라져 장기간 데이터를 저장하기에는 적합하지 않습니다. localStorage와 마찬가지로 대량의 데이터 처리에는 적합하지 않습니다.
📌 IndexedDB
-
장점: 대량의 데이터를 비동기적으로 저장할 수 있어 성능이 좋습니다. 복잡한 데이터 구조를 지원하며, 트랜잭션과 색인 생성이 가능합니다.
-
단점: API가 복잡하고 사용하기 어려울 수 있습니다. 모든 브라우저에서 동일한 방식으로 작동하지 않을 수 있어 크로스 브라우저 호환성에 주의해야 합니다.
각 저장소 옵션은 특정 요구 사항에 따라 선택될 수 있으며, 때로는 이러한 저장소 기술을 조합하여 사용하기도 합니다.
예를 들어, 애플리케이션의 설정은 localStorage에 저장하고, 세션 정보는 sessionStorage에 저장하며, 복잡한 데이터나 대량의 데이터는 IndexedDB에 저장할 수 있습니다.
