👨💻📱✍️🎢314 Storybook useArgs 활용하기 📌 예시 살펴보기 스토리북을 사용하다보면 control prop을 이벤트 핸들러와 동기화시키고 싶은 경우가 있습니다. 예시를 위해 지도 컴포넌트가 있고, 마커 클릭 시 활성화되는 마커 ID 가 변경된다고 하겠습니다. 이 컴포넌트는 다음과 같은 스토리를 가질 것입니다. import { Map } from './map' const meta = { component: Map } export default meta const mock = [ { id: '1', poi: {/** some data */} }, { id: '2', poi: {/** some data */} }, { id: '3', poi: {/** some data */} }, // ... ] const options = mock.map((opti.. 2023. 8. 28. Web Component와 함께 컴포넌트 만들기 📌 Web Component 란? web component는 HTML/CSS/JS를 이용하여 재사용가능한 컴포넌트를 만들 수 있는 표준 방식입니다. 나온 지는 꽤 오래된 기술이지만, 직접 써보지 않는 이상 접해볼 기회가 많지 않아서 이번 기회에 사이드 프로젝트에 적용해 볼 겸 관련 스펙을 찾아보고 정리해 봤습니다. 📌 web component 톺아보기 웹 컴포넌트는 컴포넌트 재사용과 캡슐화를 위해서 Custom Element , Shadow DOM , HTML template 을 사용합니다. 1️⃣ custom element API 웹 표준은 custom element 라는 JavaScript API를 통해 직접 HTML 엘리먼트를 생성할 수 있습니다. 표준에서는 Autonomous custom 와 Cu.. 2023. 8. 25. Storybook loaders 로 story에 비동기 데이터 주입하기 📌 loaders 로 데이터 전달하기 Storybook 6.1 부터 실험적 기능으로 loaders 가 추가되었습니다. 안정화 기간을 거쳐 Storybook 7.0 에서는 stable 로 변경되었는데요. 기존에 args 를 통해 컴포넌트에 데이터를 전달해주는 대신, loaders 에 데이터를 반환하는 함수를 정의함으로서 스토리북 render context 에 이를 할당할 수 있는 방법이 추가되었습니다. 모든 스토리에 적용되는지 유무에 따라 global loader 와 story loader 두 가지 방식으로 나뉘는데, 이번 경우에는 개별 스토리에 주입이 필요해서 story loader 방식을 사용했습니다. 📌 예시로 살펴봅시다. 다음과 같은 웹 컴포넌트가 있다고 하겠습니다. 해당 컴포넌트는 작은 캔버스에 .. 2023. 6. 24. Storybook 에서 컴포넌트 단위 테스트하기 📌 들어가며 스토리북은 component driven development 패러다임을 위한 유용한 개발 도구로 단순히 UI 를 확인하는 용도를 넘어서서 테스트를 위한 다양한 솔루션도 함께 제공해주고 있습니다. 이번 포스트에서는 이를 활용한 테스트 적용 사례에 대해 살펴보고자합니다. 우선 이번 포스트를 위한 프로젝트의 패키지 버전 정보는 다음과 같습니다. 📦 project dependency - react/react-dom: 17.0.2 - next: 12.1.1 - storybook: 7.0.4 - typescript: 5.0.3 ✨ Next.js + jest & storybook 설정하기 📌 Next.js + jest 설정 유닛테스트, 스냅샷테스트 작성하기 전에 jest 먼저 설치합니다. Next.js.. 2023. 6. 24. 프로그래머의 뇌 회고 이번에 사내 도서 지원금으로 구매해서 읽은 책입니다. 인지과학 측면에서 우리가 어떻게 학습을 하고 있고, 보다 효율적으로 일하기 위한 방법들에 대한 내용입니다. 우리의 뇌는 STM, LTM, 작업 기억 공간 등등의 유기적인 작업을 통해 언어 및 정보를 기억하고 처리합니다. 특정 정보의 문맥 파악을 위해 이러한 공간들에 이미 저장되어있던 유사 정보들을 사용합니다. 복잡한 코드를 파악하는 과정에서 발생하는 인지부하, 그리고 이 문제를 해결하기 위한 보조 수단들 (청크, 의존 그래프, 상태표 등) 을 소개하고 있습니다. 또한 저자는 코드를 많이 작성해보는 것도 중요하지만, 다른 사람이 작성한 코드의 구조를 파악해보는 경험을 많이 하는 것도 중요하다고 말하고 있습니다. 가벼운 마음으로 읽은 책이었는데, 앞으로 .. 2023. 6. 22. LeetCode 108 - Convert Sorted Array to Binary Search Tree (Easy) 💡 문제 LeetCode - 108번 🎯 풀이 과정 구간 nums 에 대해서 이진탐색트리를 구성하기 위해 nums 의 중간값을 루트노드로하고 해당 노드를 제외한 나머지 두 구간에 대해 재귀적으로 트리를 구성하면 됩니다. 이 방식으로 문제를 해결할 수 있는 이유는 뭘까요? 구간 nums의 개수를 x 라고 하고 간단한 증명을 해보겠습니다. x 가 짝수(2n)이면 나머지 두 구간은 (n, n-1) 로 나뉘고, 홀수(2n-1)라면 (n-1, n-1) 로 나뉩니다. 때문에 두 트리간의 높이 차이가 1보다 큰 경우는 없게 됩니다. 👨💻 코드 /** * Definition for a binary tree node. * function TreeNode(val, left, right) { * this.val = (va.. 2023. 6. 6. 이전 1 2 3 4 5 6 ··· 53 다음
