import export let 값 옮기기

기존 javascript code

const digit = document.querySelectorAll('.digits > .digit');
const total = document.querySelector('#total');
const modifier = document.querySelector('.modifiers > .modifier');
const operation = document.querySelectorAll('.operations > .operation');
let saveValue = '',oper,result;


const digitEventHandler = (digitElement)=>{
  if(saveValue.split(oper)[1] == undefined)
    checkFirstValue(digitElement);
  else
    checkLastValue(digitElement);
}

const modifyEventHandler = ()=>{
  total.innerHTML = 0;
  saveValue = '';
}

const operationEventListener = (i)=> {
  if (Number.isNaN(Number(saveValue)))
    alert('연속된 사칙연산은 입력할 수 없어');
  else {
    oper = operation[i].innerHTML;
    total.innerHTML = saveValue.concat(operation[i].innerHTML);
    saveValue = total.innerHTML;
  }
}

const calculateEventListener = ()=>{
  const firstValue = saveValue.split(oper)[0], secondValue = saveValue.split(oper)[1]
  switch(oper){
    case 'X':
      result = Math.floor(firstValue * secondValue);
      break;
    case '/':
      result = Math.floor(firstValue / secondValue);
      break;
    case '+':
      result = Number(firstValue) + Number(secondValue);
      break;
    case '-':
      result = firstValue - secondValue;
      break;
    default:
      alert('ERROR');
  }

  total.innerHTML = result;
  saveValue ='';
}

const checkFirstValue = (digitElement)=>{
  if(saveValue.split(oper)[0].length == 3)
    alert('숫자는 최대 세자리까지만 입력 가능합니다.');
  else{
    total.innerHTML = saveValue.concat(digitElement.innerHTML);
    saveValue = total.innerHTML;
  }
}

const checkLastValue = (digitElement)=>{
  if(saveValue.split(oper)[1].length==3)
    alert('세자리 초과는 못해');
  else{
    total.innerHTML = saveValue.concat(digitElement.innerHTML);
    saveValue = total.innerHTML;
  }
}

for(let digitElement of digit)
  digitElement.addEventListener('click',()=>digitEventHandler(digitElement))

modifier.addEventListener('click',modifyEventHandler)

for(let i=0;i<operation.length-1;i++)
  operation[i].addEventListener('click',()=>operationEventListener(i))

operation[4].addEventListener('click',calculateEventListener)

이를 모듈화하여 분리하고 싶다.

---

주의 할 점

1. import ~ from ./handler/handler.js 이러한 형태로 시작을 진행한다. (./폴더/파일 or ./파일)
2. 변수값은 module을 사용할때 매개변수에 넣어 사용하고 이를 return을 통해 반환해주어야 적용이 된다.

---

모듈화

source.js

const digit = document.querySelectorAll('.digits > .digit');
const total = document.querySelector('#total');
const modifier = document.querySelector('.modifiers > .modifier');
const operation = document.querySelectorAll('.operations > .operation');

export {digit,total,modifier,operation}

---

handler.js

import {checkFirstValue, checkLastValue} from "../check/check.js";

const digitEventHandler = (digitElement,saveValue,oper,total)=>{
  if(saveValue.split(oper)[1] == undefined)
    [saveValue,oper] = checkFirstValue(digitElement,saveValue,oper,total);
  else
    [saveValue,oper] = checkLastValue(digitElement,saveValue,oper,total);
  return [saveValue,oper];
}

const modifyEventHandler = (saveValue,total)=>{
  total.innerHTML = 0;
  saveValue = '';
  return [saveValue]
}

const operationEventListener = (i,oper,operation,total,saveValue)=> {
  if (Number.isNaN(Number(saveValue)))
    alert('연속된 사칙연산은 입력할 수 없어');
  else {
    oper = operation[i].innerHTML;
    total.innerHTML = saveValue.concat(operation[i].innerHTML);
    saveValue = total.innerHTML;
  }
  return [oper,saveValue];
}

const calculateEventListener = (saveValue,result,oper,total)=>{
  const firstValue = saveValue.split(oper)[0], secondValue = saveValue.split(oper)[1]
  switch(oper){
    case 'X':
      result = Math.floor(firstValue * secondValue);
      break;
    case '/':
      result = Math.floor(firstValue / secondValue);
      break;
    case '+':
      result = Number(firstValue) + Number(secondValue);
      break;
    case '-':
      result = firstValue - secondValue;
      break;
    default:
      alert('ERROR');
  }

  total.innerHTML = result;
  saveValue ='';
  return [saveValue,result,oper];
}

export {digitEventHandler,modifyEventHandler,operationEventListener,calculateEventListener};

---

check.js

const checkFirstValue = (digitElement,saveValue,oper,total)=>{
  if(saveValue.split(oper)[0].length == 3)
    alert('숫자는 최대 세자리까지만 입력 가능합니다.');
  else{
    total.innerHTML = saveValue.concat(digitElement.innerHTML);
    saveValue = total.innerHTML;
  }
  return [saveValue,oper];
}

const checkLastValue = (digitElement,saveValue,oper,total)=>{
  if(saveValue.split(oper)[1].length==3)
    alert('세자리 초과는 못해');
  else{
    total.innerHTML = saveValue.concat(digitElement.innerHTML);
    saveValue = total.innerHTML;
  }
  return [saveValue,oper];
}

export {checkLastValue,checkFirstValue}

---

index.js

import {digitEventHandler,modifyEventHandler,operationEventListener,calculateEventListener} from "./handler/handler.js";
import {digit,total,modifier,operation} from "./source/source.js";

let saveValue = '',oper,result;

for(let digitElement of digit)
  digitElement.addEventListener('click',()=>[saveValue,oper] = digitEventHandler(digitElement,saveValue,oper,total))

modifier.addEventListener('click',() =>[saveValue]= modifyEventHandler(saveValue,total))

for(let i=0;i<operation.length-1;i++)
  operation[i].addEventListener('click',()=> [oper,saveValue]=operationEventListener(i,oper,operation,total,saveValue))

operation[4].addEventListener('click',()=> [saveValue,result,oper]=calculateEventListener(saveValue,result,oper,total))

위와 같은 형태로 주의하여 볼 점은 check.js에서의 함수 모듈을 받아들이는 handler.js에서는 return을 통해 해당 saveValue와 oper를 받아 해당 값을 적용시키고 이를 return하여 index.js에서 존재하는 saveValue oper result에 적용시켜 정상적으로 동작을 실행되게 만든다.

---

다른 예시

exam.js

let a = 10;
let b = 100;

export {a,b};

index.js

import {a,b} from './exam/exam.js'
a = 100;
b = 5;
console.log(a,b);

해당 내용은 오류가 나는데 받아온 변수는 수정할 수 없는 const형태로 인식하는 것 같다.(user strict에서)

Uncaught TypeError: Assignment to constant variable. at index.js:2 이와같은 에러가 뜬다.

즉, 모듈은 const형태나 함수형태를 받아들이고 그때에 사용할 변수들은 매개변수를 통해 계산 처리후 return을 통해 변수를 반환시켜 값을 기존의 파일(ex index.js)에 적용시킨다.

---

* 2021/07/21 추가내용

모듈에서 값이 아닌 파일 전체를 갖고오고 싶을 때

1) commonJS

const db = require('./data/db.js')

db.js에 있는 전부를 db변수로 가져온다.

[Module] { getData: [Function: getData], setData: [Function: setData] } 이런형태의 db.js에 있는 내용을 db에 넣을 수 있다.

2) ES6

import * as db from './data/db.js'

db.js에 있는 전부(*)를 db변수로 가져온다.

주의 : import db from './data/db.js'로 하면 오류난다.
db.js에 있는 db라는 변수를 요구한다고 판단하기 때문이다.