ES모듈 ?

• 직전 Node.js에서 배운 내용은 노드에서 자체적으로 만든 내용들이다. 노드가 사용할 수 있는 함수들.
• 그리고 JS자체 모듈 시스템 문법도 있다. 개념 자체는 동일한데 다른 형태의 문법이라고 생각하면 된다.
• 이게 ES모듈이다.

ES6 ?

• ES6(ECMAScript 6)는 ECMAScript 표준의 가장 최신 버전이라고 한다.
• 최신적인 버전으로? 코드가 간결해지고 생산성이 향상된다. 그래서 사용한다.
• ES6은 처음들어보지만 우리는 이미 사용을 해보았다!
• ES6에서 사용하는 표기법은 무엇이 있는지 간단히 보고 ES6 모듈로 넘어가자.

---

▶️ 템플릿 리터럴

• ES6부터 새로 도입된 문자열 표기법이다. 문자열을 작성할 때 백틱(`)을 사용한다.

const name = "토토로";

//기존 코드
console.log("얘는 " + name + "입니다.");

//템플릿 리터럴 방식
console.log(`얘는 ${name}입니다.`);

//얘는 토토로입니다. 출력.
//출력 결과는 둘 다 동일하다.

▶️ 화살표 함수

• 일반 함수표현식보다 간결하게 작성할 수 있다.

//기본 함수
let sum = function(a, b) {
  return a + b;
};

//화살표 함수
let sum = (a, b) => a + b;

Node.js에 ES모듈 적용시키기

• 2가지 방법이 있지만 (도움받은 링크)
• 프로젝트 단위로 ES모듈을 적용하는 방법은?

---

• package.json 파일을 열고 type 항목을 module로 설정해주면 된다. (추가로 작성)
  

• 이렇게 해서 전체 파일에 적용을 해주는 것이다. 모듈 시스템 타입 자체를 바꾼 것이기 때문에 노드모듈방식으로 작성한 것들은 적용이 되지 않으니 주의!

💡 package.json의 파일명은 변경하면 안된다! 부모폴더에 대한 프로젝트의 정보가 담겨있는 파일이다.

Node.js에서 ES모듈(export/import) 사용하기

• 모듈을 내보내는 방법으로는 named export와 default export가 있다.
• 구조분해 해서 내보낼거냐, 식별자로 내보낼거냐의 차이이다.
• 하나의 식별자로 내보내고 싶을 때 default export 로 작성!
• 가져올 때는 import 모듈명 from 로 가져온다.

---

▶️ 모듈 내보내기 export , import 모듈명 from로 가져오기.

//한 파일에서 여러개를 내보낼 때 사용가능하다.
//구조분해 해서 내보내는걸로 생각.
//export한 이름과 동일한 이름으로 import해야한다.
export { 모듈명1, 모듈명2 };
import { 모듈명1, 모듈명2 } from 'js 파일 경로';

▶️ 모듈 내보내기 default export , import 모듈명 from로 가져오기.

//한 파일에서 하나의 변수 또는 클래스만 내보낼 수 있다. (구조분해x)
//import할 때 이름은 자유롭게 작성 가능하고, 중괄호가 없어도 된다.
export default 모듈명;
import 모듈명 from 'js 파일 경로';

---

• 구조분해로 내보내기 어떻게 다른걸까?

//얘와 아래의 내보내기 방식은 동일하다!
const add = (a, b) => a + b;
const minus = (a, b) => a - b;

module.exports = {add, minus};

//ES모듈 방식으로 작성하면?
const add = (a, b) => a + b;
const minus = (a, b) => a - b;

export {add, minus};

• 하나의 식별자로 내보내기 어떻게 다른걸까?

//얘와 아래의 내보내기 방식은 동일하다!
function plus (){return a+ b;}

module.exports = plus;

//ES모듈 방식으로 작성하면? defalt 필수!
function plus (){return a+ b;}

export defalt plus;

• 모듈 가져오기 어떻게 다른걸까?

// 1)구조분해 가져오기
//얘와 아래의 내보내기 방식은 동일하다!
const {add, minus} = require("./math.js");
//ES모듈 방식으로 작성하면?
import { add, minus } from "./math_es6.js";

// 2)하나의 식별자로 가져오기
//얘와 아래의 내보내기 방식은 동일하다!
const plus = require("./math.js");
//ES모듈 방식으로 작성하면?
import plus from "./math_es6.js";

---

💬

• Node.js를 배우면서 ES2015(es6)모듈… 얘는 왜 나온건지 어쩌다 생겼는지 그래서 뭐가 다른건지 어쩌라는건지 이해가 안갔다. 아니 이해는 어느정도 된 것 같은데 연결이 안된다. 뭐가 자꾸 생겨나고 엮이고 문법은 다 다르고! 그렇다보니 나에게는 아직도 빠르게 느껴지는 진도.. 처음 접하는 내용이니 어쩔 수 없다고 생각은 한다. 기본개념이라는데 이미 배운 분들도 있다보니 다른 분들은 다 이해를 하시는건지 나만 복잡하게 느껴지는지 신기했다. 그래도 복습하겠다고 책상에 앉았으니 잘 따라가보자! 잘 따라가고 있는건지는 모르겠지만..!
• 그리고 짧은 기간이지만 느낀점은 복습을 안해서는 안되겠다? 여기서 배운게 저기서 쓰이고 또 다른데에서 활용되고 엮이고 하다보니 흐지부지 넘겨버리면 나중에 크게 꼬일 것 같은 느낌.. 기본개념이라고 하니 빠르게 복습을 하면서 익히고 부족한 부분도 공부하는걸로..!