Javascript 모듈

작성일 | In

[Javascript] 모듈

모듈이란?

코드의 재활용성을 높이고, 유지보수를 쉽게 할 수 있는 다양한 기법 중 하나.

코드를 취지, 동작 방법 등에 따라 여러개의 파일로 분리하는 것이다.

모듈의 장점

  1. 자주 사용되는 코드를 별도의 파일로 만들어 필요할 때마다 재활용할 수 있다.
  2. 코드 수정 시 필요한 로직을 빠르게 찾을 수 있다.
  3. 필요한 로직만을 로드하여 메모리의 낭비를 줄일 수 있다.

  4. 한번 다운로드된 모듈은 웹브라우저에 의해 저장되기 때문에 동일한 로직을 로드할 때 시간과 네트워크 트래픽을 절약할 수 있다.

    (브라우저에만 해당)

JS에서의 모듈화

순수한 자바스크립트에서는 모듈이라는 개념이 분명하게 존재하지는 않는다. 단, 자바스크립트가 구동되는 호스트 환경 (웹브라우저, Node.js 등) 에 따라서 서로 다른 모듈화 방법이 제공되고 있다.

(생활코딩 강의에서는 웹 브라우저에서의 모듈화를 살펴본다.)

모듈화가 무엇인지 살펴보기 위해 아래 코드를 예시로 들어보겠다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
// index.html
<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body>
</body>
<script>
        function vehicleMove() {
            // 굉장히 길고 복잡한 코드
        }

        vehicleMove();
    </script>
</html>

만약 자동차를 움직이는 로직 (vehicleMove()) 이 위와 같다고 하자. 해당 로직이 굉장히 길고 복잡하다고 가정할 때, 이 코드를 사용자가 전달받을 html파일에 작성해 버리면 사용자가 해당 페이지를 로드할 때 시간이 오래 걸리고, 개발자 입장에서도 해당 코드에 대한 가독성이 떨어진다.

1
2
3
4
5
6
7
8
9
10
11
12
13
// index.html
<!DOCTYPE html>
<html>
<head>
    <title></title>
		<script type="text/javascript" src="vehicle.js"></script>
</head>
<body>
</body>
<script>
        vehicleMove();
</script>
</html>

1
2
3
4
// vehicle.js
function vehicleMove() {
  // 굉장히 길고 복잡한 코드
}

이 코드는 모듈화를 적용한 모습이다. 사용자 입장에서는 index.html만 로드하면 되므로 더 빠르게 웹 페이지를 로딩할 수 있고, 개발자 입장에서도 vehicle 제어와 관련된 로직을 수정할 때 index.html을 일일이 살펴볼 필요 없이 vehicle.js 파일을 바로 수정하면 된다.

라이브러리

라이브러리와 모듈은 꽤 비슷한 개념이다. 모듈이 프로그래밍에서 작은 부품을 의미한다면, 라이브러리는 어떠한 목적을 위해 필요한 코드들을 모아둔 집합이다.

(상처난 부위를 응급처치하기 위해 소독약, 거즈, 진통제 등이 담긴 의료키트를 사용하는 것처럼, 라이브러리는 어떠한 목적을 위해 여러 모듈을 합쳐둔 의료키트같은 느낌이라고 이해했다.)

대표적인 JS 라이브러리로 jQuery가 있다.

0%