티스토리 뷰
1. 모듈이란?
- 순수한 자바스크립트에서는 모듈(module)이라는 개념이 분명하게 존재하지는 않는다. 하지만 자바스크립트가 구동되는 호스트 환경에 따라서 서로 다른 모듈화 방법이 제공되고 있다.
호스트 환경이란?
호스트 환경이란 자바스크립트가 구동되는 환경을 의미한다. 자바스크립트는 브라우저를 위한 언어로 시작했지만, 더 이상 브라우저만을 위한 언어가 아니다. 예를들어 node.js는 서버 측에서 실행되는 자바스크립트다. 이 언어는 자바스크립트의 문법을 따르지만 이 언어가 구동되는 환경은 브라우저가 아니라 서버측 환경이다. 또 구글의 제품 위에서 돌아가는 Google Apps Script 역시 자바스크립트이지만 google apps script가 동작하는 환경은 구글 스프레드쉬트와 같은 구글의 제품 위이다. 여러분은 자바스크립트의 문법을 이용해서 PHP와 같은 서버 시스템을 제어(node.js)하거나 구글의 제품(Google Apps Script)을 제어 할 수 있다. 지금 당장은 어렵겠지만, 언어와 그 언어가 구동되는 환경에 대해서 구분해서 사고 할 수 있어야 한다. 이를 위해서는 다양한 언어를 접해봐야 한다.
1-1. 모듈의 사용
- greeting.js
function welcome(){
return 'Hello world';
}-main.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<script src="greeting.js"></script>
</head>
<body>
<script>
alert(welcome());
</script>
</body>
</html>JavaScript와 HTML은 완전히 다른 문법을 가진 언어다. 그런데 HTML 문서 안에는 JavaScript와 HTML이 동시에 표현된다. 따라서 브라우저에게 어디서부터 어디까지가 JavaScript이고, HTML인지를 구분해서 알려줘야 한다. 이 역할을 하는 HTML 태그가 script 태그다. script 태그 안쪽에 위치하는 컨텐츠는 브라우저에 의해서 JavaScript로 인식된다. 그런데 위의 코드는 컨텐츠 대신에 src 속성이 있다. 브라우저는 src 속성에 있는 파일을 다운로드해서 실행시킨다. greeting.js에는 함수 welcome가 정의되어 있기 때문에 main.html 안에 이 함수가 정의 되어 있지 않음에도 실행할 수 있는 것이다.
2. 라이브러리란?
- 라이브러리는 모듈과 비슷한 개념이다. 모듈이 프로그램을 구성하는 작은 부품으로서의 로직을 의미한다면 라이브러리는 자주 사용되는 로직을 재사용하기 편리하도록 잘 정리한 일련의 코드들의 집합을 의미한다고 할 수 있다. 프로그래밍의 세계에는 휼룡한 라이브러리가 많다. 좋은 라이브러리를 선택하고 잘 사용하는 것은 프로그래밍의 핵심이라고 할 수 있다.
2-1. 라이브러리의 사용
- 유명 라이브러리인 jQuery를 사용하는 방법
- jquery.js
(jQuery 홈페이지에서 파일을 다운로드 받는다. http://jquery.com/)
- jQuery.demo.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery example</title>
<script type="text/javascript" src="jquery.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>
3. UI와 API의 차이점
- User Interface
: 컴퓨터 시스템과 컴퓨터 사용하는 사람 사이의 접점에 위치하면서 입력장치, 출력장치들에 해당되는 접점/중계자에 해당하는것을 USER INTERFACE라 한다. 시스템 입장에서 UI는 사용자를 대면하는 접점이 되는 지점을 포괄적으로 이야기 하는 것이다.
사이트의 버튼 등도 다 UI이다. 노트북의 UI는 물리적인 기계 조작장치(버튼을 누르거나, 터치패드를 움직이거나...)가 있는 하드웨어적 UI라 한다면, 이는 소프트웨어로 구현된 것이지만 사용자의 의중을 시스템에게 전달하고, 시스템의 상태를 사용자에게 보여준다는 점에서 이것도 UI라 할 수 있다.
- Application Programming Interface
: 브라우저 주소창에 javascript:alert("Hello World"); 라고 쳐보면 Hello World라고 써져있는 경고창이 뜰 것이다.
"이 경고창은 내가 만든 것일까 아닐까?"
경고창을 닫기 위해 x표시를 누르면 그 부분이 빨간색으로 변하고, tooltip으로 닫기 라는 멘트가 뜬다. 또 확인 버튼을 눌렀을 때도 색상이 바뀌며 확인버튼을 누르기 전에 경고창 옆 부분을 클릭하면 땡땡땡 거리며 어떤 UI도 사용할 수 없게 해 놓았다. 또 경고창이 화면의 가운데에 위치하고 있는데 이 또한 우리가 한 것이 아니다. 이런점에서 경고창은 우리가 만든 것이 아니다.
그 반면에 경고창이 실행된 이유는 alert라는 명령을 브라우저에 전달했기 때문이고, Hello World라는 메세지도 전달했기 때문이다. 이런 점에서 이 경고창은 우리가 만든 것이 아닌 동시에 우리가 만든 것이기도 하다. 이 alert라는 명령은 우리에게 있어서 웹브라우저를 제어하기 위한 interface인 것이다.
하지만 이 interface는 일반적인 사용자가 사용하는 버튼이나 scrollbar 같은 인터페이스는 아니고, 코드형태를 가지고 있는 interface이다. 우리는 이러한 코드들, 웹브라우저를 제어하기 위한 코드를 다양한 방법으로 결합해서 애플리케이션을 만든다. 이런 점에서, alert 같은 interface를 사용자 interface와 구분하기 위해 이를 Application Programming Interface라 부르는 것이다.
'Web > JavaScript jQuery' 카테고리의 다른 글
| [JavaScript] 유효범위 (0) | 2020.01.14 |
|---|---|
| [jQuery] 폼 (0) | 2020.01.09 |
| [jQuery] 엘리먼트의 제어 (0) | 2020.01.08 |
| [jQuery] event (0) | 2020.01.07 |
| [jQuery] chain (0) | 2020.01.07 |