카카오 스토리FE개발팀이 TurboRepo 모노레포에 Just-in-Time Packages를 적용해 컴파일 없이 소스를 직접 참조하며 개발 경험을 개선했다.
서버 환경의 데이터 유출 위험을 AsyncLocalStorage로 해결하고 클라이언트와 동일한 로직을 구현했다.
상품 목록 및 상세 페이지에 ISR 기반 Full Route Cache를 적용해 평균 TPS를 34에서 220으로 높였다.
만능 지양, 네이티브 요소 숨기기, ARIA 적용 등 공통 컴포넌트 완성도 높이는 3대 원칙 제시
카카오페이지 웹 팀은 Node.js HTTP Agent의 keepAlive 기본값(false)으로 인해 발생한 BFF 서버의 CPU 과부하 및 TPS 저하 문제를 true 설정으로 해결했습니다.
스토리북 7버전 파일시스템 지원 중단에 따라 Docker 내 HTTP 서버 방식으로 테스트 구조를 변경했다.
스크롤 위치, Z축 렌더링, 터치 이벤트 등 4가지 주요 버그의 원인과 코드 기반 해결법을 제시했다.
QueryClient, QueryCache, QueryObserver의 상호작용과 useSyncExternalStore를 활용한 서버 상태 변경 시 컴포넌트 리렌더링 메커니즘을 분석한다.
Amplify CLI와 UI 컴포넌트를 활용해 인증, DB, API를 코드 몇 줄로 구현하는 방법 소개
크롬과 사파리의 캐시 정책으로 인해 GET Fetch 요청 시 CORS 헤더 누락으로 에러가 발생하며, 전역 임포트나 crossorigin 속성 추가로 해결할 수 있다.
Next.js Dynamic Import가 Swiper 컴포넌트의 displayName을 제거해 발생하는 렌더링 오류를 직접 설정 또는 transpilePackages 옵션으로 해결할 수 있다.
다중 환경 조건문을 Map 구조로 전환해 가독성을 높이고, node_modules 캐싱으로 실행 성능을 개선했다.
SOLID 원칙을 리액트 컴포넌트 설계와 BFF 아키텍처에 적용해 유지보수성과 확장성을 높인 실무 경험을 공유했다.
Next.js와 Tailwind CSS 기반 웹툰 서비스 프로토타입을 ChatGPT(gpt-3.5)로 개발한 결과, 약 5시간이 소요됐으나 최신 라이브러리 호환성 문제와 환각 현상으로 인해 설계와 검증은 여전히 개발자의 역할로 남았다.
라이브러리 없이 TouchEvent API를 활용해 손가락 간 거리 변화로 확대 축소 로직을 작성한다.
무료 오픈소스 BackstopJS를 활용해 스토리북과 연동한 시각적 회귀 테스트를 구축하고 Docker와 GitHub Actions로 자동화한 실무 경험을 소개한다.
Jest Custom Matchers를 설정해 반복적인 검증 로직을 줄이는 방법과 TypeScript 타입 정의 과정을 소개한다.
Sorry-Cypress 병렬 테스트 적용으로 E2E 실행 시간을 2분 이상에서 30초대로 단축했다.
Scroll-Snap API의 원리를 이해하고, scroll-snap-type과 scroll-snap-align 속성을 활용해 자바스크립트 없이 이미지 캐러셀을 구현하는 방법을 소개한다.
적정기술은 개발자의 학습 욕구와 회사의 안정적 운영 목표 사이에서 균형을 찾는 리더의 핵심 역할이다.
Standalone 앱과 experimentalStudio 옵션을 활용해 코드 작성 없이 Cypress Studio로 E2E 테스트를 자동화하고 Git으로 관리하는 방법 소개
unified 라이브러리의 AST 변환 원리를 활용해 Gatsby 마크다운에 커스텀 태그를 리액트 컴포넌트로 치환하는 기법을 소개한다.
AI Briefing