이제부터 이 컴포넌트는 제 겁니다
이제부터 이 컴포넌트는 제 겁니다
리액트에서 렌더링과 상태 제어를 외부로 넘기는 IoC 패턴들을 정리했습니다. Render Props, 합성 컴포넌트, Controlled Props의 특징과 장단점을 비교했습니다.
#React#IoC
1800
국내 IT 기업 기술 블로그 최신 글
새로운 기술 블로그가 추가되었어요
필터 1
React의 Error Boundary를 이용하여 효과적으로 에러 처리하기
React의 Error Boundary를 이용하여 효과적으로 에러 처리하기
React Error Boundary로 렌더링 에러와 API 에러를 선언적으로 처리하는 구조를 소개했습니다. 제한된 범위의 ApiErrorBoundary와 전역 GlobalErrorBoundary로 재시도 UX까지 구성했습니다.
#React#error boundary
4800
KURLY 현직자가 직접 뽑은 직무별 핵심 키워드를 소개합니다!
컬리 LIVE 직무 토크쇼에서 현직자들이 뽑은 직무별 핵심 키워드를 정리했습니다. 프로덕트, 디자인, 개발, 데이터, 컬리페이 직무의 중요 역량을 간단히 소개했습니다.
#React#TypeScript
4500
React 컴포넌트와 추상화
React 컴포넌트의 책임을 범용 UI와 도메인 로직으로 나누는 추상화 방법을 설명했습니다. 합성·커스텀 훅·상태 설계로 결합도를 낮추는 트레이드오프를 다뤘습니다.
#React#컴포넌트
000
React 컴포넌트와 추상화
React 컴포넌트와 추상화
React 컴포넌트를 책임과 도메인 의존성 기준으로 어떻게 추상화할지 설명한 글입니다. 범용 컴포넌트 분리와 합성, 훅 활용을 통해 유연한 구조를 제안했습니다.
#React#컴포넌트
5000
GitHub Actions workflow를 수동으로 trigger하기(feat. inquirer.js)
GitHub Actions workflow를 수동으로 trigger하기(feat. inquirer.js)
GitHub Actions의 `workflow_dispatch`와 GitHub CLI를 이용해 수동 배포를 실행하는 방법을 소개했습니다. 또한 inquirer.js로 브랜치, region, env를 입력받아 배포를 자동화하는 구성을 설명했습니다.
#GitHub Actions#GitHub CLI
4000
자바스크립트로 만든 유한 상태 기계 XState
XState로 FSM의 상태, 이벤트, 전이와 컨텍스트를 분리하는 방법을 장바구니 예제로 설명했습니다. React 훅, 가드, 액션, 비동기 서비스로 복잡한 UI 흐름을 선언적으로 관리합니다.
#JavaScript#XState
000
쿠팡 파트너스
개발자를 위한 서적을 확인해 보세요
이 게시물은 쿠팡 파트너스 활동의 일환으로, 이에 따른 일정액의 수수료를 제공받습니다.
#개발서적#프로그래밍
자바스크립트로 만든 유한 상태 기계 XState
자바스크립트로 만든 유한 상태 기계 XState
XState로 유한 상태 기계의 개념과 사용법을 장바구니 예제로 설명했습니다. React에서 상태, 컨텍스트, 액션, 가드를 어떻게 연결하는지 정리했습니다.
#XState#FSM
4200
Next.js 프로젝트 Migration과 Refactoring 과정을 공유합니다.
Next.js v9 기반 레거시 프로젝트를 v12로 마이그레이션하고, SWC와 import 최적화로 성능을 개선했습니다. 또한 Moment.js를 Day.js로 교체하며 번들 크기를 줄이고 리팩터링 안정성을 높였습니다.
#Next.js#React
2500
React 이벤트와 브라우저 이벤트
Swiper와 React 이벤트 위임 방식의 차이로 버튼 클릭 전파가 막히지 않는 원인을 분석했습니다.\n상위 React 래퍼에 클릭 핸들러를 두어 합성 이벤트 흐름으로 통일했습니다.
#React#Swiper
000
React 이벤트와 브라우저 이벤트
React 이벤트와 브라우저 이벤트
React 합성 이벤트와 브라우저 DOM 이벤트의 전파 차이로 Swiper 내부 버튼 클릭이 의도와 다르게 동작하는 사례를 다뤘습니다. 해결책으로 이벤트 부착 위치를 조정해 상위 래퍼에 클릭을 맡기는 방식을 제안했습니다.
#React#event
1400
새로운 컬리몰 NX를 소개합니다.
고도몰 기반 컬리몰을 Next.js 기반 NX로 전환하며 상품·주문·회원 서비스를 재구축했습니다. SSR, Lint, 빌드 캐시, PR 성능 테스트로 성능과 코드 품질을 개선했습니다.
#Next.js#React
000
새로운 컬리몰 NX를 소개합니다.
컬리몰 웹프론트팀의 NX 전환 과정을 소개한 글입니다. 레거시를 걷어내며 성능 개선, URL 통합, 코드 품질 강화를 이뤘습니다.
#Next.js#React
4100
바나나 먹는 미니언 게임을 만들어 보자(feat. 캔버스)
React와 TypeScript로 캔버스 기반 바나나 먹기 게임을 구현했습니다. 이미지 로딩, 키보드 이동, 낙하·충돌 판정, 애니메이션 정리 과정을 설명합니다.
#React#TypeScript
000