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 옵션이 구현되어 있었다.얼마나 다운로드가 완료되었는지 진행률을 ..

https://www.slash.page/ko/libraries/react/use-overlay/src/useOverlay.i18n useOverlay | Slash librariesuseOverlay는 Overlay를 선언적으로 다루기 위한 유틸리티입니다.www.slash.page이것은 토스에서 만든 오버레이를 선언적으로 다룰 수 있는 훅이다.useOverlay훅은 ui를 제공하지 않고 호출시점에 오버레이가 보이는(isOpen) 상태를 주입해 주고, 보이지 않게 해주는 함수를 제공하는 훅이다. 즉, useOverlay를 사용하더라도 ui는 직접 만들어야 한다. 그 ui를 모달로 할지, 바텀시트로 할지는 개발자가 결정하면 된다. 이 글은 useOverlay를 사용하는 방법을 소개하는 글이나 코드를 읽어보..

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개발 동기 내가 좋아하는 몇몇 라이브러리 소스코드를 보다 보니 라이브러리라고 대단한 게 아니고 나도 할 수 있겠다는 자신감이 들었다. 그래서 뭔가 만들어봐야겠다는 생각이 있었다. 하지만 내가 가장 싫어하는 것은 행동에 이유가 없는 것이다. 정체를 알 수 없는 뭔가(?) 개발하기 위해 행동할 순 없다. 개발에 나서기 위해서는 이유(해결하고자 하는 불편함)가 있어야 했다. 뜬금없이 예전에 읽었던 뉴타입의 시대라는 책이 떠올랐다. 문제를 해결하는 사람이 아니라 문제를 문제라고 말하고 정의하는 사람이..

빠르게 성장하는 스타트업에게 빠르게 만들고, 배포하고, 유저의 반응을 체크하고, 빠르게 개선하는 게 중요하다는 것은 당연하다.그 순환 사이에 시행착오를 겪으면서 이런 비즈니스를 하는 사람들에게는 이런 기능이 중요하구나, 아 이런 부분은 옵션으로 제공하면 다양한 사용자가 만족할 수 있겠구나, 이런 부분은 추상화가 되어 모듈화 할 수 있겠구나, 같은 깨달음이 생긴다.스타트업의 개발자로서 성장하는 회사를 만들기 위해 중요한 것은 바로 이 시행착오를 통해 얻은 깨달음을 내 머리에만 넣어두는게 아니라, 코드에 적절히 녹여놔야 한다는 것이다.입사 후 첫 프로젝트를 하며 물류업계, 특히 의약품 물류업계에 대한 지식이 생겼다. 그리고 TMS, OMS, WMS를 만들면서 이것들을 어느 부분에서 모듈화 해야 하는지 시행착..