js의 모듈 시스템

js 모듈 시스템이란 파일을 잘게 쪼개서 코드를 조각으로 만들고 그 조각들을 사용할 수 있게 해주는 프로그램이다.
프로그램 관리가 용이하고, 디버깅, 테스트, 통합, 수정시에 용이하다.

다음 두 가지에 대해 설명하겠다.

• commonjs
• esm

common js

nodejs에서 주로 사용되며 , 서버사이드에서 적용가능하며, exports, module.exports, require 문법을 사용한다.
.cjs 확장자 사용

• module.exports

const age = 20;
module.exports.age = age;

const person = require('./person')
console.log(person.age) // 20

module이라는 객체 안에 exports의 객체안에 age가 담기는 것이다.

Module {
  ...
  exports: { age: 20 }, // exports 라는 객체 안에 age 프로퍼티 생성
  parent: Module {/*...*/},
}

• exports
  exports 도 module.exports와 비슷하게 수행한다.
  exports가 module.exports를 찹조하고 있기 때문에 두개를 동일하다고 할 수 있다.
  두가지는 같이 사용하는 것을 지양한다.

• repuire
  다른 모듈 파일을 불러오는 명령어다.

{"data" : "Hello"}
const data = require('./data')
consol.log(data) // Hello

ESM

프론트엔드에서 사용되어지는 언어 자체에 탑재되었으며 export, import 문법을 사용한다.
.mjs 확장자 사용

• named export
  - named export는 선언된 변수명을 그대로 export하는 방식
  모듈 내에 여러개의 export 존재 가능, 정의 된 변수를 모아서 내보내거나, 정의된 함수를 별칭으로 바꿔서 내보낼 수 있음.

  // ex 선언하면서 export 
  export const a1;
  export let a2;
  export var a3;
  export function a4(){};
  
  // ex 한번에 export 
  const name1;
  let name2;
  var name3;
  export {name1, name2, name3}
  
  // ex 별칭으로 바꿔서 내보내기
  let age
  export { age as age1}

  export를 사용해서 내보내면 import를 할 때에 밑에와 같은 방식으로 import 해야한다.

  import { name } from './name'

• export default
  export default를 사용해서 import 할때는 밑에와 같은 방식으로 import 해야한다.

  import name from './name'

• export from

  //export와 from을 함께 쓸 수 있음
  //export from은 import와 export를 한번에 처리할 수 있는데,  
  //Node.js 같은 서버 사이드가 아닌 클라이언트 사이드의 환경에서는 from을 사용할 때 .js 확장자를 적어야 한다.
  export { name } from './name'
  //이것을 다시 import해서 다른 어떠한 폴더에서 사용할 수 있음