AMORE MALL

sealkimยท2023๋…„ 1์›” 18์ผ
1

Portfolio

๋ชฉ๋ก ๋ณด๊ธฐ
3/4
post-thumbnail

๐Ÿ“š Overview

์‚ฌ์ดํŠธ๋ช…: ์•„๋ชจ๋ ˆ๋ชฐ
์ž‘์—… ๊ธฐ๊ฐ„: 7์ผ ์†Œ์š”
๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ: swiper, jquery
์œ ํ˜•: ๋ชจ๋ฐ”์ผ ์ ์‘ํ˜•, ํด๋ก  ์ฝ”๋”ฉ
ํŠน์ง•: fetch ํ•จ์ˆ˜์™€ ๋น„๋™๊ธฐ ์ฒ˜๋ฆฌ๋ฅผ ํ†ตํ•ด ํ˜ธ์ถœํ•œ ๋ฐ์ดํ„ฐ ์‚ฌ์šฉ ์‚ฌ์ดํŠธ

โœ”๏ธ What's the point?

  1. fetch() ํ•จ์ˆ˜๋กœ ๋ฐ์ดํ„ฐ ํ˜ธ์ถœ(feat.JSON)
  2. SWIPER ์‚ฌ์šฉํ•œ ์Šฌ๋ผ์ด๋“œ
    ใ…ค

โœ๏ธ์ž‘์—… ์ „ ๊ณต๋ถ€ ๊ธฐ๋ก

  1. velog.io/@kimheewon/SassSCSS
  2. velog.io/@kimheewon/fetch()ํ•จ์ˆ˜๋กœ JsonํŒŒ์ผ ์ฝ์–ด์˜ค๊ธฐ
  3. velog.io/@kimheewon/Swiper ์‚ฌ์šฉ๋ฒ•



1. fetch() ํ•จ์ˆ˜๋กœ ๋ฐ์ดํ„ฐ ํ˜ธ์ถœ

๐Ÿ“‹ ์•„๋ชจ๋ ˆ๋ชฐ์˜ ์ƒํ’ˆ ์˜์—ญ์€ ๊ฑฐ์˜ ๋น„์Šทํ•œ ๋ ˆ์ด์•„์›ƒ์„ ๊ฐ€์ง€๊ณ  ์žˆ์–ด ๋งค๋ฒˆ ์ƒˆ๋กœ์šด json ๋ฐ์ดํ„ฐ๋ฅผ ๋งŒ๋“œ๋Š” ๊ฒƒ์ด ์•„๋‹ˆ๋ผ ํ•˜๋‚˜์˜ prdData.json ํŒŒ์ผ์„ ํ™œ์šฉํ•˜์˜€์Šต๋‹ˆ๋‹ค. ํ•„์š”ํ•œ ๋ถ€๋ถ„๋งŒ ์ถ”์ถœํ•ด ๊ฐ ์˜์—ญ์˜ fetch๋ฌธ์— ์žฌ์‚ฌ์šฉํ•˜์—ฌ ํŒŒ์ผ๊ณผ ์ฝ”๋“œ๋ฅผ ์ข€ ๋” ๊ฐ„๊ฒฐํ•˜๊ฒŒ ์ž‘์„ฑํ•˜์˜€์Šต๋‹ˆ๋‹ค.

โ—ป๏ธ JSON

{
    "items":[
        {
            "id":0,
            "thumb": "./assets/images/recom01.png",
            "saleThumb":"./assets/images/sale_first_01.png",
            "brand":"ํ•œ์œจ",
            "name":"๋ฐฑํ™”๊ณ  ์•ฐํ”Œ ์—์„ผ์Šค 40ml",
            "price":{
                "ori":85000,
                "curr":76500
            },
            "rate": "4.8",
            "review":"(6)",
            "hashtag": "#์œ ์ˆ˜๋ถ„ ๋ฐธ๋Ÿฐ์Šค",
            "benefit":[
                "์‚ฌ์€ํ’ˆ"
            ],
            "cate1":0,
            "cate2":2,
            "cate3":2,
            "sale1":0
        },
        ....
    ]
}

โ—ป๏ธ SCRIPT 01

fetch("./assets/data/prdData.json")
.then((response) => response.json())
.then((json) => {
    data = json.items;

    let html = '';
    result.forEach(element => {

        saleEl = (element.price.ori === element.price.curr) ? 'hide':'';

        html+=`
                <div class="swiper-slide">
                <div class="product_inner">
                    <a href="#none">
                        <div class="pro_thumb_area">
                            <img src="${element.thumb}" alt="${element.name}">
                        </div>
                        <div class="pro_text_area">
                            <div class="pro_title">
                                <strong class="brand">${element.brand}</strong>
                                <span class="name">${element.name}</span>
                            </div>
                            <div class="pro_price">
                                <span class="delPrice ${saleEl}">${price(element.price.ori)}</span>
                                <em class="discountRate ${saleEl}">${salepercent(element.price.ori,element.price.curr)}%</em>
                                <span class="price"><strong class="size_16">${price(element.price.curr)}</strong>์›</span>
                            </div>
                            <div class="pro_hashtag">
                                <span class="hashtag_inner">${element.hashtag}</span>
                            </div>
                        </div>
                    </a>
                    <button class="pro_like"><span class="blind">์ข‹์•„์š”</span></button>
                </div>
            </div>`;
    });
  
    $('#sortData').html(html);

});

โœ ์ฝ”๋“œ ๋ถ„์„

  • fetch("./assets/data/prdData.json") ๋ถˆ๋Ÿฌ์˜ฌ json ๋ฐ์ดํ„ฐ ํŒŒ์ผ
  • .then((response) => response.json()) ์ฝ์–ด์˜จ ๋ฐ์ดํ„ฐ๋ฅผ json์œผ๋กœ ๋ณ€ํ™˜
  • data = json.items; json์— ์žˆ๋Š” items๋งŒ ๋ฐ›์•„์˜ค๊ธฐ
  • data.forEach(element => {})๋ฐฐ์—ด์˜ ๊ฐœ์ˆ˜๋งŒํผ ๋ฐ˜๋ณต๋ฌธ์„ ๋Œ๋ฆฌ๊ธฐ ์œ„ํ•ด ์‚ฌ์šฉ
  • ${element.name} ํ˜•์‹์œผ๋กœ ๊ฒฝ๋กœ๋ฅผ ์ž‘์„ฑํ•˜์—ฌ ๊ฐ ๋ถ€๋ถ„์— ํ•„์š”ํ•œ ๋ฐ์ดํ„ฐ๋ฅผ ๋ถˆ๋Ÿฌ์˜ต๋‹ˆ๋‹ค.
  • saleEl = (element.price.ori === element.price.curr) ? 'hide':''; ํ• ์ธ๊ฐ€๊ฐ€ ์—†์–ด์„œ ํŒ๋งค๊ฐ€๋งŒ ์กด์žฌํ•˜๋Š” ๊ฒฝ์šฐ๋ฅผ ์œ„ํ•œ ์กฐ๊ฑด๋ฌธ -> 'ori'๊ธˆ์•ก๊ณผ 'curr'์˜ ๊ธˆ์•ก์ด ๊ฐ™์„๋•Œ'hide'ํด๋ž˜์Šค๋ฅผ ์ถ”๊ฐ€ํ•ด ํ• ์ธ๊ฐ€์™€ ํ• ์ธ์œจ์„ display:none ์‹œ์ผœ์ฃผ์—ˆ์Šต๋‹ˆ๋‹ค.
// ์ฒœ๋‹จ์œ„ ์ฝค๋งˆ
function price(p) {
    return p.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',');
}
//ํ• ์ธ์œจ ํ•จ์ˆ˜
function salepercent(ori,curr){
    return (ori-curr)/ori*100;
}
  • ํ• ์ธ์œจ ์˜์—ญ์€ ๋ฐ์ดํ„ฐ ํŒŒ์ผ์— ๋‹ด๊ฒจ์ง„ 'ori', 'curr'์˜ ๊ฐ’์„ ์ด์šฉํ•˜์—ฌ return ๊ฐ’์„ ๋ฐ›๋„๋ก ํ•˜์˜€์Šต๋‹ˆ๋‹ค.
  • ๋ฐฐ์—ด์˜ ์š”์†Œ๋ฅผ ๋‚˜ํƒ€๋‚ด๋Š” ๋ฌธ์ž์—ด์„ ๋ฐ˜ํ™˜ํ•˜๋Š” toLocaleString() ๋ฉ”์„œ๋“œ๋ฅผ ์‚ฌ์šฉํ•ด ๊ฐ€๊ฒฉ์˜ ์ฒœ๋‹จ์œ„ ์ฝค๋งˆ ์ •๊ทœ์‹ ํŒจํ„ด์„ ์‚ฌ์šฉํ•˜์˜€๋‹ค.

โ—ป๏ธ SCRIPT 02

//ํด๋ฆญ์‹œ ํ…์ŠคํŠธ activeํšจ๊ณผ ๋ฐ ํ•ด๋‹น ํ…์ŠคํŠธ๋กœ ๋ณ€๊ฒฝ
$('#pop_skin li').click(function(){
    $(this).addClass('active').siblings().removeClass('active');
    $('#skinType').text($(this).text());// #skinType์˜ ํ…์ŠคํŠธ๋ฅผ ๋‚ด๊ฐ€ ์„ ํƒํ•œ this์˜ ํ…์ŠคํŠธ๋กœ ๋ฐ”๊พธ์–ด๋ผ
    $('.popup_bg').hide();
    $('.popup_inner').removeClass('on');

    cate1 = $('#pop_skin .active').data('cate1');//cate1์€ ๋ฐ์ดํ„ฐ cate:1๋งŒ ๋‚˜์˜ค๋„๋ก
    cate2 = $('#pop_skin .active').data('cate2');//cate2๋Š” ๋ฐ์ดํ„ฐ cate:2๋งŒ ๋‚˜์˜ค๋„๋ก

    sortData(cate1,cate2);
});

//์ฒซ ํŽ˜์ด์ง€์— ๋ณด์—ฌ์ค„ ๋ฐ์ดํ„ฐ
function sortFirst(a,b){
    sortData(a,b)//a,b์—๋งŒ active๋ฅผ ์ฃผ๊ณ  ๋‚˜๋จธ์ง€ ํ˜•์ œ๋“ค์€ removeClass ์ ์šฉ
    $('#pop_skin li').eq(a).addClass('active').siblings().removeClass('active')
    $('#pop_trouble li').eq(b).addClass('active').siblings().removeClass('active')
}
sortFirst(0,2);//cate:0, cate:2๊ฐ€ ์ฒซ ํŽ˜์ด์ง€์— ๋‚˜์˜ค๊ฒŒ ๋จ


//๋ฐ์ดํ„ฐ ํ•„ํ„ฐ๋ง ํ•ด์ค„ ํ•จ์ˆ˜
function sortData(cate1,cate2){
fetch("./assets/data/prdData.json")
.then((response) => response.json())
.then((json) => {
    data = json.items;

    const result = data.filter(function (parm) {return parm.cate1 == cate1 || parm.cate2 == cate2});

    let html = '';
    result.forEach(element => {

        saleEl = (element.price.ori === element.price.curr) ? 'hide':'';

        html+=`
               ... `;//์ค‘๋ณต์œผ๋กœ ์ƒ๋žต
        
    });
    $('#sortData').html(html);
});
}
  • ๋ฒ„ํŠผ ํด๋ฆญ์‹œ ๊ฐ ํƒ€์ž…์— ๋งž๋Š” ์ƒํ’ˆ์„ ๋ณด์—ฌ์ฃผ๊ธฐ ์œ„ํ•ด fetch๋ฌธ์„ ํ•จ์ˆ˜์— ๋„ฃ์–ด์ฃผ๊ณ  filter() ๋ฉ”์„œ๋“œ๋กœ ๋ฐ์ดํ„ฐ ํ•„ํ„ฐ๋ง์„ ํ•˜์˜€์Šต๋‹ˆ๋‹ค.

    filter ๋ž€โ”
    ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ์—์„œ filter ๋Š” ๋ฐฐ์—ด์— ์‚ฌ์šฉํ•˜๋ฉฐ, ์ฃผ์–ด์ง„ ํ•จ์ˆ˜๋ฅผ ๋งŒ์กฑํ•˜๋Š” ๋ชจ๋“  ์š”์†Œ๋ฅผ ๋ชจ์•„ ์ƒˆ ๋ฐฐ์—ด๋กœ ๋ฐ˜ํ™˜ํ•ฉ๋‹ˆ๋‹ค.

  • const result = data.filter(function (parm) {return parm.cate1 == cate1 || parm.cate2 == cate2});
    : cate1, cate2์™€ ๋งž๋Š” ๋ฐ์ดํ„ฐ๋งŒ ๋‚˜์˜ค๋„๋ก ์„ธํŒ…(๋‘๊ฐ€์ง€ ํƒ€์ž… ๋ชจ๋‘ ์ถฉ์กฑํ•˜๊ฒŒ ํ•˜๊ณ  ์‹ถ๋‹ค๋ฉด '&&'์‚ฌ์šฉ
    ใ…ค

๐Ÿ’ก ||(or์—ฐ์‚ฐ์ž), &&(and์—ฐ์‚ฐ์ž)

โ—ป๏ธ json ๋ฐ์ดํ„ฐ์˜ ํ™œ์šฉ

'๋ฉ”์ธ ๋ฐฐ๋„ˆ ์˜์—ญ'๊ณผ '์ด๋ฒคํŠธ ์ „์ฒด๋ณด๊ธฐ ํŒ์—… ์˜์—ญ'์˜ ๋ฐ์ดํ„ฐ๊ฐ€ ๊ฐ™์•„ ์ƒˆ๋กœ์šด ํŒŒ์ผ์„ ๋งŒ๋“ค์ง€ ์•Š๊ณ  ํ•˜๋‚˜์˜ JSON ๋ฐ์ดํ„ฐ ํŒŒ์ผ์„ ํ™œ์šฉํ•˜์—ฌ ๊ตฌํ˜„ํ•˜์˜€์Šต๋‹ˆ๋‹ค.


2. SWIPER

โ—ป๏ธ HTML

<section id="banner_swiper">
	<h2 class="blind">๋ฉ”์ธ ๋ฐฐ๋„ˆ ์˜์—ญ</h2>
	<div class="swiper-wrapper">
        <!--jsonํŒŒ์ผ ์‚ฌ์šฉ์œผ๋กœ swiper-slide" ์ƒ๋žต-->
    </div>
	<div class="swiper_page">
		<div class="page_area"></div>
		<button class="btn_area" id="allBanner"><span class="blind">์ „์ฒด๋ณด๊ธฐ</span></button>
	</div>
</section>

โ—ป๏ธ SCRIPT

const swiper2 = new Swiper("#banner_swiper", {
        slidesPerView: 'auto',
        spaceBetween: 5,
        loop: true,
        autoplay: {//์˜คํ† ํ”Œ๋ ˆ์ด ์˜ต์…˜
            delay: 2500, //์žฌ์ƒ ๊ฐ„๊ฒฉ
            disableOnInteraction: false,
        },
        centeredSlides: true,

        // pagination
        pagination: {
            el: ".page_area",
            type: "custom",
            renderCustom:function(swiper, current, total){

                currentNum = (current < 10) ? '0'+current : current;
                totalNum = (total < 10) ? '0'+total : total;

                return `<span class="page_current">${currentNum}</span> 
                        <span class="page_total">${totalNum}</span>`;
            }
        },

    });

โœ ์ฝ”๋“œ ๋ถ„์„

  • swiper ์‚ฌ์šฉ์‹œ ์•„๋ž˜ ๊ตฌ์กฐ์™€ ๊ฐ™์€ ํด๋ž˜์Šค ๋ช…์„ ์ง€์ •ํ•ด์ค˜์•ผ ํ•ฉ๋‹ˆ๋‹ค.
    swiper > swiper-wrapper > swiper-slide
  • spaceBetween: 5, css์—์„œ ๋งˆ์ง„๊ฐ’์„ ์ฃผ์ง€ ์•Š๊ณ  swiper์˜ ์†์„ฑ์ธ spaceBetween์€ ์‚ฌ์šฉํ•˜์—ฌ ์Šฌ๋ผ์ด๋“œ์˜ ์—ฌ๋ฐฑ์„ ์„ค์ •ํ•˜์˜€์Šต๋‹ˆ๋‹ค.
  • disableOnInteraction: false ๋งˆ์šฐ์Šค ํด๋ฆญ์‹œ ์Šฌ๋ผ์ด๋“œ ๋ฉˆ์ถค ์ œ์–ด(true: ์ผ์‹œ์ •์ง€, false: ์žฌ์ƒ)
  • pagination์„ ์ปค์Šคํ…€ํ•˜๊ธฐ ์œ„ํ•ด type: "custom"์œผ๋กœ ๋ฐ”๊พธ์–ด ์ฃผ๊ณ  renderCustom ์†์„ฑ์„ ์ด์šฉํ•ด ํ˜„์žฌ ํŽ˜์ด์ง€/์ „์ฒด ํŽ˜์ด์ง€์ˆ˜๋ฅผ ํ‘œํ˜„ํ•˜์˜€์Šต๋‹ˆ๋‹ค.
  • return ๊ฐ’์œผ๋กœ ๋ฏธ๋ฆฌ ๋งˆํฌ์—… ํ–ˆ๋˜ ์ฝ”๋“œ๋ฅผ ์‚ฌ์šฉํ•ด ์ปค์Šคํ…€ ํ•˜์˜€๋Š”๋ฐ ์ด๋•Œ 10 ๋ฏธ๋งŒ์˜ ์ˆ˜์—๋Š” ์•ž์— '0'์ด ๋ถ™๋Š” ์กฐ๊ฑด๋ฌธ์„ ์‚ฌ์šฉํ•˜์—ฌ 01/09 ํ˜•์‹์˜ pagination์„ ๊ตฌํ˜„ํ•˜์˜€์Šต๋‹ˆ๋‹ค.

๐Ÿ’ก Swiper ์‚ฌ์šฉ์‹œ ์ฃผ์˜ํ•  ์ 

  1. swiper-wrapper, swiper-slide ํด๋ž˜์Šค ์ด๋ฆ„ ์ œ๋Œ€๋กœ ๋“ค์–ด๊ฐ”๋Š”์ง€ ํ™•์ธํ•˜๊ธฐ
  2. ์Šฌ๋ผ์ด๋”๋ฅผ ์—ฌ๋Ÿฌ ๊ฐœ ๋งŒ๋“ค ๋•Œ ๊ฐ๊ฐ์˜ ๋ณ€์ˆ˜๋ช…๊ณผ ํด๋ž˜์Šค ์ด๋ฆ„์„ ๋‹ค ๊ตฌ๋ถ„์ง€์–ด์ฃผ๊ธฐ
profile
๐Ÿ“š Coding Notes

0๊ฐœ์˜ ๋Œ“๊ธ€