부스트 코스(웹) PROJ5-2

네이버 예약 서비스에서 예약 페이지, 이메일 로그인 페이지, 예매 내역 확인 페이지까지 총 3가지의 예약 기능을 위한 페이지들을 개발하였습니다.

이번에 프런트 자바스크립트에서의 중요한 부분은 정규표현식, UI기능 별로 묶어 modular하게 개발로 총 2가지였습니다.

정규표현식

문자열의 특정 패턴을 찾을 수 있는 문법입니다.
패턴을 찾아서 추출, 삭제, 치환 등의 문자열 조작을 할 수 있습니다.
주로 이메일, 주소, 전화번호 등의 규칙 검사에 사용됩니다.
정규표현식 사용법에 대해서는 다음의 위키 사이트에서 학습하였습니다.
https://ko.wikipedia.org/wiki/%EC%A0%95%EA%B7%9C_%ED%91%9C%ED%98%84%EC%8B%9D

이번에 전화번호와 이메일 Input에 규칙검사를 적용하였습니다.
자바스크립트에서 정규표현식에 사용할 수 있는 함수가 몇개 존재합니다.

Function	Description
`exec`	대응되는 문자열을 찾는 RegExp 메소드입니다. 정보를 가지고 있는 배열을 반환합니다. 대응되는 문자열을 찾지 못했다면 null을 반환합니다.

`test`	대응되는 문자열이 있는지 검사하는 RegExp 메소드 입니다. true 나 false를 반환합니다.

`match`	대응되는 문자열을 찾는 RegExp 메소드입니다. 정보를 가지고 있는 배열을 반환합니다. 대응되는 문자열을 찾지 못했다면 null을 반환합니다.

`search`	대응되는 문자열이 있는지 검사하는 String 메소드 입니다. 대응된 부분의 인덱스를 반환합니다. 대응되는 문자열을 찾지 못했다면 -1을 반환합니다.

`replace`	대응되는 문자열을 찾아 다른 문자열로 치환하는 String 메소드입니다.

`split`	정규식 혹은 문자열로 대상 문자열을 나누어 배열로 반환하는 String 메소드입니다.

저는 값을 찾아낼 필요 없이 검사만 하면 되므로 test함수를 다음과 같이 사용하였습니다.

//이메일 규칙검사
if (!(/^[0-9a-zA-Z]([-_.]?[0-9a-zA-Z])*@[0-9a-zA-Z]([-_.]?[0-9a-zA-Z])*.[a-zA-Z]{2,3}$/.test(this.inputValue))) {
    return false;
}
return true;

객체화를 통한 Modular 구현

이를 위한 평가기준표는 다음과 같습니다.

자주 사용되는 함수를 객체형태로 묶어서 사용해야 한다.
UI 별로 기능을 묶어서 객체화된 모듈을 만들어야 하며, prototype방식을 적용해야 한다. …(~~당최 무슨 소리인지~~)

저도 처음에 보고 많이 혼동되었습니다.
그러나 마스터님들이 의도한 대로 최대한 구현하려고 노력하였고 완성하고 파일 구조를 보니 한눈에 어떤 파일이 어떤 용도인지 알 수 있었고, 가독성과 재사용성이 눈에 띄게 늘었습니다.

예를 들어 이메일 입력 UI에 대해서 살펴보도록 하겠습니다.

import {addClass, removeClass} from "./Constants.js";//자체 class추가 함수 import

export default function Email(emailElement, warningElement) {
    this.emailElement = emailElement;
    this.warningElement = warningElement;

    this.registerEvent();
}

Email.prototype = {
    registerEvent: function () {
        이메일UI에 이벤트 등록
    },
    check        : function () {
        이메일 규칙 검사
    },
    .... 다른 이메일 UI만을 위한 함수를 추가하여 사용가능 합니다.
}

위와 같이 Email UI만을 위한 객체와 파일을 만듭니다. prototype을 이용해 생성자 패턴으로 Email module을 만들었습니다.

import Email from "./module/Email.js";

document.addEventListener("DOMContentLoaded", () => {
    const emailElement = document.querySelector('#email');
    const emailWarningElement = emailElement.parentElement.parentElement.querySelector('.inline_form .warning_msg');
    const email = new Email(emailElement, emailWarningElement, activateReserveBtn);
    ...
    ...
})

위와 같이 예약하기 페이지에서 Email모듈을 받아와 객체를 생성하기만 하면 알아서 event 등록부터 필요한 기능을 수행합니다.
이후 어떤 페이지에서 이메일 UI를 필요로 해도 Email모듈만 받아와 객체를 생성해주면 됩니다.
물론 프런트엔드 프레임워크인 Vue나 React를 사용하면 애초에 개발을 Componenet단위로 하기 때문에 저절로 위와 같이 개발하게 됩니다.(이러한 형식의 개발은 재사용성이나 가독성을 엄청 끌어올리기 때문에 정말 좋다고 생각합니다.)
또한 javascript는 es6의 class를 사용한다 하더라도 내부적으로 결국 prototype을 사용하기 때문에 prototype을 제대로 이해해야합니다.
밑의 링크를 통해 공부하면 굉장히 좋습니다.
https://poiemaweb.com/js-prototype

완성본 시뮬레이션 영상입니다.

← Previous Post Next Post →