[JavaScript] 컴포넌트, 모듈 시스템

아래 강의를 수강하며 배운 내용을 정리한 글입니다

[한 번에 끝내는 자바스크립트: 바닐라 자바스크립트로 SPA 개발까지 - 효빈] https://inf.run/WfRmY

 

 

컴포넌트 vs 모듈

컴포넌트: 사용자 인터페이스를 구성하는 독립적이고 재사용 가능한 부분 (예: TabBar.js)

모듈: 재사용 가능한 코드의 집합, 특정 기능을 수행하는 코드를 하나의 단위로 묶어 관리 (예: api.js)

 

 

이전에 작성한 동물앨범의 문제점은 다음과 같습니다

1. 탭을 눌러 페이지 이동시마다 새 페이지 로딩으로 지연시간 발생

2. 다수의 페이지에서 비슷한 코드의 중복 작성

 

 

모듈 시스템

 

script 태그에 type="module" 을 추가하여 모듈 스크립트로 사용합니다

모듈 스크립트는 구분을 위하여 .mjs 확장자를 사용할 수 있습니다

<script type="module" src="./src/index.mjs"></script>

 

 

import 예제

예제 1.

import { num, add, User } from "/src/test.js";

 

예제 2.

import * as testModule from "/src/test.js";

 

예제 3.

import testModule from "/src/test.js";

 

 

export 예제

예제 1.

export const num = 10;

export function add(n1, n2) {
  return n1 + n2;
}

export function User(name) {
  this.name = name;
}

 

예제 2.

const num = 10;

function add(n1, n2) {
  return n1 + n2;
}

function User(name) {
  this.name = name;
}

export { num, add, User };

 

예제 3.

function add(n1, n2) {
  return n1 + n2;
}

export default add;