(1)자바스크립트_모듈_node.js환경 셋팅, export/import ,named export/ default export

 

●이론_1_vscode로 node.js 설치 및 환경 셋팅 :

https://kojammin.tistory.com/184

(1)React_초급_개발환경셋팅(Window)

○ 순서1_ 위의 링크로 들어가 node.js를 설치 후, 셋팅하면 된다.

○ 순서2_ "ctirl" + '`' //숫자1 왼쪽 키를 눌러, 터미널을 연다.

○ 순서3_ 아래 사진과 같이, index.html , main.js를 프로젝트 폴더 안에 작성 저장뒤,

○ 순서4_ 터미널에 아래의 명령어를 작성해본다.

node main

//프로젝트 내의 main.js를 node로 작동하겠다는 뜻

○ 결과 : 터미널에 main.js의 코드가 출력창에 잘 작동된다는 것을 알 수 있다.

§ 만약, 안됐다면, html, main, 프로젝트의 폴더의 명이 영문으로 안되어있으면, 작동이 안될 수도 있다.

 

●이론_2_외부 js 또는 mjs 파일안에 선언된, 함수 , 메소드 등을 불러들여서 이용하기 => import, export

○ Defalut :

- [lib]폴더 / calculator.mjs //외부에서 선언된 PI 상수 , add 메소드 => export

export const PI = 3.14; //맨앞에 export 키워드 추가

export function add(a , b)//맨앞에 export 키워드 추가
{
  return a+b;
};

- main.js // calculator.mjs의 PI, add메소드를 호출해서, 사용 => import

import {PI , add} from './lib/calculator.mjs';
//외부 파일인 ./lib/calculator.mjs 안에, PI 상수, add 메소드를 여기다 부르겠다는 뜻

//그리고 평소랑 똑같이 사용하면 된다.
console.log(PI);
console.log(add(1.3,4.2));

 

◎ 연습문제 :

○ Defalut :

- area.mjs :

// 여기에 코드를 작성하세요.

function circle(x) { 
  return PI * x * x;
}

function square(x) {
  return x * x;
}

- calculator.mjs :

export const PI = 3.14;

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

- main.mjs :

// 여기에 코드를 작성하세요.

// 테스트 코드
console.log(circle(1));
console.log(square(2));

- 디렉토리 구조 :

○ 풀이과정 :

§[Calculator.mjs] => [area.mjs] 에 PI 상수 불러다 쓰기

- [Calculator.mjs]의 PI 상수앞에 "export" 키워드 붙이기

-  [area.mjs] 에 "import {PI} from "./Calculator.mjs"; " 작성

※import에 "/lib"을 하지 않는 이유 =>  [Calculator.mjs]와 [area.mjs]가 같은 디렉토리(폴더)에 있기 때문에, "./"의 의미는 "현재 파일 내에서" 라는 의미이다.

§[area.mjs] => [main.mjs] 에 circle, squree 메소드 불러다 쓰기

-  [ area.mjs ]의 circle, squree 메소드 앞에 "export" 키워드 붙이기

-  [main.mjs] 에 "import { circle, squree } from "./lib/Calculator.mjs"; " 작성

※import에 "/lib"을 하는 이유 => [main.mjs]와 [area.mjs]는 동일 디렉토리(폴더)상에 존재 X

[main.mjs]가 더 상위 폴더에 있으므로, "./"

[area.mjs]는 더 하위 폴더인 [lib]안에 있음=> "/lib" 추가

○ 답 :

- area.mjs :

import { PI } from './calculator.mjs';

export function circle(x) { 
  return PI * x * x;
}

export function square(x) {
  return x * x;
}

- calculator.mjs :

export const PI = 3.14;

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

- main.mjs :

import {circle , square} from './lib/area.mjs';

// 테스트 코드
console.log(circle(1));
console.log(square(2));

●이론_3_ named export / default export :

○ 정의 :

- 외부의 mjs 에는 2가지 export 방법이 있다.

방법1_ 그냥 export || named export

- calculator.mjs

export const PI = 3.14;

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

- main.mjs

import {PI, add} from './lib/calculator';
//일반 export 불러오는 방법

console.log(PI);
console.log(add(1.23,4.23));

 

방법2_ default export

- calculator.mjs

export const PI = 3.14;

export defalut function add(a, b) {//export default로 선언된 add 메소드
  return a + b;
}

- main.mjs

import naruto from './lib/calculator';
//외부 js인 [calculator]에서 export default로 선언된, add()메소드를 "naruto"로 이름으로 사용하겠단 뜻

console.log(naruto(1.2,3.4));

○ default export의 특징 2가지

• 특징1 : 한 모듈당 default export는 한개밖에 못한다.

ex_ calculator.mjs 

export default const PI = 3.14;

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

//2개 이상의 변수,상수를 default 불가능

• 특징2 : 외부 mjs를 쓰려고 하는 main.js에서 import 호출이 좀 다름

ex_ main.mjs 

import naruto , {add} './lib/calculator.mjs';
//calculator.mjs에 PI, add() 만 있다면,
// naruto => PI => default export 되어있는 상수
// add => named export || 일반 export 되어있는 메소드

console.log(naruto);//3.14 출력
console.log(add(naruto, naruto));//3.14 + 3.14 결과 출력

• 특징3 : 외부 mjs 파일에서 const, let 변수는 바로 앞에 export default 불가능 

//calculator.mjs

const PI = 3.14;

export default PI; 

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

//main.mjs
import Fuck ,{add} from './lib/calculator.mjs';

console.log(Fuck);
console.log(add(1.3,4.2));