프립(FRIP)

OOOY·2023년 8월 7일
Fetchjson데이터바인딩포트폴리오
0

Portfolio

목록 보기
1/4
post-thumbnail

FRIP

개인프로젝트

사이트명: 프립 (FRIP)

작업 기간: 4일 소요

#swiper #jquery #Json

유형: 모바일 적응형, 클론 코딩

특징: fetch 함수와 비동기 처리를 통한 데이터 사용

‼️작업 목표

  • 효율적인 작업을 통하여 작업량 최소화 하기!

📍POINT

  1. 같은 비주얼의 영역을 한 번에 구성하는 마크업과 Common CSS
  2. fetch() 함수+json을 활용한 자체 데이터 제작을 통해 쉽게 내용 변경하기
  3. 데이터 호출에 따른 영역 정렬

💡How to study?

json+fetch() 데이터바인딩 맛보기

json+fetch() 유튜브 데이터바인딩 해보기

1. 효율적인 마크업과 Common CSS

✍️ 프립의 메인 페이지 상품들은 같은 레이아웃으로 구성된 영역이 많았습니다.

덕분에 한 번의 마크업을 통해 추가 내용만 변경하여 빠르게 CSS까지 마칠 수 있었습니다.

🟠 HTML

<section class="sc-people">
        <div class="prd-headline">
            <h2>좋은 사람들과 함께해요🥂</h2>
            <p>전체보기</p>
        </div>
</section>

<section class="sc-best">
        <div class="prd-headline">
            <h2>요즘 인기 급상승 중인 프립📈</h2>
            <p>전체보기</p>
        </div>
</section>

🟠 CSS

.prd-headline{
    display: flex;
    justify-content: space-between;
    margin-bottom: 30px;
}
.prd-headline h2{
    font-size: 18px;
    font-weight: bold;
}
.prd-headline p{
    font-size: 14px;
    font-weight: 400;
}

✍️ 마크업은 개괄적인 성향을 띄고 있기에 prd로 네이밍하였습니다.

하나의 마크업을 같은 레이아웃을 사용하는 section 태그에 삽입하여 준 뒤, 내용을 변경하는 형태로 작업하였습니다. 이렇게 한 번의 CSS 작업으로 n개의 영역을 만들 수 있었습니다.

2. fetch() 함수+json을 활용한 자체 데이터 제작을 통해 쉽게 내용 변경하기

{
    "items":[
        {
           "sort":[1,2,3,4,5],
           "thumb":"./assets/img/best1.jpg",
           "loc":"서귀포시",
           "title":"제주도 오션뷰 바라보며 요가클래스 그리고 차 한잔 in 온실",
           "review":171,
           "price":{
                "ori":"35,000",
                "sale":15,
                "curr":"215,000"
           },
           "only":true,
           "superhost":true

        }
    ]
}
function list(sortNum,frame){
    
    fetch('./assets/data/data.json')
    .then(res=>res.json())
    .then(json=>{
      data=json.items;
      sortData=data.filter(function(parm){
        return parm.sort.indexOf(sortNum) >= 0;
      })
      let html=``;
      sortData.forEach(element => {
        onlyEl = `<span class="last-box a">ONLY</span>`;
        superhostEl = `<span class="last-box b">슈퍼호스트</span>`;
        energyEl = `<div class="energy">
                        <span>
                            <img src="./assets/img/energy.svg" alt="">
                            신규프립 에너지x2
                        </span>
                    </div>`;         
  
        if(element.only){
          only = onlyEl;
        }else{
          only = '';
        }
        if(element.superhost){
          superhost = superhostEl;
        }else{
          superhost = '';
        }

        if (element.energy) {
         hide=`display:none`;
         energy = energyEl;
        } else {
          hide=``;
          energy=``;
        }
        
        $starEl = `<li class="star-item"><img src="data:image/svg+xml,%3Csvg width='16' height='14' viewBox='0 0 16 14' fill='none' xmlns='http://www.w3.org/2000/svg'%3E %3Cpath d='M12.293 8.6189L15.7442 6.00968C16.2325 5.63914 15.9799 4.9135 15.3402 4.88263L10.8957 4.6356C10.6263 4.62016 10.3906 4.46577 10.2896 4.23418L8.65658 0.405277C8.42088 -0.135092 7.59595 -0.135092 7.36026 0.405277L5.72724 4.21874C5.62623 4.45033 5.39053 4.60472 5.12117 4.62016L0.659819 4.86719C0.0200779 4.89806 -0.232451 5.6237 0.255772 5.99424L3.707 8.58802C3.90903 8.74241 4.01004 9.00487 3.9427 9.23646L2.81473 13.2043C2.66322 13.7601 3.31979 14.2079 3.85852 13.8991L7.61279 11.6913C7.84848 11.5523 8.13468 11.5523 8.35354 11.6913L12.1246 13.8991C12.6634 14.2079 13.3199 13.7601 13.1684 13.2043L12.0405 9.2519C11.99 9.02031 12.0741 8.77329 12.293 8.6189Z' fill='%237A29FA'/%3E %3C/svg%3E" alt=""></li>`;
        let star = ``;
        for (let index = 0; index < element.review.star; index++) {
          star+= $starEl;
        }

    
  
        html+=`<li class="prd-item">
                <a href="" class="prd-link"></a>
                <div class="img-box">
                    <img src="${element.thumb}" alt="">
                    <button class="btn-fav" aria-label="찜하기"></button>
                </div>
                <div class="text-box">
                    <em>${element.loc}</em>
                    <strong>${element.title}</strong>

                    <div class="review" style="${hide}">
                    <ul class="star-list" style="${hide}">
                      ${star} 후기 ${element.review.view}
                    </ul></div>

                    ${energy}

                    <i class="bar"></i>
                    <div class="cost">
                        <em>${element.price.ori}</em>
                        <div class="sale">
                          <p class="per">${element.price.sale}</p>
                          <p>${element.price.curr}원</p>
                        </div>
                    </div>
                    <div class="last-box">
                    ${only}${superhost}
                    </div>
                </div>
            </li>`
            
      });
  
      $(frame).html(html);
    })
  }  

// sort 값 // 영역
  list(1,"#list1")
  list(2,"#list2")
  list(3,"#list3")
  list(4,"#list4")
  list(5,"#list5")

✍️ 이전의 공부 기록을 활용하여 json을 사용해 간단한 데이터를 만든 후,

같은 레이아웃의 영역 어디든 원하는 위치의 내용으로 변경할 수 있게끔 만드는 것을 목표했습니다.

3. 데이터 호출에 따른 영역 정렬

✍️ ‘신규프립에너지’ 아이콘 사용 시, 후기를 사라지게 하기 위해 아래와 같은 방법을 사용했습니다.

energyEl = `<div class="energy">
                        <span>
                            <img src="./assets/img/energy.svg" alt="">
                            신규프립 에너지x2
                        </span>
                    </div>`;

에너지 아이콘을 On/Off 시키기 위해 변수로 설정해 주었습니다.


if (element.energy) {
         hide=`display:none`;
         energy = energyEl;
        } else {
          hide=``;
          energy=``;
        }
        
        $starEl = `<li class="star-item"><img src="data:image/svg+xml,%3Csvg width='16' height='14' viewBox='0 0 16 14' fill='none' xmlns='http://www.w3.org/2000/svg'%3E %3Cpath d='M12.293 8.6189L15.7442 6.00968C16.2325 5.63914 15.9799 4.9135 15.3402 4.88263L10.8957 4.6356C10.6263 4.62016 10.3906 4.46577 10.2896 4.23418L8.65658 0.405277C8.42088 -0.135092 7.59595 -0.135092 7.36026 0.405277L5.72724 4.21874C5.62623 4.45033 5.39053 4.60472 5.12117 4.62016L0.659819 4.86719C0.0200779 4.89806 -0.232451 5.6237 0.255772 5.99424L3.707 8.58802C3.90903 8.74241 4.01004 9.00487 3.9427 9.23646L2.81473 13.2043C2.66322 13.7601 3.31979 14.2079 3.85852 13.8991L7.61279 11.6913C7.84848 11.5523 8.13468 11.5523 8.35354 11.6913L12.1246 13.8991C12.6634 14.2079 13.3199 13.7601 13.1684 13.2043L12.0405 9.2519C11.99 9.02031 12.0741 8.77329 12.293 8.6189Z' fill='%237A29FA'/%3E %3C/svg%3E" alt=""></li>`;
        let star = ``;
        for (let index = 0; index < element.review.star; index++) {
          star+= $starEl;
        }

에너지 아이콘이 삽입되면 후기를 삭제하기 위한 hide를 만들어 주고

if eles문을 사용해 energy가 ture인 경우, hide는 전부 display:none으로 변경되고

에너지 아이콘이 나올 수 있게끔 하고,

그렇지 않을 경우 hide와 에너지 아이콘이 전부 공백이 될 수 있도록 설정했습니다

또한 반복문을 사용해 후기의 별 갯수를 원하는 대로 조절 할 수 있게 만들었습니다.


html+= `<div class="review" style="${hide}">
                    <ul class="star-list" style="${hide}">
                    ${star} <p style="margin:0 3px">후기</p> ${element.review.view}
                    </ul></div>

                    ${energy}`

후기가 사라지면 에너지가 후기 위치를 차지할 수 있게끔 설정 후
style=을 통해 영역을 재설정 해주었습니다

profile
OOOY
일단 해 보자구~! 🤸
다음 포스트

대학내일

0개의 댓글

관련 채용 정보