●이론_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 파일에 있는 paths를 careerPaths로, languages는 programmingLanguages로 가져오려고 합니다. 빈 칸에 들어갈 코드를 작성해 주세요.
- 답 :
{ 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 파일에 있는 paths와 languages를 한꺼번에 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 파일에 있는 paths와 languages를 codeit이라는 이름으로 묶어서 가져오려고 합니다. 빈 칸에 들어갈 코드를 작성해 주세요.
- 답 :
* 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에서 관점 차이 : // 사실 이건 뭔소린지 잘 모름
'CodeIt_Sprint > 자바스크립트_모듈' 카테고리의 다른 글
(4)자바스크립트_모듈_서드파티 모듈의 package-lock.json 존재의 이유, 알아두면 좋은 npm 터미널 명령 (0) | 2024.12.01 |
---|---|
(3)자바스크립트_모듈_다른 개발자가 개발한 모듈 이용하기,json 파일 알아보기 (2) | 2024.12.01 |
(1)자바스크립트_모듈_node.js환경 셋팅, export/import ,named export/ default export (1) | 2024.12.01 |