220110_TIL_01

최다슬·2022년 1월 15일
TILToday I learnednode.js
0

⭐️Today I Learend

목록 보기
1/8

첫 2주동안 Node.js 를 사용한 수업이 진행된다고 하였다.

'나는 Node.js 가 무엇인지도 모르는데..?'
정말 작은것 하나하나부터 알아보고 이해해서 나아가야하는데 쉽지않은 하루하루가 될 것 같다...

일단 2주동안 Node.js에 대해서 열심히 공부해봐야지!!
지금은 많은 분들의 도움을 내가 받고있지만 나도 언젠가는 누군가에게 자신있게 설명해 줄 수 있는 날이 올때까지..


1. Node.js

: 자바스크립트를 실행시켜주는 실행도구

  • 소스코드를 공유하는 라이브러리 : npmjs.com 사이트
  • npm & yarn
    • npm : 자바스크립트 언어를 위한 패키지 관리자 (Node.js의 기본 패키지 관리자)
      < npm 명령어 >
      • npm init : package.json 생성
      • npm install : package.json 파일 및 해당 종속성에 나열된 모든 모듈을 설치
      • npm uninstall : 패키지 삭제
      • npm update : 설치한 패키지들을 업데이트
      • npm dedupe : 중복 설치된 패키지들을 정리
    • yarn : 페이스북에서 개발한 패키지 관리자로 npm 보다 속도가 빠르고 안전한 장점 존재
      < yarn 명령어 >
      • yarn init : package.json 생성
      • yarn or yarn install : package.json 파일 및 해당 종속성에 나열된 모든 모듈을 설치
      • yarn remove : 패키지 삭제
      • yarn upgrade : 설치한 패키지들을 업데이트
      • npm dedupe : 중복 설치된 패키지들을 정리

2. Node 로 JS 파일 실행하기

프리캠프때는 브라우저로 콘솔을 확인하였는데 브라우저가 아닌곳에서 Node를 이용해 js를 실행해보았다.

node index.js : Node로 index.js 실행 명령어

  • 실행할때 현재 파일 위치 확인 중요! (터미널 명령어로 알수있음)
    - ls : 현재 폴더의 모든 목록이 나타남
    - cd : 폴더이동
    - pwd : 현재위치를 나타냄 (현재 작업하고 있는 최종위치)
    - cd ../ : 상위폴더로 이동

3. Node 사용하여 6자리 인증번호 만들기

- 6자리 인증번호를 받을때 쓰이는 함수

// getToken 함수 생성 (터미널에 실행안됨)//
function getToken() {
    const result = String(Math.floor(Math.random() * 100000)).padStart(6,"0")
    console.log(result)
}
// getToken 함수 실행 (터미널에 실행됨) //
getToken()

  • 안정성을 높이기 위해 if문을 사용하여 여러 제외 조건을 걸어줌
    함수를 실행할 때, 매개변수를 작성하여 조건문 및 아래의 원하는 자릿수 인증번호 만들기까지 가능해짐

    function getToken(count) {
    }

    따라서, 함수의 매개변수자리에 count 매개변수 작성하여 조건문 완성

function getToken(mycount) {
    if(mycount === undefined) {
        console.log("에러발생!! 갯수를 제대로 입력해 주세요!!")
        return  // return : 함수종결 의미
    } else if(mycount <= 0){
        console.log("에러발생!! 갯수가 너무 적습니다!!")
        return
    } else if(mycount > 10){
        console.log("에러발생!! 갯수가 너무 많습니다!!")
    }
     
    const result = String(Math.floor(Math.random() * 100000)).padStart(6,"0")

retrun : 결과 반환 또는 함수를 종결하겠다는 의미
⇒ 에러가 났으니 아래 코드들을 더이상 진행하지 않고 멈추기 위해 retrun 사용


3. 원하는 자릿수 인증번호 만들기

function getToken(mycount) {
    if(mycount === undefined) {
        console.log("에러발생!! 갯수를 제대로 입력해 주세요!!")
        return 
    } else if(mycount <= 0){
        console.log("에러발생!! 갯수가 너무 적습니다!!")
        return
    } else if(mycount > 10){
        console.log("에러발생!! 갯수가 너무 많습니다!!")
    }
     
    const result = String(Math.floor(Math.random() * 10**mycount)).padStart(mycount,"0")
// mycount = 6 일때 : 위에서는 *1000000 을 해주었는데 현재는 10**mycount 로 6자리 인증번호 생성
// ∴ *1000000 = 10**mycount(10의 mycount(=6) 제곱) 인것!
    console.log(result)
}

getToken() // "에러발생!! 갯수를 제대로 입력해 주세요!!"
getToekn(0) // "에러발생!! 갯수가 너무 적습니다!!"
getToken(6) 
//6이라는 숫자가 mycount 안에 전달이 되고 mycount 함수 활용이 가능해지므로 6자리 인증번호가 실행됨
getToken(12) // "에러발생!! 갯수가 너무 많습니다!!" (12자리 인증번호가 실행될것이므로)

제곱을 해주는 연산자 : **


4. API 만들기

API : 프론트에서 버튼을 눌렀을 때 실행되는 함수

핸드폰 번호(myphone)와 자릿수(count)를 입력받아,

  1. 휴대폰 번호의 자릿수가 맞는지 확인
  2. 휴대폰 토큰 6자리 만들기
  3. 휴대폰 번호에 토큰을 전송하기

API로 함수 createTokenOfPhone 을 만들기

// API 만들기 //
function createTokenOfPhone(myphone) {
    // 1. 휴대폰번호 자릿수 맞는지 확인하기 //
    if(myphone.length !== 10 && myphone.length !== 11 ){
        console.log('에러발생!! 핸드폰 번호를 제대로 입력해주세요!!')
        return
    }
  // 휴대폰 길이가 10자리 와 11자리가 안되면 에러발생으로 함수 종료됨 //
  
    // 2. 휴대폰 토큰 6자리 만들기 //
    const mycount = 6
    if(mycount === undefined) {
        console.log("에러발생!! 갯수를 제대로 입력해 주세요!!")
        return
    } else if(mycount <= 0){
        console.log("에러발생!! 갯수가 너무 적습니다!!")
        return
    } else if(mycount > 10){
        console.log("에러발생!! 갯수가 너무 많습니다!!")
    }
    const result = String(Math.floor(Math.random() * 10**mycount)).padStart(mycount,"0")  
    
    // 3. 휴대폰 번호에 토큰 전송하기 //
    console.log(myphone + "번호로 인증번호" + result + "를 전송합니다!!")
}

// API 실행하기 //
createTokenOfPhone("01012345678") // 01012345678번호로 인증번호 983426(⇒result의 값을 받아옴)를 전송합니다!!
// 01012345678 은 하드코딩 한 것  ( 하드코딩 : 값을 입력해두는것 )

5. 퍼사드패턴 적용

퍼사드패턴 : 실제 사용하는 기능들을 한눈에 보기 쉽게 정리해두는 역할


< 먼저, 퍼사드패턴 API를 만들기 전, 1. 2. 3 기능들을 하나씩 분리해주기 >

1. 휴대폰번호 자릿수 맞는지 확인하기

function checkValidationPhone(myphone){    // 📝2. API 1. myphone을 받은것이기에 ()안에 myphone 입력 //
    if(myphone.length !== 10 && myphone.length !== 11 ){
        console.log('에러발생!! 핸드폰 번호를 제대로 입력해주세요!!')
        return false   // 📌문제가 있을때는 false 값 반환됨
    } else {
        return true    // 📌문제가 없을때 true 값 반환됨
    }
}


2. 휴대폰 토큰 6자리 만들기

function getToken(mycount){
    if(mycount === undefined) {
        console.log("에러발생!! 갯수를 제대로 입력해 주세요!!")
        return
    } else if(mycount <= 0){
        console.log("에러발생!! 갯수가 너무 적습니다!!")
        return
    } else if(mycount > 10){
        console.log("에러발생!! 갯수가 너무 많습니다!!")
    }
    const result = String(Math.floor(Math.random() * 10**mycount)).padStart(mycount,"0")
    return result
}


3. 휴대폰 번호에 토큰 전송하기

function sendTokenTOSMS(fff,ggg){
    console.log(fff + "번호로 인증번호" + ggg + "를 전송합니다!!")
}


< 퍼사드 패턴 API 만들기 > 

// API 만들기 (퍼사드 패턴) //
function createTokenOfPhone(myphone) {
    // 1. 휴대폰번호 자릿수 맞는지 확인하기 -> 맞다면 인증번호 token 실행 //
    const isValid = checkValidationPhone(myphone) 
        // 위의 myphone 입력인자를 받아오기에 () 안에 입력 
    	// 📌 isValid : true 또는 false 값 나옴 //
    if(isValid === true){    	 
        // 2. 휴대폰 토큰 6자리 만들기 //
        const mytoken = getToken(6) 
        // getToken() 안의 값은 getToekn(mycount) 안으로 들어감 
	// 📌 === true 는 생략가능 ∴ if(isValid)로 작성 가능 // 
        // 3. 휴대폰 번호에 토큰 전송하기 //
        sendTokenTOSMS(myphone, mytoken) 
        // sendTokenTOSMS(fff,ggg) 안으로 값이 들어감 //
        // ∴ myphone 은 fff로, mytoken은 ggg로 전송됨 //
    }
}


// API 실행하기 //
createTokenOfPhone("01012345678")


< export & import >

우리에게 필요한 기능이 있는 함수는

  • createTokenOfPhone 함수 부분
  • createTokenOfPhone 실행하는 부분

∴ 나머지 함수들은 다른 파일로 분리해주기! (퍼사드 패턴을 사용하니깐)

  • checkValidationPhone 함수 부분
  • getToken 함수 부분
  • sendTokenTOSMS 함수 부분


파일을 분리해주고 난 뒤, 함수가 자동적으로 연결되지 않기에
export 와 import 를 설정 해줘야됨!


export 와 import 를 설정해주기 전에
먼저 터미널을 이용하여 package.json 파일 만들어주기

1) 해당 폴더 터미널에서 npm init 명령어 입력
2) 물어보는 모든 항목에 엔터 쳐서 넘어가기
3) 자동적으로 package.json 파일 생성됨
4) package.json 파일에 "type": "module" 추가 작성해주기

{
  "name": "01-05-token-count-api-facade-import",
  "version": "1.0.0",
  "main": "index.js",
  "license": "MIT",
  "type": "module",
  "scripts": {
    "dev": "node index.js"
  }
}

package.json 파일 : 프로젝트에 대한 상세 설명이 담겨있는 파일


이제 export & import 설정 하기

다른 파일로 분리해준 함수들 앞에 export 추가
( 연결하기 위해서 사용하고 싶은 함수에 export 작성 해주면됨 )

//function 들 앞에 export 하기 //

export function checkValidationPhone(myphone){  
    if(myphone.length !== 10 && myphone.length !== 11 ){
        console.log('에러발생!! 핸드폰 번호를 제대로 입력해주세요!!')
        return false   
    } else {
        return true    
    }
}

export function getToken(mycount){
    if(mycount === undefined) {
        console.log("에러발생!! 갯수를 제대로 입력해 주세요!!")
        return
    } else if(mycount <= 0){
        console.log("에러발생!! 갯수가 너무 적습니다!!")
        return
    } else if(mycount > 10){
        console.log("에러발생!! 갯수가 너무 많습니다!!")
    }
    const result = String(Math.floor(Math.random() * 10**mycount)).padStart(mycount,"0")
    return result
}

export function sendTokenTOSMS(fff,ggg){
    console.log(fff + "번호로 인증번호" + ggg + "를 전송합니다!!")
}




필요한 기능이 있는 함수가 있는 파일에 import 해주어야하는데,

import {checkValidationPhone, getToken, sendTokenTOSMS} from './phone.js'


// API 만들기 (퍼사드 패턴) //
export function createTokenOfPhone(myphone) {
    // 1. 휴대폰번호 자릿수 맞는지 확인하기 //
    const isValid = checkValidationPhone(myphone) 
    if(isValid === true){    
        // 2. 휴대폰 토큰 6자리 만들기 //
        const mytoken = getToken(6)  
        // 3. 휴대폰 번호에 토큰 전송하기 //
        sendTokenTOSMS(myphone, mytoken) 
    }
}

// API 실행하기 //
createTokenOfPhone("01012345678")

가장 위에 phone.js 파일에서 3개의 함수를 가져와서 쓰겠다는 뜻의
import { } 를 아래와 같이 작성해주기 
import {checkValidationPhone, getToken, sendTokenTOSMS} from './phone.js'

./ : 해당 폴더를 가지고 온다는 뜻


6.터미널에 node index.js 로 실행해주면 완료!

휴대폰 자리가 10자리 & 11자리가 맞다면
" 01012345678 번호로 인증번호 232647(랜덤한 6자리 숫자)를 전송합니다" 가 터미널에 나타나게 되는것!

profile
최다슬
다음 포스트

220110_TIL_00

0개의 댓글