자바스크립트 코드 나눠서 관리하는 방법

자바스크립트를 정말 많이 사용하고 있는데, 코드를 효율적으로 관리하는 방법은 간단 정리해 봅니다.

1. 스크립트 태그로 파일 분리하기

HTML의 <script> 태그를 사용하여 자바스크립트 파일을 로드하는 방법입니다. 이 방법은 간단하고 쉽게 구현할 수 있습니다.

예를 들어, main.js와 helper.js 두 개의 자바스크립트 파일이 있다고 가정하면, main.js에서는 helper.js 파일을 로드하여 사용할 수 있습니다.

<!-- helper.js 파일 로드 -->
<script src="helper.js"></script>

<!-- main.js 파일 로드 -->
<script src="main.js"></script>

2. 모듈로 파일 분리하기

ECMAScript 2015부터 도입된 모듈은 자바스크립트 파일을 여러 개로 나누어 관리하는 또 다른 방법입니다. 모듈은 파일 간의 의존성을 관리하고, 필요한 모듈만 가져와서 사용할 수 있습니다.

예를 들어, main.js와 helper.js를 모듈로 나누어 구현하면 다음과 같습니다.

// helper.js 모듈
export function sum(a, b) {
  return a + b;
}

// main.js 모듈
import { sum } from './helper.js';

console.log(sum(1, 2)); // 3

'helper.js'에서는 sum() 함수를 정의하고, main.js에서는 helper.js 모듈을 가져와서 sum() 함수를 사용합니다.

이렇게 모듈로 파일을 나누면 각각의 파일이 독립적으로 구현될 수 있으며, 필요한 모듈만 가져와서 사용하므로 자원의 효율성도 높아집니다.

즐거운 코딩 되세요~