[ES6] 라이브러리 의존성 관리

 

Do it! 리액트 프로그래밍 정석 책과 다른 책을 참고하며 공부한 내용을 정리하는 글입니다.

 

---

 

의존성

어떤 파일이나 코드가 다른 파일이나 코드를 필요로 하는 것을 뜻함

 

---

기존 자바스크립트의 라이브러리 의존성 관리 방법

기존 자바스크립트는 라이브러리나 모듈을 관리하는 방법이 매우 불편했음

 

1. script 와 같은 엘리먼트를 이용하여 관리

    <script src="script.js"></script>
    <script src="제이쿼리.min.js"></script>

• script.js 를 먼저 참조할 경우 정의되지 않는 함수를 참조하는 의존성 문제가 발생

 

---

 

ES6 라이브러리 의존성 관리 방법

 

1. import 구문 사용

script 엘리멘트 없이 연결된 파일 및 의존 파일을 먼저 모두 내려 받고 코드를 구동하는 방식

import MyModule from './MyModule.js'; //기본
import { ModuleName } from './MyModule.js'; //명명하여 참조가능
import { ModuleName as RenamedModuleName } from './MyModule.js'; //이름이 충돌할 경우 다른 이름으로 명명
function Func() {
    MyModule();
}
export const CONST_VALUE = 0; //다른 파일에서 참조할 수 있도록 export정의
export class MyClass {}; //다른 파일에서 참조할 수 있도록 export정의
export default new Func(); //현재 파일이 다른파일에서 참조될 수 있도록 기본 정의

• import 구문을 사용해 지정된 파일 (MyModule.js) 의 기본 (default) 으로 공유하는 모듈을 불렀음
• 이름을 맞춰 모듈 안의 특정 함수 혹은 변수를 참조할 수 있음
• 객체 구조 할당과 유사하게 특정 모듈을 가져올 때 이름이 충돌할 경우 다른 이름으로 변경하여 불러들일 수 있음.
• 변수나 클래스의 이름을 다른 파일에서 따로 참조할 수 있도록 정의함
• 현재 파일이 다른 파일에서 기본(default) 으로 참조하게 되는 항목을 정의