모듈이란?

• 프로그래밍 관정에서 특정 기능을 갖는 작은 단위의 코드를 의미한다.

JS 모듈

태생적 한계

• JS는 모듈이라는 개념이 없던 프로그래밍 언어이다.

• 파일별로 변수나 함수를 구분해서 정의하더라도 기본적으로 모두 전역 유효 범위를 갑는 것이 JS의 특징이다.

• 애플리케이션의 코드가 많아 질수록 이름이 서로 출돌하지 않게 유일한 변수나 함수 이름을 고민할 필요가 있다.

모듈화를 위한 시도

• Common.js

  • 브라우저와 브라우저 이외의 환경인 서버, 데스크톱에서도 JS를 할용하기위해 고안된 스펙이자 그룹이다.

  • Node.js에서 가장 활발하게 사용되고 있는 스펙

// math.js
function sum(a, b) {
  return a + b;
}

module.exports = {
  sum
};

// app.js
const math = require('./math.js');

console.log(math.sum(1, 99)); // 100

JS 모듈화 문법

• 2015년 처음으로 언어레벨에서 모듈화 문법을 지원하게 되었다.

export와 import

// math.js
function sum(a, b) {
  return a + b;
}

export { sum }

// app.js
import { sum } from './math.js';

console.log(sum(1, 99)); // 100

export default

• 해당 파일에서 하나의 대상만 내보내겠다는 말과 같다.

// math.js
function sum(a, b) {
  return a + b;
}

export default sum; 

import sum from './math.js';

console.log(sum(1, 99)); // 100

import as

• 가지고 온 변수나 함수의 이름을 해당 모듈 내에서 변경하여 사용할 수 있다.

// math.js
function sum(a, b) {
  return a + b;
}

export { sum }

// app.js
import { sum as add } from './math.js';

console.log(add(1, 99)); // 100

import *

• 특정 파일에서 내보낸 기능이 많아 import 구문으로 가져와야 할 것이 많다면 * 키워드를 사용하여 편리하게 가져올 수 있다.

• import * as ... from 키워드를 통해 가지고 온 my는 네임스페이스, 객체라고 생각하면 된다.

// math.js
function sum(a, b) {
  return a + b;
}

function subtract(a, b) {
  return a - b;
}

function divide(a, b) {
  return a / b;
}

export { sum, subtract, divide }

// app.js
import * as my from './math.js';

console.log(my.sum(1, 99)); // 100
console.log(my.subtract(100, 99)); // 1
console.log(my.divide(99, 1)); // 99

export 위치

• 특정 파일에서 다른 파일이 가져다 쓸 기능을 내보낼 때 사용하는 키워드

• 변수, 함수, 클래스에 모두 사용할 수 있다.

• 선언과 동시에 앞쪽에 export를 일일이 붙여 내보낼 수 있고, 맨 아래 한번에 여러개의 변수, 함수, 클래스 등을 내보낼 수 있다.

const pi = 3.14;
const sayHi = () => {
  return 'hi'
}
class Person {
  ...
}
  
export { pi, sayHi, person }

export const pi = 3.14;
export const sayHi = () => {
  return 'hi'
}
export class Person {
  ...
}

TS 모듈

• 파일의 확장자를 .ts로 변경해주고 TypeScript문법을 사용하여 작성하면 위의 JS모듈과 동일하게 사용할 수 있다.

// introduce.ts
interface Me {
  name: string;
  age: number;
}

export { Me }

// app.ts
import { Me } from 'introduce.ts'

const me: Me = {
  name: 'jonghyun',
  age: 99,
}

TS 모듈 유효 범위

• 아래 코드는 util.ts파일에 num이라는 변수를 선언하고 초깃값으로 10을 할당해주었다.

• app.ts파일에서 a변수를 선언한 후 num을 할달하더라도 타입스크립트에서는 정상적으로 인식한다.

• 다른 파일에 선언된 변수들이 모두 타입스크립트의 모듈 관점에서 전역으로 등록되어 있기 때문에 같은 이름으로 함수나 타입 별칭 등 재선언이 불가능한 코드를 작성하면 에러가 발생한다.

• var나 interface 등 재선언이나 병합 선언이 가능한 코드는 별도로 에러가 표시되지 않는다.

// util.ts
var num = 10;

//app.ts
var a = num;

TS 모듈화 문법

import type

• import 뒤에 type를 붙여 type의 역할을 명시할 수 있다.

// introduce.ts
interface Me {
  name: string;
  age: number;
}

export { Me }

// app.ts
import type { Me } from 'introduce.ts'

const me: Me = {
  name: 'jonghyun',
  age: 99,
}

import inline type

• 한 파일에서 import로 여러 개의 값과 코드를 가져올 때 타입인지 아닌지 명시할 수 있다.

// introduce.ts
interface Me {
  name: string;
  age: number;
}

function logMyName() {
  console.log('jonghyun');
}

export { Me, logMyName }

// app.ts
import { type Me, logMyName } from 'introduce.ts'

const me: Me = {
  name: 'jonghyun',
  age: 99,
}

모듈화 전략: Barrel

• 여러 개의 파일에서 가져온 모듈을 마치 하나의 통처럼 관리하는 방식

// ./me/name.ts
interface Name {
  name: string;
}

export { Name }

// ./me/age.ts
interface Age {
  age: number
}

export { Age }

// app.ts
import { Name } from './me/name'
import { Age } from './me/age'

var name: Name = {name: 'jonghyun'};
var age: Age = {age: 99};

• 위의 app.ts파일의 export처럼 한줄씩 모두 작성할 수 있지만 별도의 타입만을 내보내주는 파일을 만들어 사용하게되면 조금 더 가독성이 좋아질 수 있다.

// ./me/index.ts
export { Name } from './me/name'
export { Age } from './me/age'

// app.ts
import { Name, Age } from './me'

var name: Name = {name: 'jonghyun'};
var age: Age = {age: 99};

---

출처: 쉽게 시작하는 타입스크립트