개발 일기

모듈과 라이브러리 본문

Tech/Javascript

모듈과 라이브러리

flow123 2021. 10. 19. 22:37

모듈

함수보다 큰 개념.

연관되어 있는 함수/변수를 모아서 파일로 쪼개기.

호스트환경에 따라서 모듈화 방법이 다르다.

 

함수가 여러번 호출된다면? 여러 html 에서 함수가 호출된다면? 이럴 때 모듈이 필요하다.

아래 코드를 보면, greeting.js 를 자바스크립트 파일로 분리한다.

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

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

 

모듈과 라이브러리

모듈: 프로그램을 구성하는 작은 부품으로서의 로직

라이브러리: 자주 사용되는 로직을 재사용하기 편리하도록 정리한 일련의 코드 집합.

<!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>

API 란?

Application Programming Interface: 프로그래밍이 동작하는 환경을 제어하기 위해서 환경에서 제공되는 조작 장치. 이렇게 말하면 조금 어려운 감이 있다. 

웹 개발에서 API 는 주로 서버가 클라이언트의 요청을 받기 위해서 열어둔 창구라고 생각하면 된다. 

서버에 요청할 때는 POST, GET 같은 AJAX CALL 을 한다. 

 

네이버, 카카오 지도 API (오픈소스) 처럼 미리 만들어놔서 갖다 쓰기만 하면 기능 구현이 가능한 것도 API 라고 한다. 

 

API 와 UI 

alert 경고창을 생각해보자. 경고창은 특정 코드를 전달하면, 경고창을 띄우도록 API 개발자가 미리 만들어 둔 것이다. 

경고창은 사실상 복잡한 프로그램인데 웹 개발자 입장에서는 ALERT 명령어만 입력하면 쉽게 가져올 수 있다.

 

사용자는 UI 로 시스템 제어. 개발자는 API 이용해서 맥락에 맞게 웹브라우저를 제어함.

우리가 제공된 API 로 개발하는 것처럼, 웹 브라우저 개발자들은 운영체제가 제공하는 API 로 웹브라우저를 만든다.

 

* 이고잉님의 생활코딩 Javascript 강의를 듣고 적은 노트입니다.  

'Tech > Javascript' 카테고리의 다른 글

자바스크립트 - 함수 / 배열 / 객체  (0) 2021.10.19
'Tech/Javascript' Related Articles more
Comments