모듈 import, export

greenTea·2023년 11월 12일

모듈 import, export

🤔모듈 시스템은 JavaScript 프로그래밍, Node.js 환경에서 중요한 부분입니다. 모듈은 코드를 분리하고 재사용하기 쉽게 만들어주며 만약 프로젝트가 거대해질 경우에는 기능 별로 나눠서 관리하기 해야하는데 이 때 모듈 시스템은 정말 좋은 방법중에 하나입니다.

JavaScript에서 모듈을 내보내고 가져오는 주요 방법은 ES6 모듈 (import/export)과 CommonJS 모듈 (require/module.exports) 시스템입니다.

준비 과정

프로젝트 초기화 및 의존성 관리

프로젝트 디렉토리 생성:
- 프로젝트에 사용할 새로운 디렉토리를 생성합니다. 저는 mine이라는 이름으로 디렉토리를 만들었습니다.
NPM 초기화 (npm init):
- 프로젝트 디렉토리 내에서 터미널을 열고 npm init 명령을 실행합니다. 해당 과정이 종료되면 package.json 파일이 생성됩니다.
의존성 설치 (npm install):
- 프로젝트에 필요한 외부 라이브러리나 프레임워크가 있다면 npm install <패키지명> 명령을 통해 설치할 수 있습니다. 저는 그냥 npm install만 해주었습니다.

프로젝트 구성 및 모듈 사용

ES6 모듈 사용 설정:
- 프로젝트에서 ES6 모듈을 사용하려면 package.json에 "type": "module"을 추가할 수 있습니다.
- 이 설정을 추가하면 프로젝트 내의 JavaScript 파일들이 ES6 모듈로 취급됩니다.

1. ES6 모듈 (Import/Export)

🫠ES6 모듈 시스템에서는 import와 export 키워드를 사용하여 모듈을 가져오고 내보냅니다.

내보내기 (Export):
```
// first.js
export function first() {
    console.log('first!!!');
}
```
😑 여기서 first 함수는 export 키워드를 사용하여 다른 파일에서 사용할 수 있도록 내보내집니다.
가져오기 (Import):
```
// 다른 파일
import { first } from './first.js';

first(); // 'first!!!' 출력
```
import 구문을 사용하여 first.js 파일에서 first 함수를 가져와서 사용할 수 있습니다.

만약 실행이 안된다면...

package.json에 "type":"module"가 적혀 있는지 확인해 주시면 됩니다.

2. CommonJS 모듈 (Require/Module.exports)

😎CommonJS 문법입니다. 여기서는 require와 module.exports를 사용합니다.

내보내기 (Module.exports):
```
// second.js
function second() {
    console.log('second!!!');
}

module.exports = second;
```
second.js 파일에서 second 함수를 module.exports에 할당하여 내보냅니다.

가져오기 (Require):
```
// 다른 파일
const second = require('./second');

second(); // 'second!!!' 출력
```
require 함수를 사용하여 second.js 파일에서 second 함수를 가져옵니다.

2개 이상 내보내기-
만약 2개 이상의 값을 내보내고 싶다면 아래와 같이 사용하시면 됩니다.

function second() {
    console.log('second!!!');
}
function second1() {
    console.log('second 2 !!!');
}
module.exports = {second,second1};

import

const {second,second1} = require('./second.cjs');
second();
second1();

구조 분해 할당 방식으로 가져와 사용할 수 있습니다.

만약 실행이 안된다면...

😰package.json에 "type":"module"이 있을 경우 ES6로 동작하기 때문에 exports가 동작하지 않을 수 있습니다. 이런 경우 확장자를 .cjs로 변경하시고 나서 사용하시면 됩니다.

3. CommonJS 모듈 (Exports 객체 사용)

CommonJS 모듈 시스템에서는 exports 객체를 사용하여 여러 함수나 변수를 내보낼 수 있습니다.

내보내기 (Exports):

// third.js
function third() {
    console.log('third!!!');
}

function third2() {
    console.log('thrid 2  !!!');
}

exports.third = third;
exports.third2 = third2;

third 함수를 exports 객체의 속성으로 추가합니다.

가져오기 (Require with Exports):
```
// 다른 파일
const obj = require('./third');

obj.third(); // 'third!!!' 출력
obj.third2();// thrid 2  !!! 출력
```
🤓require를 사용하여 third.js 파일을 가져오고, obj.third로 함수를 호출합니다.

greenTea

greenTea입니다.

이전 포스트

String,StringBuffer,StringBuilder

다음 포스트

모듈 import, export