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

키 입력 감지

1
2
3
4
5
6
7
8
9
10
11
12
13
14
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

스크롤 이벤트 활용하기

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
// 성능 최적화를 위한 함수
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 복사

배열

1
2
3
4
5
6
7
8
9
10
11
12
13
14
// 원본 배열
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);

객체

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
// 원본 객체
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 초과)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
// 원본 객체
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));
Share Comments