[부스트코스] 프로젝트5-2.예약:기능:FE 리뷰 후기

화면 레이아웃

예약하기 - HTML/CSS가 제공되는 것을 기본으로 작성해야 하며, 화면구성은 아래 기획서대로 보여야 한다.
예약확인하기 - HTML/CSS가 제공되는 것을 기본으로 작성해야 하며, 화면구성은 아래 기획서대로 보여야 한다.

기능

예약하기 - 티켓입력

• 아래 기획서 내용대로 인터랙션이 동작한다.
• +,- 버튼을 누르면 숫자가 증가/감소되고, 금액이 변경된다.
• 0명이면 버튼이 비활성화 된다.

예약하기 - 예매자정보 입력

• 아래 기획서 내용대로 인터랙션이 동작한다.
• 총 매수는 예약상황을 합쳐서 갯수가 변경될 때 바로 변경되어 노출된다.
• 연락처 정보는 전화번호 포맷(휴대폰/일반전화 모두 가능)만 입력이 가능해야 한다. 그 외 값이 입력 되면 입력된 값의 형식이 틀렸다는 메시지를 자유롭게 만들어서 화면에 노출해야 한다.

예약하기 - 약관동의 및 예약

• 아래 기획서 내용대로 인터랙션이 동작한다.
• 약관은 접기/보기로 토글된다.
• 약관정보 동의에 체크하면 활성화된 상태로 보여진다.
• 예매갯수가 1개이상, 예매자입력,연락처입력,약관동의 된 상태라면 모든 값이 유효한 상태이다.
• 모든 정보가 유효하다면 '예약하기' 버튼이 활성화된 상태로 노출된다.

예매내역확인 (예약확인) - 이메일로그인

• 아래 기획서 내용대로 인터랙션이 동작한다.
• 이메일 규칙검사를 한다.
  예매내역확인 (예약확인) - 예약취소기능
• 아래 기획서 내용대로 인터랙션이 동작한다.
• 취소를 누르면 취소하겠냐는 메시지 레이어가 화면 가운데 뜨고 확인/취소를 통해 즉시 반영된다. 취소된 이후에는 '취소된 예약' 으로 새롭게 화면에 결과가 나온다.

소스코드

JavaScript - 객체지향개발

• 자주 사용되는 함수를 객체형태로 묶어서 사용해야 한다.
• UI 별로 기능을 묶어서 객체화된 모듈을 만들어야 하며, prototype방식을 적용해야 한다.

JavaScript- 정규표현식기반 유효성검증

• form에 입력된 값을 체크를 할 때는 값의 유효성(validation)을 체크해야 하며, 정규표현식을 써서 구현해야 함. (이메일 필드는 반드시 유효성검증해야 함)

JavaScript 클린코드

• 함수 하나에 여러개의 기능을 넣지 않고,함수를 여러개로 분리한다.
• 함수이름은 동사+명사이며 함수의 의도를 충분히 반영하고 있는가?
• 함수안의 내용은 이름에 어울리게 하나의 로직을 담고 있는가?
• 중복코드를 제거하고 공통부분을 공통함수로 만든다.
• 의도가 드러난 구현패턴. 의도가 표현되지 않은 코드를 최소한으로 줄이도록 한다.
• 전역변수를 없애려고 노력하자. (지역변수로 넣으면 될 걸 전역공간에 두지 말기 등)

 

 

예약하기 부분부터 살펴보자.

 

reserve.js

document.addEventListener("DOMContentLoaded", () => {
    Reserve.initReserve();
});

initReserve() 함수에서는 ajax 로 서버에서 상품 정보를 받아오고 아래의 함수들을 실행시킨다.

// load 함수들은 ajax 로 불러온 데이터들의 값들을 template 으로 화면에 전달해준다.
loadBackPageAndTopTitle(displayInfo.displayInfoId, displayInfo.productDescription);
loadMainImage(productDetail.productImages[0].productImageId);
loadTimeAndPriceInfo(displayInfo, productDetail.productPrices);
loadTicketContainer(productDetail.productPrices);
// 기획서의 내용대로 예매일을 위해 서버에서 1~5일후의 날짜를 가져온다.
loadReservationRandomDate();
clickTicketUpDownBtn();
// 정규표현식으로 예매 입력 폼들 유효성 체크
checkReserveInfo();
openAgreeInfo();
clickAgreeBtn();
clickReservationBtn(displayInfo.displayInfoId, displayInfo.productId);

이번 프로젝트는 전체적으로 신경써야하는 부분들이 많았다. 그래서 프로젝트를 검토하면서 부족했던 부분들을 여럿 발견하여 추후에 많이 추가하고 수정하였다.

 

 

중복 코드를 없애기 위해 유효성 검사를 하는 함수에서 전화번호, 이름, 이메일을 'tel', 'name', 'email' 라는 값으로 인자값에 넣어주었다. 함수를 한꺼번에 사용하다보니 '전화번호를', '이름을' 처럼 명사 뒤에 붙는 조사가 달라지는 경우가 생기는데 이 부분을 위해 getComleteWord() 라는 명사의 끝이 받침이 있는지 없는지를 구분하여 뒤에 알맞은 조사를 붙이는 함수를 만들었다.

 

 

이번 프로젝트를 하면서 정규표현식을 처음 알게 되었는데 그 편의성에 많이 놀랐다. 코드로 구현했으면 많이 길어졌을 법한 유효성 검증 코드가 정규표현식 한 줄로 끝나는 것이 정말 신기했다. 앞으로도 자주 써먹어야지...

 

 

DB 에 전화번호가 하이픈(-)이 포함 된 번호가 저장되기 때문에 처음에는 정규표현식으로 입력 폼에 하이픈이 있는지 검증하는 코드를 짰었다. 문득 든 생각이 하이픈을 자동으로 넣어주면 사용자 입장에서 기분이 좋을 것 같았다. 그래서 적절한 위치에 하이픈을 추가해주는 addPhoneHypenFilter() 함수를 추가하였다.

 

 

입력 폼 유효성 검사를 하면서 옳지 않은 값이 들어왔을 때 alert 로 알려준다.

 

 

마지막으로 티켓을 선택하고 전화번호, 이름, 이메일을 모두 입력하고 동의 체크까지 해야 예매하기 버튼이 녹색으로 활성화 되고 버튼을 누르면 post 형식으로 서버에 사용자가 예매한 내용을 전달한다.

 

 

 

bookinglogin.js

document.addEventListener("DOMContentLoaded", () => {
    Login.checkEmailForm();
});

checkEmailForm() 에서 두가지 함수를 실행시킨다.

// 검색할 이메일 유효성 검사
checkEmailForm()
// text 폼 아래 나타나는 유효성 안내 문구
loadCheckEmailMessage(state)

예매 내역이 존재하는 이메일을 입력하고 submit 했을 경우 해당 이메일을 세션에 저장하고 myreservation 페이지로 전환되도록 서버에서 컨트롤러와 인터셉터를 설정해주었다. 이메일에 대한 예매 내역이 존재하지 않을 경우 현재 bookinglogin 페이지로 리다이렉트 된다.

 

 

 

myreservation.js

document.addEventListener("DOMContentLoaded", () => {
    MyReservation.initMyReservation();
});

initMyReservation() 에서 실행시키는 함수들

// 해당 이메일의 예매 내역을 서버에서 가져온다.
loadReservations(reservationInfo);
// 상단에 예매 내역 전체 개수, 관람전 예매 내역 개수, 완료된 예매 개수, 취소된 개수를 보여준다.
clickReservTopBoardView();
// 관람전 예매 내역 개수 목록에서 취소 버튼을 누르면 취소 목록으로 이동한다.
clickCancelBtn();
// 인자 값에 맞는 목록을 refresh 한다.
showRefreshList('total');

 

많이 애를 먹었던 부분이다. 특히 취소하는 부분을 구현하면서 목록에서 취소버튼을 클릭한 부분의 카드를 제거하는 부분이 뜻대로 되지 않아서 힘들었다.

let cardItemNode = cancelBtn.closest('.card_item');
let cancelNode = cardItemNode.querySelector('.booking_cancel');
cancelNode.parentNode.removeChild(cancelNode);

이렇게 했더니 아주 기분좋게 삭제가 되었다.

 

 

상단에 예매 내역 상황별 개수를 보여주는 부분에서 중복 코드를 없애기 위해서 'total', 'confirmed', 'used', 'cancel' 값을 함수의 인자값으로 넣어서 각각 알맞은 node 를 가져와서 알맞은 행동을 하도록 하였다.

 

 

isOverReservationDate() 에서 처음에 서버에서 가져온 날짜로 관람전 예매 내역과 관람후 예매 내역을 구분하도록 하였다.

 

 

 

 

 

리뷰 글을 쓰면서 항상 느끼는 건데 코드를 짤 때는 많이 생각하고 정말 많이 실행해보면서 영차 영차 코드를 짜는데, 지금처럼 나중에 코드를 다시 보면 그렇게 오래 걸릴만한 코드는 아니였다는 생각이 든다.

 

무작정 코딩을 시작하는 것보다는 구현해야 할 것들을 먼저 확실하게 정리해놓고 전체적인 코드를 넓게 보며 코딩하는게 시간이 훨씬 단축되고 오류 찾기도 더 쉬워질 것 같다.

 

 

 

 

tab 을 사용하는 부분은 생각치도 못했다 ..ㅠㅡㅜ 고쳐봐야지 ~~!

 

 

 

이 부분 또한 신경쓰지 못했던 부분중에 하나이다. FE 는 사용자와 맞닿아 있는 부분이고 개발자 도구 사용시 변형이 가능하다는 점을 항상 염두에 두어야겠다. 이 부분에 대해 많이 찾아보고 백엔드 부분을 수정해야겠다.

 

 

 

이런 팁을 .... !! 앞으로 평생 써먹을 수 있는 기술을 하나 선사받았다. 감사합니다 리뷰어님 !

 

 

 

 

 

 

전체 프로젝트 중 이번 5번 프로젝트가 시간도 많이 걸렸고 가장 심하게 코드와 싸웠던 것 같다.

 

싸우면서 코드를 이겨내고 내가 원하는대로 동작할 때의 그 기분이란 !! 크으 ~~~~~~~

 

반대로 이기지 못한채로 시간이 많이 늦었을 때...... 정말 속이 답답해서 잠이 안온다.

 

그래서 될 때까지 하다보니 밤을 새운 적이 꽤나 있는데, 리뷰를 쓰는 지금부터 앞으로는 절대 밤을 새우는 일은 하지 않을 것이다.

 

저렇게 밤을 새고 항상 늦게 자다보니 내 몸 구석구석이 아프다고 신호를 보내는 것이 느껴졌고 이런 식으로 하다가는 평생 하고 싶은 프로그래밍을 오래 하지 못할 수도 있다는 생각이 번뜩 들었다.

 

개발자에게 있어서 운동과 건강 관리는 필수인 것 같다. 그렇다고 늦게 자던 걸 일찍 자고 똑같이 일어나면 안되겠지 !

 

앞으로는 올바른 시간에 취침해서 아침 일찍 일어나는 습관을 기를 것이다.

 

운동도 꾸준하게 열심히 해서 머슬 코더가 되자 !!

 

 

 

 

 

 

 

#부스트 코스