Pay it forward

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..

pdf 데이터를 서버에서 base64로 인코딩 된 문자열을 받아서 pdf타입의 blob객체를 만들고 이것을 새창에서 띄운다.새창에서 한번 확인한 후에 저장한다.blob url을 만들어서 새창에 띄워주면 크롬 pdf 뷰어가 나오면서 빨간색 동그라미로 표시한 다운로드 버튼을 누르면 pdf가 저장된다.근데 이 pdf가 엄청 많아질 수 있다. 그러면 자연스럽게 서버에서 받아오는 base64로 인코딩 된 데이터가 많아진다.이것을 URL.createObjectURL(blob)메서드로 계속 만들기만 한다면 메모리에 데이터가 계속 쌓이기만 할 테니 필요 없어지면 제거하자.const openToArrayBuffer = ({ data, extension = 'pdf', }: IOpenToArrayBufferP..

처음으로 프론트엔드 테스트 코드를 작성했다.작업을 하고 리팩토링을 많이 하다 보니 자연스럽게 테스트 코드의 필요성이 느껴졌다.기존 코드의 기능을 분석해서 핵심기능을 완전히 똑같이 구현했다는 확신이 필요했다.오늘은 훅에 의존적인 컴포넌트의 통합 테스트코드를 작성하면서 어려웠던 점과 생각보다 쉽게 해결한 경험을 작성한다.export const Index = ({ options, searchKey, name, width }: ILabeledSelectProps) => { const { addURLparams, searchParams } = useURLparams(); const urlValue = searchParams.get(searchKey); const onChange = (value: string..