[생활코딩] JavaScript 문법

[자기계발]/유튜브로 코딩배우기

[생활코딩] JavaScript 문법 - 모듈

슈총총 2021. 5. 27. 22:39

이번 시간에는 JavaScript 문법 모듈에 관해 공부해보자. 이 수업에서는 JS의 대표적인 호스트 환경인 웹브라우저에서 로직을 모듈화하는 방법에 대해 알아볼 것이다.

모듈

프로그램은 작고 단순한 것에서 크고 복잡한 것으로 진화한다. 그 과정에서 코드의 재활용성을 높이고, 유지보수를 쉽게 할 수 있는 다양한 기법들이 사용된다. 그 중의 하나가 코드를 부품처럼 여러개의 파일로 분리하는 것이다 => 모듈

모듈의 효과

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

모듈이란

자바스크립트에서는 모듈(module)이라는 개념이 존재하지는 않다. 하지만 JavaScript가 구동되는 호스트 환경에 따라서 서로 다른 모듈화 방법이 제공되고 있다.

호스트 환경이란?

자바스크립트가 구성되는 환경. JavaScript는 브라우저를 위한 언어로 시작했지만, 이제는 다용도로 활용된다.

node.js 는 서버 측에서 실행되는 JavaScript 이다.
이 언어는 JavaScript의 문법을 따르지만 언어가 구동되는 환경은 브라우저가 아니라 서버측 환경이다.
구글의 제품 위에서 돌아가는 Google Apps Script 역시 JavaScript이다.
GAS가 동작하는 환경은 Google Spreadshet 같은 구글의 제품 위이다.

언어와 그 언어가 구동되는 환경에 대해서 구분해서 사고 할 수 있다면, 우리는 JavaScript의 문법을 이용해서 PHP와 같은 서버 시스템을 제어(node.js)하거나 구글의 제품(GAS)을 제어 할 수 있다. 이를 위해서는 다양한 언어를 공부해봐야 한다.

모듈이 없다면?

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

아무 문제 없는 코드지만, welcome 함수가 자주 사용되는 것이라고 가정해보자. 그 때마다 welcome 함수를 정의해서 사용하는 것은 유지보수도 어렵고 가독성도 안 좋아진다. 이럴 때 모듈이 필요하다.

위의 코드가 쓰여진 main.html 파일은 '웹페이지 표시'를 하기 위한 파일으로 'welcome함수가 어떻게 동작하는 가'는 중요한 게 아니다. welcome 모듈 파일을 greeting.js 이런식으로 따로 만들어봄으로써 가독성을 높이고 용량을 줄일 수 있다. welcome함수를 100개가 넘는 파일에서 쓰여야한다고 생각해보면 모듈화는 매우 유용하다.

모듈의 사용

greeting.js 파일을 만든다. 확장자는 .js 로 하면 된다.

function welcome(){
    return 'Hello world';
}

main.html 파일에는 이렇게 쓴다. welcome함수가 이 파일에 없어도 alert가 잘 나온다.

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

모듈이 없다면 예제의 코드와 결과는 같다. 하지만 우리는 welcome 함수를 greeting.js 파일로 모듈화 시켰다.

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

웹페이지가 화면에 출력될 때, 웹브라우저가 script라는 태그를 만나면 그곳에 src라는 속성의 유무를 확인한다. 그 속성에 어떠한 값이 있다면 그 값에 해당되는 파일을 읽어와서 <script>~</script> 사이에 집어넣는 것과 동일한 효과를 내게 된다.

JavaScript와 HTML은 완전히 다른 문법을 가진 언어다. HTML 문서 안에는 JS와 HTML이 동시에 표현된다. 고로 우리는 브라우저에게 어디서부터 어디까지가 JS이고, HTML인지를 구분해서 알려줘야 한다. 이 역할을 하는 HTML 태그가 script 태그이다.

script 태그 안쪽에 위치하는 컨텐츠는 브라우저에 의해서 JS로 인식된다. 위의 코드에서는 컨텐츠 대신 src 속성이 있다. 브라우저는 src 속성에 있는 파일을 다운로드해서 실행시킨다. greeting.js에는 함수 welcome이 정의되어 있기 때문에 main,html안에 이 함수가 정의 되어 있지 않음에도 실행 시킬 수 있다.

Node.js에서의 모듈의 로드

node.js는 서버 쪽 JavaScript 이다.
web browser는 클라이언트 쪽 JavaScript 이다.

각각의 호스트 환경에 따라서 모듈을 로드 하는 방식(JS 파일을 분할해서 읽어올 수 있도록 하는 메카니즘)이 다르다'만 알고가면 된다.

node.circle.js (로드될 대상 - 읽음을 당하는 쪽)

var PI = Math.PI;
  
exports.area = function (r) {
return PI * r * r;
};
  
exports.circumference = function (r) {
return 2 * PI * r;
};

node.demo.js (로드의 주체)

node.js는 모듈을 로드할 때, require 함수를 사용한다.

var circle = require('./node.circle.js');
console.log( 'The area of a circle of radius 4 is '
           + circle.area(4));

실행방법 / 실행결과

F:\BitNami\wampstack-5.4.22-0\apache2\htdocs\javascript\module>node node.demo.js
The area of a circle of radius 4 is 50.26548245743669

라이브러리

모듈은 프로그램을 구성하는 작은 부품
라이브러리는 자주 사용되는 로직을 재사용하기 편리하도록 잘 정리한 일련의 코드들의 집합
오픈소스를 통해 만들어진 수많은 라이브러리가 존재
만들고자하는 것의 핵심이 아닌 이상, 누군가가 만들어놓은 라이브러리가 있는지 검색하는 편이 좋음
많은 사람들이 그것을 위해 시간, 노하우, 자본 등을 들였기 때문에 우리는 엄청난 시간을 절약 가능
만들고자 하는 대상을 위해 사용하기 위한 '도구로써' 라이브러리를 찾아보고 프로그래밍을 해라
웹 페이지를 쉽게 제어할수 있도록 하고, 서버와 쉽게 통신할 수 있게 한다. 이런 코드들의 집합이다.
'파일을 가져오는 것'과 '어떤 기능이 있는지 파악하는것' 이 2가지가 라이브러리 사용의 핵심이다.
라이브러리를 사용하는 것이 얼마나 중요한 일인지, 웹브라우저에서는 어떻게 라이브러리를 사용할 수 있을지 파악

jQuery

무조건 $로 시작한다

jQuery 사용하여 'empty'를 excute 버튼 하나로 전부' coding everybody'로 바꾸는 코드

<!DOCTYPE html>
<html>
<head>
    <script src="https://code.jquery.com/jquery-1.11.0.min.js"></script>
</head>
<body>
    <ul id="list">
        <li>empty</li>
        <li>empty</li>
        <li>empty</li>
        <li>empty</li>
    </ul>
    <input id="execute_btn" type="button" value="execute" />
    <script type="text/javascript">
     $('#execute_btn').click(function(){
        $('#list li').text('coding everybody');
     })
    </script>
</body>
</html>

jQuery 사용 없이 JS만 사용하여 위의 작업을 하는 코드

<!DOCTYPE html>
<html>
<body>
    <ul id="list">
        <li>empty</li>
        <li>empty</li>
        <li>empty</li>
        <li>empty</li>
    </ul>
    <input id="execute_btn" type="button" value="execute" />
    <script type="text/javascript">
    function addEvent(target, eventType,eventHandler, useCapture) {
        if (target.addEventListener) { // W3C DOM
            target.addEventListener(eventType,eventHandler,useCapture?useCapture:false);
        } else if (target.attachEvent) {  // IE DOM
            var r = target.attachEvent("on"+eventType, eventHandler);
        }
    }
    function clickHandler(event) {
        var nav = document.getElementById('list');
        for(var i = 0; i < nav.childNodes.length; i++) {
            var child = nav.childNodes[i];
            if(child.nodeType==3)
                continue;
            child.innerText = 'Coding everybody';
        }
    }
    addEvent(document.getElementById('execute_btn'), 'click', clickHandler);
    </script>
</body>
</html>

JAVASCRIPT 기본 문법 시리즈

[생활코딩] JavaScript 기본문법 정리 (숫자와 문자, 변수, 주석, 줄바꿈과 여백, 비교)

웹을 만들어보다가 JS 복습이 필요하다고 느낀 것도 있고 여러 기능을 써보고 싶어서 생활코딩을 다시 공부하기로 했다. 이번엔 언어로 접근하여 조금더 자세하게 배워볼 것이다. 언어소개 https:

shuchong.tistory.com

[생활코딩] JavaScript 문법 - 조건문

조건문은 프로그래밍에서 가장 중요한 부분이다. HTML, CSS가 아닌 이상 조건문은 공통 분모이다. Java, Python, Php, C 이런 언어를 배울 때도 사용한다. 다음 단원에서 배울 '반복문'도 프로그래밍의

shuchong.tistory.com

[생활코딩] JavaScript 문법 - 반복문

반복문은 영어로 loop과 iterare로 불리며, while 혹은 for 을 상황에 맞게 쓸 수 있다. 코딩할 때 자주보이는 문법이니 잘 알아둘 것! 1. 반복문 (loop / iterate) 컴퓨터는 반복적인 작업을 대행하기 위해

shuchong.tistory.com

[생활코딩] JavaScript 문법 - 함수

생활코딩에서 다루는 JAVASCRIPT의 문법 중 하낭니 함수를 배워보자. 자바스크립트는 '함수형언어' 라고도 부를 정도로 함수에 대한 비중이 크다. 여기서 항상 나오는 return이랑 argument 정의를 배운

shuchong.tistory.com

[생활코딩] JavaScript 문법 - 배열

이번편에서는 자바스크립트 문법 배열을 배워보자. 배열은 영어로 array 이며, 대괄호 [ ] 를 쓴다는 것을 기억해라. 나중에 반복문이랑 활용하면 가치가 높아진다. 배열(array) 연관돼있는 데이터

shuchong.tistory.com

[생활코딩] JavaScript 문법 - 객체

저작자표시 비영리 변경금지