JavaScript Module
특정 기능을 하는 부분을 함수로 만든 것
- 재사용성
- 기능이 필요한 곳에서 - 유지보수
- 범용적 사용
- 다른 사람이 만든 훌륭한 코드를 import해서 사용가능하다
CommonJS
- 모든 모듈은 자신만의 독립적인 실행 영역이 있어야 한다 => scope
- 모듈 정의는 전역객체인 exports 객체를 이용한다
- 모듈 사용은 require 함수를 이용한다
ES6 Module
// getMsg.js
function getMsg() {
// code
}
export default getMsg;// display.js
import getMsg from './getMsg';
function display() {
getMsg();
}
export default display;// app.js
import display from './display';
display();Bundler
- 필요한 파일들을 묶어서 하나의 파일로 만들어
HTML에서<script>태그로 로딩될 수 있도록 만들어 준다 - 의존성이 있는 여러가지 js 파일들을 bundler가 하나로 만들어줌
사용하는 이유?
- 브라우저에서 es6 module(import, export)를 지원하지 않기 때문에
장점
- 모듈화를 할수록 전송해야 할 파일들이 늘어나면 한 파일을 요청, 응답할때마다 시간이 지연되는데 bundler를 통해 한파일로 묶어서 전송하면 요청, 응답에서 발생하는 시간지연이 사라진다
- 효율적으로 파일을 받아서 실행할 수 있다
Youtube API
youtube API를 어떻게 사용할 수 있을까?
- API : 클라이언트와 서버가 소통할 수 있는 인터페이스
👩🏻💻 🚀