지금까지 Node.js 로 하나의 파일을 제어하는 간단한 실습을 해봤습니다. 그러나 복잡한 애플리케이션을 만들려면 파일 하나로는 부족합니다. 이번엔 여러 개의 파일로 이루어진 패키지에서 각각의 팡리이 다른 파일을 불러와 사용하는 모듈 시스템에 대해 알아보겠습니다.
모듈과 모듈 시스템
모듈이란 독립적으로 존재하는 프로그램의 일부로 재사용이 가능한 것들을 말합니다. 모듈은 모니터나 마우스 같은 컴퓨터의 주변장치에 비유할 수 있습니다. 모니터나 마우스는 독립적으로 존재할 수 있기 때문에 사용자의 컴퓨터에서 분리해 다른 컴퓨터에 연결할 수 있습니다. 마찬가지로 프로그래밍에서 모듈은 마치 컴퓨터 부품처럼 독립적으로 존재하는 것으로, 다른 프로그램의 부품으로 활용할 수 있습니다.
앞서 언급한 웹 쇼핑몰 구축 상황을 다시 떠올려 보겠습니다. 대다수 웹 쇼핑몰 프로그램에는 로그인, 장바구니, 상품 구매 기능이 있습니다. 이 기능들을 역할별로 분리되어 있으며, 모듈로 구성하면 다른 웹 서비스를 구축할 때 언제든지 재사용할 수 있습니다. 이렇듯 재사용할 수 있고 독립적으로 존재하는 프로그램의 일부를 모듈이라 합니다.
자바스크립트에서는 독립된 하나의 파일을 '모듈' 이라고 부릅니다. 자바스크립트 모듈은 대개 특정 정보를 담은 하나의 객체거나 특정 목적을 지닌 복수의 함수로 구성하는 경우가 많습니다.
모듈을 사용하는 방법을 '모듈 시스템' 이라고 합니다. 자바스크립트엔 다양한 모듈 시스템이 있습니다. 이 책에선 리액트에서 사용하는 ES 모듈 시스템을 중심으로 살펴보겠습니다.
ES 모듈 시스템
ES 모듈 시스템은 ECMAScripts 모듈 시스템의 약자로, 줄여서 ESM 이라고 합니다. ESM 은 가장 최근에 개발된 모듈 시스템으로, 리액트, Vue 와 같은 최신 프론트엔드 기술은 모두 ESM 을 채택하고 있습니다.
ESM 사용 설정하기
Node.js 는 기본적으로 ESM 이 아닌 CJS 모듈 시스템을 사용합니다. 따라서 ESM 모듈 시스템을 사용하려면, package.json 에서 설정을 변경해야 합니다.
'React.js > 한 입 크기로 잘라먹는 React.js' 카테고리의 다른 글
| 리액트의 특징 (0) | 2023.05.17 |
|---|---|
| 라이브러리 사용하기 (0) | 2023.05.17 |
| Node.js 패키지 (0) | 2023.05.17 |
| Node.js 환경 설정하기 (0) | 2023.05.16 |
| Node.js 란? (0) | 2023.05.15 |
