05. 최신 자바스크립트 문법과 기능

5.1 애플리케이션 분리의 중요성

• 모듈형 자바스크립트는 애플리케이션을 모듈이라는 단위로 쪼갤 수 있다.
• 애플리케이션이 모듈형이라는 것은 잘게 분리된 모듈로 구성되었음을 뜻한다.
• 이렇게 이루어진 느슨한 결합은 의존성을 낮추어 애플리케이션의 유지보수를 용이하게 만든다.

5.2 모듈 가져오기와 내보내기

• 모듈을 사용하면 각 기능에 맞는 독립적인 단위로 코드를 분리할 수 있다.
• 또한 모듈은 코드의 재사용성을 높여 다른 애플리케이션에도 같은 기능을 적용할 수 있게 한다.
• 모듈형 언어가 되기 우해서는 의존성을 가진 모듈을 가져오고, 내보낼 수 있어야 한다.
• 이에 자바스크립트 모듈 ( 또는 ES 모듈) 은 ES2015부터 import 키워드를 통해 의존성을 가진 모듈을 가져올 수 있게 되었다.
• 마찬가지로 export 키워드를 통해 모듈을 내보낼 수 있게 되었다.
• 일반적으로 모듈 파일은 여러 함수, 상수 및 변수를 가지고 있고 파일 끝부분에서 내보내고 싶은 모듈을 객체로 정리하여 하나의 export문으로 단번에 내보낼 수 있다.

5.3 모듈 객체

• 모듈을 객체로 가져오면 모듈 리소스를 깔끔하게 가져올 수 있다. 이렇게 하면 객체 하나만으로 여러 곳에 사용할 수 있다.

5.4 외부 소스로부터 가져오는 모듈

• ES2015부터는 외부 소스에서 가져오는 원격 모듈(예: 서드 파티 라이브러리)을 쉽게 가져올 수 있게 되었다.

5.5 정적으로 모듈 가져오기

• 정적 가져오기는 메인 코드를 실행하기 전에 먼저 모듈을 다운로드하고 실행해야 한다. 따라서 초기 페이지 로드 시 많은 코드를 미리 로드해야 하므로 성능에 문제가 생길 수도 있다.

5.6 동적으로 모듈 가져오기

• 지연 로딩 모듈을 사용하면 필요한 시점에 로드할 수 있다.
  • 예를 들어 사용자가 링크나 버튼을 클릭할 때 로드하게 만들 수 있어 초기 로딩 시간을 줄일 수 있다.
• 동적 가져오기는 함수와 비슷한 새로운 형태의 가져오기이다.
• import(url)는 요청된 모듈의 네임스페이스 객체에 대한 프로미스 객체를 반환한다.
• 이 프로미스 객체는 모듈 자체와 모든 모듈 의존성을 가져온 후, 인스턴스화하고 평가한 뒤에 만들어진다.

5.6.1 사용자 상호작용에 따라 가져오기

• 채팅 창이나 다이얼로그, 비디오 등의 일부 기능은 사용자가 상호작용할 때만 필요할 수도 있다.
• 이러한 기능들은 페이지 로드 시점에 필요하지 않으므로 사용자가 컴포넌트를 클릭하는 등의 상호작용에 따라 로드되는 것이 좋다.

5.6.2 화면에 보이면 가져오기

• IntersectionObserver API를 사용하면 컴포넌트가 화면에 보이는지 감지할 수 있고, 이에 따라 모듈을 동적으로 로드할 수도 있다.

5.7 서버에서 모듈 사용하기

• Node 15.3.0 버전 이상에서는 자바스크립트 모듈을 지원한다.
• Node는 type이 module이라면 .mjs와 .js로 끝나는 파일을 자바스크립트 모듈로 취급한다.

5.8 모듈을 사용하면 생기는 이점

• 한 번만 실행된다.
  • 기존 스크립트는 DOM에 추가될 때마다 실행되는 반면에 모듈 스크립트는 한 번만 실행된다.
• 자동으로 지연 로드된다.
  • 즉시 로드되지 않기 위해 다른 스크립트 파일은 defer 속성을 붙여야 하지만, 모듈은 자동으로 지연되어 로드된다.
• 유지보수와 재사용이 쉽다.
  • 모듈은 다른 모듈에 영향을 주지 않고 독립적으로 실행될 수 있는 코드 조각으로 관리되기 때문에 여러 다른 함수에서 동일한 코드를 재사용할 수 있다.
• 네임스페이스를 제공한다.
  • 모듈은 관련 변수와 상수를 위한 개별 공간을 생성하여 글로벌 네임스페이스를 오염시키지 않고 모듈 참조를 통해 사용할 수 있게 해준다.
• 사용하지 않는 코드를 제거한다.
  • 모듈을 통해 코드를 가져오게 되면 트리쉐이킹을 통해 사용하지 않는 모듈을 자동으로 제거할 수 있다.

5.9 생성자, 게터, 세터를 가진 클래스

• 모듈과 클래스의 차이점은 모듈은 가져오기와 내보내기를 통해, 클래스는 class 키워드를 통해 정의할 수 있다는 점이다.
• 자바스크립트 클래스는 static 키워드를 통해 정적 메서드와 프로퍼티를 정의할 수 있다. 정적 멤버는 클래스를 초기화하지 않고도 사용할 수 있으며 주로 어떠한 설정이나 캐시 데이터를 보관하기 위해 사용된다.