[Web] Json 데이터 활용 및 비동기통신

동기통신 vs 비동기통신

🔸동기통신

• 작업이 일정한 간격 하에 수행되도록 동기화 하여, 작업 수행 주기를 맞춰 주는 일
• 한 작업이 끝날 때 까지 대기 시간이 발생함

🔸비동기통신

• 웹페이지 사용자의 요청에 빠르고 효율적으로 응답하기 위해 동기화 하지 않는 통신 방법
• 사용자의 인터페이스를 처리하는 코드인 javascript가 사용자의 모든 요청에 대한 대기시간을 부여하면 불편함 발생
• 서버에서 데이터를 가져와서 화면에 표시하는 태스크를 수행할 때, 서버로부터 데이터가 응답될 때까지 대기하지 않고(Non-Blocking) 즉시 다음 태스크를 수행
• 화면에 영향을 주지 않고(새로고침 하지 않고) 데이터를 서버에서 비동기적으로 가져오기 때문에, 필요한 부분의 데이터만 불러와 사용 가능

---

JSON

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

🔸특징

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

🔸데이터 구조 형식

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

• 배열(array)는 리스트 형식 [대괄호, ,]
• 객체(object)는 속성 값 쌍의 집합 {중괄호}
• 복수의 data는 ,로 구분

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

---

Json 데이터 Javascript로 끌어오기

🔸기본 구조

항상 fetch-than 문법을 사용

fetch('./data.json') 
.then((response) => response.json()) 
.then((json) => {
    x = json.items

    html = '';
    x.forEach(el => {
        html += `<li></li>`;
    });ㅣ

    $('.list').html(html);
})

• fetch 비동기통신으로 data.json이라는 데이터가 담긴 파일의 경로를 가져옴
• response.json : json의 데이터를 받는다(response).
• x라는 변수를 지정. x는 json에서 {중괄호}가 감싸고 있는 데이터 전체를 의미
• x에 대한 복수선택자 forEach문을 사용. el(element)
• html += 마크업에서 데이터 채워 넣을 부분 작성
• list라는 마크업을 감싸는 태그를 html(html)로 넣어줌

🔸마크업 정보 넣기

index.html

    <ul class="list1">
        <!-- <li>
            이름:"홍길동",<br>
            나이:20
        </li>
         -->
    </ul>

html 마크업 작성
json의 데이터를 넣을 부분은 삭제

data.json

[
    {
        "이름":"홍길동",
        "나이":20
    },
    {
        "이름":"김일일",
        "나이":5
    },
    {
        "이름":"김이이",
        "나이":80
    },
    {
        "이름":"김삼삼",
        "나이":19
    }
]

필요한 데이터 작성

custom.js

fetch('./data.json')
.then((response) => response.json()) 
.then((json) => {
//
    let html = '';
    json.forEach(human => { 
        html += `<li>${human.이름} <br> ${human.나이}</li>`;
    });
//
    $('.list1').html(html);
})

• fetch에 json 데이터 경로
• 재할당 가능한 변수 let사용
• html +=에 삭제한 마크업 양식 작성
  element명을 human으로 지정
  이름:"홍길동" = ${human.이름}
  나이:20 = ${human.나이}
• 데이터를 감싸는 ul태그 .list1 html(html)

🔸데이터 구분 텍스트 만들기

위와 같은 html, json을 응용하여 json의 나이에 대해 데이터를 구분(성인/미성년자) 텍스트 띄우는 javascript 작성

fetch('./data.json')
.then((response) => response.json()) 
.then((json) => {

    let html = '';
    json.forEach(human => {
        if(human.나이>=20){
            isAdult='성인'
        }else{
            isAdult='미성년자' 
        }

        html += `<li>${human.이름} <br> ${isAdult}</li>`; 
    });

    $('.list1').html(html);
})

• 만약 human.나이가 20세 이상이면,
  isAdult '성인'이라는 변수 생성
• 20세 이상이 아니라면
  isAdult '미성년자'라는 변수 생성
• html += ${human.이름}으로 이름을 보여주고, 나이데이터를 대신해 ${isAdult}나이변수를 보여주기

💡if문 한줄 작성법

isAdult = (human.나이 >= 20) ? '성인' : '미성년자'

위의 ifelse문은 한줄로 작성 가능하다.
isAdult라는 변수는, human.나이가 20세 이상일때 ?(=if보여져라) 성인 :(else아니라면) 미성년자

🔸swiper에 json 데이터 넣기

index.html

<div class="swiper list1">
  <div class="swiper-wrapper">
<!-- <div class="swiper-slide">
		<img src="" alt="">
		<p>제목</p>
		<p>내용</p>
	</div> -->
  </div>
</div>
<div class="swiper list2">
  <div class="swiper-wrapper">
<!-- <div class="swiper-slide">
		<img src="" alt="">
		<p>제목</p>
		<p>내용</p>
	</div> -->
  </div>
</div>

html swiper 마크업 작성
json의 데이터를 넣을 부분은 삭제

movie.json

{
    "items":[
        {
            "img":"",
            "title":"고딩엄빠",
            "desc":"부모라면 공감한다",
            "age":15,
            "cate":"comic"
        },
        {
            "img":"",
            "title":"스파이더맨",
            "desc":"거미줄",
            "age":19,
            "cate":"drama"
        },
        {
            "img":"",
            "title":"어덜츠",
            "desc":"공포기괴",
            "age":19,
            "cate":"dark"
        }
    ]
}

itmes라는 변수를 생성하여 데이터를 감싸줌
img에 이미지 링크 작성

custom.js

fetch('./movie.json') 
.then((response) => response.json()) 
.then((json) => {
    items = json.items 
//
    let html = '';
    items.forEach(items => { 
        html += `<div class="swiper-slide"> 
        <img src="${items.img}" alt="">
        <p>${items.title}</p>
        <p>${items.desc}</p>
        <p>${items.age}</p>
        </div>`
    }); 
//
    $('.swiper-wrapper').html(html); 
//
    swiper('.list1'); //각각 swiper에 name을 적용할 swiper명을 넣어준다!
    swiper('.list2'); 
})
//
function swiper(name){ //name이라는 전체 변수를 function으로 지정해주고
    var swiper = new Swiper(name, {
        slidesPerView:1.5,
        spaceBetween:10,
        loop:true,
    });
}

• items라는 변수를 지정하여 {중괄호}가 감싸고 있는 json.items을 가져오기
  • 💡여기서 items는, 중괄호에 데이터를 감싼 변수인 items일뿐, 데이터의 경로까지 닿지 못함!
  • 💡json.forEach가 아닌,items경로안의 데이터를 찾아야하기 때문에 item.forEach
• items에 접근하여, items라는 대괄호에서 forEach문을 돌려줌.
• html에 주석한 마크업을 동일하게 작성
• 데이터를 감싸는 div인 swiper-wrapper에 대한 html(html)
• 다수의 동일한 속성을 가진 스와이퍼에 데이터를 넣는 경우라면, name이라는 전체 변수를 fuction으로 지정해주고 var swiper으로 swiper 속성을 부여한다
• 함수 안에 swiper(.name)을 넣어준다.
  index에서 전체를 감싸는 swiper명은 list1,list2

🔸json데이터 종류에 따라 분류하여 넣기

index.html

<h1>코믹</h1>
<div class="swiper list1">
    <div class="swiper-wrapper">
        <!-- <div class="swiper-slide">
            <img src="" alt="">
            <p>제목</p>
            <p>내용</p>
        </div> -->
    </div>
</div>
<h1>드라마</h1>
<div class="swiper list2">
    <div class="swiper-wrapper">
        <!-- <div class="swiper-slide">
            <img src="" alt="">
            <p>제목</p>
            <p>내용</p>
        </div> -->
    </div>
</div>
<h1>다크</h1>
<div class="swiper list3">
    <div class="swiper-wrapper">
        <!-- <div class="swiper-slide">
            <img src="" alt="">
            <p>제목</p>
            <p>내용</p>
        </div> -->
    </div>
</div>

json데이터의 category별로 분류한 마크업 작성

custom.js

fetch('./movie.json') 
.then((response) => response.json()) 
.then((json) => {
    items = json.items 
//
    var comic = items.filter(function (param) {return param.cate == "comic" }); 
    var drama = items.filter(function (param) {return param.cate == "drama" });
    var dark = items.filter(function (param) {return param.cate == "dark" }); 
//
    comichtml = ''; 
    comic.forEach(comic => {
        comichtml += `<div class="swiper-slide"> 
        <img src="${comic.img}" alt="">
        <p>${comic.title}</p>
        <p>${comic.desc}</p>
        <p>${comic.age}</p>
        </div>`
    }); 
//
    dramahtml = '';
    drama.forEach(drama => {
        dramahtml += `<div class="swiper-slide"> 
        <img src="${drama.img}" alt="">
        <p>${drama.title}</p>
        <p>${drama.desc}</p>
        <p>${drama.age}</p>
        </div>`
    }); 
//
    darkhtml = '';
    dark.forEach(dark => {
        darkhtml += `<div class="swiper-slide"> 
        <img src="${dark.img}" alt="">
        <p>${dark.title}</p>
        <p>${dark.desc}</p>
        <p>${dark.age}</p>
        </div>`
    }); 
//
    $('.list1 .swiper-wrapper').html(comichtml); 
    $('.list2 .swiper-wrapper').html(dramahtml); 
    $('.list3 .swiper-wrapper').html(darkhtml); 
//
    swiper('.list1'); 
    swiper('.list2'); 
    swiper('.list3'); 
})
//
function swiper(name){ 
    var swiper = new Swiper(name, {
        slidesPerView:1.5,
        spaceBetween:10,
        loop:true,
    });
}

• filter (items 필터링)
  var comic = items.filter(function (param) {return param.cate == "comic" });
  comic 변수는 = items라는 배열에 대해 필터링. param이라는 데이터 값 중 cate(카테고리)이 "comic"이라고 해당되는 것들만 가져온다
• 각각의 분류에 대한 html 생성
  각각의 html을 작성해주었기 때문에 el로 해서, el.img el.title로 해줘도 된다.
• 전체에 대해 감싸는 swiper-wrapper에 해당하는 html 삽입