섹션 10. 모듈
1강. 모듈이란?
1) 모듈
부품을 의미
재사용할 수 있는 단위로 구획화하여 모듈화 하고, 다른 프로그램에 사용한다.
자주 사용하는 코드를 별도의 파일로 만들어서 필요할 때마다 재활용
코드 수정 시에 필요한 로직을 빠르게 찾을 수 있다.
2) 호스트 환경
자바스크립트가 구동되는 환경을 의미한다.
2강. 모듈화
src : 속성
main.html 파일
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<script src="greeting.js"></script>
</head>
<body>
<script>
alert(welcome());
</script>
</body>
</html>greeting.js 파일이 모듈이다.
function welcome(){
return 'Hello World^_^';
}이 모듈은 여러 군데에서 쓰일 수 있다.
sub.html 파일
<!DOCTYPE html>
<html>
<head>
<script src="greeting.js"></script>
</head>
<body>
<script>
welcome();
</script>
</body>
</html>
위의 예시에서는 greeting.js가 main, sub에서만 쓰였지만 실제로는 더 복잡한 함수를 더 많은 페이지에 넣기 때문에 일을 훨씬 간편하게 할 수 있다.
3강. Node.js의 모듈화
Node.js란?
서버쪽 JavaScript
Node.js에서 모듈의 로드가 가능함
node.circle.js : 로드될 대상
node.demo.js : 로드의 주체
var circle = require('.node.circle.js');
뒤에 가져오고자 하는 파일을 언급하면 circle이라고 하는 변수에 담는다.
4강. 라이브러리
- 모듈 : 프로그램을 구성하는 작은 부품
- 라이브러리 : 자주 사용되는 로직을 재사용하기 위해 모아 놓은 일련의 코드 집합
- 좋은 라이브러리를 선택하고 잘 사용하는 것이 프로그램의 핵심이다.
- 목적을 달성하기 위한 코드들의 집합이라 효율적이다.
jQuery
What is jQuery? jQuery is a fast, small, and feature-rich JavaScript library. It makes things like HTML document traversal and manipulation, event handling, animation, and Ajax much simpler with an easy-to-use API that works across a multitude of browsers.
jquery.com
jQuery API Documentation
jQuery is a fast, small, and feature-rich JavaScript library. It makes things like HTML document traversal and manipulation, event handling, animation, and Ajax much simpler with an easy-to-use API that works across a multitude of browsers. If you're new t
api.jquery.com
API Documentation
- jQuery가 우리에게 제공하는 명령어들의 리스트라고 생각하면 됨
- 파일을 가져오는 것과
- 어떤 파일이 있는지를 아는 것이 라이브러리를 사용하는 핵심
5강. 라이브러리 사용하기
jquery.js 파일을 만들고 라이브러리를 붙여 넣는다.
jQuery.demo.html 파일을 만들고 파일을 넣는다.
<html>
<head>
<script src="jquery.js"></script>
</head>
<body>
<ul id="list">
<li>empty</li>
<li>empty</li>
<li>empty</li>
<li>empty</li>
<li>empty</li>
</ul>
</body>
</html>파일을 넣은 후에는 개발자도구에서 jquery.js가 생겼는지 확인
$ : jquery의 약속
# : id값이 list인 태그를 가리킴
그리고 버튼이 들어간 코드를 작성하고 실행
<html>
<head>
<script src="jquery.js"></script>
</head>
<body>
<ul id="list">
<li>empty</li>
<li>empty</li>
<li>empty</li>
<li>empty</li>
<li>empty</li>
</ul>
<input type="button" value="execute" id="execute_btn" />
<script type="text/javascript">
$('#list li').text('coding everyday');
</script>
</body>
</html>
코드를 수정했는데도 아무 일도 일어나지 않았다.
그래서 챗GPT에게 물어보니, jQuery가 제대로 로드되지 않았기 때문이라고 한다.
그래서 코드를 바꾸고 실행하니 역시나 됐다.
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<ul id="list">
<li>empty</li>
<li>empty</li>
<li>empty</li>
<li>empty</li>
<li>empty</li>
</ul>
<input type="button" value="execute" id="execute_btn" />
<script type="text/javascript">
$('#execute_btn').click(function(){
$('#list li').text('coding everyday');
})
</script>
</body>
</html>
'JavaScript' 카테고리의 다른 글
| 0032. JavaScript 공부하기7 - (시즌2) 유효범위, 전역변수, 지역변수, 함수지향, 콜백, 비동기적 처리, Ajax (1) | 2024.01.05 |
|---|---|
| 0031. JavaScript 공부하기6 - UI, API 소개 및 JavaScript 정규표현식 (2) | 2024.01.04 |
| 0029. JavaScript 공부하기4 - 함수(Function), 배열(Array), 객체(Object) (1) | 2024.01.03 |
| 0028. JavaScript 공부하기3 - 반복문(while, for, break, continue) (1) | 2024.01.03 |
| 0027. JavaScript 공부하기2 - 연산자, 부정, 부등호, 조건문, Boolean (Feat. 잘못된 코딩 공부순서) (1) | 2024.01.02 |
