Javascript Module System

[hwinkr]

Questions

1. 자바스크립트에서 모듈은 원래 존재하지 않던 개념인데 필요하게 된 배경에 대해서 아시는대로 설명해 주세요.
2. 모듈의 특징에는 어떤 것들이 있을까요?
3. 자바스크립트에서 어떤 모듈이나 자바스크립트 파일을 가져오기 위해서 require와 import를 사용하잖아요, 이 둘의 차이점에 대해서 이야기해주세요.
4. ES6 모듈 시스템에서 import는 왜 호이스팅처럼 동작하나요?

[hwinkr]

1. 자바스크립트에서 모듈은 원래 존재하지 않던 개념인데 필요하게 된 배경에 대해서 아시는대로 설명해 주세요.

자바스크립트 생태계에 모듈 시스템이 등장하게 된 배경은 자바스크립트가 점점 더 복잡한 웹 어플리케이션을 다루게 되면서 스코프가 오염되는 문제, 파일 사이의 의존성을 관리하기 어렵다는 문제, 네임스페이스가 충돌되는 문제들을 해결하기 위해서 등장했습니다.

모듈 시스템이 없었을 때는, 모든 변수와 함수는 사실 전역에 선언하는 것과 마찬가지였습니다. 이로 인해서 다른 파일에 동일한 이름을 가지는 변수가 이미 존재하는 경우 변수가 충돌하는 문제, 의도하지 않는 값이 참조되는 문제가 있었습니다.

그리고 자바스크립트의 파일을 나눌 수는 있었지만 파일 간 의존성을 명시적으로 표현할 방법이 없었습니다. 그래서 여러개의 자바스크립트 파일이 서로 의존성을 가질 때, 로드 순서에 따라서 코드가 정상적으로 실행 될수도, 에러가 발생할 수도 있었기 때문에 로드 순서를 신경써서 코드를 작성해야 하는 불편함이 있었습니다. 이러한 문제를 해결하기 위해서 파일을 나누지 않을수도 있겠지만, 그렇다면 코드의 재사용성 관점에서 너무 단점이 많았습니다.

이러한 문제점을 해결하기 위해서 자바스크립트 생태계에 모듈 시스템이라는 개념이 등장했습니다.

[hwinkr]

2. 모듈의 특징에는 어떤 것들이 있을까요?

1. 모듈 시스템은 각 모듈이 독립적인 스코프를 가지게 되므로, 모듈 내부에서 선언된 변수 & 함수가 전역 스코프에 영향을 미치지 않게 됩니다.
2. 모듈 시스템을 사용하면, 로드 순서가 아니라 import export 키워드로 각 모듈 사이의 의존성을 명확하게 표현할 수 있습니다.
3. 모듈은 자바스크립트 코드를 실행할 때, 단 한 번만 평가되기 때문에 동일한 모듈을 여러 곳에서 사용하더라도, 최초 호출 시 단 한 번만 실행됩니다.

[hwinkr]

3. 자바스크립트에서 어떤 모듈이나 자바스크립트 파일을 가져오기 위해서 require와 import를 사용하잖아요, 이 둘의 차이점에 대해서 이야기해주세요.

• ko.javascript - 동적으로 모듈 가져오기
• medium - 자바스크립트 표준 정의
• f-lab-kr - commonJS vs esmoudle
• hooninedev - import vs dynamic import

import, require 모두 자바스크립트 모듈을 불러오는 키워드이지만 각 키워드는 다른 모듈 시스템에 속하며 동작 방식에서 차이가 있습니다.

require는 CommonJS 모듈 시스템에서 특정 모듈을 불러오는 키워드입니다. require는 모듈을 동기적으로 로드하고 실행하는 방식입니다. 즉, require가 호출되는 순간 모듈을 로드하고, 해당 모듈이 완전히 평가 된 후, 코드가 실행됩니다. 동기적으로 모듈이 로드되기 때문에, require 호출 이후 코드가 블로킹된다는 특징이 있습니다.

CommonJS 모듈 시스템은 Node.js와 같이 자바스크립트를 사용해서 서버사이드 환경을 개발할 때, 사용하기 좋습니다.

💫 why?

• 서버사이드 환경에서 CommonJS 모듈 시스템을 주로 사용하는 이유

그 이유는 서버 환경에서는 동기적으로 코드가 실행되는 것이 더 효율적일 수 있습니다. 그리고, 브라우저에서 실행하는 것이 아닌 서버의 파일 시스템에서 모듈을 로드하기 때문에 네트워크 지연이 발생하지 않아 동기적 로드 방식을 사용해도 성능 저하가 크지 않습니다.

서버사이드 환경에서는 순차적 코드 실행이 중요합니다. 서버가 클라이언트 요청을 처리할 때, 설정 파일 로드 → 데이터베이스 연결을 설정 → 이후 작업 처리…처럼 순차적으로 코드를 실행해야 하기 때문에 중요합니다

---

반면, import는 ES6 모듈 시스템**(표준 모듈 시스템)**에서 특정 모듈을 불러오는 키워드입니다. import는 비동기적으로 모듈을 로드하고, 평가가 완료된 후 코드가 실행됩니다. 비동기적으로 로드되기 때문에 특정 모듈이 로드되는 동안 코드의 다른 부분이 실행될 수 있습니다.

ES6 모듈 시스템은 브라우저 환경에서 사용되는 모듈 시스템입니다. 브라우저 환경에서 네트워크 지연으로 인해서 특정 모듈 로드가 오래걸릴 수 있는 경우, 로드가 완료될 때까지 기다리지 않고 다른 작업을 먼저 처리할 수 있기 때문입니다.

[hwinkr]

4. ES6 모듈 시스템에서 import는 왜 호이스팅처럼 동작하나요?

→ import 구문을 사용해서 가져온 모듈은 평가 단계에서 모두 로드된다.

→ import 구문을 만나면 비동기적으로 로드를 시작하며, 호이스팅되는 것 처럼 동작한다.

→ 완전히 로드된 후 실행되기 때문에 코드 내에서는 Promise, then을 사용할 필요가 없다.

→ 정적 import도 비동기적으로 모듈을 로드한다.

→ 코드의 정적 분석을 쉽게 하기 위해서, 정적 import 키워드로 모듈을 가져올 때 코드를 평가하는 단계에서 모두 로드되도록 한다. 어떤 모듈에서 어떤 값을 가져와서 사용할 지, 평가 단계에서 미리 결정하는 것이다. 트리 쉐이킹에도 유리하다