반응형

react 2

[리액트 컴포넌트 라이브러리 고도화] 전체 컴포넌트 리팩토링 대장정

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

생각/javascript 2025.03.17

[주특기 과제]

🔐 자바스크립트에서 유사배열과 배열의 차이는 무엇일까요? 유사배열의 각 요소를 수정하고 싶다면 어떤 과정을 거쳐야할까요? 배열 : 하나의 변수에 할당해 관리하기 위해 사용하는 데이터 타입이다。 유사 배열 : 배열과 유사한 객체를 말한다. 유사 배열은 함수에서 처리 결과로 배열을 반환하고 싶을 때 또는, Array에서 기본으로 내포되어있는 기능을 제공하고 싶지 않거나 Array에 내포되어있지 않은 기능을 제공하고 싶을 때 사용한다. 1. 숫자 형태의 indexing이 가능할 것 2. length 속성을 포함할 것 수정 과정: 1-1. 간접호출 활용 1-2. Rest파라미터 활용 1-3. Array.from 메서드 활용 등을 활용하여 배열로 변환시켜 준 뒤 요소를 수정한다. 🔐 부모 컴포넌트 A와 자식 컴포..

생각/react 2022.09.30
반응형