Vanilla JS 30

30 Day Vanilla JS Coding Challenge Study - 5주차

• JavaScript KONAMI CODE!
• Vanilla JavaScript Slide In on Scroll
• JavaScript Fundamentals: Reference VS Copy

12. JavaScript KONAMI CODE!

영상: https://youtu.be/_A5eVOIqGLU

키 입력 감지

const pressed = [];
const secretCode = 'wesbos';

window.addEventListener('keyup', (e) => {
  pressed.push(e.key);
  // 입력된 키의 배열을 최신순으로 최대 6개 유지시킨다
  pressed.splice(-secretCode.length - 1, pressed.length - secretCode.length);

  // 미리 정의된 secretCode와 입력된 키 배열을 대조하여 UI에 변화를 준다.
  if (pressed.join('').includes(secretCode)) {
    console.log('DING DING!');
    cornify_add();
  }
});

---

13. Vanilla JavaScript Slide In on Scroll

영상: https://youtu.be/uzRsENVD3W8

스크롤 이벤트 활용하기

// 성능 최적화를 위한 함수
function debounce(func, wait = 20, immediate = true) {
  var timeout;

  return function() {
    // 윈도우 객체
    var context = this;
    // 스크롤 이벤트
    var args = arguments;
    var later = function() {
      timeout = null;
      if (!immediate) func.apply(context, args);
    };
    var callNow = immediate && !timeout;
    clearTimeout(timeout);
    timeout = setTimeout(later, wait);
    if (callNow) func.apply(context, args);
  };
};

function checkSlide() {
  sliderImages.forEach(sliderImage => {
    const slideInAt = (window.scrollY + window.innerHeight) - sliderImage.height / 2;
    const imageBottom = sliderImage.offsetTop + sliderImage.height;
    const isHalfShown = slideInAt > sliderImage.offsetTop;
    const isNotScrolledPast = window.scrollY < imageBottom;

    // css 트랜스폼 translateX 속성 변경으로 스크롤을 통한 가로 슬라이드 효과를 준다.
    if (isHalfShown && isNotScrolledPast) {
      sliderImage.classList.add('active');
    } else {
      sliderImage.classList.remove('active');
    }
  });
}

// 성능 최적화를 위해 debounce()에 함수를 위임한다.
window.addEventListener('scroll', debounce(checkSlide));

---

14. JavaScript Fundamentals: Reference VS Copy

영상: https://youtu.be/YnfwDQ5XYF4

JavaScript의 객체와 배열 그리고 참조 vs 복사

배열

// 원본 배열
const players = ['Wes', 'Sarah', 'Ryan', 'Poppy'];

// 배열 복사를 예상
const team = players;

// 문제 발생
team[3] = 'Lux';

// 대안
const team2 = players.slice();
const team3 = [].concat(players);
const team4 = [...players];
const team5 = Array.from(players);

객체

// 원본 객체
const person = {
  name: 'Wes Bos',
  age: 80
};

// 객체 복사를 예상
const captain = person;

// 문제 발생
captain.number = 99;

// 대안
const cap2 = Object.assign({}, person, { number: 99, age: 12 });
const cap3 = {...person};

객체 (1 depth 초과)

// 원본 객체
const wes = {
  name: 'Wes',
  age: 100,
  social: {
    twitter: '@wesbos',
    facebook: 'wesbos.developer'
  }
};

// 객체 복사를 예상
const dev = Object.assign({}, wes);

// 문제 발생
dev.social.twitter = '@coolman';

// 대안
// lodash의 cloneDeep 사용
// JSON 활용
const dev2 = JSON.parse(JSON.stringify(wes));