choi95의 TIL📝

다음과 같은 방식들을 통해 스크롤 위치에 따라 각기 다른 Header 디자인이 랜더링되도록 코드를 구현하였다. scrollTop window.addEventListener('scroll', (event) => { let {scrollTop} = event.target.scrollingElement; //document.documentElement.scrollTop || document.body.scrollTop nav.classList.add('active'); //active 클래스 여부에 따라 헤더 디자인이 상이하게 작동 if(scrollTop = 50 ) ? nav.classList.add('active') : nav.classList.remove('active'); }) Window 인터페이스의 ..

문제 한 개의 회의실이 있는데 이를 사용하고자 하는 n개의 회의들에 대하여 회의실 사용표를 만들 려고 한다. 각 회의에 대해 시작시간과 끝나는 시간이 주어져 있고, 각 회의가 겹치지 않게 하 면서 회의실을 사용할 수 있는 최대수의 회의를 찾아라. 단, 회의는 한번 시작하면 중간에 중 단될 수 없으며 한 회의가 끝나는 것과 동시에 다음 회의가 시작될 수 있다. 문제풀이 시작 시간을 기준으로 순차 탐색을 돌아야하기 때문에 오름차순으로 자료구조를 정렬_ 시작시간과 종료시간이 같을 경우도 있기 때문 현재 참조하고 있는 회의 종료시간보다 회의 시작시간이 같거나 클 경우 회의 가능 회의가 가능한 회의 시작시간을 그 다음 종료시간으로 변경 코드 function solution(...arr) { let answer =..

document.addEventListener('click', function (event) { if(event.target === document.querySelector('button')) return; (...) }, false); 다음과 같이 클래스나 아이디명이 지정되어 있지 않은 버튼 요소를 이벤트 처리 내에서 식별하기 위해서 조건문을 작성하였다. 하지만 여러 버튼 중 가장 처음에 있는 버튼 요소만 이벤트를 감지하는 문제가 발생하였다. 문제해결 Document.querySelector()는 제공한 선택자 또는 선택자 뭉치와 일치하는 문서 내 첫 번째 Element를 반환합니다. 일치하는 요소가 없으면 null을 반환합니다. querySelector로 참조한 노드 객체는 문서 내 첫 번째 Elem..

문제 N개의 평면상의 좌표(X, Y)가 주어지면 모든 좌표를 오름차순으로 정렬하는 프로그램을 작성하세요.정렬기준은 먼저 X값에 의해서 정렬하고, X값이 같을 경우 Y값에 의해 정렬합니다. 문제풀이 한 쌍의 좌표를 순서대로 나열하기 위해 2차원 배열에 저장 해당 배열을 순회하면서 선택 정렬 수행 X값을 비교할 경우에는 1차원 배열 내 첫 번째 요소를 비교 Y값을 비교할 경우에는 1차원 배열 내 두 번째 요소를 비교 코드 function solution(arr) { let answer = arr; for(let i = 0; i arr[j][0]) { [arr[i], ar..

문제 새 학기가 시작되었습니다. 현수는 새 짝꿍을 만나 너무 신이 났습니다. 현수네 반에는 N명의 학생들이 있습니다. 선생님은 반 학생들에게 반 번호를 정해 주기 위해 운동장에 반 학생들을 키가 가장 작은 학 생부터 일렬로 키순으로 세웠습니다. 제일 앞에 가장 작은 학생부터 반 번호를 1번부터 N번까 지 부여합니다. 현수는 짝꿍보다 키가 큽니다. 그런데 현수가 앞 번호를 받고 싶어 짝꿍과 자 리를 바꿨습니다. 선생님은 이 사실을 모르고 학생들에게 서있는 순서대로 번호를 부여했습니 다. 현수와 짝꿍이 자리를 바꾼 반 학생들의 일렬로 서있는 키 정보가 주어질 때 현수가 받은 번 호와 현수 짝꿍이 받은 번호를 차례로 출력하는 프로그램을 작성하세요. 문제풀이 본래 선생님이 정해준 번호 순서를 구한다. 앞서 구한..

다음과 같이 Progress-Bar를 구현할 때, 버튼을 클릭한 뒤에 진행 바 요소의 width 값이 25%가 되었을 경우 해당 애니메이션을 종료시키기 위해서 다음과 같이 코드를 작성하였다. if(elem.style.getPropertyValue('width') === range * current) { //현재 진행 바 가로 너비가 지정 25%에 도달했을 경우 clearInterval(intervalId); //애니메이션 종료 current++; } 하지만 원하는 결과를 얻지 못하고 진행 바는 동작이 종료되지 않은 채 무한 루프로 빠지는 문제가 발생하였다. getPropertyValue의 반환값 문제 getPropertyValue가 반환하는 데이터 타입에 문제가 있었다. The CSSStyleDeclar..

문제 문제풀이 LRU(Least Recently Used) 알고리즘 캐시(Cache)에서 메모리를 다루기 위해 사용되는 알고리즘 캐시가 사용하는 리소스의 크기는 제한되어 있음 캐시는 제한된 리소스 내에서 데이터를 빠르게 저장 및 참조할 수 있어야 함 메모리 상에서 가장 최근에 사용된 적이 없는 캐시의 메모리부터 대체하며 새로운 데이터를 갱신 코드 function solution(s, w) { let answer = Array.from({length: s}); for(let i = 0; i < w.length; i++) { if(!answer.includes(w[i])) { //Cache Miss일 경우 if(answer.length === s) { //메모리 사이즈가 모두 찼을 경우 answer.pop(..

다음과 같이 버튼을 클릭하면 팝업창이 새로 뜨도록 구현하였다. 하지만 다음과 같이 팝업창 컨테이너의 가시성 여부를 결정해주는 것을 CSS 상의 Opacity를 이용한다면, .popup-modal.is--visible { //해당 클래스를 추가할 경우 Opacity 값의 변화로 보이게 함 opacity: 1; } 현재 뷰 상에서 요소가 사라져 보이지는 않게 되지만 해당 영역의 이벤트는 응답을 하게 되고 작동한다. 이를 강제로 제어하기 위해서 다음과 같이 pointer-events 속성을 활용하였다. .popup-modal { (...) opacity: 0; pointer-events: none; //요소가 보이지 않을 경우에는 이벤트 또한 발생하지 않도록 제어 } .popup-modal.is--visibl..