Trouble shooting

1. 품절 이미지
2. fetch 오류
3. HTML 요소 추가
4. Map 자료형과 객체 자료형

1. 품절 이미지

❓ 문제:
자판기에 있는 콜라를 클릭할 때마다 최초 수량인 5개에서 하나씩 감소된다. 0이 되면 품절 이미지가 흐릿하게 표현되면서 어떤 콜라가 품절인지 소비자가 알 수 있도록 아래 예시 이미지 처럼 구현하고 싶었다.
품절 이미지를 해당 콜라 li 태그에 백그라운드 이미지로 구현했으나,
위 이미지 처럼 콜라 img 보다 품절 이미지가 앞으로 나오면서 콜라 img가 안 보이게 되는 현상이 생겼다.

🤔 원인:
z-index, display, opacity로 값으로 테스트하였으나, 기존 콜라 이미지가 흐려지는 결과를 얻을 수 없었다. position 값 때문에 레이어가 달라져서 위와 같은 문제가 발생했던 것 같다.

✍ 해결:

.list-violet::before{
    content: "";
    width: 94px;
    height: 135px;
    position: absolute;
    margin: 0 12px 12px 0;
    background: black;
    opacity: .7;
    background-image: url(./images/sold_out.svg);
    border-radius: 10px;
    text-align: center;
}

위와 같이 가상 요소를 생성해 position과 opacity 값을 주어 해결하였다.

2. fetch 오류

❓ 문제:

Uncaught (in promise) SyntaxError: Unexpected token < in JSON at position 0
Promise.catch (async)

fetch로 콜라 데이터를 받아 올 때, 위와 같이 에러 발생되었다.

🤔 원인:
원인은 JSON 연결이 404 not found 이기 때문이다.

✍ 해결:
JSON을 JavaScript에서 호출한다고 js 파일 기준으로 JSON 경로를 입력했었는데 루트 폴더 기준으로 JSON 파일 경로를 입력해주니 해결되었다.

3. HTML 요소 추가

❓ 문제:
자판기에서 콜라를 클릭할 때, 해당 콜라가 장바구니에 없다면 장바구니에 해당 콜라를 새로 추가하고 장바구니에 해당 콜라가 이미 있다면 콜라 수량만 추가하는 기능을 구현하고 싶었다. 이번 문제는 콜라가 장바구니 없어서 장바구니에 해당 콜라를 새로 추가하는 부분이다. 자판기에서 클릭된 콜라 정보를 innerHTML로 장바구니에 추가한 후 자판기에서 다른 콜라를 클릭하면 장바구니에 있던 이전 콜라 정보고 삭제되고 최근 콜라만 추가되는 현상이 발생됐다.

🤔 원인:
innerHTMl은 html 태그와 함께 해당 요소에 컨텐츠를 추가하는 것이다.
즉, 기존 요소를 계속 덮어써 요소가 쌓이지 않는 것이다.

✍ 해결:

function displayGetItem(item){
  const con_getCola = document.querySelector(".con-getCola");
  con_getCola.insertAdjacentHTML("afterbegin", createGetHTMLString(item));
  //  con_getCola.innerHTML = createGetHTMLString(item);
}
function createGetHTMLString(item){
  let className = item.target.classList.value;
  let arr = className.split("");
  arr.splice(0,5);
  className = arr.join("");   
  return `
  <div class="con-cola">
            <img
              src="./images/${className}_cola.svg"
              width="18px"
              height="33px"
              alt="${className} cola"
              class="img-cola"
            />
            <p class="txt-colaName voucher">${className}_cola</p>
            <p class="txt-colaCount">${1}</p>
  `
}

위에 코드 처럼 innerHTML 대신에 insertAdjacentHTML를 사용하여 기존 요소는 냅두고 새로운 요소를 계속 추가하는 방법으로 해결했다.

4. Map 자료형과 객체 자료형

❓ 문제:
최초 코드를 작성했을 때, 장바구니에 해당 콜라가 있는지 유무를 파악할 때는 객체 자료형을 사용했고 선택한 콜라 수량 변경할 때는 Map을 사용했다. 누가 왜 이렇게 작성했냐고 물어보면 "하나의 변수로 관리하는 방법이 생각나지 않아 변수를 나눠서 작성했고 Map의 경우 has, set, get으로 수량을 관리하는 데 적합하다고 생각했습니다." 라고 조금 모자란 대답을 할 수 밖을 것 같다. 하지만, 코드 작성 후에 동작은 되지만 뭔가 조잡하고 하나의 변수로 콜라 데이터를 관리하고 싶다는 느낌을 지울 수 없었다.

✍ 해결:
결과적으로 내 선택은 Object 였다. 상황에 맞는 자료형이 있다고 생각하는데 일단 Map은 IE10에서 지원되지 않는다. 또한 key 추가, 삭제가 빈번하거나 데이터 크기가 클 때 사용된다. 반대로 생각해서 key 추가, 삭제가 빈번하지 않고 데이터 크기가 작을 때 사용하는 게 Object라면 "콜라 데이터를 담는 정도는 Object가 맞겠다" 라고 생각했다.