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

순열(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..

Configuration type: 'line' data: {} options: { plugins: {} }} plugins: [] } Configuration object structure type Chart type은 차트의 기본 유형을 결정합니다. Name Description bar bar 차트는 데이터 값을 수직 막대로 표시하는 방법을 제공합니다. 추세 데이터와 여러 데이터 세트의 비교를 나란히 표시하는 데 사용되기도 합니다. bubble bubble 차트는 데이터의 3차원을 동시에 표시하는 데 사용됩니다. 버블의 위치는 처음 2차원과 해당 수평 및 수직 축에 의해 결정됩니다. 세 번째 차원은 개별 버블의 크기로 표시됩니다. doughnut 데이터의 호는 각 데이터의 비례 값을 표시합니다. li..

Jest는 JavaScript 테스트 프레임워크로 사용되며, 다양한 테스트 유형과 환경에 적용할 수 있는 많은 내장 기능을 제공합니다. 간단한 Jest 테스트 문법을 소개하겠습니다. test() 함수: 테스트 케이스를 정의하는 함수 javascript test('테스트 설명', () => { // 테스트 로직 작성 }); expect() 함수: 테스트 결과의 예상 값과 메소드 체이닝을 사용해 실제 결과를 비교합니다. javascript const result = 1 + 1; // 실제 코드에서 반환된 값 expect(result).toBe(2); // 예상 값은 2 Matchers: expect() 함수에 연결하여 결과 비교를 수행하는 메소드 .toBe(): 두 값이 동일한지 확인 .toEqual(): ..

비동기(asynchronous)와 동기(synchronous)는 프로그래밍에서 두 가지 다른 코드 실행 유형을 나타냅니다. 이 두 용어의 차이점은 작업의 처리 방식과 실행 순서에 있습니다. 동기(synchronous) 작업: 동기 작업은 코드가 순차적으로 실행됩니다. 한 작업이 완료되면 다음 작업이 실행됩니다. 앞선 작업이 완료되어야만 해당 결과를 이용하여 뒤따르는 작업을 실행할 수 있습니다. 동기 처리는 코드의 실행 순서를 쉽게 추적할 수 있지만, 긴 작업 시간이 예상되는 실행이 차단되어 애플리케이션 성능에 영향을 줄 수 있습니다. 예시: 파일 읽기와 쓰기, 순차적인 연 javascript // 동기 작업 예시 const result = doSomething(); const anotherResult =..

자바스크립트 실행컨텍스트 / this가 결정되는 것, closure, event loop, bubbling, capturing, delegation , prototype(chain) ,function.bind, 상속 구현방법 , 커링, 고차함수 propmise 객체, async await 예외처리 -- 비동기 자바스크립트 원시값, 가비지컬렉션 알고리즘 구글을 치고 엔터를 누르면 일어나는 일 (what happens when type google) -> 구글 서버에서 index.html 파일을 GET요청으로 가져옴 이를 위해선 IP주소가 필요한데 도메인 네임을 통해 IP 주소를 찾음 해당 IP를 통해서 index.html을 브라우저에 렌더링함 html css javascript가 브라우저에서 어떻게 렌더링..

배열(Array) 자바스크립트에서 배열이란 관련 있는 데이터를 하나의 변수에 할당해 관리하기 위해 사용하는 데이터 타입이다. 자바스크립트는 명시적 타입이 없기때문에, 하나의 배열은 여러 자료형을 가질 수 있는 특징이 있다. 배열을 사용하면 여러 데이터를 관련성 있게 관리할 수 있기 때문에 생산성 및 코드 가독성이 높아지고 이는 유지보수 비용의 감소로 이어진다. 이 외에도, 배열에서 기본으로 제공하는 함수를 사용할 수 있는 점, 데이터에 순차적으로 접근이 가능하다는 점 등을 비롯해 장점이 아주 많다. JS(JavaScript)에서 배열을 사용하는 방법은 아래와 같다. // array 배열 선언 // 자바스크립트 특성 상 배열의 명시적 타입이 없기 때문에, 여러 자료형을 포함할 수 있다. let array ..