Javascript 정리 ⑥

영긔·2024년 5월 7일
CSSJavaScriptfrontendhtml

📒 Vanilla JS

목록 보기
6/8
post-thumbnail

✨ AJAX

서버에 GET, POST 요청을 할 때 새로고침 없이 데이터를 주고 받을 수 있게 도와주는 간단한 브라우저 기능

✍ fetch로 AJAX 요청하기

fetch('https://xxx/price.json')
  .then(res => res.json())
  .then(function(data){
    console.log(data)
  })
  .catch(function(error){
    console.log('실패함')
  });

서버와 데이터를 주고 받을 때는 문자만 주고 받을 수 있다! array, object를 전송할 수 없는데, 가능하게 하려면 JSON으로 바꿔 전송해줘야 함 ex. { "count" : 5 }
따라서 위의 fetch로 AJAX를 요청할 때는 res => res.json() 이러한 방식으로 코드를 작성해야 한다.
->jQuery, axios를 사용하면 편하게 사용할 수 있다.

📋 자바스크립트 이용해 카드 레이아웃 생성


이런 식의 화면이 되도록 코드를 짜주었다.

html

    <div class="container">
        <div class="row">

            <div class="col-sm-4">
                <img src="https://via.placeholder.com/600" class="w-100">
                <h5>Card title</h5>
                <p>가격 : 70000</p>
            </div>

        </div>

javascript

        var products = [
            { id: 0, price: 70000, title: 'Blossom Dress' },
            { id: 1, price: 50000, title: 'Springfield Shirt' },
            { id: 2, price: 60000, title: 'Black Monastery' }
        ];
        document.querySelector('.row').innerHTML='';
        products.forEach((a, i) => {
            var temp = `<div class="col-sm-4">
        <img src="https://via.placeholder.com/600" class="w-100">
        <h5>${products[i].title}</h5>
        <p>가격 : ${products[i].price}</p>
      </div>`;
            
            document.querySelector('.row').insertAdjacentHTML('beforeend', temp);
        });

📋 상품 더보기 버튼 만들기


위와 같은 기능을 하도록 작성할 것이다.

html

    <div class="container">
        <div class="row">

            <div class="col-sm-4">
                <img src="https://via.placeholder.com/600" class="w-100">
                <h5>Card title</h5>
                <p>가격 : 70000</p>
            </div>

        </div>
    </div>
    <div class="container">
        <button class="btn btn-danger" id="more">더보기</button>
    </div>

javascript

        var plus = 1;
        var products = [
            { id: 0, price: 70000, title: 'Blossom Dress' },
            { id: 1, price: 50000, title: 'Springfield Shirt' },
            { id: 2, price: 60000, title: 'Black Monastery' }
        ];
        document.querySelector('.row').innerHTML = '';
        function displayProducts(productList) {
            
            productList.forEach(item => {
                var temp = `<div class="col-sm-4">
            <img src="https://via.placeholder.com/600" class="w-100">
            <h5>${item.title}</h5>
            <p>가격 : ${item.price}</p>
        </div>`;
                document.querySelector('.row').insertAdjacentHTML('beforeend', temp);
            });
        }

        document.addEventListener('DOMContentLoaded', function () {
            displayProducts(products);

            document.getElementById('more').addEventListener('click', function () {
                fetch(`https://codingapple1.github.io/js/more${plus}.json`)
                    .then(response => response.json())
                    .then(data => {
                        displayProducts(data);
                        plus++;
                        if (plus > 2) {
                            document.getElementById('more').style.display = 'none';
                        }
                    })
                    .catch(error => console.error('Fetch error:', error));
            });
        });

forEach()가 여러번 쓰였으므로 함수화했다. 또한, 더보기 버튼을 누를 때마다 다음 상품을 불러오고, 더이상 상품이 없으면 더보기 버튼이 안보이도록 작성했다.

✨ array

🔎 sort

문자순으로 정렬하기 위해서는 .sort()를 덧붙이면 되고 숫자를 정렬하기 위해서는 아래와 같은 코드를 작성한다.

var arr = [4,1,6,2,7];
arr.sort(function(a, b){
  return a - b
});

이렇게 작성하면 오름차순으로 정렬된다. a-b가 양수일 경우 a를 b의 오른편으로 보내고, a-b가 음수일 경우 b를 a의 오른편으로 보낸다. 내림차순은 반대로 return b-a 로 작성하면 됨
sort함수를 쓰면 원래 데이터를 변형시켜주므로 주의 요망

📋 정렬 버튼 누르면 가격순 정렬


이런식으로 버튼을 누르면 정렬되도록 작성할 것이다.

html

<div class="container">
        <button id="price">가격순 정렬</button>
    </div>
    <div class="container">
        <div class="row">

            <div class="col-sm-4">
                <img src="https://via.placeholder.com/600" class="w-100">
                <h5>Card title</h5>
                <p>가격 : 70000</p>
            </div>

        </div>
    </div>

js

        var products = [
            { id: 0, price: 70000, title: 'Blossom Dress' },
            { id: 1, price: 50000, title: 'Springfield Shirt' },
            { id: 2, price: 60000, title: 'Black Monastery' }
        ];
        document.querySelector('.row').innerHTML = '';
        function displayProducts(productList) {
            
            productList.forEach(item => {
                var temp = `<div class="col-sm-4">
            <img src="https://via.placeholder.com/600" class="w-100">
            <h5>${item.title}</h5>
            <p>가격 : ${item.price}</p>
        </div>`;
                document.querySelector('.row').insertAdjacentHTML('beforeend', temp);
            });
        }

        document.addEventListener('DOMContentLoaded', function () {
            displayProducts(products);
            document.getElementById('price').addEventListener('click', function () {
                products.sort(function(a,b){
                    return a.price - b.price
                });
                document.querySelector('.row').innerHTML = '';
                displayProducts(products);
            });
        });

이런식으로 작성하면 된다.

🔎 filter

원하는 데이터만 보여주고 싶을 때 이용한다.

var arr = [4,1,6,2,7];

var arr2 = arr.filter(function(a){
  return a > 3
});

🔎 map

데이터를 변형하기 위해서 map을 사용한다.

var arr = [4,1,6,2,7];

var arr2 = arr.map(function(a){
  return a*10
});

원래 데이터는 변형시키지 않는다.

📋 버튼 누르면 제목 역순 정렬

html

<div class="container my-3">
        <button class="btn btn-danger" id="sort1">다나가순정렬</button>
    </div>
    <div class="container">
        <div class="row">

            <div class="col-sm-4">
                <img src="https://via.placeholder.com/600" class="w-100">
                <h5>Card title</h5>
                <p>가격 : 70000</p>
            </div>

        </div>
    </div>

js

        var products = [
            { id: 0, price: 70000, title: 'Blossom Dress' },
            { id: 1, price: 50000, title: 'Springfield Shirt' },
            { id: 2, price: 60000, title: 'Black Monastery' }
        ];
        document.querySelector('.row').innerHTML = '';
        function displayProducts(productList) {

            productList.forEach(item => {
                var temp = `<div class="col-sm-4">
            <img src="https://via.placeholder.com/600" class="w-100">
            <h5>${item.title}</h5>
            <p>가격 : ${item.price}</p>
        </div>`;
                document.querySelector('.row').insertAdjacentHTML('beforeend', temp);
            });
        }

        document.addEventListener('DOMContentLoaded', function () {
            displayProducts(products);
          
            document.getElementById('sort1').addEventListener('click', function () {
                products.sort(function (a, b) {
                    if(a.title<b.title){
                        return 1
                    }
                    else{
                        return -1
                    }
                });
                document.querySelector('.row').innerHTML = '';
                displayProducts(products);
            });
        });

주의할점: 처음엔 

                products.sort(function (a, b) {
                    return b.title-a.title
                });

이런식으로 작성했으나 안됨.

                products.sort(function (a, b) {
                    if(a.title<b.title){
                        return 1
                    }
                    else{
                        return -1
                    }
                });

이런식으로 작성했어야 했다.

📋 버튼을 누르면 가격 필터링해주기


html

<div class="container my-3">
        <button class="btn btn-danger" id="filter">6만원이하</button>
    </div>
    <div class="container">
        <div class="row">

            <div class="col-sm-4">
                <img src="https://via.placeholder.com/600" class="w-100">
                <h5>Card title</h5>
                <p>가격 : 70000</p>
            </div>

        </div>
    </div>

js

        var products = [
            { id: 0, price: 70000, title: 'Blossom Dress' },
            { id: 1, price: 50000, title: 'Springfield Shirt' },
            { id: 2, price: 60000, title: 'Black Monastery' }
        ];
        document.querySelector('.row').innerHTML = '';
        function displayProducts(productList) {

            productList.forEach(item => {
                var temp = `<div class="col-sm-4">
            <img src="https://via.placeholder.com/600" class="w-100">
            <h5>${item.title}</h5>
            <p>가격 : ${item.price}</p>
        </div>`;
                document.querySelector('.row').insertAdjacentHTML('beforeend', temp);
            });
        }

        document.addEventListener('DOMContentLoaded', function () {
            displayProducts(products);

            document.getElementById('filter').addEventListener('click', function () {
                var newpro = products.filter(a => a.price<=60000)
                document.querySelector('.row').innerHTML = '';
                displayProducts(newpro);
            });
        });

✨ DOM

javascript가 html에 대한 정보들을 써먹을 수 있게 object 자료로 정리한 것
또한, 브라우저는 html 문서를 위에서부터 읽으며 DOM을 생성하기 때문에, 아래와 같은 방식으로 작성할 경우 에러가 발생한다.

<script>
  document.getElementById('a').innerHTML = '바꾼글자'
</script>

<p id="a">원래글자</p>

🔎 DOMContentLoaded

document.addEventListener('DOMContentLoaded', function() { })

위와같은 방식으로 작성한다면, DOM을 생성을 다 한 후에 실행하도록 할 수 있다.

🔎 load

load를 사용하면 DOM과 이미지,css,js가 로드된 후에 실행할 수 있다.

window.addEventListener('load', function(){ })

이런 식으로 작성하면 이미지, css등이 모두 로드된 후에 실행되도록 한다.

✨ Storage

local storage와 session storage가 있는데, 문자, 숫자만 key, value로 저장할 수 있다
local storage는 브라우저를 껐다 켜도 남아있으나, session storage는 브라우저를 끄면 사라진다.

🔎 Local Storage

localStorage.setItem('이름', '영긔')

데이터를 저장한다.

localStorage.getItem('이름')

데이터를 꺼내온다.

localStorage.removeItem('이름')

데이터를 삭제한다.

✍ array, object 저장하기

local storage는 문자,숫자로만 저장되므로 array object를 저장할 시에 데이터가 문자로 변환되기 때문에 데이터가 손상될 수 있다.
따라서 JSON으로 바꿔 저장해야 함

var arr = [1,2,3];
var arr2 = JSON.stringify(arr);

localStorage.setItem('num', arr2);

var arr3 = localStorage.getItem('num');
arr3 = JSON.parse(arr3);
console.log(arr3);

위와 같은 방식으로 array를 저장하고 꺼내쓸수 있다.

💡 장바구니 구현


위와 같이 장바구니에 상품을 담는 코드를 짜도록 할 것이다.

html

    <div class="container">
        <div class="row">

            <div class="col-sm-4">
                <img src="https://via.placeholder.com/600" class="w-100">
                <h5>Card title</h5>
                <p>가격 : 70000</p>
            </div>

        </div>
    </div>

js

var products = [
            { id: 0, price: 70000, title: 'Blossom Dress' },
            { id: 1, price: 50000, title: 'Springfield Shirt' },
            { id: 2, price: 60000, title: 'Black Monastery' }
        ];
        document.querySelector('.row').innerHTML = '';
        function displayProducts(productList) {

            productList.forEach(item => {
                var temp = `<div class="col-sm-4">
            <img src="https://via.placeholder.com/600" class="w-100">
            <h5>${item.title}</h5>
            <p>가격 : ${item.price}</p>
            <button class="buy">구매</button>
        </div>`;
                document.querySelector('.row').insertAdjacentHTML('beforeend', temp);
            });
        }

        document.addEventListener('DOMContentLoaded', function () {
            displayProducts(products);

            document.querySelectorAll('.buy').forEach(button => {
                button.addEventListener('click', function (event) {
                    var title = event.target.parentElement.querySelector('h5').textContent;
                    var price = event.target.parentElement.querySelector('p').textContent;
                    price = price.replace(/가격\s*:/, '').trim(); // '가격' 다음의 공백(0개 이상)과 ':'을 모두 공백으로 대체하고 양쪽 공백 제거

                    var cartItems = localStorage.getItem('cart') ? JSON.parse(localStorage.getItem('cart')) : [];
                    var existingItem = cartItems.find(item => item.title == title);
                    if (existingItem) {
                        // 이미 있는 상품이라면 수량을 증가시킴
                        existingItem.quantity = existingItem.quantity + 1;
                    } else {
                        // 새로운 상품인 경우에는 수량을 1로 설정하여 추가
                        cartItems.push({ 'title': title, 'price': price, 'quantity': 1 });
                    }
                    localStorage.setItem('cart', JSON.stringify(cartItems));

                    console.log(cartItems);
                });
            });


        });

장바구니 화면

    <div>장바구니 페이지</div>
    <div class="container">
        <div class="row">
        </div>
    </div>
    <script>
        var cartItems = JSON.parse(localStorage.getItem('cart'));
        cartItems.forEach(item => {
            var temp = `<div class="col-sm-4">
            <h5>${item.title}</h5>
            <p>가격 : ${item.price}</p>
            <p>수량 : ${item.quantity}</p>
        </div>`;
            document.querySelector('.row').insertAdjacentHTML('beforeend', temp);
        });
    </script>

이런 식으로 작성하니 잘 작동하였다.

profile
영긔
SKYDeveloper
이전 포스트

Javascript 정리 ⑤

다음 포스트

Javascript 정리 ⑦

0개의 댓글