[JavaScript] ✨⛏ MBTI 페이지 리팩토링

Vanilla JS로 나만의 MBTI 페이지 만들기
지난 회고와 멘토링 & 코드 리뷰를 기반으로 앞서 만든 MBTI 페이지 리팩토링을 진행하였다.

⛏ 1차 리팩토링

• 리팩토링 기간 : 2023년 8월 2일 ~ 2023년 8월 3일

1. 질문지가 바뀔 때마다 이전 선택지 버튼을 display: none으로만 관리했는데 remove()로 제거

   answer.addEventListener("click", () => {
          const 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].remove(); // 이전 버튼 disply: none; 에서 remove로 삭제함
          }
          goNext(++qIdx);
      }, false);

2. data.js를 index.html 내에 전역으로 선언하지 않고 필요한 data를 import하여 사용

   import { qnaList, MBTIType, infoList } from "./data.js"; 

3. 재시작 버튼 생성하여 클릭 시 reload

   // 재시작
   function restart() { 
      const restartBtn = document.querySelector('.restart-button');
   
      restartBtn.addEventListener('click', () => {
          location.reload();  
      })
   }

4. 이미지 로딩이 느려지는 이슈 -> 아래의 방법들로 로딩 속도가 개선되었지만 여진히 로딩 속도가 느림

   1. 이미지 최적화
   2. img 상단의 div와 img 모두 사이즈 지정
   3. loading = lazy 속성 추가

5. 재할당하지 않는 변수는 let말고 const로 선언

6. MBTI 별 설명 추가

   export const infoList = [
      {
          name: 'INTP',
          desc: '지적 호기심이 높으며 잠재력과<br> 가능성을 중요시하는 당신!', // 추가 설명
          department: '화학공학과<br> 생명공학과<br> 컴퓨터공학과'
      },
    
    ...

7. 질문지와 선택지 가독성 향상

8. 저장하기 버튼 생성하여 클릭 시 결과 캡쳐 이미지 다운됨
   - html2canvas 라이브러리 사용

   // 결과 이미지로 저장하기
   function save() {
      const shareBtn = document.querySelector('.save-button');
   
      shareBtn.addEventListener('click', () => {
          html2canvas(document.querySelector('#capture')).then(canvas => {
              let imgEl = document.createElement('a');
              imgEl.href = canvas.toDataURL('imge/png');
              imgEl.download = '나에게_맞는_학과는.jpg';
              imgEl.click();
          });
      })
   }

📍 구현 화면

• 시작화면
  

• 질문화면
  

• 결과화면
  

• 이미지 저장 버튼 클릭 시 이미지 파일 다운로드
  

• 저장된 jpg 파일
  

📌 리팩토링 회고

• 배포한 사이트에서 변경된 css가 적용이 안 되는 이슈가 있었다. vscode liveserver와 모바일에서는 적용이 되었지만 배포한 사이트를 pc로 접속했을 때만 적용이 안 됐다. 구글링해본 결과, 캐시 삭제로 해결할 수 있었다.
  -> 매번 캐시를 삭제할 수 없으니 캐시를 방지하는 방법도 있다.
  참고링크
• 이미지 로딩이 느려지는 이유가 단순 이미지 문제가 맞는지 더 고민해볼 필요가 있는 것 같다.
• 공유하기 기능 추가하여 링크를 전달할 수 있게 만들면 더 좋을 것 같다.
• 매주 질문지가 바뀐다면 코드의 가독성을 높일 필요가 있어보인다.

깃 링크
배포링크