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

## 평가 기준표

화면 레이아웃

#상세페이지 하단 영역

• 공지 사항과 지도는 일반 이미지를 사용해서 추가한다. 지도 이미지는 동일한 지도를 재사용해도 좋다.

기능

#타이틀영역 배경이미지 슬라이딩

• 서버에 기타(etc)로 존재하는 이미지가 있다면, 좌/우슬라이딩 버튼을 노출하고, 이미지가 슬라이딩 애니메이션 되야 한다.
• 무한 슬라이딩으로 계속 동작한다.
  펼쳐보기
• 접기/펼치기를 선택하면 레이어의 높이가 변하면서 반응한다.
  하단영역의 상세정보와 오시는길
• 탭UI로 동작한다. 화면새로고침 없이 탭을 통해서 동작해야 한다.

소스코드

#HTML,CSS 규칙기반 코딩

• 제공되는 HTML/CSS를 수정할 수 있으며, 제공되는 코드의 형태의 구조를 지나치게 수정하지 않도록 한다.
• 기존에 제공되는 class와 id규칙에 따라서 새로운 내용을 추가할 수 있다.
  JavaScript 객체리터럴 패턴사용
• 전체 코드는 객체리터럴 패턴으로 구현해야하고, 더불어 전역변수를 최소화 해야 한다. 한개이상 객체리터럴을 사용할 수 있다.

#브라우저 개발 규칙

• 상단 타이틀 이미지 영역의 애니메이션은 CSS3의 transition과 transform을 활용해서 구현해야 한다.
• 상단에 추가로 노출해야 하는 기타이미지는 Ajax요청을 통해 가져온다.
• DOMContentloaded 이후에 모든 자바스크립트 로직이 동작되게 한다.
• Event delegation으로 처리할 수 있는 영역은 최대한 delegation방법으로 처리한다.
  JavaScript 라이브러리 사용
• Templating 작업은 handlebar 라이브러리를 사용해서 구현해야 한다.
• 접기/펼치기 기능은 jQuery 라이브러리를 사용할 수 있다.
  JavaScript 클린코드 - 함수 하나에 여러개의 기능을 넣지 않고,함수를 여러개로 분리한다.
• 함수이름은 동사+명사이며 함수의 의도를 충분히 반영하고 있는가?
• 함수안의 내용은 이름에 어울리게 하나의 로직을 담고 있는가?
• 중복코드를 제거하고 공통부분을 공통함수로 만든다.
• 의도가 드러난 구현패턴. 의도가 표현되지 않은 코드를 최소한으로 줄이도록 한다.
• 전역변수를 없애려고 노력하자. (지역변수로 넣으면 될 걸 전역공간에 두지 말기 등)

 

 

 

 

전체적인 나의 코드 구성은 이렇다.

document.addEventListener("DOMContentLoaded", () => {
    Detail.getDisplayInfoResponseData();
    Detail.addDetailOrPathClickEvent();
    Detail.addProductContentBtnClickEvent();
});

 

 

Detail.getDisplayInfoResponseData() : 서버에서 http 로 보내준 데이터를 받아서 화면에 뿌려준다.

• Detail.showMyReservationEmail() : 로그인 정보가 세션에 남아있다면 '예약확인' 대신에 이메일을 화면에 추가

• Detail.loadDetailLocationInfo() : 공연장 상세 정보, 위치 정보들을 화면에 추가

• Detail.loadProductImages() : 슬라이딩을 구현할 이미지들을 화면에 추가

• Detail.initPrevNextButton() : 이미지가 2개 이상일 경우에만 화살표를 보여주도록 함

  • SlideImg.slideProductImages : 슬라이딩 구현

• Detail.loadProductContentAndEvent() : 이벤트 정보와 공연 정보를 화면에 추가

• Detail.loadCommentStarGrade() : 댓글 별점을 화면에 추가

• Detail.loadComments() : 댓글들을 화면에 추가 (3개만 가져오도록 함)

• Detail.loadReservationButtonPath() : 예약하기 버튼에 경로 설정

 

 

Detail.addDetailOrPathClickEvent() : 상세보기와 오시는길 버튼 이벤트 구현

 

Detail.addProductContentBtnClickEvent() : 공연 정보 펼쳐보기, 닫기 구현

 

 

 

처음에 사용할 정보들을 가져왔을 때, 이 정보들을 바로 함수들의 인자값으로 넣어주는 방법과 해당 객체의 전역 변수 값으로 넣어놓고 필요할 때 this 로 불러쓰는 방법 중에 고민을 많이 했다. 이번 프로젝트에서는 후자를 선택했는데 다음 프로젝트에서는 전자의 방법으로 진행해볼 예정이다.

 

 

댓글을 보여주는 부분을 구현하다가 문득, '만약에 댓글이 몇천개라면 어떡하지 ?' 라는 생각이 들었다. 몇천개가 아니라 몇만개라면 분명 화면을 로드하는데에 걸리는 시간이 얼마나 더 걸릴지는 모르겠지만 아무래도 체감할 수 있는 시간이 걸릴 것이다. 그래서 쿼리문을 하나 더 추가하여 detail 페이지에서는 최근 댓글을 3개만 불러와서 보여주고 '예약평 더보기' 를 눌렀을 때 이동하는 review 페이지에서 모든 댓글을 보여주는데, 여기서 댓글들을 모두 불러 오는 것이 아니라 메인 페이지에서 product 더보기를 구현했던 것처럼 더보기를 눌렀을 때 10개씩 추가로 더 불러오는 방식을 사용했다. 다음 번에 이런 방식을 구현할 일이 생기면 그 때는 무한 슬라이딩으로 구현 해보고 싶다.

 

 

아무래도 이번 프로젝트에서 가장 골치가 아팠던 부분을 이미지 슬라이딩이다. promotion 무한 슬라이딩을 구현했던 것과 별 다를게 없을거라고 생각했었지만 막상 해보니 절대 그렇지 않았다. 하루 종일 여기에만 매달렸었고 수많은 시행착오를 겪은 결과, 나름대로 해결책을 찾았지만 이것보다 더 나은 방법이 분명 존재할 것이다.

 

 

내가 사용한 방법은 슬라이딩을 구현하고자 할 이미지가 '1 2 3 4' 가 있다고 했을 때 무한 슬라이딩을 자연스럽게 하기 위해서 '4 1 2 3 4 1' 이런식으로 첫번째 앞에 마지막을, 마지막 뒤에 첫번째를 추가하고 시작할 때의 transform 을 1 이미지 위치로 설정했다. 그리고 transitionend 이벤트를 사용하여 4 뒤에 1 이미지에 도달했을 경우 그 순간의 transition 을 0 으로 설정하여 눈에 보이지 않게 앞에 있는 1로 이동하도록 하였다. 앞쪽 1에서 4로 가는 것도 마찬가지이다. 방법을 알고 바로 구현했으면 별 다른 시행착오 없이 금방 구현 했겠지만 처음부터 시행착오를 겪으면서 결과를 만들어 내는 과정이 정말 재미있고 보람찼다.

 

 

 

 

첫 번째 제출은 FAIL 이였다. 리뷰어께서 리뷰해 주신 부분들을 살펴보자.

 

 

 

 

이 부분은 리뷰어께서 팁을 알려주셨는데 보자마자 정말 좋은 방법이라는 생각이 확 들었다. 프로젝트를 진행하면서 콤마 실수가 은근히 많았기 때문이다.

 

 

 

 

 

항상 신경을 쓴다는게 이번에도 또 실수를 해버렸다. 리뷰어님 말씀이 100번 맞는 말씀이시다. 숫자를 직접적으로 표기하는 습관을 버리고 변수화 하거나 주석을 다는 습관을 들여야겠다.

 

 

 

 

 

정말 생각치도 못했던 부분이다. 리뷰어님께서 비유를 너무 잘 들어주셔서 확 와닿았다. 앞으로는 alt 꼭 빼먹지 않기 !

 

 

 

 

 

리뷰어님께서 좋은 팁을 주셨다. 적용해보니 스크롤이 정말 부드럽고 smooth 하게 올라갔다. 앞으로 프로젝트에 모두 적용해야지 ㅎㅎ...

 

 

 

 

 

빠르게 수정 후 다시 제출해서 PASS 를 받을 수 있었다. 다음 프로젝트까지 걱정해주시는 리뷰어님은 천사다.

 

 

 

 

focusout ?? blur ?? 어디서 들어 본 것 같은데.... 바로 찾아보았다.

 

 

focusout 과 blur 의 차이

 

focusout 는 의미 그대로 엘리먼트가 포커스를 잃었을 때 발생되는 이벤트이다.

같은 용도로 사용되는 이벤트로 blur 가 있는 것이다.

 

둘 사이의 차이점은 버블링 여부이다. => 버블링은 다른 글을 참고바란다. (http://mygumi.tistory.com/315)

focusout 는 버블링이 일어나고, blur 는 버블링이 일어나지 않는다.

 

세트로는 {focusin - focusout} 와 {focus - blur} 로 분류된다.

출처: https://mygumi.tistory.com/321 [마이구미의 HelloWorld]

 

 

음... 보아하니 가장 큰 차이점은 버블링 여부인 것 같다. 이 둘을 헷갈리지 않게 조심해서 필요할 때 적용해봐야겠다.

 

 

 

 

1차 리뷰에서 지적을 해주신 부분이다. 고민을 조금 하다가 이런식으로 바꿔보았는데 내 생각으로는 만약 기획이 et 이미지를 모두 보여주는 것으로 바뀌었을 때는 두 번째 변수 값을 로드된 product 이미지들의 개수로 바꾸면 될 것이다.

 

 

 

 

이번 상세보기 프로젝트4 는 지난 번 프로젝트3 때와는 느낌이 사뭇 달랐다. 프로젝트3를 진행 할 때는 모르는게 너무 많고 안되는 것도 많아서 난관에 부딪힐 때가 정말 많았는데, 이번 프로젝트를 진행할 때는 뭔가 자신감이 넘쳤다. 코드를 짜면서 내 코드에 대해 확신이 들었고, 확신이 들지 않을 때도 빠르게 실행 시켜보면서 콘솔창에 나타난 에러들을 보며 빠르게 문제점을 찾아나갔다. 이제 무언가를 머릿속으로 구상했을 때 내가 이걸 구현 할 수도 있겠다는 생각이 든다. 물론 그 과정에 있어서 모르는 것 천지 투성이겠지만 이런 자신감이 생긴 것 만으로도 큰 발전인 것 같다. 부스트 코스를 진행하길 정말 잘 했다는 생각이 한번 더 든다. 남은 프로젝트들도 화이팅 !

 

 

 

 

 

 

 

#부스트 코스