디자인 시스템의 공통 컴포넌트에 유닛 테스트를 추가하며 ‘효용성 있는 테스트 코드’란 무엇인지 고민했습니다. 단순 렌더링 확인이 아닌 사용자 상호작용 중심 테스트를 목표로, 접근성 기반 쿼리(getByLabelText 등)를 활용해 리팩토링에 강하고 사용자 경험을 보장하는 테스트를 설계하는 과정을 정리했습니다.

디자인 시스템 컴포넌트 유닛 테스트 코드 작성하기

레거시와 신규 코드가 혼재된 다양한 레포지토리를 운영하며, 협업 효율성과 코드 품질을 높이기 위해 AI를 어떻게 체계적으로 도입할 수 있을까 고민하던 우리 팀. 이 글에서는 Cursor의 .mdc 룰 파일을 npm 패키지로 관리하고, postinstall 스크립트로 자동 적용하는 방식으로 일관된 개발 문화를 구축한 과정을 공유합니다. 온보딩 문서로도 활용 가능한 AI 프롬프트 문서를 버전 관리하며 팀 차원의 생산성과 품질을 동시에 끌어올린 경험을 담았습니다.

협업을 위한 AI rule 정의하기: cursor rule를 npm package로 관리하는 방법

반복되는 슬랙 대화 요약과 Jira 티켓 발급 업무를 자동화하기 위해, n8n을 기반으로 Slack, OpenAI, Jira API를 연결한 자동화 워크플로우를 구축했습니다. 단순한 자동화가 아닌, 실제 협업 흐름 속에서 실용성과 확장성을 모두 고려했습니다. 봇 멘션을 트리거로 스레드를 요약하고, Jira 티켓을 자동 발급한 뒤 다시 슬랙에 공유하는 전 과정을 정리했으며, 구현 중 겪은 문제와 해결 과정도 함께 담아 실무에 바로 적용할 수 있는 인사이트를 담았습니다.

Slack, GPT, Jira로 이슈 티켓 발급 자동화하기: 사내 협업을 위한 n8n 자동화 워크플로우 구축기

상세 페이지 진입 시 모든 이미지를 한꺼번에 로드해 UX가 저하되고 네트워크 리소스가 낭비되는 문제에서 출발한 고민했습니다. 이 글에서는 IntersectionObserver를 활용해 Lazy Loading을 구현하고, 서버에서 내려오는 HTML을 파싱해 img src를 data-src로 치환하는 방식으로 불필요한 로드를 줄이는 과정을 다룹니다. Node.js·React 환경에서의 적용법과 함께 로드 시간 단축, 이미지 요청·전송량 감소 등 성능 지표 개선 결과를 공유합니다.

LazyLoading으로 불필요한 이미지 로딩 줄이고 성능 개선하기

Next.js 미들웨어에서 권한에 따라 특정 페이지로 리다이렉션할 때, CSS가 로드되지 않는 문제가 발생했습니다. 이는 정적 자원 경로인 /_next 요청까지 인증 검사를 적용해버린 것이 원인이었습니다. 이 글에서는 /_next 경로를 예외 처리해 정적 자원 로드를 정상화한 해결 과정을 기록했습니다. 레이아웃이 깨지거나 스타일이 적용되지 않는 문제를 겪는 분들에게 실질적인 해결 팁이 될 수 있습니다.

NextJS Middleware에서 redirect시 css가 적용이 되지 않는 문제

API 리다이렉션 시 return_url 파라미터가 평문으로 노출되어 보안상 문제가 될 수 있다는 점에서 출발한 고민. 이 글에서는 AES 알고리즘을 사용해 URL 내 특정 파라미터만 암호화하는 방법을 정리합니다. Node.js 환경에서 안전하게 인코딩·디코딩하는 유틸 구현과 Base64, URI 인코딩 방식까지 상세히 설명하며, 권한 검증과 보안을 강화하는 실용적인 암호화 적용 사례를 공유합니다.

URL 암호화하기 (with AES, Encoding)

Next.js 애플리케이션을 프로덕션 환경에 최적화해 Docker 이미지로 빌드하고 실행하는 과정을 정리했습니다. 멀티 스테이지 빌드를 통해 이미지 크기를 줄이고, standalone 설정과 .dockerignore 최적화로 성능을 높였습니다. Docker 명령어와 디버깅 팁까지 포함해 실제 운영에 적용 가능한 도커라이징 경험을 기록합니다.

Next.js Dockerizing하기

Atomic Design을 중심으로 컴포넌트의 구조와 역할을 정리하고, 선언형 컴포넌트의 기준과 커스텀 훅 분리 전략까지 설명합니다. 또한 프레젠테이션·컨테이너 분리 패턴, HOC, Render Props, Compound, Composition 등 다양한 컴포넌트 아키텍처 패턴을 비교하며 장단점을 살펴봅니다. 재사용성과 유지보수성을 고려한 설계 원칙과 함께 실용적인 코드 예시와 참고 자료도 함께 정리했습니다.

React에서 좋은 컴포넌트 패턴이란 무엇일까?

테스트를 위한 첫 걸음. 자주 사용하는 Input 컴포넌트에 대해 커스텀 동작을 중심으로 테스트를 설계하고 구현한 과정을 정리했습니다. 에러 발생 시 가이드 메시지 출력, 포커스 시 border 스타일 변경, 단위(unit) 표시 여부 등 실제 UI에 영향을 주는 로직을 중심으로 테스트 시나리오를 작성하고, userEvent와 DOM 속성 검사로 동작을 검증하는 부분을 간단히 기록했습니다.

테스트 제대로 시도해보기

단위 테스트는 컴포넌트와 함수의 독립적인 동작을 검증하기 위한 핵심 도구입니다. 이 글에서는 커스텀 훅 테스트를 위한 renderHook, 외부 모듈에 대한 vi.mock, userEvent를 활용한 상호작용 테스트, 타이머 테스트 등 다양한 기법을 소개하고, 단위 테스트의 범위와 한계를 알아봅니다. 실제 코드 기반 테스트 전략과 함께, 통합 테스트 및 E2E 테스트와의 차이점도 정리하여 테스트 설계에 대한 인사이트를 정리했습니다.

testing: 단위 테스트 작성하기

테스트란, 올바른 테스트를 위한 규칙, 단위/단위 통합 테스트란, React Testing Library와 컴포넌트 테스트 등 테스트 맛보기 스터디 시작! 리펙토링을 하다 보니 테스트에 대한 필요성이 대두되었다. 좀 더 다양한 상황에서 유의미한 테스트 코드를 짜고 싶다는 생각으로 시작했다. 테스트도 잘 알고 사용하자.

testing: 테스트란, 단위 테스트 맛보기

사파리에서 공통 카드 컴포넌트의 무한 애니메이션이 CPU 사용률 98.8%를 유발한 문제를 분석하고 해결한 사례를 공유합니다. -webkit-animation 기반의 무한 루프가 브라우저 최적화에 영향을 주지 못했던 원인을 추적하고, transform을 통한 GPU 가속 적용과 애니메이션 제거를 병행하여 성능을 개선했습니다. CSS 애니메이션의 브라우저 호환성과 퍼포먼스 최적화 관점에서 실질적인 해결책을 정리했습니다.

특정 화면에 대한 CPU 사용량 증가: 원인 및 해결

Next.js에서 로그인과 인증 여부에 따라 페이지 접근을 제어하기 위해 middleware를 도입한 경험을 정리했습니다. 기존에는 클라이언트에서 처리하던 로직을 서버 측 미들웨어로 옮겨 데이터 불안정 문제를 해결하고, matcher로 필요한 경로에만 로직을 적용해 효율성을 높였습니다. NextResponse, 쿠키 활용, matcher 설정까지 실무에 유용한 middleware 활용법을 담았습니다.

Next.js middleWare 적용하기

프로덕트 내 이미지가 많은 페이지에서 스크롤 시 이미지 로딩 지연 문제가 발생해, 사용자 경험을 개선하고자 이미지 최적화를 진행했습니다. 초기에는 LazyLoad만 적용했으나 한계가 있었고, Next.js의 이미지 최적화 기능을 활용해 더 나은 성능을 달성했습니다. Next.js는 디바이스별 최적 사이즈, WebP 등 최신 포맷, 자동 레이지로드, 외부 이미지 리사이징을 지원합니다. 개선 결과, 최장 이미지 로딩 시간이 2초에서 254ms로 크게 단축되며 실제 사용자 환경의 반응 속도도 체감적으로 개선되었습니다.

Next.js에서 간단하게 이미지 최적화 적용하기

컴포넌트를 새로 개발하며 다양한 케이스에 따른 조건 분기를 테스트로 검증하고자 했습니다. 이를 위해 Jest와 MSW를 활용해 테스트 케이스를 먼저 정리하고, server.use()를 통해 상황별 목업 데이터를 동적으로 설정했습니다. 테스트를 실행하며 실시간으로 컴포넌트를 개발하는 워크플로우를 구축했고, 핸들러·목데이터·경로 설정을 체계화해 MSW 환경도 재정비했습니다. 테스트 기반 개발(TDD)을 실제 업무에 녹여낸 경험을 공유합니다.

Next.js + msw + jest로 TDD 시도하기

공통 컴포넌트로 통합한 파일 업로드 폼에서 이미지 미리보기가 엉뚱한 위치에 표시되는 문제를 겪었습니다. 프로필 사진과 커버 이미지 업로드 핸들러가 각각 분리되어 있음에도, DOM에서 동일한 id를 공유해 잘못된 핸들러가 실행된 것이 원인이었습니다. React 렌더링 특성과 DOM id 충돌로 인해 발생한 이슈를 고유한 id 설정으로 해결한 과정을 공유합니다.

FileForm을 이용한 사진 업로드 오류: DOM의 id 사용에 주의하자

자동 저장 기능을 도입하며, 일정 간격마다 API를 호출하는 폴링 방식 대신 사용자의 입력이 멈춘 뒤 일정 시간 후 저장되도록 디바운스를 활용한 전략을 도입하였습니다. useInterval과 useDebounce 훅을 적절히 활용해 성능을 고려한 저장 로직을 구성하고, 복구 안내 모달까지 연결해 사용자 경험을 향상시킨 과정을 공유합니다. 

포스트 자동 저장: auto save 기능 추가(feat. polling)

뒤로가기 시 스크롤 위치가 초기화되는 문제를 해결하기 위해 sessionStorage와 useSWRInfinite, IntersectionObserver 등을 활용한 개선 과정을 공유합니다. 스크롤 위치 저장 및 복원, 무한스크롤 초기화 문제, ref null 이슈, useEffect 의존성 누락 문제 등을 단계적으로 접근한 경험을 기록했습니다. 복잡한 스크롤 복원 로직을 구조화하고 SWR 캐시와 의존성 최적화를 통해 리스트 재랜더링 문제를 파헤쳐보았습니다.

스크롤 뒤로가기 시 페이지가 유지되어야 하는 이슈 해결

D3로 버블 차트를 구현하는 과정에서, 데이터가 동적으로 바뀌는 상황에도 차트 모양이 갱신되지 않는 문제가 발생했습니다. React의 렌더링 조건(state, props, 부모 렌더링, shouldComponentUpdate, forceUpdate)을 재정리하며 문제를 추적했지만, D3가 componentDidMount 이후 독립적으로 동작해 업데이트가 반영되지 않는 한계에 부딪혔습니다. 이를 해결한 방법을 기록했습니다.

React rerendering의 조건

D3를 활용해 버블 차트를 구현하던 중, 오픈소스에서 기본으로 들어 있던 과한 애니메이션을 제거하고 싶었습니다. 기존의 on('tick') 이벤트를 활용하되, 시뮬레이션을 고정된 상태로 만들면서도 동적인 배치를 유지할 수 있는 방식으로 구현을 개선한 경험을 공유합니다.

d3를 이용한 컴포넌트에서 animation 효과 제외하기

D3로 만든 버블 차트에서 텍스트 줄바꿈이 <br />로 적용되지 않아 원인을 찾은 결과, SVG의 <text> 태그 내부에서는 <tspan>을 사용해야 함을 알게 되었습니다. 각 줄을 <tspan>으로 감싸고 dx, dy 속성으로 위치를 조정해 줄바꿈을 구현했습니다.

svg text tag 관련 <br/> 먹히지 않는 현상