JavaScript 모듈 101: import & export 혼란 없이

Source: Dev.to

JavaScript 프로젝트가 성장함에 따라, 코드 관리가 단순히 코드를 작성하는 것보다 더 중요해집니다.
모듈은 코드를 효율적으로 조직하고, 재사용하며, 유지보수할 수 있는 간단한 방법을 제공합니다.

이 글에서는 다음 내용을 다룹니다:

• 왜 모듈이 필요한가
• 함수 또는 값 내보내기
• 모듈 가져오기
• 기본(default) 내보내기와 명명된(named) 내보내기
• 모듈식 코드의 장점

모듈

모듈이 등장하기 전에는 JavaScript가 코드를 체계적으로 조직할 적절한 방법이 없었습니다. 모든 것이 전역 스코프에 존재했기 때문에 충돌이 자주 발생하고 코드가 뒤죽박죽이 되었습니다. 개발자들은 전역 변수나 IIFE와 같은 트릭을 사용해 이를 관리했습니다.

// Global variable (problem: can be overwritten)
var count = 0;
function increment() {
  count++;
}

// IIFE (used to avoid global pollution)
(function () {
  var count = 0;

  function increment() {
    count++;
    console.log(count);
  }

  increment();
})();

이것들은 단지 우회책일 뿐이며, 진정한 해결책은 아니었습니다.

모듈이란 무엇인가

모듈은 자신만의 스코프를 가진 별개의 코드 조각에 불과합니다. 모듈을 사용하면 코드를 조직화하고, 재사용 가능하게 만들며, 충돌 없이 유지할 수 있습니다.

JavaScript는 다양한 모듈 시스템을 지원합니다. 아래에서는 가장 중요한 두 가지 유형에 집중합니다.

모듈 유형

ES6 모듈

ES6 모듈(ECMAScript 6)은 네이티브 모듈로, import와 export 키워드를 사용해 코드를 그룹화하고 필요한 것만 공유할 수 있습니다.

모듈 내보내기

export 키워드를 사용해 코드를 개별적으로 혹은 그룹으로 내보냅니다.

// Named exports
export const PI = 3.14;
export function add(a, b) {
  return a + b;
}

// Exporting multiple values as a group
const MULTIPLY = 'multiply';
const SUBTRACT = 'subtract';

export { MULTIPLY, SUBTRACT };

모듈 가져오기

// Named imports
import { PI, add } from './math.js';

// Default import
import myFunction from './myFunction.js';

CommonJS 모듈

ES6 모듈 이전에, JavaScript(특히 Node.js)에서는 CommonJS를 사용했습니다. require로 코드를 가져오고 module.exports로 코드를 내보냅니다.

CommonJS로 내보내기

const PI = 3.14;
function add(a, b) {
  return a + b;
}

module.exports = { PI, add };

CommonJS로 가져오기

const math = require('./math.js');
console.log(math.add(2, 3)); // Outputs: 5

기본 모듈 (동적 import)

현대 JavaScript는 동적 import를 사용하여 실제로 필요할 때만 파일을 로드할 수 있게 해줍니다. 이는 초기 로드 크기를 줄이고 대규모 애플리케이션의 속도를 높입니다.

// math.js (module)
export default function add(a, b) {
  return a + b;
}

// app.js (using it)
import add from './math.js';

console.log(add(2, 3)); // 5

Default vs. named exports

모듈식 코드의 장점

• Better organization – 코드를 깔끔하고 구조화된 상태로 유지하여 프로젝트가 성장함에 따라 읽고 관리하기가 쉬워집니다.
• Reusability – 모듈을 앱 전체 또는 다른 프로젝트에서도 재사용할 수 있어 시간과 노력을 절약합니다.
• No naming conflicts – 각 모듈은 자체 스코프를 가지고 있어 변수 이름 충돌을 방지합니다.
• Easy testing – 작고 독립된 모듈은 개별적으로 테스트하기가 더 간단해져 보다 신뢰할 수 있는 코드를 만들 수 있습니다.

Thanks for reading! 이 글이 마음에 드셨다면, 해당 주제에 대해 더 알아보세요.