본 캠프 1일차 TIL

본캠프 첫 날

오늘은 베이스캠프가 지난 후 본 캠프로 등원한 날이다
오프라인으로 수업을 듣다니.. 집에서 멀긴 하지만 기합 가득 넣고 열공해보자!!

📌 오늘의 내용

백엔드

백엔드에 대한 간략한 설명을 쉽게 사진을 통해 알아보자

위처럼 화면에 보이는 html에서 버튼 클릭이나 각종 이벤트를 통해 백엔드 컴퓨터에 요청을 보내 인증번호 요청 API, 인증 완료 API 등등 을 수행 후 데이터베이스에 전송하는 로직이 백엔드 기술이라고 보면 되며 API 또한 쉽게 함수라고 생각하면 편리하다!

그런데 굳이 백엔드 API를 꼭 거쳐야 하는 걸까??
브라우저에서 바로 DB에 저장하는 코드를 작성하게 되면 소스코드를 직접 외부로 보이게 되고 데이터 검사 또한 힘들기 때문에 백엔드 로직이 필요 한 것이다!

그렇다면 JavaScript를 웹 브라우저 없이 실행시키려면 어떻게 해야 할까?
정답은 Node.js다.

Node.js

Node.js를 배우기 전 아주 간략하게 이해하기 쉽게 알아보자
javascript를 브라우저 없이 실행시키려면 어떻게 해야 할까?
바로 node.js 실행프로그램을 이용해 웹 브라우저를 통하지 않고 바로 실행이 가능하다!

그렇다면 바로 간략한 코드를 작성해 실행시켜보자

function createTokenOfPhone(pNum) {
  // pNum : 매개변수(parameter)
  // 1. 휴대폰번호 자릿수 맞는지 확인하기(10~11)
  if (pNum.length < 10 || pNum.length > 11) {
    console.log("에러 발생!! 핸드폰 번호를 제대로 입력해주세요!!!");
    return; // early exit 패턴
  }


  // 2. 핸드폰 토큰 6자리 만들기
  const result = String(Math.floor(Math.random() * 1000000)).padStart(6, "0");

  // 3. 핸드폰번호에 토큰 전송하기
  console.log(pNum + "번호로 인증번호 " + result + "를 전송합니다.");
}

// 버튼클릭
createTokenOfPhone("01012345678"); // 01012345678 : 인자(argument)

위처럼 브라우저에 접속하지 않아도 터미널 창의 node라는 커맨드 입력 후 파일을 실행시킬 수 있는 걸 볼 수 있다.

퍼사드(Facade)패턴

퍼사드(Facade) 패턴이란
Facade 건물의 외관을 의미하는 뜻으로 퍼사드 패턴이란 여러 서브시스템의 작업들을 하나의 인터페이스로 통합하여 제공해 주는 역할
쉽게 말해 복잡한 코드를 간단하게 만들어 주는 역할이라고 생각하면 된다

그렇다면 위 예제 코드를 유지 보수도 편리하고 이해하기 쉽게 퍼사드 패턴을 적용하여 리팩토링해보자!

function checkPhone(myPhone) {
  if (myPhone.length < 10 || myPhone.length > 11) {
    console.log("에러 발생!! 핸드폰 번호를 제대로 입력해주세요!!!");
    return false; // early exit 패턴
  } else {
    return true;
  }
}

function getToken() {
  const result = String(Math.floor(Math.random() * 1000000)).padStart(6, "0");
  return result;
}

function sendTokenToSMS(myPhone, myToken) {
  console.log(myPhone + "번호로 인증번호 " + myToken + "를 전송합니다.");
}

function createTokenOfPhone(myPhone) {
  // myPhone : 매개변수(parameter)
  // 1. 휴대폰번호 자릿수 맞는지 확인하기(10~11)
  const isValid = checkPhone(myPhone);

  if (!isValid) return;

  // 2. 핸드폰 토큰 6자리 만들기
  const myToken = getToken();

  // 3. 핸드폰번호에 토큰 전송하기
  sendTokenToSMS(myPhone, myToken);
}

// 버튼클릭
createTokenOfPhone("01012345678"); // 01012345678 : 인자(argument)

예제 코드보다 복잡하다 생각할 수 있지만 간단한 예제 코드가 아닌 실제 많은 양의 코드였다면 훨씬 이해하기 쉽고 유지 보수하기도 편리한 것을 느낄 수 있을 것이다.