https://chan9yu.dev 프론트엔드 개발자 여찬규의 기술 블로그. React 19, TypeScript, Next.js App Router, WebRTC 기반 실시간 통신 등 실무에서 마주친 문제와 학습 기록을 정리합니다. 신뢰할 수 있는 자료를 토대로 깊이 있게 다룹니다. ko-KR Wed, 08 Apr 2026 00:00:00 GMT https://chan9yu.dev/posts/harness-engineering-thoughts https://chan9yu.dev/posts/harness-engineering-thoughts 프롬프트 엔지니어링에서 컨텍스트 엔지니어링, 그리고 하네스 엔지니어링으로 빠르게 옮겨가는 AI 코딩 패러다임의 변화. 몇 달 만에 베스트 프랙티스가 낡아가는 시대에 무엇을 쫓고 무엇을 끝까지 남길지에 대한 개발자의 깊은 고민. Wed, 08 Apr 2026 00:00:00 GMT dev.cgyeo@gmail.com (chan9yu) AI Agent Harness Claude Code https://chan9yu.dev/posts/react-set-state-in-effect https://chan9yu.dev/posts/react-set-state-in-effect eslint-plugin-react-hooks의 set-state-in-effect 규칙이 존재하는 근본적인 이유를 렌더링 흐름 분석과 React Compiler 관점에서 알아봅니다. 불필요한 재렌더링을 제거하고, 예측 가능한 렌더링을 작성하는 방법을 정리합니다. Sun, 15 Mar 2026 00:00:00 GMT dev.cgyeo@gmail.com (chan9yu) React ESLint useEffect React Compiler https://chan9yu.dev/posts/claude-code-agent-teams-ai-news-bot https://chan9yu.dev/posts/claude-code-agent-teams-ai-news-bot Claude Code의 새로운 Agent Teams 기능을 활용해 AI 뉴스 요약봇을 병렬로 개발하는 과정을 단계별로 안내합니다. Agent Teams의 개념부터 셋업, 실전 앱 개발, 트러블슈팅까지 실무 관점에서 정리했습니다. Mon, 23 Feb 2026 07:00:00 GMT dev.cgyeo@gmail.com (chan9yu) Claude Code Agent Teams AI 뉴스봇 멀티에이전트 자동화 Opus 4.6 https://chan9yu.dev/posts/webrtc-media-codecs https://chan9yu.dev/posts/webrtc-media-codecs WebRTC에서 사용되는 비디오 코덱(VP8, VP9, H.264)과 오디오 코덱(Opus, G.711)을 실무 관점에서 비교하고, 크롬 내부 페이지로 실제 코덱을 확인하는 방법까지 다룹니다. AV1, AV2 등 차세대 코덱도 함께 살펴봅니다. Sun, 18 Jan 2026 07:53:40 GMT dev.cgyeo@gmail.com (chan9yu) WebRTC 코덱 VP8 VP9 H.264 Opus 미디어 영상통화 AV1 AV2 https://chan9yu.dev/posts/2025-retrospective https://chan9yu.dev/posts/2025-retrospective 번아웃으로 퇴사를 고민했던 주니어 프론트엔드 개발자의 2025년 회고. 구름톤 in JEJU 해커톤, 항해플러스 6기 완주, 단독 SDK 설계와 런칭, 전사 세미나까지 가장 힘들었지만 가장 많이 성장한 한 해의 기록. Sun, 04 Jan 2026 00:00:00 GMT dev.cgyeo@gmail.com (chan9yu) 회고 2025 성장 번아웃 https://chan9yu.dev/posts/separating-react-app-to-sdk https://chan9yu.dev/posts/separating-react-app-to-sdk React 앱 컴포넌트에 강결합된 코어 로직을 독립 SDK로 분리하기까지의 설계 고민. 라이브러리와 SDK의 차이, 인터페이스 설계, 의존성 역전 원칙을 RemoteVS 실무 경험으로 정리한 아키텍처 의사결정 기록. Wed, 03 Dec 2025 00:00:00 GMT dev.cgyeo@gmail.com (chan9yu) SDK 설계 아키텍처 인터페이스 https://chan9yu.dev/posts/react-core-deep-dive https://chan9yu.dev/posts/react-core-deep-dive React의 내부 동작 원리를 체계적으로 분석합니다. JSX에서 JavaScript로의 변환 과정, Virtual DOM의 작동 원리, Reconciliation 알고리즘, 그리고 Fiber Architecture의 핵심 개념을 다룹니다. Sun, 09 Nov 2025 00:00:00 GMT dev.cgyeo@gmail.com (chan9yu) React Virtual DOM Reconciliation Fiber JSX https://chan9yu.dev/posts/webrtc-deepdive-04 https://chan9yu.dev/posts/webrtc-deepdive-04 WebRTC 박살내기 시리즈의 마지막 글입니다. WebRTC의 RTCDataChannel API를 이해하고, 채팅·파일 전송·게임 상태 동기화까지 미디어가 아닌 실시간 데이터 전송의 모든 것을 실전 예제와 함께 알아봅니다. Fri, 24 Oct 2025 08:30:00 GMT dev.cgyeo@gmail.com (chan9yu) WebRTC RTCDataChannel P2P 실시간통신 SCTP https://chan9yu.dev/posts/webrtc-deepdive-03 https://chan9yu.dev/posts/webrtc-deepdive-03 WebRTC 박살내기 시리즈의 세 번째 글입니다. WebRTC의 핵심 RTCPeerConnection API를 완벽하게 이해하고, 연결 생성부터 이벤트 흐름 처리, 품질 관리, 자동 연결 복구까지 실전 예제와 함께 알아봅니다. Mon, 20 Oct 2025 04:21:34 GMT dev.cgyeo@gmail.com (chan9yu) WebRTC RTCPeerConnection P2P 실시간통신 ICE SDP https://chan9yu.dev/posts/webrtc-deepdive-02 https://chan9yu.dev/posts/webrtc-deepdive-02 WebRTC 박살내기 시리즈의 두 번째 글입니다. WebRTC의 MediaStream과 MediaStreamTrack 객체를 깊이 이해하고, getUserMedia부터 트랙 제어, 품질 관리, 화면 공유까지 실전 예제와 함께 알아봅니다. Mon, 13 Oct 2025 12:44:00 GMT dev.cgyeo@gmail.com (chan9yu) WebRTC MediaStream MediaStreamTrack 실시간통신 https://chan9yu.dev/posts/webrtc-deepdive-01 https://chan9yu.dev/posts/webrtc-deepdive-01 WebRTC 박살내기 첫번째 시리즈 입니다. WebRTC 기본 개념부터 시그널링, Offer/Answer(SDP), Trickle ICE, STUN/TURN, NAT, 그리고 Mesh·SFU·MCU 아키텍처까지 한 번에 정리합니다. Sat, 11 Oct 2025 21:44:00 GMT dev.cgyeo@gmail.com (chan9yu) WebRTC 실시간통신 P2P SDP ICE STUN TURN https://chan9yu.dev/posts/hanghae-plus-frontend-6th-review https://chan9yu.dev/posts/hanghae-plus-frontend-6th-review 2025년 7월부터 9월까지 진행된 항해 플러스 프론트엔드 6기 10주 과정 완주 회고. SPA 바닐라 구현·Virtual DOM·React Hook 구현·클린 코드·테스트·TDD·성능 최적화까지 학습한 내용과 인사이트를 종합 정리한 학습 기록. Mon, 22 Sep 2025 00:00:00 GMT dev.cgyeo@gmail.com (chan9yu) 항해-플러스-프론트엔드-6기 항해99 https://chan9yu.dev/posts/hanghae-plus-wil10 https://chan9yu.dev/posts/hanghae-plus-wil10 항해 플러스 프론트엔드 6기 10주차 회고. Chapter 4-2 코드 관점의 성능 최적화 과제를 진행하며 React Profiler 분석, useMemo·useCallback 최적화, 코드 분할 적용까지 정리한 항해 마지막 주차의 학습 기록. Fri, 12 Sep 2025 03:16:38 GMT dev.cgyeo@gmail.com (chan9yu) WIL 항해-플러스-프론트엔드-6기 항해99 https://chan9yu.dev/posts/hanghae-plus-wil9 https://chan9yu.dev/posts/hanghae-plus-wil9 항해 플러스 프론트엔드 6기 9주차 회고. Chapter 4-1 성능 최적화 — 서버사이드 렌더링(SSR)과 정적 사이트 생성(SSG)을 직접 구현하며 CSR·SSR·SSG·ISR 4가지 렌더링 방식과 인프라 최적화 핵심을 정리한 학습 기록. Sun, 07 Sep 2025 06:54:07 GMT dev.cgyeo@gmail.com (chan9yu) WIL 항해-플러스-프론트엔드-6기 항해99 https://chan9yu.dev/posts/hanghae-plus-wil8 https://chan9yu.dev/posts/hanghae-plus-wil8 항해 플러스 프론트엔드 6기 8주차 회고. 반복 일정 기능을 TDD(Test-Driven Development) 방식으로 구현하며 Red-Green-Refactor 사이클, 테스트 우선 설계의 효과와 한계를 정리한 학습 기록. Sun, 31 Aug 2025 09:38:28 GMT dev.cgyeo@gmail.com (chan9yu) WIL 항해-플러스-프론트엔드-6기 항해99 https://chan9yu.dev/posts/hanghae-plus-wil7 https://chan9yu.dev/posts/hanghae-plus-wil7 항해 플러스 프론트엔드 6기 7주차 회고. 일정 관리 앱에 테스트 코드를 작성하며 Vitest와 Testing Library 사용법, 단위 테스트와 통합 테스트의 차이, 테스트 작성의 시행착오와 베스트 프랙티스를 정리한 학습 기록. Sun, 24 Aug 2025 10:42:11 GMT dev.cgyeo@gmail.com (chan9yu) WIL 항해-플러스-프론트엔드-6기 항해99 https://chan9yu.dev/posts/hanghae-plus-wil5 https://chan9yu.dev/posts/hanghae-plus-wil5 항해 플러스 프론트엔드 6기 5주차 회고. 엔티티 기준으로 컴포넌트·훅·유틸 역할을 분리하고 비즈니스 로직을 컴포넌트에서 떼어내, Jotai로 전역 상태를 관리하며 디자인 패턴과 함수형 프로그래밍 기반 클린 아키텍처를 적용한 학습 기록. Sun, 10 Aug 2025 07:28:55 GMT dev.cgyeo@gmail.com (chan9yu) WIL 항해-플러스-프론트엔드-6기 항해99 https://chan9yu.dev/posts/hanghae-plus-wil4 https://chan9yu.dev/posts/hanghae-plus-wil4 항해 플러스 프론트엔드 6기 4주차 회고. 더티한 바닐라 JavaScript 코드를 클린 코드 원칙으로 리팩토링하고 React와 TypeScript로 마이그레이션하며 코드 품질·아키텍처 개선 기법을 정리한 학습 기록. Sun, 03 Aug 2025 07:16:11 GMT dev.cgyeo@gmail.com (chan9yu) WIL 항해-플러스-프론트엔드-6기 항해99 https://chan9yu.dev/posts/hanghae-plus-wil3 https://chan9yu.dev/posts/hanghae-plus-wil3 항해 플러스 프론트엔드 6기 3주차 회고. useMemo·useCallback 같은 React 핵심 Hook과 자체 상태관리 Hook을 직접 구현하며 closure·메모이제이션·Hook 내부 동작 원리를 깊이 이해한 학습 기록. Mon, 28 Jul 2025 08:56:22 GMT dev.cgyeo@gmail.com (chan9yu) WIL 항해-플러스-프론트엔드-6기 항해99 https://chan9yu.dev/posts/hanghae-plus-wil2 https://chan9yu.dev/posts/hanghae-plus-wil2 항해 플러스 프론트엔드 6기 2주차 회고. Virtual DOM과 이벤트 위임 시스템을 직접 구현하고 diff 알고리즘으로 렌더링 최적화까지 진행하며 React 내부 동작 원리와 성능 트레이드오프를 깊이 이해한 학습 기록. Sun, 20 Jul 2025 23:55:17 GMT dev.cgyeo@gmail.com (chan9yu) WIL 항해-플러스-프론트엔드-6기 항해99 https://chan9yu.dev/posts/hanghae-plus-wil1 https://chan9yu.dev/posts/hanghae-plus-wil1 항해 플러스 프론트엔드 6기 1주차 회고. 프레임워크 없이 바닐라 JavaScript로 SPA(Single Page Application)를 맨땅에서 구현하며 라우터·렌더링·상태 관리의 동작 원리를 직접 익힌 학습 기록. Sun, 13 Jul 2025 13:35:46 GMT dev.cgyeo@gmail.com (chan9yu) WIL 항해-플러스-프론트엔드-6기 항해99 https://chan9yu.dev/posts/goormthon-13th-jeju-retrospective https://chan9yu.dev/posts/goormthon-13th-jeju-retrospective 3박 4일간 제주에서 진행된 구름톤(9oormthon) 13기 해커톤 참여 후기. 카카오·구름이 주최한 IT 인재 양성 프로그램에서 고사리 채집 스팟 공유 서비스 '고고사리'를 개발하며 겪은 기술적 도전과 협업 경험을 공유합니다. Tue, 25 Feb 2025 00:00:00 GMT dev.cgyeo@gmail.com (chan9yu) 9oormthon-13th hackathon frontend nextjs tailwindcss 회고 https://chan9yu.dev/posts/mqtt-protocol-overview https://chan9yu.dev/posts/mqtt-protocol-overview MQTT(Message Queuing Telemetry Transport) 프로토콜의 동작 원리, Publisher/Subscriber 패턴, QoS 레벨, Broker 구조부터 IoT·PNS 실무 적용까지 경량 메시징 프로토콜의 모든 것을 정리합니다. Sun, 04 Aug 2024 15:14:00 GMT dev.cgyeo@gmail.com (chan9yu) IoT QoS Broker MQTT Network Protocol