Vanilla JS로 나만의 MBTI 페이지 만들기

동물 MBTI 페이지 만들기

위 사이드 프로젝트를 기반으로 나만의 MBTI 페이지를 만들어봤다.
주제는 MBTI별 학과 추천 - 나에게 맞는 학과는?! 이다.

📍 진행 과정

프로젝트를 진행하기 앞서,
mbit 각 자리는 2개의 알파벳 중 하나로 결정되는데 이 값을 어떻게 저장해서 처지할지 고민이었다.

앞서 진행한 동물 mbti 프로젝트에서는 선택에 따라 지정해둔 모든 동물의 값을 증가시키고, 그 중 최댓값을 구하는 구조였는데 이를 기반으로 구현해 보았다.

• qnaList에서 선택지 객체에 type으로 각 mbti 별 인덱스 번호를 지정해 두었다.
  (임의로 배열의 인덱스 번호에 각 알파벳을 지정해둠)

// E 0
// I 1
// N 2
// S 3
// F 4
// T 5
// P 6
// J 7

const qnaList = [
    {
      q: '(1/12) 떨리는 1학년 OT날! 어떻게 친구들을 사귀지?',
      a: [
        { answer: '새 친구를 사귀는 건 언제나 즐거워! 내가 먼저 말을 걸어보자.', type: [0] },
        { answer: '새 친구를 사귀는 건 좋지만 나는 낯을 가려. 누군가 말을 걸어줄 때 까지 일단 기다려볼까?', type: [1] },
      ]
    },

• mbti 결과를 계산하기 위해 크기가 8인 배열을 생성하여 선택에 따라 해당되는 자리의 값을 증가시킨다.

const select = [0, 0, 0, 0, 0, 0, 0, 0];    // E I N S F T P J

// 선택지 클릭 이벤트
answer.addEventListener("click", function() {
    let children = document.querySelectorAll('.answer-box__list');

    let target = qnaList[qIdx].a[idx].type; // select index (mbti 알파벳 위치)
    for(let i=0; i<target.length; i++) {
      select[target[i]] += 1; // select 배열에서 각 mbti 위치의 값 증가
    }

    for(let i=0; i < children.length; i++) {
      children[i].style.display = 'none'; // 이전 선택지 none으로
    }
    goNext(++qIdx);
  }, false);
}

• 선택한 값이 저장된 배열을 두 자리씩 끊어서 비교하여 더 큰 값을 최종 mbti 문자열에 추가한다.

// 결과 계산
function calResult() {	

    let idx = 0;
    let result = '';

    for(let i=0; i<select.length; i+=2) {	
        (select[i] < select[i+1]) ? idx=i+1 : idx=i;
        result += MBTIType[idx].name;
    }

    return result;
}

✨ 구현 결과

깃 링크 : MBTI_DEPARTMENT
배포 링크 : MBTI별 학과 추천

📌 회고

• mbti 값을 저장하는 크기가 4인 배열로 각 자리마다 +1, -1 혹은 true, false 값을 주고 결과를 도출하는 방법이 더 효율적일 것 같다는 생각이 든다.

• 이미지 렌더링이 오래걸려서 이미지 최적화가 필요해 보인다.

• var 사용을 지양하자.

• display: none으로만 구현하지 말고 필요없는 엘리먼트들은 삭제해주자.
  
  

• 추가하고 싶은 부분

  • 다시하기 버튼
  • mbti별 간단한 설명이나 학과를 추천하는 이유