📄 Naver Shopping

✔ Json

❔ Json

💬 Json이란, Javascript 객체 문법을 따르는 문자 기반의 데이터 포맷입니다. Naver Shopping 페이지 클론코딩은 Json을 이용하여 데이터 전송을 중점으로 제작을 하였습니다.

📌 Json 구조

💬 JSON 안에는 Javascript의 기본 데이터 타입인 문자열, 숫자, 배열, boolean 외 다른 객체를 포함할 수 있습니다. 이런 방식으로 데이터 계층을 구축할 수 있습니다.

"liveCalendar": [
  {
    "largeSrc": "https://95choijh.github.io/naverShopping/asset/images/liveCalendar01.png",
    "largeTitle": "만도 애프터 블로우 & 블랙박스 서머위크 기념 라이브",
    "date": "6월 30일",
    "time": "17:00",
    "desc": "라이브방송시 최대55%DC,사은품증정",
    "smallSrc": "https://95choijh.github.io/naverShopping/asset/images/liveCalendar_small01.png",
    "smallTitle": "만도 애프터 블로우 V3 차량 에어컨 냄새 습기 건조기 최신 제조 제품",
    "discount": "54%",
    "price": "99,000",
    "mall": "온라인 공식판매처"
  },
  {
    "largeSrc": "https://95choijh.github.io/naverShopping/asset/images/liveCalendar02.png",
    "largeTitle": "박경림의 사는 재미 번외편. 이마트 파머스픽 퀴즈쇼",
    "date": "6월 30일",
    "time": "20:00",
    "desc": "박경림 출연",
    "smallSrc": "https://95choijh.github.io/naverShopping/asset/images/liveCalendar_small02.png",
    "other": "할인에 할인을 더한 파격특가",
    "smallTitle": "믿고 사는 파머스픽 신선제품",
    "mall": "박경림의 사는 이야기"
  },
  {
    "largeSrc": "https://95choijh.github.io/naverShopping/asset/images/liveCalendar03.png",
    "largeTitle": "홈파티 베스트 최대 43%할인! 파머스픽 푸드스타일링!",
    "date": "7월 1일",
    "time": "11:00",
    "smallSrc": "https://95choijh.github.io/naverShopping/asset/images/liveCalendar_small03.jpg",
    "smallTitle": "홈파티 베스트 최대 ~43%",
    "mall": "이마트몰"
  }
],

💬 위 코드는 Naver Shopping 페이지를 제작하면서 만든 Json 파일 의 일부 중 liveCalendar입니다. liveCalendar라는 큰 타이틀 변수를 만들고 그 안에 들어갈 컨텐츠들의 데이터들을 변수를 선언하고 하나씩 넣었습니다.

📌 fetch 사용

fetch('https://95choijh.github.io/naverShopping/asset/json/main.json')
.then((response) => {
  return response.json();
})
.then((data) => {})
.catch(function(error){
  console.error("에러");
})

💬 이렇게 만든 json의 데이터를 불러오기 위해 Javascript에서 접근하고 조작할 수 있는 인터페이스를 제공해주는 fetch를 사용하였습니다.

fetch('https://95choijh.github.io/naverShopping/asset/json/main.json')

💬 가져오고자 하는 리소스의 경로를 fetch()에 적어주었습니다.

.then((response) => {
  return response.json();
})

💬 이 때, fetch에 경로로 API 호출에 성공했을 경우 응답(response)객체를 반환합니다.

.catch(function(error){
  console.error("에러");
})

💬 반대로, API 호출에 실패했을 경우 에러(error)객체를 반환합니다.

.then((data) => {})

💬 아까 만들어 둔 json을 기반으로 data를 넣어줄 구간입니다.

.then((data) => {
  data.liveCalendar.forEach(function(el){
    html = ''
    html += `<li>
				<a href="">
					<div class="img-wrap">
						<img src="${el.largeSrc}" alt="${el.largeTitle}">
						<div class="time-box">
							<strong>${el.date}</strong>
							${el.time}
						</div>
					</div>
					<div class="txt-wrap">
						<div class="txtTop-box">
							<strong>${el.largeTitle}</strong>
							<span class="desc">${el.desc}</span>
						</div>
						<div class="small-item">
							<img src="${el.smallSrc}" alt="${el.smallTitle}">
							<div class="smallTxt-wrap">`
    						el.other != null ? html += `<p>${el.other}</p>` : ""
    					html += `<strong>${el.smallTitle}</strong>`
    							el.price != null ? html += `<div class="price-area"><em class="discount">${el.discount}</em><em>${el.price}<span>원</span></em></div>` : ""
    				html += `</div>
						</div>
						<div class="txtBot-box">
							<span>${el.mall}</span>
						</div>
					</div>
				</a>
			</li>`
    $('.sc-liveCalendar .content-box').append(html);
  })
})

💬 liveCalendar에 들어있는 데이터 덩어리들을 forEach를 이용하여 반복문을 돌려줍니다. 그리고 각각의 요소들을 el로 선언하여 컨텐츠에 따라 변경되는 부분을 el.[변수]로 데이터를 불러왔습니다. html에 들어갈 변수인 html에 알맞게 데이터를 불러와 코드를 넣고, .append(html)로 최종적으로 완성을 해주었습니다


💬 하지만 동일한 컨텐츠라도 각 요소에 공통적으로 들어가지 않는 요소도 있었습니다. liveCalendar로 예를 들면, el.other와 el.price가 그러한 부분이었고 이는, if 조건문을 사용하여 true, false를 구분하여 html 변수를 다르게 변경하였습니다.