Next.js 개발 중 마주한 Hydration Error와 원인
Next.js SSR 환경에서 Hydration Error가 발생한 원인과 점검 방법을 정리했습니다. dayjs locale 불일치로 서버와 클라이언트 렌더 결과가 달라진 사례를 설명했습니다.
#Next.js#React
135005분
필터 1
버즈빌 프론트엔드 변천사
버즈빌이 AngularJS부터 Next.js까지 프론트엔드 아키텍처를 어떻게 바꿔왔는지 정리한 글입니다. 각 전환의 선택 이유와 운영상의 효과, 남은 과제까지 함께 공유했습니다.
#Vue#React
134005분
프론트엔드 개발자를 위한 5가지 스크롤 복구 시나리오와 실전 코드 팁
SPA 환경에서 스크롤 복구가 어려운 이유와 상황별 해결 방법을 정리했습니다. React Query, 무한 스크롤, 가상화 리스트에서의 실전 팁도 함께 소개했습니다.
#React#React Query
210005분
프론트엔드 테스트 비용과 효용 사이에서
프론트엔드 테스트의 비용과 효용을 배송 정보 렌더링 사례로 살펴본 글입니다. 테스트 기준 시각 고정, 공통화, 순서 검증으로 커버리지를 높인 과정을 정리했습니다.
#test#refactoring
177005분
윈도잉(windowing) 기법을 적용한 고성능 표 컴포넌트 개발기
윈도잉(windowing) 기법을 적용한 고성능 표 컴포넌트 개발기
윈도잉 기법을 React 표/목록 가상화에 적용하는 방법과 대표 라이브러리의 차이를 정리했습니다. 사내 로그 뷰 성능 개선을 위한 Big Table 개발 사례로 연결했습니다.
#React#윈도잉
126005분
[Figma MCP]를 활용한 효율적인 UI 컴포넌트 개발 및 실제 적용 경험을 공유합니다
[Figma MCP]를 활용한 효율적인 UI 컴포넌트 개발 및 실제 적용 경험을 공유합니다
Figma MCP를 Cursor와 연동해 디자인 시안을 React/Vue 컴포넌트로 옮긴 경험을 공유했습니다. 실제 업무에서 개발 시간을 줄이고 세부 튜닝에 집중한 사례를 소개했습니다.
#Figma#MCP
146005분
Apache Airflow에 한국어로 기여해보자!
Apache Airflow 3.0의 i18n 기능과 한국어 번역 기여 방법을 소개했습니다. Breeze로 로컬 테스트하고 PR 승인 절차를 따라 번역 품질을 유지하는 흐름을 정리했습니다.
#Airflow#React
110005분
접근성을 지원한다는 착각
접근성을 별도 비용이 드는 작업이 아니라 텍스트 기반 인터페이스 설계로 바라보는 관점을 설명했습니다. 스크린리더와 테스트코드에서 같은 구조를 활용하는 예시도 함께 제시했습니다.
#접근성#test
96005분
Cursor 전사 도입 6개월: 이후 변화들
Cursor 전사 도입 6개월 동안 개발팀이 AI 중심 워크플로로 전환된 과정을 공유했습니다. 문제 정의와 설계에 집중하고, 다양한 AI 도구로 생산성을 높인 사례를 소개했습니다.
#Cursor#TypeScript
14005분
프론트엔드 개발, 바이브코딩 라이브 웹앱 개발 사용 경험기
프론트엔드 개발자가 바이브코딩을 통해 생산성 향상을 체감한 경험을 공유했습니다. 동시에 테스트 코드, 업무 분할, 프롬프트 설계, 도메인 지식의 필요성도 강조했습니다.
#React#LLM
181005분
FE News 25년 7월 소식을 전해드립니다!
FE News 25년 7월 소식을 전해드립니다!
2025년 7월 프론트엔드 주요 소식과 읽을거리, 튜토리얼, 도구를 한데 모아 소개했습니다. React 생태계 변화, i18n, MCP, ECMAScript 2025 같은 주제를 함께 살펴볼 수 있습니다.
#React#Next.js
290005분
Windowing 기법을 적용한 대용량 고성능 표 컴포넌트 개발기
Windowing 기법을 적용한 대용량 고성능 표 컴포넌트 개발기
웹브라우저에서 대용량 데이터를 고성능으로 보여주기 위한 Windowing 기법과 React Virtualization을 소개했습니다. Big Table 구현 사례를 통해 성능 최적화 포인트와 한계도 공유했습니다.
#React#Virtualization
129005분