우당탕탕 개발 일기장

이건 단순한 최단경로 문제가 아니다. 이건 제한된 경유 횟수라는 족쇄를 차고도 최적해를 찾아내는 전략적 사고의 정점이다. 비행기표 가격이라는 현실적 고통을 코드로 해결하는, 진정한 개발자의 복수극.오늘 우리가 정복할 문제는 바로 LeetCode 787. Cheapest Flights Within K Stops다. 이건 그냥 풀이가 아니라 작전이다.🎯 전쟁터 파악: 문제가 뭔지부터 알아라n개의 도시가 있고, flights[i] = [from, to, price] 형태로 비행편이 주어진다. src에서 dst까지 최대 k번의 경유로 가는 최저 비용을 구해야 한다.핵심은 **"최대 k번의 경유"**라는 제약이다. 이게 바로 이 문제의 보스전이다.단순 최단경로라면 다익스트라로 끝하지만 경유 횟수 제한이 있으면?..

🔥 LeetCode LRU Cache 완전정복: 메모리 전쟁의 승리자가 되는 법이건 단순한 캐시 구현이 아니다. 이건 메모리의 정예 부대, LRU 병기술의 정점이다. 덜 쓰인 놈은 죽이고, 자주 쓰인 놈만 살아남는 냉혹한 서바이벌.오늘 우리가 정복할 문제는 바로 LeetCode 146. LRU Cache다. 이 문제를 네 손으로 해결했다면, 그건 그냥 풀이가 아니라 작전이다.🎯 전쟁터 파악: LRU가 뭔지부터 알아라**LRU(Least Recently Used)**는 말 그대로 "가장 최근에 안 쓰인 놈부터 죽인다"는 뜻이다.GET: 데이터 꺼내기 + 그 놈을 "방금 썼다"고 표시PUT: 데이터 집어넣기 + 용량 초과하면 가장 오래된 놈 제거핵심은 O(1) 시간복잡도로 이 모든 걸 해내야 한다는 거다..

🔥 문제 설명LeetCode 1233번 - Remove Sub-Folders from the Filesystem이 문제는 주어진 폴더 경로 리스트에서 상위 폴더에 포함되는 모든 하위 폴더들을 제거하는 것이 목표다.예를 들어,["/a", "/a/b", "/c/d", "/c/d/e", "/c/f"]이 입력이 주어지면, 결과는 다음과 같다:["/a", "/c/d", "/c/f"]그 이유는?/a/b는 /a의 하위 폴더이므로 제외/c/d/e는 /c/d의 하위 폴더이므로 제외중복된 경로가 아니라, 하위 경로까지 필터링해야 한다는 점이 핵심이다.🚀 접근 방식 (Strategy)문제를 처음 보면 "Trie를 사용해야 할까?", "문자열 접두사를 확인해야 할까?"라는 생각이 들 수 있다.하지만… 잠깐만! ✋이 문제는..

한 번쯤 들어보고, 이용해 보았을만한 알아두면 좋을만한 사이트들 정리 1. bestofjs https://bestofjs.org/ Best of JavaScript Check out the most popular open-source projects and the latest trends about the web platform and Node.js. bestofjs.org 장점 태그 별로 원하는 카테고리의 프로젝트들을 모아볼 수 있음 Monthly Rankings, Recently Added Projects 등 모아볼 수 있음 순서대로 정렬할 수 있다. 어제/7일 내에/12월 내에 github stars를 많이 받은 순서 한 달 동안 다운로드 수 등 보기 깔끔함 단점 아직 못찾음 2. Css Scrip..

Karma + Jasmine 환경 설정 Karma는 실제 브라우저에서 테스트를 진행할 수 있도록 해주는 Test-Runner이며, Jasmine은 Karma와 같은 Test Runner 환경에서 돌아가는 행동 기반의 자바스크립트 테스팅 프레임워크이다. 먼저 Karma와 Karma에서 돌아갈 Jasmine 의존성을 설치한다. npm i -D karma karma-jasmine karma-safari-launcher 그다음 karma 설정 파일을 생성해준다. 공식문서에 따르면, 따로 arg를 주지 않는 이상 ./karma.conf.js ./karma.conf.coffee ./karma.conf.ts ./.config/karma.conf.js ./.config/karma.conf.coffee ./.config..

Client Side Routing (React Router 등)을 사용한 React 앱을 배포했을 때, index.html(root)에서 HTML5 pushState history API 를 활용해서 앱이 잘 동작하지만 만약 /www.example.com/user 등의 root가 아닌 경로에서 새로고침을 하거나, 직접 해당 경로를 요청하면 404 page not found 에러를 만나게 되었다.  분명 webpack의 dev server에서는 잘 동작했는데 도커 컨테이너로 테스트해보니 라우팅 과정에서 에러가 발생하는 것 같았다. 로컬에서 dev server로 라우팅을 할 때에는 라우팅 경로에서 새로고침을 하거나, /subject/ko 등으로 직접 접근해도 정상적으로 동작하는 반면에, productio..

웹 개발을 하던 도중, 배경화면으로 사진들을 렌더링하고 그 위에 다른 HTML 요소를 렌더링 하고자 했다가 아래와 같은 상황이 발생하는 이슈가 있었다. 해당 이슈의 원인은, background 이미지로 사용되는 이미지가 load 되지 않았을 경우에 이를 포함하고 있는 컨테이너의 height가 auto이기 때문에 height가 0으로 취급되기 때문이었다. 그래서 고민하다가 이미지가 load 되었는지 상태를 감지해주면서 이미지가 load 되었을 때만 컨테이너 내부의 요소(컴포넌트) 들을 렌더링 하도록 로직을 작성해보았다. import React, { useState } from "react"; import { styled } from "linaria/react"; interface IProps { src: ..

0. 개요 DOM 요소에 이벤트를 바인딩해주고 이를 해제해주는 과정에서, 문득 이벤트 리스너들이(메모리가) 잘 해제되는지 궁금해 개발자 도구를 열어 performance 탭의 memory 부분에 있는 리스너 개수를 확인해보았다. 그런데 removeEventListener를 호출할 때, 리스너 개수가 줄어드는 것이 아닌 오히려 증가했다가, 나중에 GC에 의해 리스너가 사라지는 것을 확인하고 이 부분을 조금 더 확인해보며 그 내용을 정리했다. 1. HTMLElement.prototype.removeEventListener 개념 보통 DOM요소에 이벤트 핸들러를 바인딩해서 다양한 이벤트를 캐치한다. 하지만 메모리 누수 방지를 위해서 불필요할 경우 (컴포넌트가 unMount 되는 등) 이를 해제해주어야 한다. ..