kyunghoonk00k

1. 테스트 목적이 테스트는 React 컴포넌트 라이브러리에서 트리쉐이킹이 제대로 적용되는지 확인하고, 트리쉐이킹을 통한 번들 크기 최적화 효과를 측정하기 위해 수행되었습니다.2. 테스트 방법동일한 5개의 컴포넌트(Button, Input, Accordion, Tabs, Dialog)를 사용하는 두 개의 테스트 프로젝트를 생성하여 번들 크기를 비교했습니다.트리쉐이킹 미적용 프로젝트 (no-treeshaking)라이브러리 전체를 임포트하는 방식 사용웹팩 설정에서 트리쉐이킹 비활성화CommonJS 모듈 형식 사용트리쉐이킹 적용 프로젝트 (with-treeshaking)ESM 모듈 형식 사용웹팩 설정에서 트리쉐이킹 활성화필요한 컴포넌트만 선택적으로 임포트3. 테스트 결과3.1. 번들 크기 비교| 프로젝트 | ..

1. Accordion부터 Button까지, 다른 라이브러리에서 가져온 장점들오늘은 제가 개발한 React 컴포넌트 라이브러리에 관한 이야기를 해보려고 합니다. 다양한 컴포넌트 라이브러리들을 연구하면서 각각의 장점을 모으고 제 스타일로 재해석한 과정을 공유하고자 합니다.Accordion 컴포넌트의 재해석제 라이브러리의 Accordion 컴포넌트는 여러 유명 라이브러리의 장점을 조합했습니다.Radix UI에서 가져온 장점Radix UI의 Accordion은 접근성에 매우 강점이 있습니다. WAI-ARIA 디자인 패턴을 준수하고, 키보드 조작성이 매우 뛰어납니다.  다음 기능들을 제 라이브러리에 적용했습니다:헤더 및 패널 관계를 명확히 정의하는 접근성 구조aria-expanded, aria-controls,..

처음에는 단순히 기능이 작동하는 컴포넌트들을 만드는 데 초점을 맞췄지만, 점차 접근성, 성능, 사용자 경험 측면에서 많은 개선이 필요하다는 것을 깨달았다. 이번 글에서는 우리 라이브러리의 15개 핵심 컴포넌트를 어떻게 전면 개선했는지 종합적으로 공유하려고 한다.전체 컴포넌트 개선 방향먼저 전체 컴포넌트에 공통으로 적용한 개선 원칙은 다음과 같다:접근성 강화: 모든 컴포넌트에 WAI-ARIA 표준 적용성능 최적화: React.memo, useCallback, useMemo 활용일관된 API: 컴포넌트 간 일관된 Props 구조 설계유연한 확장성: 컴포지션 패턴 적용타입 안전성: TypeScript 타입 강화이런 원칙을 바탕으로 각 컴포넌트별 리팩토링을 진행했다.인기 라이브러리와의 벤치마킹우리는 Chakra..

컴포넌트 라이브러리를 개발하면서 번들 크기 문제로 한참 고민했다. 사용자가 우리 라이브러리에서 단 하나의 컴포넌트만 사용하더라도 전체 라이브러리가 번들에 포함된다면 성능에 좋지 않을 거라고 생각했다. 그래서 트리 쉐이킹 최적화 작업을 진행했고, 이 과정에서 배운 내용을 공유하려고 한다. 주요 UI 라이브러리 번들 크기 비교먼저 다른 인기 라이브러리들과 우리 라이브러리의 번들 크기를 비교해봤다.| 라이브러리 | Unpacked Size | Gzipped Size | 단일 컴포넌트 사용 시 || 우리 라이브러리 | 947 kB | ~185 kB | ~15-30 kB || Chakra UI | 2.5 MB | ~520 kB | ~30-45 kB || Mantine | 1.8 MB | ~410 kB | ~20-..

"만든 라이브러리를 어떻게 문서화하고 배포해야 할까?"라이브러리를 만들고 나니, 이걸 어떻게 사용자들에게 설명해야 할지 고민이 되었다. README 파일로 설명하기엔 한계가 있고, 제대로 된 문서 사이트가 필요하다는 생각이 들었다. 그리고 이왕 만드는 거 GitHub Pages로 배포해서 누구나 쉽게 접근할 수 있게 하고 싶었다. Docusaurus가 React 문서화에 좋다고 해서 이걸로 해보자고 마음먹었다.1. 문서화 환경 설정먼저 Docusaurus를 설치했다. npx create-docusaurus@latest react-components-docs classiccd react-components-docs기본 구조가 생성되었는데, 한국어로 문서를 작성하고 싶어서 설정 파일부터 수정했다.// doc..

"라이브러리 만드는 게 보통 어떻게 진행되는 걸까?"처음엔 막막했다라이브러리를 만든다는 게 뭔가 대단해 보였는데, 막상 시작하려니 뭐부터 해야 할지 감이 안 왔다. "뭘 만들어야 유용할까?" 고민하다가, React 프로젝트에서 자주 쓰일 법한 아코디언 컴포넌트를 만들어보자는 생각이 들었다. 타입스크립트를 쓰면 타입도 깔끔하게 보이니까 이걸로 해보자고 마음먹었다.1. 기본 세팅mkdir react-common-components-librarycd react-common-components-library그리고 npm init -y로 package.json을 바로 만들었다. 이름은 react-common-components-library로 정했는데, npm에서 검색해보니 중복이 없어서 괜찮았다. 처음 설정은{..

순열(Permutation)과 조합(Combination)의 차이순열과 조합의 가장 큰 차이점은 순서의 고려 여부입니다:순열(nPr): 순서가 중요한 경우 사용조합(nCr): 순서가 상관없는 경우 사용시간 복잡도 이해하기For문이 중첩될 때마다 시간 복잡도가 n배씩 증가합니다. 특별한 경우로 n/2씩 감소하는 경우 시간 복잡도는 O(log N)이 됩니다.JavaScript로 구현하는 순열function permutation(arr, r, output = [], visited = new Array(arr.length).fill(false)) { if (output.length === r) { console.log(output); return; } for (l..

코딩테스트 필수 알고리즘 총정리코딩테스트에서 자주 등장하는 주요 알고리즘들을 정리해보았습니다. 각 알고리즘의 특징, 적용 상황, 그리고 예시 코드를 통해 실전에서 어떤 알고리즘을 선택해야 할지 파악할 수 있습니다.목차DFS (깊이 우선 탐색)BFS (너비 우선 탐색)완전탐색백트래킹비트마스킹그리디이분탐색DP (동적계획법)펜윅트리1. DFS (깊이 우선 탐색)핵심 개념DFS는 그래프나 트리에서 한 경로를 끝까지 탐색한 후 다른 경로를 탐색하는 알고리즘입니다.주요 특징재귀 또는 스택을 이용하여 구현메모리: O(V) (V: 정점의 개수)시간복잡도: O(V + E) (E: 간선의 개수)적용 상황모든 경로를 방문해야 할 때연결된 컴포넌트 찾기사이클 탐지가 필요할 때예시 코드const dfs = (graph, sta..

이 예시에서는 붓꽃 데이터셋(Iris dataset)을 사용하여 분류 모델을 만들어 보겠습니다. 이 데이터셋은 세 가지 종류의 붓꽃(Iris Setosa, Iris Versicolor, Iris Virginica)의 꽃잎과 꽃받침의 너비와 길이를 측정한 데이터입니다. 이 모델은 꽃잎과 꽃받침의 크기를 바탕으로 붓꽃의 종류를 분류하는 문제를 해결합니다. 먼저, 필요한 라이브러리를 설치하고 불러옵니다. python import numpy as np import pandas as pd from sklearn import datasets from sklearn.model_selection import train_test_split from sklearn.neighbors import KNeighborsClass..

지도학습(Supervised Learning)은 머신러닝의 한 방법으로, 입력 데이터와 그에 대응하는 정답 데이터가 주어진 상태에서 학습을 진행하는 방식입니다. 지도학습의 주요 목표는 주어진 입력 데이터에 대해 정확한 결과를 예측할 수 있는 기계학습 모델을 생성하는 것입니다. 이러한 모델을 사용하면 새로운 데이터가 입력되었을 때 정확한 예측을 수행할 수 있습니다. 지도학습은 크게 두 가지 종류로 구분됩니다. 회귀(Regression): 연속적인 값(숫자)을 예측하는 문제, 예를 들어, 주택 가격이나 날씨와 같은 값을 예측하는 등의 문제를 해결합니다. 분류(Classification): 범주형 레이블(카테고리)을 예측하는 문제, 예를 들어, 스팸 이메일 분류, 과일 종류 분류 등의 문제를 해결합니다. 지도..