Notice
Recent Posts
Recent Comments
Link
«   2025/01   »
일 월 화 수 목 금 토
1 2 3 4
5 6 7 8 9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28 29 30 31
Tags more
Archives
Today
Total
관리 메뉴

FU11M00N

[ JavaScript ] JS 모듈 본문

SUA 정보보안/JavaScript

[ JavaScript ] JS 모듈

호IT 2021. 2. 3. 15:46

이미지 출처 : https://www.inflearn.com/course/javascript-%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8-%EA%B0%95%EC%A2%8C#

 

생활코딩의 이고잉 님의 강의를 기반으로 개인 공부용으로 정리한 포스팅 입니다.

 

 

 

 

- 모듈이란?

모듈은 프로그램을 구성하는 작은 부품입니다.

코드의 재활용성을 높이고 유지보수를 쉽게할 수있게 하기위해 다양한 기법들을 사용합니다.

 

그 중 하나가 코드를 여러개의 파일로 분리하여 사용하는것입니다.

그렇게된다면 아래와같은 효과를 얻을수있습니다.

 

  • 자주 사용되는 코드를 별도의 파일로 만들어서 필요할 때마다 재활용할 수 있다.
  • 코드를 개선하면 이를 사용하고 있는 모든 애플리케이션의 동작이 개선된다
  • 코드 수정 시에 필요한 로직을 빠르게 찾을 수 있다.
  • 필요한 로직만을 로드해서 메모리의 낭비를 줄일 수 있다.
  • 한번 다운로드된 모듈은 웹브라우저에 의해서 저장되기 때문에 동일한 로직을 로드 할 때 시간과 네트워크 트래픽을 절약 할 수 있다. (브라우저에서만 해당)

 

자바스크립트에선 모듈이란 개념은 분명하게 존재하지않습니다.

하지만 자바스크립트가 구동되는 호스트 환경에 따라 서로 다른 모듈화 방법이 제공됩니다.

대표적으로 자바스크립트에선 호스트환경인 웹브라우저에서 로직을 모듈화하는 방법이있습니다.

 

호스트 환경이란

호스트 환경이란 자바스크립트가 구동되는 환경을 의미합니다.

자바스크립트는 브라우저를 위한 언어였지만 더 이상 브라우저만을 위한 언어가 아닌 node.js처럼

서버측 자바스크립트롣로 성장했습니다.

또한 Google Apps Script도 자바스크립트이지만 동작하는 환경은 구글스프레드쉬트와 같은 구글 제품입니다.

 

- 모듈이 없다면

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
</head>
<body>
    <script>
        function money(){
            return '50000'
        }
        alert(money());
    </script>
</body>
</html>

 

 

위의 예시는 매우 짧은 코드이지만 매우 길고 자주사용된다고 가정해봅시다.

그런 경우 필요할때마다 함수를 정의해서 사용하는것은 유지보수도 어렵기도하고 낭비가 됩니다.

이럴때 모듈이 필요합니다.

 

- 모듈화

function money(){
    return '50000';
}

money.js

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <script src="money.js"></script>
</head>
<body>
    <script>
        alert(money());
    </script>
</body>
</html>

main.html

이전에 했던 예제와 결괏값은 같지만 함수 money를 main.html에서 불러오는 형식을 사용했습니다.

<script src="money.js"></script>

이 부분에서 src속성 money.js파일을 불러옵니다. 

그럼 브라우저는 src속성에있는 money.js파일을 다운로드하여 실행시킵니다.

money.js에는 money라는 함수가 정의되어있기때문에 main.html에서 따로 함수를 정의하지않고 실행이 가능합니다.

 

 

 

 

 

 

 

SUA 정보보안 멘토링에 참여하고 있습니다.

 

'SUA 정보보안 > JavaScript' 카테고리의 다른 글

[ JavaScript ] JS API,문서보는법  (0) 2021.02.03
[ JavaScript ] JS 라이브러리(JQuery)  (0) 2021.02.03
[ JavaScript ] JS 객체와 this  (0) 2021.02.03
[ JavaScript ] JS 배열 (push, concat, pop, unshift,splice, shift, sort) | 정렬, 추가  (0) 2021.02.03
[ JavaScript ] JS 함수,매개변수,인자,함수의 입출력  (0) 2021.02.03
'SUA 정보보안/JavaScript' Related Articles more
Comments