이문제를 처음 접했을때는 가로는 가장 넓은 거를 기준으로 잡고높이는 가장 높은거로 하면되겠다 이렇게 막연한 생각만 들었었다. 벽으로 문제를 푼다고 상상해보자height = [1, 8, 6, 2, 5, 4, 8, 3, 7]벽이 여러개 세워져 있는 모양으로 각 숫자는 벽의 높이고, 벽 사이에 물을 채울 수 있다. 첫번째 개념 : 어떤 두변 사이에 물을 담을 수 있다.예를 들어 왼쪽 벽 높이가 8, 오른쪽 벽이 6이면 아무리 왼쪽이 높아도 낮은 벽 높이만큼 물을 담을수있다.즉, 물의 높이는 두벽중 작은 높이 두번째 개념 : 너비도 중요하다벽 사이의 거리가 멀수록, 물을 더 많이 담을 수 있다.즉, 물의 양은 (작은 높이) x (두 벽 사이의 거리) 전략: 최대 물을 담기위해 두 끝에서 시작한다처음앤 맨 왼쪽과..

그럼 "버튼을 눌러 다크모드를 토글하는 컴포넌트" 같이 한번 간단하게 구현해볼게요.(React + TailwindCSS 기준으로 짜드릴게요.) "라이트모드, 다크모드 같은 토글뿐만 아니라 시스템 설정을 따라가게 할 수도 있는 거 알고 계신가요?" 전체 흐름은localStorage에 사용자가 선택한 테마가 있는지 확인 → 있으면 그걸 적용없으면 시스템 설정을 따라감 (matchMedia)사용자가 토글하면 localStorage 업데이트 "CSS 선택자를 사용해서 다크 테마를 적용합니다." "중요한 점은, 태그에 있는 dark 클래스를 동적으로 변경한다는 것입니다. (하위 소스코드 참고)" 그럼 "버튼을 눌러 다크모드를 토글하는 컴포넌트" 같이 한번 간단하게 구현해볼게요.(NextJs+ Tailwi..

문제분석주어진 함수의 결과를 캐시에 저장하고, 같은 입력에 대해서는 다시 계산하지 않고 저장된 결과를 반환하도록 하는 것이다.알고리즘 설계캐시 저장소 만들기함수 호출횟수 추적함수의 입력을 문자열로 변환fn이 호출될대마다 캐시에서 결과를 찾아 있으면 반환없으면 실제 함수를 호출하고 결과를 캐시에 저장한다. 구현/** * @param {Function} fn * @return {Function} */function memoize(fn) { const cache = new Map(); return function(...args) { const key = args.toString(); if (cache.has(key)) { return cache.get(k..

브라우저 렌더링 이해하면 성능 최적화의 길이 보인다. 브라우저 렌더링 과정을 알면 웹 페이지 성능을 최적화하고, 디버깅을 쉽게 하며, 웹 애플리케이션의 사용자 경험을 개선하는 데 중요한 정보를 얻을 수 있습니다. 우선 간략하게 5가지로 나누어본후 상세로 설명하겠습니다.1. 성능 최적화렌더링 과정 최적화: 페이지가 어떻게 렌더링되는지 이해하면 페이지 로딩 속도를 빠르게 하거나, 불필요한 리소스를 줄이는 방법을 알 수 있습니다. 예를 들어, 이미지나 스크립트가 렌더링 성능에 미치는 영향을 파악하고, 이를 최적화할 수 있습니다.렌더링 차단 요소 분석: 자바스크립트나 CSS가 페이지 렌더링을 차단하는 방식에 대해 알면, 페이지 로딩을 더 빠르게 할 수 있는 방법(예: 비동기 로딩, CSS 최적화 등)을 찾을 수..

function createAdvancedFilter(minValue, maxValue) { return function(arr) { return arr.filter(function(num) { return num > minValue && num  클로저를 한마디로 정의하면  외부 함수 내에서 정의된 내부 함수가 외부 함수의 변수에 접근할수있다. 대표사진에서 보이는 선물 포장의사진은 일종의 감싸는 것을 표현하는거같습니다. (스코프를 감싼) 그렇다면 클로저를 이용하여 구현을하면 좋은 이유가 뭘까요? 클로저를 이용하여 구현하면 좋은 이유는 "상태를 감싸고 안전하게 보호하는" 기능을 제공하기 때문입니다.선물 포장의 이미지처럼, 클로저는 데이터를 감싸서 외부로부터 보호하고, 필요한 부분만 노출시..

자바스크립트에서 스코프를 이해하는 것은 매우 중요합니다. 이유를 7가지로 정리하여 설명하겠습니다.1. 변수와 함수의 접근 범위 이해자바스크립트에서 변수와 함수는 특정 스코프 내에서만 접근할 수 있습니다. 스코프를 이해하지 않으면 변수나 함수가 어디서 정의되었고, 어디서 사용할 수 있는지, 혹은 오류가 발생할 가능성이 있는지 알 수 없습니다.예를 들어, 전역 변수와 지역 변수의 차이를 모르고 코드 작성 시 예기치 않은 결과가 발생할 수 있습니다.2. 변수 충돌 방지동일한 이름의 변수를 여러 번 사용하거나, 다른 스코프 내에서 동일한 이름의 변수가 있을 경우 충돌이 발생할 수 있습니다. 자바스크립트에서는 이를 변수 호이스팅(hoisting)과 스코프 체인(scope chain) 개념을 통해 다루지만, 스코프..