📌
사이트 명: CGV 모바일
제작 기간: 22.09.08 ~ 22.09.11 (4일 소요)
사용 언어: html, scss, jQuery, java script
[CGV 적응형 모바일 클론 코딩 작업]
모바일 적응형 페이지를 클론 코딩하였습니다.
swiper 플러그인 및 JSON을 활용한 데이터 바인딩 작업입니다!
데이터 바인딩(data binding)
데이터 바인딩 이란 두 데이터 혹은 정보의 소스를 모두 일치시키는 기법으로 즉, 화면에 보이는 데이터와 브라우저 메모리에 있는 데이터를 일치시키는 방식이다.
📌 json 데이터 통신
JSON (JavaScript Object Notation)
Javascript 객체 문법으로 구조화된 데이터를 표현하기 위한 문자 기반의 표준 포맷으로 문자열 형태로 존재해 네트워크를 통해 전송할 때 매우 유용하게 쓰임
- JSON은 경량(Lightweight)의 DATA-교환 형식
- Javascript에서 객체를 만들 때 사용하는 표현식을 의미한다.
- JSON 표현식은 사람과 기계 모두 이해하기 쉬우며 용량이 작아서,
최근에는 JSON이 XML을 대체해서 데이터 전송 등에 많이 사용한다. - 특정 언어에 종속되지 않으며, 대부분의 프로그래밍 언어에서 JSON 포맷의 데이터를 핸들링 할 수 있는 라이브러리를 제공한다
JSON 특징
- 서버와 클라이언트 간의 교류에서 일반적으로 많이 사용된다.
- 자바스크립트 객체 표기법과 아주 유사하다.
- 자바스크립트를 이용하여 JSON 형식의 문서를 쉽게 자바스크립트 객체로 변환할 수 있는 이점이 있다.
- JSON 문서 형식은 자바스크립트 객체의 형식을 기반으로 만들어졌다.
- 자바스크립트의 문법과 굉장히 유사하지만 텍스트 형식일 뿐이다.
- 다른 프로그래밍 언어를 이용해서도 쉽게 만들 수 있다.
JSON 문법
- 이름과 값의 쌍으로 이루어짐
- 쉼표(,) 로 나열
- 객체(object)는 중괄호({})로 감싸서 표현
- 배열(array)는 대괄호 ([])로 감싸서 표현
{ "employees": [ { "name": "Surim", "lastName": "Son" }, { "name": "Someone", "lastName": "Huh" }, { "name": "Someone else", "lastName": "Kim" } ] }
html에 작성된 동일한 데이터 요소를 문서화된 json파일에 저장하여,
자바 스크립트에서 필요한 정보를 호출하는 방식으로 작업했다.
먼저, data 폴더를 만들고 필요한 섹션마다 데이터가 작성될 json 파일을 생성한다. cgv의 경우 상단 배너 슬라이드, 영화 섹션 탭 2개, 이벤트 배너 영역, icecon영역, 추천 영화 영역 총 6개의 json파일이 필요했다.
해당 영역에 대입할 데이터들을 json 파일에 작성해준다. 두 개의 탭에 각각 다른 데이터가 나와야하므로, 무비차트와 상영예정에 각각 json파일을 생성했다.
무비차트 내에서도 탭 마다 다른 데이터가 호출되어야 하기 때문에
category 명에 5개의 하위 탭 이름을 작성해준다. 상영 예정 파일도 마찬가지
먼저 탭 영역에 해당하는 데이터가 노출될 수 있도록 click이벤트를 작성
//무비 차트 탭 영역 $(".chart-list .chart-item").click(function (e) { e.preventDefault(); cateName = $(this).data("cate"); //해당 카테고리 영역 이름 호출 $(".chart-list .chart-item a").removeClass("active"); $(this).find("a").addClass("active"); //선택된 영역 활성화
스크립트에서 불러올 html 마크업을 복사한 후 주석 처리 또는 삭제해준다.
<div class="swiper-wrapper" id="mainMovieChart"> /* 반복문으로 불러올 데이터 영역 */ <!-- <div class="swiper-slide"> <a href="" class="poster-wrap"> <div class="badge-wrap"> <span><img src="./assets/img/images/badge-over15.png" alt=""></span> </div> <div class="group-number"> <em class="number"></em> <span class="percent">32.8%</span> </div> <figure><img src="./assets/img/images/thumb01.jpg" alt=""></figure> </a> <div class="txt-box"> <strong class="title">공조2-인터내셔날</strong> <p class="desc"><span class="per">95%</span><span class="view">누적관객 382만</span></p> <a href="" class="link-book">지금예매</a> </div> </div> --> </div>
그 다음, fetch 함수를 사용하여 해당 파일의 경로로 json파일에 접근한다.
받아온 데이터를 response.json()메서드를 사용하여 .json형태로 변환한 후,
forEach로 반복문을 실행시켜서 html을 생성하고, 필요한 데이터를 대입한다.
fetch 함수
- HTTP요청 전송 기능을 제공하는 Web API
- Server와의 비동기 요청 방식 기능
//데이터 가져오기
fetch("./assets/data/main-movie-chart.json")
.then((response) => response.json())
.then((json) => {
const data = json.items;
const result = data.filter(function (parm) {
return parm.category == cateName;
});
let html = "";
let idx = 0;
result.forEach((el) => {
html += `<div class="swiper-slide">
<a href="${el.link}" class="poster-wrap">
<div class="badge-wrap">
<span><img src="${el.badge}" alt="${el.age}"></span>
</div>
<div class="group-number">
<em class="number"><img src="https://img.cgv.co.kr/WebApp/images/main/home/txt_movieInfo_count${el.rank}.png" height="39"></em>
<span class="percent">${el.totalRate}%</span>
</div>
<figure><img src="${el.thumbPoster}" alt="${el.title}"></figure>
</a>
<div class="txt-box">
<strong class="title">${el.title}</strong>
<p class="desc"><span class="per">${el.bookingRate}</span><span class="view">누적관객 ${el.accrueCnt}만</span></p>
<a href="${el.link}" class="link-book">지금예매</a>
</div>
</div>`;
if (idx == 1) {
html += `<div class="swiper-slide ad">
<a href="">
<figure><img src="./assets/img/images/thumb03.jpg" alt=""></figure>
</a>
<div class="txt-box">
<strong class="title">컴백홈</strong>
<span class="info">CGV무비차트 다음순위를 알려 드립니다.</span>
</div>
</div>`;
}
idx++;
});마지막으로 html 내의 무비 차트 영역에 해당 데이터를 추가하고,
필요한 swiper 플러그인을 적용해주면 끝
document.getElementById("mainMovieChart").innerHTML = html;
//무비 차트 슬라이드
var swiper3 = new Swiper(".tab-contents .swiper", {
slidesPerView: "auto",
spaceBetween: 10,
freeMode: true
});
});
});
$(".chart-list .chart-item").first().trigger("click");
//첫 번째 영역은 항상 활성화 돼있어야 하므로 트리거를 설정한다.데이터 바인딩을 처음 배워서 적용할 때는 많이 헷갈렸는데 다른 영역까지 만들다보니 그나마 이해하기가 수월해졌다..! 물론 아직 배워야할 게 더 많지만...ㅎ 데이터 작성 및 호출만 제대로 하면 많은 양의 데이터를 반복적으로 마크업하는 대신, 필요한 값만 대입시켜 출력할 수 있다는 점이 신기했다. 데이터 바인딩을 어떨 때 적용하고, 어떨 땐 적용하지 않는지 좀 더 알아둘 필요가 있을 것 같다!
기타 사항들
클론코딩을 하다가 발견한 기존 사이트에서 아쉬웠던 부분들 정리
1) 이미지 100%
100% 화면에서 깨지는 기존 사이트 레이아웃을 보완하여,
이미지 사이즈가 그대로 반영되도록 제작했다.
2) 중복 요소 삭제
우측 상단의 전체보기 버튼의 경우 다른 항목들과 통일성을 맞추기 위해 제작된 듯 했는데, 불필요한 중복 요소인 것 같아 작업 과정에서 삭제했다.
3) grid를 활용하여 이미지 영역 구성
기존 사이트의 경우 이미지 3장이 아닌 하나의 합쳐진 이미지로 구성을 했는데,
이미지 3장을 받았을 때의 경우 다음과 같이 마크업을 한 후
<a href="" class="img-box">
<ul class="grid">
<li><img src="./assets/img/images/thumb-special02.png" alt="suite cinema"></li>
<li><img src="./assets/img/images/thumb-special02.png" alt="suite cinema"></li>
<li><img src="./assets/img/images/thumb-special02.png" alt="suite cinema"></li>
</ul>
</a>display: grid 를 활용하여 다음과 같이 정렬할 수 있다.
.sc-special .grid {
display: grid;
grid-template-columns: 3fr 2fr;
grid-template-rows: 25vw 25vw;
gap: 20px;
}
.sc-special .grid li {
border-radius: 10px;
overflow: hidden;
}
.sc-special .grid li:nth-child(1) {
grid-row: 1/3;
}
.sc-special .grid img {
width: 100%;
height: 100%;
object-fit: cover;
}
