본문 바로가기
CodeIt_Sprint/자바스크립트_모듈

(2)자바스크립트_모듈_default export로 모듈 객체화해서 사용하기, Es모듈 vs CommonJS 모듈

by 코잼민 2024. 12. 1.

●이론_1_default export 를 이용하여, 모듈 객체화 , 사용 :

○ Defalut :

- calculator.mjs :

export const PI = 3.14;

export function add(a,b){return (a+b);}

export function substract(a,b){return (a-b);}

export function multiply(a,b){return (a*b);}

export function divide(a,b){return (a/b);}

 

- main.mjs :

import {add, substract, multiply, devide} from './lib/calculator.mjs';

console.log(add(1.3,4.2));
console.log(substract(1.3,4.2));
console.log(multiply(1.3,4.2));
console.log(devide(1.3,4.2));

○ 모듈 객체화해서 main.js 사용 방법 :

- 순서1_  : [calculator.mjs]의 export된 변수, 상수들 중 일부 묶음으로 사용할 메소드들의 export를 지우고 (안지워도 되긴함) , 객체 변수를 하나 선언한뒤 , 그 메소드들을 값으로 넣는다.

- calculator.mjs

export const PI = 3.14;

export function add(a,b){return (a+b);}

function substract(a,b){return (a-b);}//순서1_얘 묶음으로 사용할 거임

export function multiply(a,b){return (a*b);}

function divide(a,b){return (a/b);}//순서1_얘 묶음으로 사용할 거임

//순서2_ 객체 선언
const set1 = {
	substract,
    divide,
}//함수 이름만 값에 넣기

//순서3_ 객체 + export default
export default set1;

- 순서2_ main.mjs에 객체 set1을 import 한다. => 사용할 땐, set1의 객체 프로퍼티로 호출

- main.mjs

import SetOne from './lib/calculator.mjs';
//export default이므로, 이름 SetOne로 바꿔서 사용가능

console.log(SetOne.substract(1.2,3.4));//substract 호출
console.log(SetOne.divide(3,1.5));//divdie 호출

 

●이론_2_export의 다른 문법인 참고 개념들 :

○ as를 이용하여, main.mjs에서 일반 export 메소드도 이름 바꿔서 호출O :

ex_ main.js :

import { PI, add as addNumbers } from './calculator.mjs';

console.log(addNumbers(1, 2));

○ as를 이용하여, 외부 js에서 여러 메소드들을 한번에 export 선언하기  :

ex_ calculator.mjs :

const PI = 3.14;

function add(a,b){return (a+b);}

function substract(a,b){return (a-b);}

function multiply(a,b){return (a*b);}

function divide(a,b){return (a/b);}

export {PI , add, substract, multiply, divide }//대괄호 이용 == 객체 export랑 같은 말임

ex_ main.mjs :

import * as Cal//사용할 객체 이름
from './lib/calculator.mjs';

console.log(Cal.add(1.3,4.3));
console.log(Cal.divide(3,1.5));
console.log(Cal.PI);

◎ 연습문제1 :

○ Defalut :

- codeit.mjs :

export const paths = [
  '컴퓨터 과학 전공',
  '데이터 사이언티스트',
  'Python 풀스택 개발자',
  'JavaScript 프론트엔드 개발자',
  'JavaScript 백엔드 개발자',
  'JavaScript 풀스택 개발자',
];
 
export const languages = [
  'python',
  'javascript',
  'sql',
  'html',
  'css',
];

- main.mjs :

import _____ from './codeit.mjs';

console.log(careerPaths);
console.log(programmingLanguages);

codeit.mjs 파일에 있는 pathscareerPaths로, languagesprogrammingLanguages로 가져오려고 합니다. 빈 칸에 들어갈 코드를 작성해 주세요.

- 답 :

{ paths as careerPaths, languages as programmingLanguages }

 

◎ 연습문제2 :

○ Defalut :

- codeit.mjs :

const paths = [
  '컴퓨터 과학 전공',
  '데이터 사이언티스트',
  'Python 풀스택 개발자',
  'JavaScript 프론트엔드 개발자',
  'JavaScript 백엔드 개발자',
  'JavaScript 풀스택 개발자',
];

const languages = [
  'python',
  'javascript',
  'sql',
  'html',
  'css',
];

export _____;

- main.mjs :

import { paths, languages } from './codeit.mjs';

console.log(paths);
console.log(languages);

codeit.mjs 파일에 있는 pathslanguages를 한꺼번에 named export하려고 합니다. 빈 칸에 들어갈 코드를 작성해 주세요.

- 답 :

{ paths, languages }

◎ 연습문제3 :

○ Defalut :

- codeit.mjs :

export const paths = [
  '컴퓨터 과학 전공',
  '데이터 사이언티스트',
  'Python 풀스택 개발자',
  'JavaScript 프론트엔드 개발자',
  'JavaScript 백엔드 개발자',
  'JavaScript 풀스택 개발자',
];

export const languages = [
  'python',
  'javascript',
  'sql',
  'html',
  'css',
];

- main.mjs :

import ____ from './codeit.mjs';

console.log(codeit.paths);
console.log(codeit.languages);

codeit.mjs 파일에 있는 pathslanguagescodeit이라는 이름으로 묶어서 가져오려고 합니다. 빈 칸에 들어갈 코드를 작성해 주세요.

- 답 :

* as codeit

●이론_3_ Es모듈 vs CommonJs모듈 :

모듈의 탄생 배경 :

- 웹브라우저내 스크립트 모듈 => 일반적으로, 간단한 동작에 대해서만 js작성하기에, 모듈화 필요성 못 느낌

- node.js 내 모듈 => 주로, 복잡한 프로그램을 다루기에, 모듈화의 필요성을 존나게 느

=> 그래서 "CommonJs"라는 모듈 문법이 탄생하게 됨

CommonJs 모듈 문법 간략 소개 :

const calculator = requir("./calculator.js");
//import calculator from './calculator.js'; //와 같은 얘기임
//차이는 얘는 calculator.js에서 작성하는 거 같음


//const calculator = {circle,square};
//export default calculator; 와 같은 얘기
module.exports = {
	circle,
    square,
}

Es모듈(ECMAScript Module)은 CommonJs 다음 세대의 모듈 문법, 현재 우리가 사용하는 문법

CommonJs모듈 vs ECMAScript 모듈 차이

- CommonJs 모듈 :

  • require / module.exports 문법
  • 웹브라우저에선 사용 X , Only Node.js에서만 사용가능

- ES 모듈 :

  • 2015년에 등장 , import , export
  • 웹브라우저에선 사용 O , Node.js 사용 O
  • js파일에선 표준 모듈 시스템 => 웹브라우저에선, 자유롭게 Es모듈 문법 사용 O
  • 반면, Node.js에서 아직 CommonJs가 더익숙함(틀딱ㅋ) , 그래서 mjs확장자를 사용해야함

"모듈"을 웹브라우저 내 <script>와 node.js에서 관점 차이 : // 사실 이건 뭔소린지 잘 모름