부스트 코스(웹) PROJ3-2

Posted by 이창권 on August 12, 2019

부스트 코스 proj3-2를 진행하였습니다.

proj3-1이 예약 서비스의 백엔드 파트였다면, 이번 프로젝트는 네이버 예약 서비스 메인 페이지의 프론트 엔드 부분을 개발하였습니다.

개발해야하는 기능은 크게 3가지였습니다.

프로모션 영역(슬라이딩 이미지)

세부 주요 기준으로

  • 프로모션영역의 이미지는 1개보다 많으며, 자동으로 슬라이딩되어 넘어간다.
  • 슬라이딩 이미지는 애니메이션이 되면서 좌측으로 이동하는 것이 보여야한다.
  • 마지막 이미지에 다다르면 처음것이 그 다음으로 노출되야 한다. 마지막것에서 처음내용이 다시 보이는 부분은 끊겨서 노출되도 상관 없으며, 중요한 건 다시 처음부터 슬라이딩이 계속 되야 한다는 것이다. (엄격하진 않지만 최대한 자연스럽게 동작하려고 해야 한다)
  • 상단영역의 애니메이션은 CSS3의 transition과 transform 속성을 JavaScript로 제어하면서 구현해야 한다.

사실 jQuery에 슬라이더 플러그인이 굉장히 많이 있죠

  • Draggable Dual-View Slideshow
  • Swiper
  • slick

플러그인이나 라이브러리를 가져다 쓰는 것도 좋지만, javascript와 css에 익숙해지는데 라이브러리를 실제 구현해 보는 것만큼 좋은 것도 없다고 생각합니다.

카테고리노출영역(탭UI)

세부 주요 기준으로

  • 전체리스트가 Ajax를 통해서 화면에 4개의 아이템이 노출된다.
  • 탭별로 전체갯수가 상단에 노출되야 한다.
  • 각 아이템(전시상품)은 이미지/제목/장소/설명이 노출되야 한다.
  • 탭을 누르면 다른 카테고리 콘텐츠 4개가 다시 노출된다.
  • 더보기를 누르면 4개씩 노출되야 한다. 4개보다 적으면 적은 만큼 노출되야 한다.
  • 더보여줄 데이터가 없다면 더보기는 사라진다.
  • 카테고리 탭을 선택할 때마다, Ajax요청을 해서 데이터를 가져와야 한다.
  • 탭메뉴 (전시/뮤지컬/콘서트 등)는 Event delegation으로 구현한다.

세부 기준 중, 첫번째 중요한 부분은 카테고리 탭을 선택할 때마다, Ajax요청을 해서 테이터를 가져와야 한다.는 부분입니다.

브라우저의 새로고침 없이 데이터를 얻어오는 더 좋은 UX를 제공하는 방법으로 비동기(ajax)를 통해 필요한 부분만(페이지의 일부분)을 새로 렌더링하는 방법이 있습니다.

Ajax사용법

  • Vanillar JS

      function ajax() {
      var oReq = new XMLHttpRequest();
            
      oReq.addEventListener("load", function() {
          console.log(this.responseText);
      });
            
      oReq.open("GET", "http://www.example.org/example.txt");
      oReq.send();
  }

  • jQuery

      function ajax(){
      $.post('loldog',(response)=>{
          console.log(response);
      }   
  }

  • Axios(최근 가장 많이 쓰는 형태)

      async function ajax(){
      var response=await axios.get('http://www.example.org/example.txt')
      console.log(response);
  }

사실 이 중, axios와 async, await 결합해서 가장 많이 씁니다.

비동기적인 코드를 동기적인 코드로 쓸 수 있어 개발 속도도 굉장히 빠르고 가독성도 좋기 때문입니다.

그래도 배우는 시간인 만큼 XMLHttpRequest객체를 이용해서 개발을 진행하였습니다.

세부 기준중, 두번재로 중요한 부분은 탭메뉴 (전시/뮤지컬/콘서트 등)는 Event delegation으로 구현한다.입니다.

<ul>
    <li>
        <img src="https://images-na.,,,,,/513hgbYgL._AC_SY400_.jpg" class="product-image" >
    </li>
    <li>
        <img src="https://images-n,,,,,/41HoczB2L._AC_SY400_.jpg" class="product-image" >
    </li>
    <li>
        <img src="https://images-na.,,,,51AEisFiL._AC_SY400_.jpg" class="product-image" >  
    </li>
    <li>
        <img src="https://images-na,,,,/51JVpV3ZL._AC_SY400_.jpg" class="product-image" >
    </li>
</ul>

만약 위와 같은 <li>태그 하나하나에 이벤트를 걸여야 한다면 어떨까요? 심지어 <li>가 100개로 늘어난다면? 동적으로 <li>를 만들어 줘야하는 상황이라면?

매번 이벤트를 걸어줘야 한다면 브라우저도 감당하기 힘들뿐더러, 코드도 굉장히 비효율적일 것입니다.

하지만 <ul>태그 하나에만 이벤트를 걸어주고 event bubbling을 사용하면 단번에 해결 가능합니다.

ul.addEventListener("click",function(evt) {
    console.log(evt.currentTarget, evt.target);
});

위의 코드를 실행시킨 다음 <img>,<li>를 클릭해도 이벤트가 실행됩니다.

<img>,<li>태그 모두 <ul>에 속하는 태그이기도 하기 때문입니다.

이것을 이벤트 버블링이라고 합니다.

클릭한 지점이 하위엘리먼트라고 하여도, 그것을 감싸고 있는 상위 엘리먼트까지 올라가면서 이벤트리스너가 있는지 찾는 과정입니다.

이를 이용한다면 예약 서비스의 탭메뉴 하나하나에 이벤트를 걸어주지 않아도 상위 태그 하나에만 이벤트를 걸어주는 형식으로 처리가 가능합니다.

HTML templating

사실 이부분 개발을 어떻게 해야하나? jsp를 배운김에 jsp를 써야하나? 그냥 javascript로 구현을 해야하나? 고민 끝에 그냥 javascript로 구현하기로 하였습니다.

물론 아직까지 jsp로 개발된 사이트들이 많지만, 최근에 javascript를 이용한 프레임워크(React, Vue)등이 인기가 많아지기도 하였고 template언어의 인기가 떡락하고 있기 때문에 그냥 javascript로 하였습니다.

저의 경우에는 node.js의 template언어인 ejs를 써봤었는데, 너무 옛날 언어 같다는 느낌을 많이 받은 것도 영향이 있었던 것 같습니다.

<script type="rv-template" id="itemList">
    <li class="item">
        <a href="/htmls/detail.html?id=${id}" class="item_book">//response data에서 id를 받아 replace함수를 통해 ${id}를 교체
    </li>
</script>

html파일 내에 위와같이 script형태로 template을 보관한 후, ajax를 통해 받은 response data를 해당 template에 렌더링하는 형식으로 구현하였습니다.

끝입니다.~~~~~~~

← Previous Post Next Post →