[Javascript] 클래스리스트 / Math 객체_실습

실습01: 추가 버튼 클릭 > 햄버거 추가 / 제거 버튼 클릭 > 리스트 삭제

코드: https://github.com/hanhyochan/study-javascript/tree/master/10%ED%9A%8C%EC%B0%A8

기존 예제는 똑같은 멘트에 추가된 햄버거 갯수만 띄우는 방식이었다. (아래)

하지만 햄버거 주문서라면 햄버거 종류 이름이 보기좋게 나열되어있는 것이 좋을 것 같아서

지정한 햄버거 이름이 무작위로 나오는 버전으로 업그레이드 시켜보았다.

우선 코드를 쓰기 전에 어떤 기능을 넣을 것인지 계획을 먼저 세웠다.

1. 'Hamburger Order' 제목 아래 추가, 제거 버튼을 만들자.
2. '추가' 누를 때 마다 랜덤 햄버거 이름 순차적으로 뜨고, '제거' 시 하나씩 사라지게 하자.
3. 햄버거 리스트 위에 몇개의 햄버거가 추가됬는지 기록하자.
4. 'Hamburger Order'누르면 '주문하시겠습니까?'팝업이 뜨고
5. 팝업에서 '예'누르면 새로고침, '아니오' 누르면 팝업만 사라지게 만들자.

다음엔 어떻게 구현할 것인지 계획을 세웠다.

1. 'Hamburger' 배열을 만들어 랜덤으로 나올 햄버거 이름들을 써넣자.
2. 또 다른 배열을 만들어 '추가' 시 Hamburger 배열에 랜덤한 인덱스를 뽑아 그 해당되는 값을 순차적으로 새로운 배열에 저장되게 만들자.
3. '제거' 시 새로운 배열의 값을 'pop'시키자.
4. 'Hamburger Order'을 누르면 주문 팝업이 나오고 toggle 기능으로 없앴다 생겼다 할 수 있게 만들자
5. '예', '아니요' 버튼은 add기능으로 구현하자.

데이터 무결성을 지키기 위해 원본 'Hamburgers'배열의 복사본인 새로운 배열에서 값들이 편집될 수 있도록 했다.

코드 풀이

변수 선언

const itemList = document.querySelector('ul');
const addBtn = document.querySelector('#addBtn');
const removeBtn = document.querySelector('#removeBtn');
const Hamburger_counting = document.querySelector('.Hamburger_counting');
const title = document.querySelector('.title')
const popup = document.querySelector('.popUp')
const popup_yes = document.querySelector('.popup_yes')
const popup_no = document.querySelector('.popup_no')

• 노드 객체를 변수 선언했다.

햄버거 갯수 세기

const hamburgers = ['불고기버거', '치킨버거', '치즈버거', '새우버거', '코딩버거', '카레버거', '콩고기버거',
'야채버거']

const new_hamburger_Array = [];

function count_hamburger() {``
    if (new_hamburger_Array.length === 0) {
        num.textContent = ``
    } else {
        Hamburger_counting.textContent = `${new_hamburger_Array.length}개의 버거를 추가하셨습니다.`
    }
}

• 'hamburgers' 배열에 랜덤으로 나올 햄버거 종류 쫙 써줬다.
• 'hamburgers'의 값을 복사하고 직접 편집되게 할 'new_hamburger_Array'라는 새로운 빈 배열을 선언했다. (원본 'hamburgers' 데이터 보호)
• count_hamburger() 함수를 선언했다.
• ew_hamburger_Array 데이터 갯수가 0일 경우 빈공간, 그 이상일 경우 갯수 멘트 나오는 if문 만들었다.

햄버거 추가

function addItem() {
    const li = document.createElement('li')

    let rn = Math.random();
    let rn_hamburger = Math.floor(rn * hamburgers.length)
    let new_hamburgers = hamburgers[rn_hamburger]

    new_hamburger_Array.push(new_hamburgers)
    
    li.innerHTML = `${new_hamburgers}`
    itemList.appendChild(li)
    count_hamburger()
}

• addItem 함수 선언했다.
• rn 변수에 랜덤 숫자 메소드를 대입했다.
• rn_hamburger 변수에 'hamburgers' 배열 길이 범위 안에서 랜덤 숫자가 나오고, 소수점 제외한 정수만을 나오게 하는 내용을 대입했다. (예를 들어 배열 길이 5개면 0~5 중 소수점 제외한 정수가 랜덤으로 나온다.)
• new_hamburgers 변수에 'hamburgers' 배열 인덱스가 'new_hamburgers'의 내용대로 랜덤+정수+배열길이에 맞춰 대입되게 했다.
• new_hamburgers 변수를 new_hamburger_Array 배열에 push해주었다. (new_hamburger_Array을 함수 밖에서 선언한 이유는 저장된 값이 새로고침되지 않고 계속 쌓이게 하기 위해)

햄버거 제거 및 팝업 관리

function removeItem() {
    new_hamburger_Array.pop()  

    const liElement = itemList.getElementsByTagName('li')
    if (liElement.length > 0) {
        itemList.removeChild(liElement[liElement.length -1])
    }
    count_hamburger()
}

function popUpOn() {
    popup.classList.toggle('show');
    console.log(popup.classList.contains('show'));
}

function popup_yes_click() {
    popup.classList.add('show');
    location.reload();
}

function popup_no_click() {
    popup.classList.add('show');
}

addBtn.addEventListener('click', addItem);
removeBtn.addEventListener('click', removeItem);
title.addEventListener('click', popUpOn);
popup_yes.addEventListener('click', popup_yes_click);
popup_no.addEventListener('click', popup_no_click);

• pop 메소드로 new_hamburger_Array 배열 안의 내용을 지워주었다.
• 배열만 지우는게 아니라 li태그도 함께 지워져야하므로 if문으로 하나씩 지워주었다.
• toggle, add 메소드로 팝업의 가시성 유무?를 조절했다.
• location.reload();로 '예' 버튼 눌렀을 때 새로고침 되도록 했다.

회고: 코드 짜기 전 어떤 기능을 만들건지, 그 기능을 어떻게 구현할 건지 미리 계획을 짜고 움직이니 헤메는 시간도 줄이고 훨씬 효율적인 느낌이었다. 작업을 체계적으로 할 수 있는 느낌이라 실무에서도 간략하게라도 계획을 짜서 움직이는게 낫겠다는 생각이 들었다. 앞으로 이런 자세로 공부해야겠다.

그리고 구상한 계획이 계획대로 잘 구동해줘서 기뻤다. 시간 오래걸릴 줄 알았는데 생각보다 안 걸렸다. 실력이 조금 오른 느낌이다.

예제에서 그치지 않고 스스로 생각하여 업그레이드 시키니 훨씬 머리에 잘 들어온 느낌이다.
'플러스 알파!' 라는 내 좌우명처럼 플러스 알파로 더 많이 공부할 예정이다.

플러스 알파!!