본문 바로가기

전체 글314

쏙쏙 들어오는 함수형 코딩 회고 사내 위클리 발표에서 팀원분이 이책을 바탕으로 내용을 공유해주셨는데, 인상 깊은 내용들이 있어서 직접 구매해 읽어봤습니다. 가장 접근성이 좋고 대중적인(?) 언어라 할 수 있는 JavaScript 를 이용해서 함수형 패러다임에 대한 기본적인 설계 방식들을 설명해주고 있습니다. 특히 여러 예제를 통해 액션, 계산, 데이터 를 구분하고, 일급 객체를 통해 추상화한 계산 함수들을 이용해서 중복되는 로직을 리팩토링하는 부분이 실전에 많은 도움이 될 것이라고 느꼈습니다. 책의 후반부에는 코드의 실행 타임라인 그래프 를 그려보며 비동기 프로그래밍에서 발생할 수 있는 동시성 문제들을 해결하기 위한 동시성 기본형 객체를 이미 언어 차원에서 내장된 클래스(ex. Promise) 없이 어떻게 구현하고 적용할 수 있는지 보.. 2023. 10. 1.
그림과 실습으로 배우는 도커 & 쿠버네티스 회고 도커 입문용으로 선택하고 읽어봤던 책입니다. 실습 예제와 친절한 설명들로 도커에 대한 개괄적인 내용을 설명해주고 있습니다. 다만 shell script 까지 하나씩 설명해주고 있어서, 만약 shell script 이해에 어려움이 없는 분이시라면 책 설명이 조금 장황하다고 느낄 수 있을만한 부분도 있는 것 같습니다. 도커 공식문서도 읽어봤는데 튜토리얼 문서에서 설명하는 내용과 책의 내용이 유사한 것이 많아서 개인적으로는 공식문서도 함께 읽어보는 것을 추천합니다. 2023. 10. 1.
Canvas 도형 회전의 원리와 구현 방법 📌 이미지 회전 기능 추가하기 사이드 프로젝트에서 캔버스에 그려진 이미지 회전 기능을 추가하려고 합니다. canvas 에서 객체에 제공해주는 rotate API 를 사용하면 간편하게 구현할 수 있는데요. 학습도 해볼 겸 이미지 바운더리 영역에 대한 회전 연산은 직접 구현해보기로 결정했습니다. 지금부터 하나씩 살펴보겠습니다. 📌 데카르트 평면좌표에서 회전하기 이미지 제어영역에 대한 간략한 설명 여기서 제어영역 은 이미지 테두리를 둘러싼 영역을 의미합니다. 포커싱되면 나타나며 이미지를 삭제, 회전, 리사이즈 할 수 있는 앵커를 포함하고 있습니다. 이 제어영역은 캔버스의 터치 이벤트를 받아 point 값을 바탕으로 선택된 앵커타입을 구분하고 있습니다. 모든 캔버스 객체들은 path 정보를 포함하며, isPoi.. 2023. 8. 29.
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.

티스토리툴바