SPOTIFY

🔍 Project Overview

사이트명 : 스포티파이 모바일
작업기간 : 3일
라이브러리 : swiper, jQuery
유형 : 모바일, 데이터 바인딩, 리뉴얼

✅ Check Point

• 데이터 바인딩(Data Binding)이란?
• 비동기 데이터 통신(Asynchrous)
• Json

📚 Learning Point

1. json데이터 종류에 따라 분류하여 넣기
2. 시간계산을 통해 특정시간 이벤트발생 시키기
3. 컨텐츠 클릭시 해당 탭으로 이동하기

---

데이터 바인딩(Data Binding)이란?

화면상에 보여지는 데이터(View)와 브라우저 메모리에 있는 데이터(Model)를 묶어서(Binding) 서로 간의 데이터를 동기화하는 것을 의미한다.

예를 들어서 HTML에서 서버 혹은 스크립트상에서 받아온 데이터를 화면상에 그려주고 있다고 가정을 했을 때, 해당 값이 변경이 될 경우 다시 HTML 상에 데이터(값)를 변경된 값에 따라서 맞추어 주는 동작을 '데이터 바인딩'이라고 한다.

🔹 데이터 바인딩 종류

- 양방향 데이터 바인딩(2Ways data binding)

양방향 데이터 바인딩이란 뷰와 모델의 데이터를 동기화하는 것이다.
즉 사용자의 입력값에 따라 js의 데이터가 변경되고, js의 데이터가 변경되면 사용자의 화면도 변경된다.

대표적인 프레임워크는 AngularJS가 있다.

• 장점 : 코드량을 크게 줄여준다
• 단점 : 변화에 따라 DOM 객체 전체를 렌더링해주거나 데이터를 바꿔주므로, 성능이 감소되는 경우가 있다.

- 단방향 데이터 바인딩(1Way data binding)

단방향 데이터 바인딩이란 한쪽 방향으로만 제어가 가능한 것을 의미한다.
js에서는 사용자의 화면을 변경할 수 있지만, 사용자는 js에 있는 데이터를 자동적으로 변경시키지 못하기 때문에 변화된 값을 감지하여 데이터 바인딩을 시켜주어야 한다.

대표적인 프레임워크는 React가 있다.

• 장점 : 데이터 변화에 따른 성능 저하 없이 DOM 객체 갱신 가능하다.
  또한 데이터 흐름이 단방향(부모->하위 컴포넌트)이라, 코드를 이해하기 쉽고 데이터 추적과 디버깅이 쉽다.

• 단점: 변화를 감지하고 화면을 업데이트 하는 코드를 수동으로 작성해야 한다.

---

비동기 데이터 통신(Asynchrous)

데이터 통신으로 ‘요청(Request)’을 하였을 때, 어떠한 요청에 대한 ‘응답(Response)'을 기다리지 않고 다음 코드가 수행되는 처리 방식을 의미한다.
웹페이지를 리로드하지 않고, 데이터를 불러오는 방식이며 Ajax를 통해서 서버에 요청을 한 후 멈추어 있는 것이 아니라 그 프로그램은 계속 돌아간다.

• Ajax : Asynchronous Javascript And Xml(비동기식 자바스크립트와 xml)
• 자바스크립트를 이용해 서버와 브라우저가 비동기 방식으로 데이터를 교환할 수 있는 통신 기능

🔹 Ajax의 장단점

장점

• 필요한 데이터만 리로드하기 때문에 웹페이지 속도가 빠르다.
• 서버의 처리가 완료될 때 까지 기다리지 않고 처리 가능하다.
• 서버에서 Data만 전송하면 되므로 코딩의 양이 줄어든다.

단점

• 히스토리 관리가 안된다.
• 페이지 이동없는 통신으로 인한 보안상 문제가 있을 수 있다.
• 연속으로 데이터를 요청하면 서버 부하가 생길 수 있다.

---

Json

JavaScript Object Notation
비동기통신에 사용하는 대표적인 데이터 교환 형식

🔹 특징

• 용량이 적은 데이터를 교환하기 위해 데이터 객체를 속성:값의 쌍 형태로 표현한다.
• 웹 브라우저와 웹 서버 간 비동기 통신, 웹 서버 간의 데이터 교환, 데이터 저장 및 전송시 사용한다.
• 컴퓨터가 통신할 때 사용하는 프로그래밍 언어가 다르면 통신이 되지 않기때문에, Json이라는 표준 포맷을 사용하여 통신을 주고 받는다.
• Javascript 객체의 형식을 기반으로 만들어졌다.
• 독립형 언어이며 텍스트로 기술하여 사람도 쉽게 읽고 작성할 수 있다.

🔹 데이터 구조 형식

Javascript의 object(객체)와 같이 key(속성)-value(값)가 묶여진 표기법을 사용한다.

[
	{
		"title": "toystory",
    	"genre": ["animation","comic","kids"],
    	"age": 12
	},
  	{
		"title": "lalaland",
    	"genre": ["romance","musical"],
    	"age": 15
	}
 ]

---

📚[LP] 1. json데이터 종류에 따라 분류하여 넣기

json

{
    "items":[
        {
            "id":"1",
            "sort":"1",
            "snippet":{
                "themeColor":"rgb(225, 51, 0);",
                "thumbnail":"./assets/images/slide_spot_06.png",
                "title":"감성 있는 밤은 우릴 설레게 해요",
                "desc":"#국내외 #새벽감성 #감성적인"
            }
        },
        {
            "id":"1",
            "sort":"2",
            "snippet":{
                "themeColor":"rgb(245, 155, 35)",
                "thumbnail":"./assets/images/slide_spot_13.png",
                "title":"오늘도 방구석 두둠칫",
                "desc":"#국내 #가요 #내적댄스 #기분전환"
            }
        },
        {
            "id":"1",
            "sort":"3",
            "snippet":{
                "themeColor":"rgb(245, 155, 35)",
                "thumbnail":"./assets/images/slide_spot3_13.jpg",
                "title":"오늘도 방구석 두둠칫",
                "desc":"#국내 #가요 #내적댄스 #기분전환"
            }
        }
	]
}

Hot/New/Mood 탭메뉴에 따라 데이터를 분류하기 위해서 해당데이터 json 파일을 만든다.sort로 데이터종류를 구분해준다.

jQuery

/**
   * spot slide
   * @sort
   * [1-hot]
   * [2-new]
   * [3-mood]
   * @data : mainProgramData
   */
  function mainProgramData(sort){
    fetch('./assets/data/mainProgramData.json')
    .then((response) => response.json())
    .then((json) => {
        data = json.items;

        result = (sort === '1') ? data : data.filter(function (parm) {return parm.sort == sort });
  
        let html = '';
        result.forEach(element => {
            html+=` <div class="swiper-slide">
            <div class="img-wrap" >
                <div class="img-box" style="background:${element.snippet.themeColor}">
                    <img src="${element.snippet.thumbnail}" alt>
                </div>
            </div>
            <div class="txt-box">
                <strong class="title"><a href="">${element.snippet.title}</a></strong>
                <p class="desc">${element.snippet.desc}</p>
            </div>
        </div>`
            
        });
  
        $('#dataList1').html(html)
        
        var spotswiper = new Swiper('.spot-slide', {
          slidesPerView: 'auto',
          centeredSlides: true,
          initialSlide: 5,
          loop: true,
          pagination: {
            el: '.pagination',
            clickable: true
          },
       
        });
      })
  }
  mainProgramData();

result 라는 변수를 만들어 sort가 [1-hot]메뉴 일 경우 data = json.items;이 나타나도록 한다.

: data.filter(function (parm) {return parm.sort == sort });
그렇지 않을경우 filter(items 필터링) 를 이용해서 분류된 데이터를 가져오게 한다.

markup

<ul class="tab-list">
  <li class="tab-item on" data-sort="1"><a href="">Hot</a></li>
  <li class="tab-item" data-sort="2"><a href="">New</a></li>
  <li class="tab-item" data-sort="3"><a href="">Mood</a></li>
</ul>

탭 메뉴 마크업에 data-sort="" 값을 추가하여 해당메뉴 클릭 시 분류된 데이터가 들어오게한다.

jQuery

 $('.spot .tab-item').click(function(e){
    e.preventDefault();
    sort = $(this).data('sort');
    $(this).addClass('on').siblings('li').removeClass('on')
    mainProgramData(sort);
  })
  $(".spot .tab-item.on").trigger("click");

변수에 위에 만들어 둔 데이터를 가져온다.
클릭을 해야만 나타나기 때문에 강제로 한번 클릭해주는 .trigger("click")을 통해 클릭하지 않아도 보일 수 있도록한다.

---

📚[LP] 2. 시간계산을 통해 특정시간 이벤트발생 시키기

json

 "items":[
       {
        "id":"1",
        "snippet":{
            "thumbnail":"./assets/images/slide_schedule_01.jpg",
            "date":"03월 02일",
            "time":{
                "starhours":"17",
                "starMin":"30",
                "endhours":"21",
                "endMin":"30"
            },
            "title":"CRAVITY",
            "desc":"Seoul EBS Studio Hall,Seoul"
        }
       },
	]

jQuery

var now = new Date();
// 현재시간 
var hours = now.getHours();       // 현재 시간

data.forEach(element => {

  if((element.snippet.time.starhours - hours) <= 1 && (element.snippet.time.endhours - hours) >= 1){
  	live = 'on';
  }else{
  	live = '';
}

현재시간과 분을 구한다.
시간 : console.log(설정시간 - 현재시간) 을 통해 음수가 나올 경우 설정된 시간에 이벤트가 진행중인 것을 확인 할 수 있다.

if조건문을 통해 이벤트 시작시간에서 현재시간을 뺀 값이 1(양수)보다 작거나 같을경우와 끝나는시간이 현재시간 1(양수)보다 크거나 같을경우 live이라는 이벤트가 on되게 한다.

---

📚[LP] 3. 컨텐츠 클릭시 해당 탭으로 이동하기

markup

jQuery

$('.podcast .swiper-slide a').click(function(e){
    e.preventDefault();
    anchor = $(this).data('target');
    anchorMove = $('.program').offset().top

    $('html,body').animate({scrollTop:anchorMove-50});
    $(anchor).addClass('on').siblings('.program .program-box').removeClass('on');

    $('.program .tab-item').eq(2).trigger('click');

    $('.category-box a').each(function(i,item){
      if($(this).attr('href') == anchor){
        $(this).parent().addClass('on').siblings().removeClass('on')
      }
    })
  })

---

References

plumpsqrl9744.log : Javascript 데이터 바인딩(Data binding)
Georges Velog : 단방향 바인딩과 양방향 바인딩
sunaaank.log : [WEB] 양방향 단방향 데이터 바인딩
yenaryu.log : [Web] Json 데이터 활용 및 비동기통신
Log : [Ajax] 비동기통신이란?