Pay it forward

1. 문제발견: 느린 point-in-polygon 검사!위와 같이 각 지역 권역 폴리곤 내부에 포함되는 마커의 개수를 출력하는 기능이 있다.위 상태를 예롤 들자면 서울에 669개의 마커가 있다는 뜻이다. 지역에 마우스를 hover 할 때마다 계산이 되는데, 지역을 옮겨다닐때마다 스택이 blocking 되어서 반응성이 매우 떨어지고 있었다! 처음에는 마우스를 hover 할 때마다 변경되는 district 데이터가 변경됨에 따라 테이블 같은 dom이 많은 곳에 리랜더링이 발생하는지 의심했지만, 리랜더링은 꽤 잘 최적화되어 있었다.문제는 전국 마커 중에 서울에 포함되는 마커 개수 계산 함수가 스택을 꽉 막아버린 것이었다.2. Ray-Casting알고리즘 간단한 이해기존코드를 보면const count = ()..

몇 개월 전 만해도 업로드 progress를 구현하려면 fetch로는 방법이 없었다. 웹소켓을 사용하든 폴링을 하든 서버에서 응답을 받아서 보여주거나 xml을 사용해서 업로드용 api request를 만들어야 했다. 근데 얼마 전에 ky에 onUploadProgress가 추가되었다!onDownloadProgress는 있었지만 분명히 fetch기반 라이브러리의 한계로 onUploadProgress는 없었다.분명히 fetch의 한계라고 했는데 어떻게 구현한걸까?1. ky의 onDownloadProgress는 어떻게 구현했을까ky는 fetch api기반의 http 클라이언트 라이브러리이다. 이 라이브러리에는 이미 onDownloadProgress 옵션이 구현되어 있었다.얼마나 다운로드가 완료되었는지 진행률을 ..

1. clsx 분석clsx의 테스트 코드를 보면 다형성이 뛰어나다. 다양한 입력을 적절히 처리하고 있음을 알 수 있다.전부는 아니지만 몇 가지만 확인해 보자면// 가변 인자중에 truty한 값으로 클래스명을 만듦test("(compat) joins arrays of class names and ignore falsy values", () => { const out = clsx("a", 0, null, undefined, true, 1, "b"); assert.is(out, "a 1 b");});// 리터럴객체가 입력되면 값이 truty한 key로 클래스명을 만듦test("(compat) keeps object keys with truthy values", () => { const out = clsx({ ..

Demo page: http://mock-pilot-demo.s3-website.ap-northeast-2.amazonaws.com/github: https://github.com/kiwonbyun/mockpilot개발 동기 내가 좋아하는 몇몇 라이브러리 소스코드를 보다 보니 라이브러리라고 대단한 게 아니고 나도 할 수 있겠다는 자신감이 들었다. 그래서 뭔가 만들어봐야겠다는 생각이 있었다. 하지만 내가 가장 싫어하는 것은 행동에 이유가 없는 것이다. 정체를 알 수 없는 뭔가(?) 개발하기 위해 행동할 순 없다. 개발에 나서기 위해서는 이유(해결하고자 하는 불편함)가 있어야 했다. 뜬금없이 예전에 읽었던 뉴타입의 시대라는 책이 떠올랐다. 문제를 해결하는 사람이 아니라 문제를 문제라고 말하고 정의하는 사람이..

class TreeNode { constructor(key) { this.left = null; this.key = key; this.right = null; }}class BinarySearchTree { constructor() { this.root = null; } #insertNode(node, newNode) { if (node.key key) { return this.#searchNode(node.left, key); } else if (node.key key) { node.left = this.#removeNode(node.left, key); return node; } else if (node.key

추상자료형추상자료형에 대해 검색해 보면'기능의 구현 부분을 나타내지 않고 순수한 기능이 무엇인지 나열한 것' 혹은'기능의 구현 부분을 나타내지 않고 자료구조의 특성과 연산을 설명한 것'이라고 한다.이를 더 자세히 생각해 보자면 추상자료형은 특정 자료구조에 대한 프로그래머의 의도를 명확히 설명하고 오해를 없애기 위해구현 부분을 만드는 게 아니라 단지 어떤 객체가 어떤 행동을 하는지만 설명함으로써 프로그래머의 의도를 정확하게 반영한 자료구조를 정의하기 위한 방법이라고 생각한다. 스택의 추상자료형스택 객체: 0개 이상의 원소를 갖는 유한 순서 리스트연산1. CreateStack(maxSize) ::= 스택의 크기가 maxSize인 빈 스택을 생성하고 반환한다.2. StackIsFull(stack, maxSiz..