[JS]모듈

모듈이란

로직들을 재사용할 수 있도록 별도의 모듈로 떼어내어 이걸 또 다른 프로그램에 응용할 수 있도록 한다. 

 

하지만 자바스크립트에서는 모듈이라는 개념이 분명하게 존재하지 않는다고 한다. 자바스크립트가 구동되는 환경을 호스트 환경이라고 하는데 그 호스트 환경에 따라 다른 언어의 모듈처럼 사용할 수 있는 방법들을 제공하고 있다.

 

간단한 코드를 가져와봤다. 

이 코드중 빨간 네모안에 있는 코드를 다른 파일에도 중복이 된다면 굳이 반복적으로 쓰지 않고 하나에 파일로 묶고 저 빨간 네모 안에 있는 코드를 지우고 main.js라는 스크립트 파일을 만들어 파일안에 코드를 다시 넣어보았다.

이 상태로 실행한다면 될까?

하지만 되지 않는다.

왜냐면 main이라는 파일을 불러오지 않아서이다.

head 부분에 

<script scr="main.js"></script>

 

이렇게 불러준다면 

이렇게 정상적으로 처리가 된다.

 

 

 

라이브러리

모듈과 비슷한 개념이지만 자주 사용된는 로직을 재사용하기 편하도록 정리된 코드들의 집합이라고 한다. 

 

 

사람들이 많이 사용하는 것들 중 하나는

https://jquery.com/

jQuery

이다. 여기서 파일을 다운받고 자바스크립트 코드를 읽어와야한다. 

제이쿼리는 간단하게 명령어들의 집합이라고 할 수 있다.

라이브러리를 잘 사용하기 위해서 파일을 가져오는 것과 그 라이브러리의 어떤 기능이 있는지 파악하는 것이 좋다.

 

제이쿼리 파일을 다운로드를 해서 복붙과 저장으로 불러오는 것과 링크로 불러오는 것이 있다 난 링크로 불러오는 것으로 하겠다. 

 

간단한 코드를 가져와 봤다. 자바스크립트로 이벤트 처리를 해보았다. ul안에 있는 onclick=alert(this.tagName)이 무엇이냐면 이 ul를 클릭했을 때 태그명이 나오는 코드이다. 

이렇게 페이지에 나오다가

ul를 클릭하게 되면

이렇게 태그 명이 뜬다. 

 

 

이렇게 간단한 코드를 실행해보았다. 아직 간단한 코드이지만 하면 할 수록 더 어려워져 더 사용해보고 응용해보아야겠다. 

 

참고자료는 

https://opentutorials.org/course/743/4750