[javascript] require 와 import 모듈 로드 방식

학습자료 : https://youtu.be/KlpPYjCo0Do?si=kM8Wp3aW1eC6uy7j

require vs import

• JavaScript에서 외부 코드를 불러와 사용하는 모듈 시스템은 개발의 필수 요소.
• 하지만 오랫동안 두 가지 방식인 require와 import가 공존해 왔기 때문에 혼란스러울 수 있음.

프론트엔드와 백엔드

• 2009년 이전까지 JavaScript는 주로 웹 브라우저(프론트엔드)에서 사용자 인터랙션을 담당하는 언어였음.
• 이때는 파일 시스템 접근이나 네트워크 관리와 같은 백엔드 개발에 필요한 API가 표준으로 존재하지 않았다.

CommonJS의 등장

• 2009년, Node.js의 등장으로 JavaScript는 백엔드 영역으로 확장.
• 하지만 기존 JavaScript 표준에는 백엔드 개발을 위한 API가 부족했고, 이를 해결하기 위해 CommonJS라는 새로운 표준이 등장.
• CommonJS는 파일 시스템, 네트워크 관리 API와 더불어 모듈 관리 체계를 도입했는데, 이때 처음 등장한 모듈 로드 문법이 바로 require

결론적으로, CommonJS 환경 (주로 Node.js)에서는 require를 사용하여 모듈을 로드.

• CommonJS 환경이 아닌 곳에서 require를 사용하면 에러가 발생합니다.

프론트엔드의 모듈화 갈증과 번들러

• 프론트엔드 개발에서도 코드의 재사용성과 관리를 위해 모듈 시스템의 필요성이 꾸준히 제기되었음.
• 하지만 당시 브라우저는 CommonJS를 네이티브로 지원하지 않았고, 이러한 문제를 해결하기 위해 Webpack과 같은 번들러가 등장하여 CommonJS 환경을 흉내 내는 방식으로 프론트엔드에서 require를 사용할 수 있도록 우회적인 방법을 제공.

ES6의 등장

• 2015년, JavaScript 표준을 통합하고 현대적인 개발 환경을 지원하기 위해 ES6 (ECMAScript 2015)가 등장.
• 이때 프론트엔드에서도 모듈을 효율적으로 관리할 수 있는 새로운 문법 import가 도입.

왜 require 대신 import를 선택했을까?

import는 require에 비해 다음과 같은 장점을 제공하여 더 나은 모듈 관리 경험을 선사.

• 정적 코드 분석: import 구문은 코드 실행 전 파싱 시점에 분석이 가능합니다. 이는 코드 최적화 (예: 사용하지 않는 코드 제거 - 트리 쉐이킹) 및 번들링 과정에서 효율성을 높여줌.
• 코드 가독성 개선: import는 반드시 코드 최상단에 위치해야 하므로, 해당 파일이 어떤 모듈에 의존하는지 명확하게 파악할 수 있어 코드의 가독성을 향상.
  • 반면, require는 코드 어느 곳에서나 사용할 수 있어 의존성 파악이 어려울 수 있음.
• 명시적인 의존성: import 방식은 어떤 모듈에서 어떤 기능을 가져올지 명시적으로 선언할 수 있어 코드의 의도를 분명하게 드러냄.

현재는 import 대세지만 require도 알아야 할 이유

• 최근 Node.js는 ES6를 지원하면서 백엔드 환경에서도 import를 사용할 수 있게 되었음.
• 따라서 현대적인 JavaScript 개발 환경에서는 프론트엔드와 백엔드 모두 import를 사용하는 것이 일반적
• 하지만 여전히 다음과 같은 경우에는 require를 써야 할 수 도 있음.
  • 구형 Node.js 환경: CommonJS만 지원하는 오래된 버전의 Node.js에서는 여전히 require를 사용
  • 레거시 프로젝트: 기존에 require로 작성된 프로젝트를 유지보수해야 하는 경우 require 문법을 이해하는 것이 필수적
  • 구형 브라우저 지원: 오래된 브라우저를 타겟으로 하는 프론트엔드 프로젝트에서는 번들러를 사용하여 import 코드를 require 또는 다른 방식으로 변환해야 할 수 있음