모듈화와 브라우저 저장소

Boseong Choi·2023년 5월 28일

목록 보기

8/10

1. 모듈화

모듈화는 프로그램을 독립적인 단위로 분리하는 방법이다. 코드의 재사용성을 높이고 유지보수를 용이하게 만들어주며. 모듈화를 사용하면 코드를 논리적으로 구조화할 수 있으며, 의존성을 명확히 표시하여 코드의 가독성을 높이고 버그를 줄일 수 있다고 한다.

모듈화를 하기 전, 사내 레거시 프로젝트의 자바스크립트 파일 일부 사진이다. 모듈화를 하지 않고 유지보수 하기에 최악의 환경이었다.

2. 모듈화의 장점

코드 재사용성 향상
모듈로 분리된 코드는 다른 프로젝트에서도 쉽게 재사용할 수 있다.
유지보수 용이성
모듈 간의 의존성을 명시적으로 선언하기 때문에 코드 수정이 필요한 경우 해당 모듈만 수정하면 된다.
가독성 향상
모듈 단위로 코드를 구성하면 코드의 의도를 명확하게 전달할 수 있다.

import 해온 변수, 함수는 사용은 가능하지만 수정은 불가능하다. 즉, read-only하다.

3. import/export

i. 모듈 파일 생성

module.js
// 모듈에서 내보낼 함수 정의
export function greet(name) {
  console.log(`Hello, ${name}!`);
}

// 모듈에서 내보낼 상수 정의
export const PI = 3.14159;

ii. 모듈 사용 파일

main.js
// 모듈 가져오기
import { greet, PI } from './module.js';

// 모듈 내의 함수 호출
greet('John');

// 모듈 내의 상수 사용
console.log(`The value of PI is ${PI}`);

module.js 파일에서 'greet' 함수와 'PI' 상수를 내보내고, main.js 파일에서 해당 모듈을 가져와 사용하는 방법을 보여주는 예시다. 모듈화를 통해 코드를 구성할 때, 관련 함수와 변수를 하나의 모듈로 묶어 관리할 수 있다. 모듈 간의 의존성을 명확히 표시하여 코드 수정 시 해당 모듈만 수정하면 되므로 유지보수가 용이해진다.

04. 브라우저 저장소

자바스크립트에서는 클라이언트 측에서 데이터를 저장할 수 있는 여러 가지 옵션이 있다. 그 중에서도 가장 일반적으로 사용되는 브라우저 저장소는 localStorage SessionStorage IndexedDB이다.

i. localStorage

보관 기간
localStorage는 클라이언트의 로컬에 데이터를 영구적으로 저장한다. 사용자가 브라우저를 닫았다가 다시 열어도 데이터가 유지된다.
용량 제한
일반적으로 5MB의 용량 제한이 있으며, 이를 넘어서면 저장이 실패할 수 있다.
도메인 별로 저장
도메인 단위로 데이터를 저장한다. 따라서 같은 도메인이라면 여러 페이지 간에 데이터를 공유할 수 있다.

사용 예시: 로그인 정보, 사용자 설정 등