파일을 여러 개로 분리하여 사용하는 방법
분리된 파일을 각각 모듈(module)이라고 부름
클래스 하나 혹은 특정한 목적을 가진 복수의 함수로 구성된 라이브러리 하나로 구성
모듈은 단지 파일 하나에 불과
스크립트 하나는 모듈 하나
모듈에 특수한 지시자 export와 import를 적용하면
다른 모듈을 불러와 불러온 모듈에 있는 함수를 호출 하는 것과 같은 기능 공유가 가능
- 기능들이 모듈화가 잘 되어 있다면, 의존성을 그만큼 줄일 수 있기 때문에
어떤 기능을 개선한다거나 수정할 때 훨씬 편하게 할 수 있음
- 자바스크립트에서 전역 변수는 전역 공간을 가지기 때문에
코드의 양이 많아 질수록 겹치는 네임스페이스가 많아 질수 있음- 모듈로 분리하면 모듈만의 네임스페이스를 갖기 때문에 그 문제가 해결 됨
- 똑같은 코드를 반복하지 않고 모듈로 분리시켜 필요할 때마다 사용 가능
yarn init
{
"name": "01-05-token-count-api-facade-import",
"version": "1.0.0",
"main": "index.js",
"license": "MIT",
"type": "module" // 타입 모듈 추가
}
// JavaScript 파일 불러오기
import { checkValidationPhone, getToken, sendTokenToSMS } from './phone.js'
// API 만들기
function createTokenOfPhone(myphone, count) {
// 1. 휴대폰번호 자릿수 맞는지 확인하기
const isValid = checkValidationPhone(myphone, count);
if (isValid) {
// 2. 핸드폰 토큰 6자리 만들기
const token = getToken(count);
// 3. 핸드폰번호에 토큰 전송하기
sendTokenToSMS(myphone, token);
}
}
// API 실행하기
createTokenOfPhone('01012345678', 6);
export function checkValidationPhone(myphone) {
if (myphone.length !== 10 && myphone.length !== 11) {
console.log('에러 발생!!! 핸드폰 번호를 제대로 입력해 주세요!!!');
return false;
} else {
return true; // 검증 통과
}
}
export function getToken (count) {
if (count === undefined) {
console.log('에러 발생!!! 갯수를 제대로 입력해 주세요!!!');
return false;
} else if (count <= 0) {
console.log('에러 발생!!! 갯수가 너무 적습니다!!!');
return false;
} else if (count > 10) {
console.log('에러 발생!!! 갯수가 너무 많습니다!!!');
return false;
}
const result = String(Math.floor(Math.random() * 10 ** count)).padStart(count,'0');
return result;
}
export function sendTokenToSMS(myphone, token) {
console.log(myphone + '번호로 인증번호' + token + '를 전송합니다!!!');
}