1. 모듈

1-1. 모듈이란?

-> 기능별로 만들어 놓은 함수
:: 프로그램을 만들때는 최대한 기능 단위를 쪼개서 각 기능을 하나씩 해결하는 방식을 많이 사용하며 파일형태로 저장해서 필요할때마다 가져와서 사용.

1-2. CommonJS모듈 시스템 OR ES 모듈 시스템

CommonJS

• 파일 시스템에서 파일을 로드한다.
• 파일을 불러오는 동안 주 스레드를 차단한다.
• 그렇기에 파일 로드 - 구문 분석 - 인스턴스화 - 평가가 각 파일마다 바로 실행된다.
• 그렇기에 모듈 지정자에 변수를 넣을 수 있다.
• export 객체에 값을 복사해서 넣는다.

ES Module

• entry 파일의 구문 분석 후 의존성(import)을 확인해서 해당 의존성 파일을 찾아서 다시 구문 분석을 반복한다.
• 파일을 불러오는 동안 주 스레드를 차단하지 않는다.
• 인스턴스화, 평가는 더 이상 구문 분석할 의존성이 발견되지 않으면 실행한다
• 그렇기에 모듈 지정자에 변수를 넣을 수 없다(다만 동적 import를 쓰면 가능)
• export는 참조를 반환하는 함수를 정의한다.
• 동적 import는 별개의 entry 파일로 취급되어 새로운 그래프를 만든다.

이 차이는 어떤 결과를 부르는가?

export하는 파일에서 비동기 처리로 값이 바뀐다면, CommonsJS에서는 반영이 되지 않지만 ESM은 반영 될 수 있다(비동기로 다시 호출한다면).
순환 참조의 경우 CommonJS는 빈 객체를, ESM은 RefernceError를 발생시킨다.

1-2-1. 모듈 만들기

위 그림처럼 인사를 하는 프로그램이 있다고 하자,
모듈을 만들려면 가장 작은 기능으로 쪼개야 하기 때문에 이름 선언부와, 이름이 불려지는 함수부분을 나눠 모듈로 만들어보도록 하겠다.

모듈은 파일형태로 저장하기 때문에 생성하는 방법은 상당히 쉽다.

user.js 파일을 하나 만들어 상수 user를 선언해 이름을 할당해주고,

hello.js파일 도 하나 만들어서 인사하는 함수를 할당해준다.
그럼 모듈 생성 끝!

1-2-2. 모듈 내보내기

모듈 내보내는 방법은 간단하다,

생성한 모듈 파일안 마지막에 내보낸다는 module.exports문을 사용해준다

※ 함수를 정의할때 exports를 붙여 함수를 직접 내보낼 수도 있다.

1-2-3. 모듈 가져오기

모듈은 가져오는 것도 간단하다.

위 그림처럼 require()함수를 사용해서 가져온다.
여기에서 주의해야 할 점은, 가져올 파일과 생성한 모듈은 같은 파일에 존재해야하고, 파일경로는 상대 경로로 지정해야 한다는 점.

1-2-4. 둘 이상의 변수 내보내기 및 가져오기

:: 여러개의 값을 내보낼 때는 { }로 묶어서 객체형태로 내보냄

:: 받아올때도 객체 형태로 가져올 수 있음