[💻] 실습 - 카카오페이지(데이터 바인딩)

📖 Overview

사이트명: 카카오페이지
작업 기간: 4.5일 소요
라이브러리: swiper, jQuery
유형: PC,mobile 적응형, 클론 코딩
참여도: 100%

👀 Check-point

• sass로 처리할수있는가
• Json이용하여 데이터 연동이 가능한가
• detail페이지와 index페이지의 연동이 자유로운가

---

sass셋팅 정리

📌 data.Json

✏ swiper 데이터 연동

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

<div class="main-slide">
                <ul class="swiper-wrapper">
             <!-- <li class="swiper-slide">
                        <a href="./detailpage.html">
                            <div class="img-box">
                                <figure>
                                    <img src="./asset/images/mb/mb1.png" alt="로맨스웹툰">
                                    <figcaption class="blind">
                                        여제화원,기다무 런칭기념, 캐시+경품 이벤트!
                                    </figcaption>
                                </figure>
                            </div>
                        </a>
                    </li> -->
						<!-- <li class="swiper-slide">
                        <a href="./detailpage.html">
                            <div class="img-box">
                                <figure>
                                    <img src="./asset/images/mb/mb1.png" alt="로맨스웹툰">
                                    <figcaption class="blind">
                                        여제화원,기다무 런칭기념, 캐시+경품 이벤트!
                                    </figcaption>
                                </figure>
                            </div>
                        </a>
                    </li> -->
				</ul>

3. json파일에 필요한 데이터를 생성한다.
   mainBanner 라는 변수명을 지정한다.
   
   
4. 대괄호 안에 해당하는 속성 및 값을 지정한다.

{
    "mainBanner": [
        {
            "link": "./detail.html",
            "imgSrc": "./asset/images/mb/mb1.png",
            "caption": "여제화원,기다무 런칭기념, 캐시+경품 이벤트!"
        },
        {
            "link": "./detail.html",
            "imgSrc": "./asset/images/mb/mb6.png",
            "caption": "웹툰, 그 바보짓은 바로 이녀석의 소행!"
        }
    ],

5. 기존 스와이퍼 제이쿼리 위에 중괄호안 mainBanner라는 변수를 지정하고 json데이터의 mainBanner에 접근한다.
   
   
6. html에 적은 마크업(주석된)을 그대로 가져와 백틱에 넣어
   ${banner.데이터}를 적는다.
   
   
7. document.querySelector으로 html에 삽입해준다.
   
   
8. json속성 밑에 swiper 속성을 적어준다.

//메인슬라이드
    fetch("./asset/data/banner.json")
    .then((response) => response.json())
    .then((json) => {
  // alert(json);
        const mainBanner = json.mainBanner; //mainBanner 데이터 접근
   
        let html = '';
        mainBanner.forEach(banner => {
   
            html += `<li class="swiper-slide">
                        <a href="${banner.link}">
                            <div class="img-box">
                                <figure>
                                    <img src=${banner.imgSrc} alt="로맨스웹툰">
                                    <figcaption class="blind">${banner.caption}</figcaption>
                                </figure>
                            </div>
                        </a>
                    </li>`;
   
        });
        // console.log(html);
        const list = document.querySelector('.sc-visual .swiper-wrapper');
   
        list.innerHTML = html; //변수

✏ 값이 존재할때 나오기

"freeToon":[
       {
           "imgSrc": "./asset/images/contents/free1.png",
           "waitFree": true,
           "new": true,
           "up": true,
           "view": 500000,
           "title": "여제화원",
           "readIcon": "./asset/images/icon/icon_read_count.png",
           "viewPeople": "10.3만명",
           "link": "./detail.html",
           "viewWriter": "PAMBA,윤점례"
       },

카카오페이지의 product json 데이터 생성
중괄호 안에 변수명 지정
대괄호 안에 해당하는 속성 및 값 지정
true로 데이터에 해당하는 값만 넣었다 뺐다 할 수 있게 셋팅한다.

조건문을 만들기전 필요한 링크등을 변수로 지정한다.
거의 모든곳에 사용함으로 어디에 놓든 상관없다.

const ic_free = `<img src="./asset/images/icon/badge_time.png" alt="기다리면 무료">`;
const ic_mili = `<img src="./asset/images/icon/badge_right_million.png" alt="밀리언페이지" class="mp-icon"></img>`;
const ic_new = `<img src="./asset/images/icon/icon_new.svg" alt="신규" />`;
const ic_up = `<img src="./asset/images/icon/icon_up.svg" alt="up" />`;

const를 쓴 이유 -> 누구든 사용하고 변하지 않게 하기위해

조건문

freeEl = (freeToon.waitFree)?ic_free:'';
	//→ freeToon데이터안에 waitFree가 있다면 const ic_free가 나와라 그렇지 않다면 **빈칸**
miliEl = (freeToon.view >= 1000000)?ic_mili:'';
	//→ freeToon데이터안에 view가 있고 100만보다 크다면 const ic_mili가 나와라 그렇지 않다면 **빈칸**
newEl = (freeToon.new)?ic_new:'';
upEl = (freeToon.up)?ic_up:'';

필요한곳에 비교문을 넣어주기만 하면 끝
${freeEl} ${miliEl}

✍주의할점

json을 쓸때 난 편하게 보기 위해 각 이름을 주었지만 원래는 item으로 통일해줘야한다.

📌 클릭시 데이터 변경

id,class,name 차이

• id 속성 - 고유한 식별을 목적으로 하는 경우 사용
  -> input과 label속성
• name 속성 - form 컨트롤 요소의 값(value)을 서버로 전송하기 위해 필요한 속성
  -> name 속성은 자바스크립트에서 요소를 참조할 수 있게 합니다.

### ✏ 요일-데이터 연결 : name-id로 연결

  <ul class="arrayDay-list">
                <li class="arrayDay-item active" name = "#monday">
                    <a class="today">월</a>
                </li>
                <li class="arrayDay-item" name = "#tuesday">
                    <a class="today">화</a>
                </li>
                <li class="arrayDay-item" name = "#wednesday">
                    <a class="today">수</a>
                </li>
    ...
 </ul>

<!-- 월요일 -->
            <div class="day-wrap active mon" id="monday">
                <ul class="product-list column-3">
			<!-- <li class="product-item">
                        <a href="">
                            <div class="img-box">
               
                                <div class="badge">
                                    <p class="img-rank">1위</p>
                                    <img src="./asset/images/icon/bmbadge_waitfree.svg" alt="">
                                </div>
                                <img src="./asset/images/contents/webtoon2.png" alt="도굴왕">
                            </div>
                            <div class="txt-wrap">
                                <div class="title-box">
                                    <em class="title">도굴왕</em>
                                </div>
                                <div class="view-info">
                                    <img src="./asset/images/icon/icon_up.svg" alt="업데이트" class="icon-up">
                                    <img src="./asset/images/icon/icon_read_count.png" alt="사람 아이콘">
                                    <span class="view-people">331.9만명</span>
                                </div>
                            </div>
                        </a>
                    </li>
                </ul>
               
                <a href="" class="dayMore-box">월요 연재 더보기</a>
            </div>

name으로 이름(요일), 데이터항목에 id 부여하여 연결한다.

    // 요일별 클릭

    $('.sc-array .arrayDay-item').click(function(e){
        e.preventDefault();
        day = $(this).attr('name'); /*name 속성의 값 */ 
       $(this).addClass('active').siblings().removeClass('active');
       $(day).addClass('active').siblings().removeClass('active'); 
        /* 나를 제외한 클래스 없애기 */
    })

arrayDay-item요일이 active되었을 때, 다른 요일들은 active뺀다.
💡 json으로 다 연결시켜준 이후 그 밑에 적어준다.

-----------------잘못된 연결법

---

✏ 데이터교체

tab이 아닌 데이터교체로 만들어야한다

<!-- 월요일 -->
<div class="day-wrap active mon" >
     <ul class="product-list column-3">
  	 </ul>
     <a href="" class="dayMore-box">월요 연재 더보기</a>
 </div>

월요일 틀 하나만 준비하여 ul안에 데이터만 바꿔준다.
id값으로 ~~result 혹은 dayResult란 이름이 더 좋다

✍ 이부분에선 name = "#monday"인 ❌name값을 쓰면 안된다.❌
굳이 쓴다면 data-name="monday"으로 사용

<li class="arrayDay-item active" data-name="monday">
  <a class="today">월</a>
</li>
<li class="arrayDay-item" data-name="tuesday">
  <a class="today">화</a>
</li>
...

json데이터도 수정해야한다.

기존 날짜별로 분류한걸 큰 틀인 dayItems안에 넣는다

    "dayItems":[
        {
            "rankNumber": "1위",
            "waitIcon": "./asset/images/icon/bmbadge_waitfree.svg",
            "imgSrc": "./asset/images/contents/webtoon2.png",
            "updateIcon": "./asset/images/icon/icon_up.svg",
            "title": "도굴왕",
            "readIcon": "./asset/images/icon/icon_read_count.png",
            "viewPeople": "331.9만명",
            "sort":"monday"
        },
        {
            "rankNumber": "2위",
            "waitIcon": "./asset/images/icon/bmbadge_waitfree.svg",
            "imgSrc": "./asset/images/contents/webtoon1.png",
            "updateIcon": "./asset/images/icon/icon_up.svg",
            "title": "소설 속 엑스트라",
            "readIcon": "./asset/images/icon/icon_read_count.png",
            "viewPeople": "21.6만명",
            "sort":"monday"
        },

"sort":"데이터네임"로 요일별로 분류를 해준다.
내가 정한 data-name="monday"을 적어주는거임

월요일이라면 "sort":"monday"
화요일이라면 "sort":"tuesday"
실무에선 요일대신 숫자로 쓴다 ex)"sort": 1,"sort": 2,,,

원하는 데이터만 뽑기

자바스크립트의 filter가 필요하다.

주어진 함수의 필터를 통과하는 모든 요소를 모아 새로운 배열로 반환하는 것

filter 함수
const result = data.filter(function (a) {return a.sort == val});

val = $(this).data('name');
const data = json.dayItems;
//json에 담겨있는 json.dayItems를 변수명에 저장
const result = data.filter(function (a) {return a.sort == 'monday'});
// function (a)의 a는 임의로 지정, 의미없는것
//내가 지정한 **sort**값이 **monday**면 monday만 나와라

이렇게 지정한다면 강제로 monday값이 들어감으로 어디를 눌러도 monday값만 나온다

function (a)의 a는 임의로 지정, 의미없는것

const result = data.filter(function (a) {return a.sort == val});	

분류되는 sort값이 val = $(this).data('name');이 되게 해준다

요일클릭시 연재더보기 글씨 변경

바꾸려는 dotay의 이름을 가져와야한다.

1. 변수로 만들어주기

dateName = $(this).find('.today').text();

this의 클래스 today의 텍스트를 찾아라를 변수로 만드는것

2. 내가 바꾸려는 클래스

$('.dayMore-box').text(${dateName} 연재 더보기)

text부분은 html도 상관없음

📌 강제로 시작 trigger

$('.arrayDay-item').eq(0).trigger('click');

시작시 강제로 0번째 즉 월요일이 클릭되어 나타나있게하기
eq - 태그에서 몇번째

📌 마크업

✏ width 사이즈

w 400을 주면 안됨, 모바일에 있을수 없는 사이즈

✏ 공통 css

카카오페이지는 공통된 레이아웃이 많다
→ 공통으로 마크업하는게 좋다!

&.column-2{
        padding: 17px 20.7px 5px;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        gap: 5px;
        .product-item{
            width: calc(50% - 5px);
        }
    }

column-2,column-3,row-1,row-2와 같이 공통 레이아웃을 만들어 통제해주는게 쉽고 빠르다.

📌 grid

이런식의 레이아웃 반복에는 flex보다 grid를 추천한다

->중간에 데이터가 하나 없을시 flex의 justify-content: space-between;보다 편하기 때문

✏ 사용법

display: grid;
gap: 10px;
grid-template-columns: repeat(3, minmax(0, 1fr));

열 - grid-template-columns
행 - grid-template-rows

1fr - 1대1, 여기서는 3분의1쓰겠다
grid-template-columns: 1fr 1fr 1fr;
이렇게 쓰는것보다
grid-template-columns: repeat(3,1fr);
3번쓸꺼다, 즉 3분의 1대1대1 3분의1이 나와라
px도 가능하다

왜 줬냐 -> 글자가 너무 길어서 말줄임이 안먹어서 강제로 준것

minmax함수
사용법
minmax(0, 1fr)
minmax(최솟값, 최댓값)
최솟값과 최댓값 범위내에서 값을 유연하게 처리한다.

📌 swiper

✏ 부드럽게 움직이기

var lastSlide = new Swiper(".sc-event .swiper", {
        spaceBetween: 10,
        freeMode: true,
        slidesPerView: 'auto',
      });

swiper시 freeMode: true를 주면 부드럽게 넘어감

📌 페이지 링크이동

✏ a태그 href

a태그 안 주소를 쓸때 /(상단페이지로 이동)만 써도 된다.

다만 /만 쓸시 깃헙에서 사용할시에
ㅇㅇㅇ.깃헙.io/폴더경로/index로 폴더경로가 겹쳐서
(❌)절대경로인ㅇㅇㅇ.깃헙.io/로 나온다.

(⭕)그렇기에 ./ 혹은 ./index라고 작성해야한다.

---

오답✍(◔◡◔)✧

1. 

⛔ img-box 클래스 이름 주의할점!!! 광범위한 img-box이름은 에러

• img-box는 너무 광범위하고 당돌한 클래스이름이다.

• 다른 sc에서 img-box가 엄청나게 나올수있고 사용하지 않을 수도 있다.

• 협업에 있어서 불가능한 소스다.

• 섹션 img-box 마다 다른 이름을 주는게 좋다.

2. 

아이콘인 시계표시,up, 15는 꾸미는 용도가 아니라 각 필요한 정보가 있는 애다.

정보전달이 필요한 애임으로 img태그로 들어가야한다.

⭐ 이미지가 before가 아니라 자식태그여야한다

<div class="img-box">
    <div class="badge">
         <img src="./asset/images/icon/badge_time.png" alt="">
    </div>
    <img src="./asset/images/contents/challenge1.png" alt="로열 메리지">
</div>

img-box안에 badge라는 태그를 하나 만들어 반복되는 img를 꾸며준다.

• 제목 옆 N이미지는 vertical-align:top을 줄 수있지만 margin-top:-2px로 맞춰줄수있다

🤔 왜 vertical-align:middle로 안줄까??

-> 글씨도 내려가면서 작아지니까

서로서로 기준이기 때문에 top을 기준으로 두고 이미지만 내리는게 맞음

3.

부모에 flex를 주고 자식인 p태그에 with를 주지 않고 말줄임 코드를 사용하는것은 오류!

-> flex:1;이라고 셋팅해야함

4.⭐⭐⭐ 바보같은 실수금지!!!

뒤로가기 이미지 안나옴

scss에서 보면 경로를 잘못적어놨다. 😢

../../는 있을수 없는 경로

수정하면 detail.scss에 줬던 css를 지워도 나오게 된다!