Vanilla JS로 MBTI 사이트 만들기

스터디에서 스프린트 기간에 vanilla js로 각자 MBTI 사이트를 만들기로 했다.
spa를 구성하는 것이 가장 막막했는데 두 가지 방법을 알아냈다.

1. display: none과 block으로 페이지가 전환되는 것처럼 구현
2. SPA 라우팅을 구현하여 URL에 따라 컴포넌트 교체

나는 첫 번째 방식을 채택하여 사이드 프로젝트를 구현하려 한다.
그 전에 vanilla js를 깊게 공부하지 않고 바로 리액트로 넘어갔었기에 연습삼아 강의 영상을 보고 MBTI 사이트를 따라 만들어봤다.
MBTI 사이트 만들기 강의 영상

✨새롭게 알게 된 점

📍 MBTI 질문과 선택지 데이터 가져오기

function goNext(qIdx){
    if(qIdx === endPoint){
        goResult();
        return;
    }

    var q = document.querySelector('.question-box');
    q.innerHTML = qnaList[qIdx].q;   /* 객체 데이터에서 질문 가져옴 */
    for(let i in qnaList[qIdx].a) {
        addAnswer(qnaList[qIdx].a[i].answer, qIdx, i);
    }
}

📍 선택에 따라 해당 동물 값 증가시키기

function addAnswer(answerText, qIdx, idx) {
    var a = document.querySelector('.answer-box');
    var answer = document.createElement('button');  /* 선택지 button 생성 */
    answer.classList.add('answerList');
    a.appendChild(answer);
    answer.innerHTML = answerText;

    answer.addEventListener("click", function() {
        var children = document.querySelectorAll('.answerList');

        var target = qnaList[qIdx].a[idx].type; /* target은 선택지에 따른 동물 타입  */
        for(let i=0; i<target.length; i++) {
            select[target[i]] += 1; /* select는 크기가 12인 배열. 선택에 따라 해당 동물 값을 증가시킴 */
        }

        for(let i=0; i < children.length; i++) {
            children[i].disabled = true;
            children[i].style.display = 'none';
        }
        goNext(++qIdx);
    }, false);
}

📍 결과값 도출

function calResult() {
    var result = select.indexOf(Math.max(...select)); /* 값이 가장 높은 동물 index 가져오기 */
    console.log(result);
    return result;
}

function setResult() {
    let point = calResult();
    const resultName  = document.querySelector('.result-name');
    resultName.innerHTML = infoList[point].name;

    var resultImg = document.createElement('img');
    const imgDiv = document.querySelector('.result-img');
    var imgURL = 'img/image' + point + '.png';
    resultImg.src = imgURL;
    resultImg.alt = point;
    resultImg.classList.add('img-fluid');
    imgDiv.appendChild(resultImg);

    const resultDesc = document.querySelector('.result-desc');
    resultDesc.innerHTML = infoList[point].desc;
}

📌 회고

• 오랜만인 프로젝트에 리액트만 쓰다가 vanilla js를 쓰려니 querySelector 등 낯설게 느껴졌다.
• 결과값을 도출하는 과정에서 콜백함수를 많이 사용했는데 익숙치 않아서 중간에 코드를 이해하는데 시간이 많이 소요됐다.
• 이를 바탕으로 이제 나만의 MBTI 사이트를 구현해 봐야겠다.

• 아래는 두 번째 방식인 SPA 구현 시 참고하면 좋을 법한 사이트이다.
  시간이 된다면 이 방식으로도 구현해보고 싶다.

  Vanilla Javascript로 간단한 SPA 라우터 구현해보기
  Vanilla Javascript로 SPA 구현하기