Javascript Class를 활용해 모듈화 하기 / 브라우저 저장소

 

 

Class로 모듈화 하기

import { makeDOMwithProperties } from '/directory/test.js'

	const noticeDOM = makeDOMwithProperties ('div', {
        innerHTML : '내용 없음',
        className : 'product-list-con'
    });

 

export const makeDOMwithProperties = (domType, propertyMap) => {
    //domType : div, a , li...
    //propertyMap : {"className" : "product-card", "alt"...}

    //Object.keys() 란? --- 키 값을 배열로 넘김
    //예시) Object.keys(propertyMap) ---> ["className", "alt"] 
    
    const dom = document.createElement(domType)
    Object.keys(propertyMap).forEach((key) => {
        dom[key] = propertyMap[key];
    });

    return dom;
}

export const appendChildrenList = (target, childrenList) => {
    if (!Array.isArray(childrenList)) return; //early return이라고 한다. if/else 구문은 길어지기 때문에, 아닌 경우만 먼저 솎아낸다.

    childrenList.forEach((child) => {
        target.appendChild(child); //childrenList의 배열에 들어있는 children을 붙임
    })
};

 

 

 

 

---

 

 

 

브라우저 저장소

 

LocalStorage

• 브라우저를 닫아도 데이터가 유지된다.
• 동일한 도메인에서만 접근할 수 있다. (Same-Orgin Policy)
• 간단한 인터페이스로 사용하기 쉽다.

 

• 브라우저 당 약 5MB 정도의 저장 공간만 가질 수 있다.
• 문자열만 저장 가능하며, 객체나 배열 등의 데이터 구조를 저장할 수 없다.

 

 

SessionStorage

 

• 임시로 데이터를 저장하여 같은 탭이나 창 간 데이터를 공유할 수 있다. 
• 동일한 도메인에서만 접근할 수 있다. (Same-Orgin Policy)

 

• 브라우저를 닫으면 (세션을 종료하면) 데이터가 삭제된다.

 

 

IndexedDB

 

• 객체 지향형 데이터 베이스로 구조화된 데이터를 저장할 수 있다.
• 비동기적(Asynchronized)으로 데이터를 읽고 쓸 수 있기 때문에 대량의 데이터를 처리할 수 있다.
• 동일한 도메인에서만 접근할 수 있다. (Same-Orgin Policy)

 

• 사용자에게 데이터 관리 책임이 있다.
• 사용하기 복잡하다.
• 구형 브라우저에 지원되지 않을 수 있다.