합성 컴포넌트로 재사용성 극대화하기
Dialog의 prop 증가와 고정된 요소 배치 문제를 합성 컴포넌트로 개선했습니다. 서브 컴포넌트를 조합해 복잡한 Dialog 요구사항에 유연하게 대응했습니다.
#React#TypeScript
100
프론트엔드 기술 블로그 최신 글
필터 0
합성 컴포넌트로 재사용성 극대화하기
합성 컴포넌트로 재사용성 극대화하기
확장되는 Dialog 요구사항에서 prop 증가와 고정된 배치의 한계를 분석했습니다. React 합성 컴포넌트로 유연한 조합과 재사용성을 확보하는 방법을 소개합니다.
#React#Atomic Design
3700
자바스크립트의 새로운 기능들
ES2022의 모듈, 배열, 객체, 에러, 정규표현식, 클래스 관련 기능을 예제로 정리했습니다. Top-level await와 private 필드, findLast 계열의 활용 방식과 주의점을 소개합니다.
#JavaScript#ECMAScript
200
자바스크립트의 새로운 기능들
자바스크립트의 새로운 기능들
ES2022의 비동기 모듈 처리, 배열·객체 API, 에러 원인, 정규식, 클래스 필드 기능을 정리했습니다. 추가 제안된 findLast 계열과 브라우저 지원 시 유의점을 함께 소개합니다.
#JavaScript#ECMAScript
2600
폼 데이터를 우아하게 관리하는 방법
fp-ts의 Either와 조합 가능한 검증 규칙으로 React 폼 검증을 구성했습니다. 커스텀 훅으로 값·오류 상태와 제출 전 검증 코드를 간결하게 관리했습니다.
#React#TypeScript
2300
타다팀의 새로운 기술블로그를 소개합니다.
타다 기술 블로그를 콘텐츠 중심 구조로 개편하고 Jekyll에서 Gatsby로 이전했습니다. Markdown·RSS·댓글·배포 환경을 재구성해 운영성과 브랜드 일관성을 높였습니다.
#Gatsby#React
4100
깔끔한 폼 개발과 정시퇴근을 위하여 react-hook-form
React Hook의 사용 규칙과 react-hook-form 기반 폼 관리 방식을 소개했습니다. 검증, 제출, 동적 필드 관리를 간결하게 구성한 사례를 설명했습니다.
#React#react-hook-form
1300
웹 성능 최적화 - 렌더링 최적화
웹 성능 최적화를 렌더링과 로딩으로 나누고, 이번 글에서는 애니메이션 최적화에 초점을 맞추었습니다. Reflow와 Repaint 개념을 정리한 뒤 transform 활용과 Performance 탭 측정 결과를 비교했습니다.
#웹 성능#렌더링
300
웹 성능 최적화 - 렌더링 최적화
웹 성능 최적화 - 렌더링 최적화
브라우저 렌더링 경로와 Reflow·Repaint가 애니메이션 성능에 미치는 영향을 설명했습니다. 사운드 미터 비교를 통해 transform 기반 구현의 Layout 비용 감소를 확인했습니다.
#성능#렌더링
3700
FE Lazy Loading 적용기
상품 이미지가 많은 페이지의 과도한 초기 로딩 문제를 Intersection Observer 기반 Lazy Loading으로 개선했습니다. 최초 이미지 리소스를 평균 9.6MB로 줄이고 첫 페이지 로딩 시간을 평균 5.5초로 단축했습니다.
#React#JavaScript
2800
react-hook-form을 선택한 이유와 적용 과정
react-hook-form을 선택한 이유와 적용 과정
분산된 폼 상태와 렌더링 문제를 react-hook-form으로 단일화한 리팩토링 경험을 공유했습니다. Controller·useFieldArray·class-validator 연계 시 유의점을 설명합니다.
#React#react-hook-form
000
React Form 컴포넌트 개발기
대규모 React 폼에서 렌더링 성능과 상태 분산 문제를 해결하려는 과정을 정리했습니다. 여러 상태 관리 방식을 비교하고 react-hook-form 도입 방향을 결정했습니다.
#React#react-hook-form
000
바삭한 신입들의 동시성 이야기 - Kotlin 편
Android UI 응답성을 위해 Kotlin Coroutine의 Main-Safe 비동기 처리 원리를 설명했습니다. CPS·상태 머신 구조와 Thread 대비 메모리 효율을 함께 비교했습니다.
#Kotlin#Android
4900
Jotai는 조-타이 라고 읽습니다.
Jotai를 Redux·Context API·Recoil과 비교하며 도입 배경과 선택 기준을 정리했습니다. atom, 파생 atom, Provider, 주요 유틸과 참조 안정성 주의점을 소개합니다.
#React#Jotai
2300