DongSup Ahn

🔥


📚 What is TIL?Permalink

✅ jQuery로 쉽고 빠르게 DOM 조작해보기
✅ Bootstrap을 이용해서 빠르게 페이지 만들어보기
✅ 미니 스타크래프트 만들어보기
✅ 기념일 계산기 만들어보기
✅ mbti 테스트 만들어보기

➕

✅ jQuery와 Bootstrap으로 간단하게 테스트 만들어서 배포해보기

Bootstrap을 잠깐이나마 배워보니 모의 페이지 하나 정도는 만들어봐야겠다는 생각을 했다
아직 사용법을 익히지 못해서 시간이 좀 걸리지만…
요즘 고양이가 많이보여서 고양이 관련된 테스트를 만들어보기로 했다 😸

더 효율적으로 페이지를 만들기위해 Bootstrap template 을 이용했다
스크롤없이 한 페이지에서 구현하고 싶어서 이것으로 정했다
간단하게 배경이랑 버튼 크기만 조금 수정해주고 바로 문항을 만들었다

const q = {
  1: {
    title: '나의 다리를 문지른다..!',
    A: '고양이가 관심을 끌려고 한다',
    B: '고양이는 냄새로 나를 표시하고 있다',
    C: '고양이가 음식을 요구하고 있다',
    D: '고양이가 인사를 한다',
    E: '고양이가 놀려고 한다',
  },
  2: {
    title: '쓸데없이 가구를 긁는다',
    A: '고양이가 발톱을 갈고 있다',
    B: ' 고양이가 가구에 냄새를 표시하려고 한다',
    C: '고양이가 관심을 끌려고 한다',
    D: '고양이는 지루하고 할 일을 찾고 있다',
    E: '고양이가 근육을 스트레칭하려고 한다',
  },
  3: {
    title: '나한테 야옹거리기 시작한다',
    A: '고양이가 배고프다.',
    B: '고양이는 지루하고 할 일을 찾고 있다',
    C: '고양이는 나를 보고 기뻐한다',
    D: '고양이가 나와 의사소통을 시도하고 있다 ',
    E: '고양이가 아프거나 불편한다',
  },
  4: {
    title: '나를 핥아준다',
    A: '고양이는 동료 고양이처럼 나를 그루밍하고 있다',
    B: '고양이가 애정을 표현하고 있다',
    C: '고양이는 배고프고 나를 맛보길 원한다',
    D: '고양이는 자신의 냄새로 나를 표시하려고 한다',
    E: '고양이가 나에게 무언가를 전달하려고 한다',
  },
  5: {
    title: '갑자기 등을 구부리고 털이 곤두섰다..!',
    A: '고양이가 겁을 먹거나 위협을 받고 있다',
    B: '고양이가 놀 준비를 하고 있다',
    C: '고양이는 행복하고 편안하다',
    D: '고양이는 우위를 주장하려고 한다',
    E: '고양이가 아프거나 불편한다',
  },
  6: {
    title: '가구 밑이나 좁은 공간에 숨는다',
    A: '고양이가 무서워하거나 불안해한다',
    B: '고양이는 잠을 잘 수 있는 아늑한 은신처를 찾으려고 노력하고 있다',
    C: '고양이는 장난기를 느끼고 나를 놀라게 하고 싶어한다',
    D: '고양이가 독립성을 주장하려고 한다',
    E: '고양이가 건강 문제를 겪고 있다',
  },
  7: {
    title: '그르렁그르렁 거린다',
    A: '고양이는 행복하고 만족한다',
    B: '고양이가 나와 의사소통을 시도하고 있다',
    C: '고양이가 아프거나 불편한다',
    D: '고양이는 자신의 우위를 주장하려고 한다',
    E: '고양이가 다른 동물을 위협하려고 한다',
  },
  8: {
    title: '꾹꾹이를 시전했다..!',
    A: '고양이는 행복하고 만족한다',
    B: '고양이는 자신의 냄새로 나를 표시하려고 한다',
    C: '고양이가 애정을 표현하려고 한다',
    D: '고양이는 우위를 주장하려고 한다',
    E: '고양이가 스트레스를 받거나 불안해한다',
  },
  9: {
    title: '꼬리를 앞뒤로 빠르게 흔들기 시작했다',
    A: '고양이는 장난기를 느끼고 있다',
    B: '고양이가 화를 내거나 짜증을 낸다',
    C: '고양이가 아프거나 불편한다',
    D: '고양이가 나와 의사소통을 시도하고 있다',
    E: '고양이가 긴장하거나 불안해한다',
  },
  10: {
    title: '갑자기 죽은 쥐를 가져왔다..',
    A: '고양이가 선물을 가져오고 있다',
    B: '고양이가 애정을 표현하려고 한다',
    C: '고양이가 관심을 끌려고 한다',
    D: '고양이가 건강 문제를 겪고 있다',
    E: '고양이는 자신의 지배력을 주장하려고 한다',
  },
};
JavaScript

⚠️ 여기서 문제는 문항의 위치가 항상 일정해서 문항을 매번 랜덤하게 배치할 필요가 있었다

const btn_list = [
  "<button id='A' type='button' class='btn btn-outline-light mt-3 option-btn'>...</button>",
  "<button id='B' type='button' class='btn btn-outline-light mt-3 option-btn'>...</button>",
  "<button id='C' type='button' class='btn btn-outline-light mt-3 option-btn'>...</button>",
  "<button id='D' type='button' class='btn btn-outline-light mt-3 option-btn'>...</button>",
  "<button id='E' type='button' class='btn btn-outline-light mt-3 option-btn'>...</button>",
];
JavaScript

✔️ 문서에 들어갈 버튼 리스트를 만들고 문항을 클릭할때마다 리스트가 섞이도록 했다

⚠️ html 문서에 있던 버튼을 없애고 동적으로 추가해주다보니
 let option_btn = document.querySelectorAll(‘.option-btn’); 이 부분에 오류가 있었다

const opt = document.querySelector('.option');
let option_btn = document.querySelectorAll('.option-btn');

opt.addEventListener('click', e => {
  if (!e.target.className.includes('d-grid')) {
    total += e.target.id;
    console.log(total);
    next();
  }
});
function shuffle(array) {
  array.sort(() => Math.random() - 0.5);
  let sum = '';
  for (let i of btn_list) {
    sum += i;
  }
  opt.innerHTML = sum;
}
JavaScript

✔️ 부모요소에 이벤트 리스너를 등록하고 조건문으로 동작하도록 정상작동하도록 했다

unction next() {
  if (num == 11) {
    const total_list = total.split('');
    DuplicateCheck(total_list);
    const M = maxKey + '';
    console.log(M);
    console.log(M.length);

    if ('A' == M) final = 'A';
    if ('B' == M) final = 'B';
    if ('C' == M) final = 'C';
    if ('D' == M) final = 'D';
    if ('E' == M) final = 'E';
    if (M.length > 1) {
      if (maxKey.includes('A') && maxKey.includes('B')) {
        final = 'B';
      } else if (maxKey.includes('B') && maxKey.includes('C')) {
        final = 'C';
      } else if (maxKey.includes('C') && maxKey.includes('D')) {
        final = 'D';
      } else if (maxKey.includes('D') && maxKey.includes('E')) {
        final = 'E';
      } else {
        final = 'F';
      }
    }
    console.log('1' + maxKey);
    console.log('2' + final);
    $('.question').hide();
    $('.loader').show();
    setTimeout(() => {
      $('.loader').hide();
      $('.result').show();
      $('#img').attr('src', `./assets/img/${result[final]['img']}`);
      $('#rank').html(result[final]['rank']);
      $('#explain').html(result[final]['explain']);
    }, 2000);
  } else {
    shuffle(btn_list);
    $('.progress-bar').attr('style', `width: calc(100/10*${num}%)`);
    $('#title').html(q[num]['title']);
    $('#A').html(q[num]['A']);
    $('#B').html(q[num]['B']);
    $('#C').html(q[num]['C']);
    $('#D').html(q[num]['D']);
    $('#E').html(q[num]['E']);
    num++;
  }
}

function DuplicateCheck(total_list) {
  total = total_list.reduce((a, b) => {
    a[b] = (a[b] || 0) + 1;
    return a;
  }, {});
  console.log(total);
  maxKey = Object.keys(total).reduce((max, key) => {
    if (max.length === 0 || total[key] > total[max[0]]) {
      return [key];
    }
    if (total[key] === total[max[0]]) {
      max.push(key);
    }
    return max;
  }, []);
}
JavaScript

✔️ 이제 클릭으로 쌓인 문자열을 문자 하나씩 리스트에 넣고
 중복되는 값을 추출하기위해 중복되는 값을 키와 값으로 저장하는 DuplicateCheck 함수를 만들었다

let result = {
  A: {
    rank: '초보 고양이 집사',
    explain: '고양이의 행동에 대한 기본적인 이해가 어느 정도 있지만 개선의 여지가 있습니다.',
    img: 'E.png',
  },
  B: {
    rank: '중급 고양이 집사',
    explain: '고양이의 행동을 잘 이해하고 있으며 신호를 잘 해석할 수 있습니다.',
    img: 'D.png',
  },
  C: {
    rank: '고양이 따까리',
    explain: '당신은 고양이의 행동을 깊이 이해하고 고양이의 필요와 욕구를 예측할 수 있습니다.',
    img: 'C.png',
  },
  D: {
    rank: '고양이 친구',
    explain: '당신은 고양이의 행동을 철저히 이해하고 있으며 고양이와 효과적으로 의사소통할 수 있습니다.',
    img: 'B.png',
  },
  E: {
    rank: '고양이 마스터',
    explain:
      '당신은 고양이의 행동을 탁월하게 이해하고 있으며 장난스럽고 자극적인 방식으로 고양이와 교감할 수 있습니다.',
    img: 'A.png',
  },
  F: { rank: '고양이 박사', explain: '당신은 고양이를 키울자격이 있습니다', img: 'F.png' },
};
JavaScript

마지막으로결과로 보여줄 이미지, 텍스트만 만들어주면 끝!

URL



🔗 TIPPermalink

parseIntPermalink

소수점을 버리게 된다
parseInt는 정수 값을 반환하기 위해 소수점 이하 값을 잘라낸다

let num = parseInt(Math.random() \* 45 + 1)
JavaScript

🔎 랜덤 숫자를 생성할때 Math.floor 말고도 parseInt로 소수점을 버리게하고 1을 더하는 방법이 있었다

jquery 장점Permalink

🔎 쉬운 DOM 조작이 가능하다
🔎 크로스 브라우징 - 여러 가지 브라우저에서 일관된 결과를 보장한다
🔎 간결한 코드 - jQuery는 반복적인 코드를 줄이고, 간결한 코드를 작성할 수 있다
🔎 jQuery는 다양한 플러그인을 제공한다
🔎 AJAX 요청을 쉽게 처리할 수 있는 다양한 메소드를 제공한다

💡 하지만 jQuery를 사용하면 좋을까?

✔️ 사용할 이유가 그리 많지는 않다 jQuery로 할 수 있는
 대부분 기능은 바닐라 JS나 TypeScript 등으로 똑같이 구현이 가능하다

✔️ jQuery는 기존 코드를 래핑(wrapping)해서 새롭게 만든 패키지이기 때문에 무겁다
✔️ 무엇보다 리액트와 같이 좋은 대안이 많다



✨ Today is …Permalink

JavaScript 시작!Permalink

드디어 JavaScript를 배우기 시작했다
HTML/CSS 에 더 많은 시간을 투자하고 싶지만..
이제 진짜 시작이라는 느낌이 든다 🔥

댓글남기기

참고

Virtual DOM

가상(Virtual) DOM 가상 DOM은 실제 브라우저의 DOM이 아닌 리액트가 관리하는 가상의 DOM으로 React는 실제 DOM을 직접 조작하지않고 가상 DOM을 활용해서 렌더링을 수행한다. 실제 DOM을 직접 조작하면 어떤 단점이 있을까? 브라...

실행 컨텍스트

실행 컨텍스트란? 식별자를 등록하고 관리하는 스코프와 코드 실행 순서 관리를 구현한 내부 메커니즘으로 자바스크립트 코드가 실행되는 환경을 말한다 즉, 모든 자바스크립트 코드는 실행 컨텍스트를 통해 실행되고 관리된다. 그렇다면 실행 컨텍스트는 언제 생성될까? ...

웹 성능

성능 측정을 해야하는 이유 성능 측정을 해야 하는 이유는 사용자 경험과 기업의 이익에 직접적인 영향을 미치기 때문이다. 아카마이의 이커머스 업계 성능 현황 보고서에 따르면, 지연 속도가 증가할수록 이탈률이 급격히 증가하고 구매 전환률이 감소하는 경향이 있다. 예를 ...

웹 표준 & 웹 접근성 & SEO

웹 표준이 등장한 배경 넷스케이프 vs 인터넷 익스플로러 경쟁 과거에, Netscape와 Internet Explorer가 서로 웹을 장악하기 위한 경정이 치열했고 개발자들은 Netscape와 Internet Explorer 두가지 버전의 페이지를 모두 개발했어야 ...