JavaScript 모듈

SSAD·2023년 2월 13일
0

BackEnd

목록 보기
2/44
post-custom-banner

자바스크립트 모듈

  • 파일을 여러 개로 분리하여 사용하는 방법

  • 분리된 파일을 각각 모듈(module)이라고 부름

  • 클래스 하나 혹은 특정한 목적을 가진 복수의 함수로 구성된 라이브러리 하나로 구성

  • 모듈은 단지 파일 하나에 불과

  • 스크립트 하나는 모듈 하나

  • 모듈에 특수한 지시자 export와 import를 적용하면
    다른 모듈을 불러와 불러온 모듈에 있는 함수를 호출 하는 것과 같은 기능 공유가 가능

1. 모듈이란?

  • 모듈이란 여러 기능들에 관한 코드가 모여 있는 하나의 파일

2. 모듈의 이점

    1. 유지 보수성
      • 기능들이 모듈화가 잘 되어 있다면, 의존성을 그만큼 줄일 수 있기 때문에
        어떤 기능을 개선한다거나 수정할 때 훨씬 편하게 할 수 있음
    1. 네임스페이스화
      • 자바스크립트에서 전역 변수는 전역 공간을 가지기 때문에
        코드의 양이 많아 질수록 겹치는 네임스페이스가 많아 질수 있음
      • 모듈로 분리하면 모듈만의 네임스페이스를 갖기 때문에 그 문제가 해결 됨
    1. 재사용성
      • 똑같은 코드를 반복하지 않고 모듈로 분리시켜 필요할 때마다 사용 가능

package.json

package.json이란?

  • 생성한 프로젝트의 메타정보와
    이 프로젝트가 의존한 모듈들에 대한 정보를
    json(JavaScript Object Notation)형태로 모아 놓은 파일

간단 모듈 구현하기

yarn init

package.json

{
  "name": "01-05-token-count-api-facade-import",
  "version": "1.0.0",
  "main": "index.js",
  "license": "MIT",
  "type": "module" // 타입 모듈 추가
}

폴더 구조

index.js

// 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);

phone.js

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 + '를 전송합니다!!!');
}
profile
learn !
post-custom-banner

0개의 댓글