모 회사를 지원하면서 과제 전형으로 알고리즘과 페이지 구현, 그리고 밑의 과제를 받았다.
이 과제를 제일 열심히 했었는데, 그 이유는 이 과제에 있던 한 문장 때문이었다.
'현재 지원자 중 정답자가 없는 문제입니다'
이 문장을 보고 '아 이건 꼭 풀어야겠다'고 생각해서 열심히 풀었던거 같다.
javascript를 배우면서 jquery는 안 배웠는데 이렇게라도 jquery 공부를 해본게 추후에 도움이 되면 좋겠다.
// 여기에 정답을 작성해주세요
class Selector {
// 생성자에서 인자에 해당하는 요소들을 배열로 element에 저장합니다.
constructor(args) {
this.element = document.querySelectorAll(args);
}
// 메서드 체이닝이 가능하도록 메서드 실행 후 객체를 반환합니다.
addClass(args) {
this.element.forEach((cur) => {
cur.classList.add(args);
});
return this;
}
removeClass(args) {
this.element.forEach((cur) => {
cur.classList.remove(args);
});
return this;
}
css(...args) {
if (typeof args[0] == 'string') { // 문자열로 들어오는 경우입니다.
this.element.forEach((cur) => {
cur.style[args[0]] = args[1];
});
} else { // object로 들어오는 경우입니다.
this.element.forEach((cur) => {
for (let v in args[0]) {
if (isNaN(args[0][v])) { // (숫자만으로 이뤄지지 않은 경우) = 'px'이 붙은 경우
cur.style[v] = args[0][v];
} else {
cur.style[v] = args[0][v] + 'px';
}
}
});
}
return this;
}
fadeOut(args) { // duration 기본값 400, easing 기본값 swing(0.5 - Math.cos( p * Math.PI ) / 2)
this.element.forEach((cur) => {
cur.style.transition = 'opacity 400ms cubic-bezier(0.420, 0.000, 0.580, 1.000)';
cur.style.opacity = 0;
setTimeout((v) => {
v.style.display = 'none';
}, 400, cur);
args();
});
return this;
}
}
// 객체 생성 후 반환합니다.
function $(args) {
let target = new Selector(args);
return target;
}
// 아래 코드는 수정하지 않습니다
// 1
$('#target-1').removeClass('border');
// 2
$('#target-1').css('left', '250px');
// 3
$('.target-2').removeClass('border').addClass('blue');
// 4
$('.target-2').css({ 'left': 50, 'margin-top': '-15px' })
// 5
$('#target-3').fadeOut(() => $('#target-4').addClass('green'));
해당 과제에 대한 피드백은 다음 면접에서 바로 이뤄졌고, 일단 setTimeout으로 발생하는 문제점에 대해 질문이 들어왔었다. 이벤트루프가 블락되면 저 400ms라는 시간에 맞춰서 작동하지 않는다는 답변이었는데, 난 이때 얼버무리며 제대로 답변을 못드렸다. 다음엔 실수하지 말아야지.
'TIL > 기타' 카테고리의 다른 글
| npm install 에러(peerDependencies) (0) | 2024.05.15 |
|---|---|
| Docker 란? (0) | 2024.04.17 |
| API_KEY를 안전하게 관리하는 방법 (0) | 2024.01.31 |