choi95의 TIL📝

https://choi95.tistory.com/61 Dark-mode Question 토글 버튼을 클릭하면 테마(다크 모드/라이트 모드)를 설정하면 테마가 뷰에 반영되도록 구현하고자 한다.테마는 로컬스토리지에 저장하여 웹페이지를 리로드하거나 다시 접근했을 때 choi95.tistory.com 이전 포스팅에서 로컬 스토리지에 적재되어 있는 value 값에 따라 배경 테마 색상을 동적으로 변경해 주었다. 로컬 스토리지가 아닌 현재 운영 체제 레벨에서 설정 된 사용자 테마(다크 모드/라이트 모드)를 토대로 배경 색상을 바꿀 수 있다. window.matchMedia 다음과 같이 window.matchMedia 메서드를 콘솔 창에 출력해 보면 MediaQueryList 라는 객체를 반환함을 확인할 수 있고 프..

Question 토글 버튼을 클릭하면 테마(다크 모드/라이트 모드)를 설정하면 테마가 뷰에 반영되도록 구현하고자 한다.테마는 로컬스토리지에 저장하여 웹페이지를 리로드하거나 다시 접근했을 때 저장된 테마를 적용하도록 한다. Solution document.addEventListener('DOMContentLoaded', () => { const theme = localStorage.getItem('theme'); if(!theme) localStorage.setItem('theme', 'white'); if(theme === 'dark') document.body.classList.add('dark'); else document.body.classList.remove('white'); document.bo..

문제 A, B 두 개의 집합이 주어지면 두 집합의 공통 원소를 추출하여 오름차순으로 출력하는 프로그램을 작성하세요. 문제풀이 두 배열을 합쳐 초기화 한 임의 변수를 순회하면서 Array.indexOf() 메서드와 인덱스 i를 사용하여 해당 요소의 인덱스 값을비교한다. Array.indexOf() 메서드는 중복되는 요소가 여러 개 있다면 첫 번째로 검색된 요소의 인덱스를 반환하기 때문에 중복 된 값을식별할 수 있다. 코드 function solution(arr1, arr2) { let answer = []; let tmp = [...arr1, ...arr2]; tmp.forEach((item, i) => { if(tmp.indexOf(item) !== i) { answer.push(item); } }) c..

문제 오름차순으로 정렬이 된 두 배열이 주어지면 두 배열을 오름차순으로 합쳐 출력하는 프로그램을 작성하세요. 문제풀이 각기 다른 두 배열을 하나의 배열로 합치기 위해 스프레드 연산자를 사용한다. 오름차순으로 정렬하기 위해 Array.sort() 메서드를 사용한다. 코드 function solution(arr1, arr2) { let answer = [...arr1, ...arr2]; answer.sort((a, b) => a - b); return answer; } let arr1 = [1, 3, 5]; let arr2 = [2, 3, 6, 7, 9] console.log(solution(arr1, arr2)); 문제풀이2 Array.sort() 메서드를 사용했을 경우 시간 복잡도는 O(n × logn)..

기존 Scroll 이벤트 문제 기존 Scroll 이벤트는 단시간에 많은 양이 호출될 수 있고 동기적으로 실행되기 때문에 메인 스레드(Main Thread)에 영향을 준다. 또한 한 페이지 내에 여러 scroll 이벤트(무한 스크롤, 광고 배너, 애니메이션 등)가 등록되어 있을 경우, 각 엘리먼트마다 이벤트가등록되어 있기 때문에 사용자가 스크롤할 때마다 이를 감지하는 이벤트가 끊임 없이 호출이 된다.(이를 해결하기 이전 포스팅에서 디바운싱_Debouncing을 통해 문제를 개선하였다) 그리고 특정 지점을 관찰하기 위해서는 getBoundingClientRect() 함수를 사용해야 하는데, 이 함수는 리플로우(reflow) 현상을발생시킨다는 단점이 있다. 리플로우(reflow): 브라우저가 웹 페이지의 일부..

https://choi95.tistory.com/56 Infinite Scroll Question 1. 최초에는 20개의 목록을 불러온다. 2. 스크롤을 최하단으로 이동시 'loading' 상태 표시가 나타나며, 이후의 20개 목록을 더 가져온다. 3. 로딩 완료시 'loading'표시가 사라지며, 가져온 목록 choi95.tistory.com 이전 포스팅에서 onScroll 이벤트의 scrollingElement 프로퍼티를 통해 무한 스크롤 뷰를 구현하였다. 하지만 이와 같이 onScroll 이벤트 리스너로 이벤트를 지속적으로 감지할 경우 수행하고자 하는 연산 처리들이 스크롤 이벤트가 발생할 때마다 수행된다는 문제가 있다. Throttle과 Debounce 이러한 반복적인 이벤트 처리를 해결하기 위해서..

Question 1. 최초에는 20개의 목록을 불러온다. 2. 스크롤을 최하단으로 이동시 'loading' 상태 표시가 나타나며, 이후의 20개 목록을 더 가져온다. 3. 로딩 완료시 'loading'표시가 사라지며, 가져온 목록이 하단에 추가된다. (무한 반복) Solution const loadMore = async () => { const target = page ? fetchMoreTrigger : app; target.classList.add("loading"); await renderList(page++); target.classList.remove("loading"); }; const onScroll = async e => { const {scrollTop, scrollHeight, clie..

문제 현수는 1부터 100사이의 자연수가 적힌 N장의 카드를 가지고 있다 (같은 숫자의 카드가 여러장 있을 수 있다). 현수는 이 중 3장을 뽑아 각 카드에 적힌 수를 합한 값의 경우를 기록하려고 한다.기록한 값 중 K번째로 큰 수를 출력하고자 한다. 문제풀이 1. 세 개의 수를 뽑은 뒤 합산 한 모든 경우의 수를 구해야 하기 때문에 3중 for문을 이용한다. 이때 자기 자신은 뽑아야 되는 수 중 제외해야 하기 때문에 중첩 for문 내의 초기 인덱스값은 이전 for문 내의 초기 인덱스 값에 1을 가산해 준다. 2. 3번째로 큰 수를 구하기 위해서 합산 한 모든 결과값에 대한 배열에 대해서 반복문을 수행해 준다. 이때 기준이 될 가장 맨 앞의 값이 배 열 내에서 최댓값이 되어야 하기 때문에 내침차순으로 정..