모노레포 공통 패키지를 TurboRepo Just-in-Time Packages 방식으로 바꾸는 과정을 소개했습니다. Typescript moduleResolution과 exports 설정을 함께 이해하며 빌드 없이 소스를 참조하는 흐름을 설명했습니다.
웹 서비스 규모가 커지며 Redux 전역 관리의 한계를 줄이기 위해 상태를 유형별로 분리한 사례를 소개했습니다. 추적이 불필요한 값은 파일 변수로 관리하고, SSG와 하드 네비게이션 제약도 함께 설명했습니다.
Next.js App Router에서 Full Route Cache를 활용해 상품 목록·상세 페이지의 서버 렌더링 비용을 줄인 사례입니다. 부하테스트에서 TPS를 크게 개선하고 CPU 사용률도 낮췄습니다.
공통 컴포넌트를 단순히 재사용용으로만 보지 않고 역할과 확장 규칙을 함께 설계하는 방법을 다뤘습니다. 또한 네이티브 요소, controlled/uncontrolled, forwardRef, 접근성까지 고려해 실용성을 높이는 방향을 제안했습니다.
카카오페이지 BFF 장애 원인을 추적한 결과, node.js http agent의 keepAlive 기본값이 문제였습니다. keepAlive를 true로 바꾸고 미들웨어 중복 처리도 줄여 TPS와 CPU 상태를 개선했습니다.
BackstopJS를 스토리북 기반 시각적 회귀 테스트로 운영하며 사이드이펙트 탐지와 문서화를 함께 얻은 사례를 소개했습니다. 또한 PR 코멘트와 develop 머지 후 approve 자동화로 테스트 운영 부담을 줄였습니다.
사파리와 iOS에서만 나타나는 스크롤·회전 관련 동작 차이를 사례별로 설명했습니다. 브라우저 감지보다 실제 동작 기준으로 보정하는 접근을 권장했습니다.
React Query의 내부 구조와 useQuery 실행 흐름을 살펴보았습니다. Query 상태 변화가 QueryObserver와 리스너를 거쳐 컴포넌트 리렌더링으로 이어지는 과정을 정리했습니다.
AWS Amplify로 서버리스 웹 애플리케이션을 만드는 방법을 소개했습니다.\n회원가입/로그인과 REST API를 React 예제로 빠르게 붙이는 흐름을 설명했습니다.
Next.js에서 컴포넌트 내부 CSS 임포트와 브라우저 캐시가 겹치며 CORS 에러가 발생했습니다. 전역 임포트 또는 `crossOrigin` 설정으로 문제를 해결했습니다.
정주행 모드 초기화와 CORS 에러를 함께 겪은 문제를 재현 조건과 코드 구조를 따라가며 분석했습니다.\n조건부 require를 전역 import로 단순화해 증상을 해결하고 원인 추적의 방향을 잡았습니다.
조건문이 많은 Composite action을 Map 기반 JavaScript action으로 리팩터링하는 과정을 정리했습니다. @actions/core, @actions/github와 캐싱을 활용해 GitHub Actions에서 안정적으로 실행하는 방법도 다뤘습니다.
View Transitions API로 웹 화면 전환을 외부 라이브러리 없이 쉽게 구현하는 방법을 소개했습니다. 상태 변경과 트랜지션 제어를 단순화하고, 세부 애니메이션 확장 예시까지 함께 설명했습니다.
프론트엔드에서 SOLID, 특히 SRP를 책무 기반 컴포넌트 설계로 해석한 글입니다. 카카오페이지 사례를 통해 기획·디자인·개발 흐름에 맞춘 구조와 OCP 적용 방식을 설명했습니다.
ChatGPT로 FE 개발을 어디까지 보조할 수 있는지 미니 프로젝트로 살펴보았습니다. 간단한 코드 생성에는 유용하지만 최신 설정과 정확한 구현은 검증이 필요했습니다.
웹뷰에서 핀치 줌을 직접 구현하는 방법을 설명했습니다. TouchEvent와 좌표 보정을 활용해 확대 중심을 유지하는 로직을 소개했습니다.
BackstopJS로 시각적 회귀 테스트를 구축한 경험을 정리했습니다. 스토리북과 Docker를 함께 사용해 UI 변경 검증과 운영 안정성을 높였습니다.
Jest Custom Matcher를 만들어 반복적인 class 검증 테스트를 줄이는 방법을 소개했습니다. setup 파일 등록과 TypeScript 타입 선언까지 함께 다뤘습니다.
E2E 테스트 도입의 장점과 운영상의 걸림돌을 함께 정리한 경험기였습니다. 기획서 기반 시나리오와 병렬 실행으로 관리성과 속도를 개선한 사례를 공유했습니다.
웹 앱을 홈 화면에 추가해 네이티브 앱처럼 실행하는 A2HS 적용 방법을 설명했습니다. 매니페스트와 서비스 워커, beforeinstallprompt 활용법과 iOS 제한도 함께 정리했습니다.
