개발하면서 배운 것들을 기록합니다
전체, 27개의 포스트
마이크를 끈 상담 녹화만 재생되지 않던 장애에서 시작해 Shaka Player와 hls.js를 어댑터로 갈아 끼울 수 있는 HLS 재생 모듈을 만든 과정입니다. 브라우저에 HLS 라이브러리가 필요한 이유부터 엔진을 고를 수 있게 만드는 설계까지 다룹니다.
RADIO로 시스템 디자인하기 시리즈의 세 번째 글입니다. 서버가 먼저 말을 거는 실시간 채팅을 소재로, WebSocket 선택부터 낙관적 병합, 순서 보장, 가변 높이 가상화까지 RADIO 다섯 단계로 처음부터 끝까지 설계해봅니다.
RADIO로 시스템 디자인하기 시리즈의 두 번째 글입니다. Input과 Dropdown뿐인 작은 UI 안에 디바운스, 캐시, race condition, 접근성까지 자동완성 검색창을 RADIO 다섯 단계로 처음부터 끝까지 설계해봅니다.
RADIO로 시스템 디자인하기 시리즈의 첫 글입니다. 프론트엔드 시스템 디자인을 구조적으로 풀어내는 RADIO 프레임워크를 Requirements부터 Optimization까지 다섯 단계로 나눠, 각 단계가 무엇을 묻고 왜 그 질문이 필요한지 차근차근 살펴봅니다.
프롬프트 엔지니어링에서 컨텍스트 엔지니어링, 그리고 하네스 엔지니어링으로 빠르게 옮겨가는 AI 코딩 패러다임의 변화. 몇 달 만에 베스트 프랙티스가 낡아가는 시대에 무엇을 쫓고 무엇을 끝까지 남길지에 대한 개발자의 깊은 고민.
eslint-plugin-react-hooks의 set-state-in-effect 규칙이 존재하는 근본적인 이유를 렌더링 흐름 분석과 React Compiler 관점에서 알아봅니다. 불필요한 재렌더링을 제거하고, 예측 가능한 렌더링을 작성하는 방법을 정리합니다.
Claude Code의 새로운 Agent Teams 기능을 활용해 AI 뉴스 요약봇을 병렬로 개발하는 과정을 단계별로 안내합니다. Agent Teams의 개념부터 셋업, 실전 앱 개발, 트러블슈팅까지 실무 관점에서 정리했습니다.
WebRTC에서 사용되는 비디오 코덱(VP8, VP9, H.264)과 오디오 코덱(Opus, G.711)을 실무 관점에서 비교하고, 크롬 내부 페이지로 실제 코덱을 확인하는 방법까지 다룹니다. AV1, AV2 등 차세대 코덱도 함께 살펴봅니다.
번아웃으로 퇴사를 고민했던 주니어 프론트엔드 개발자의 2025년 회고. 구름톤 in JEJU 해커톤, 항해플러스 6기 완주, 단독 SDK 설계와 런칭, 전사 세미나까지 가장 힘들었지만 가장 많이 성장한 한 해의 기록.
React 앱 컴포넌트에 강결합된 코어 로직을 프레임워크를 가리지 않는 SDK로 분리하기까지의 설계 고민. 라이브러리와 SDK의 차이, 인터페이스 네이밍, 레이어를 가르는 기준, 에러를 전달하는 방식을 실무 경험으로 정리한 아키텍처 의사결정 기록.
React의 내부 동작 원리를 체계적으로 분석합니다. JSX에서 JavaScript로의 변환 과정, Virtual DOM의 작동 원리, Reconciliation 알고리즘, 그리고 Fiber Architecture의 핵심 개념을 다룹니다.
WebRTC 박살내기 시리즈의 마지막 글입니다. RTCDataChannel API를 이해하고, 채팅과 파일 전송, 게임 상태 동기화까지 영상과 음성이 아닌 데이터를 P2P로 보내는 방법을 실전 예제와 함께 다룹니다.
WebRTC 박살내기 시리즈의 세 번째 글입니다. 핵심인 RTCPeerConnection API를 다룹니다. 연결 생성과 iceServers 설정부터 이벤트 흐름, Offer와 Answer 교환, 패킷 손실률 관측과 비트레이트 조절, 연결 복구까지 실전 예제와 함께 알아봅니다.
WebRTC 박살내기 시리즈의 두 번째 글입니다. WebRTC의 MediaStream과 MediaStreamTrack 객체를 깊이 이해하고, getUserMedia부터 트랙 제어, 품질 관리, 화면 공유까지 실전 예제와 함께 알아봅니다.
WebRTC 박살내기 시리즈의 첫 번째 글입니다. WebRTC 기본 개념부터 시그널링, Offer와 Answer(SDP), Trickle ICE, STUN과 TURN, NAT, Mesh와 SFU, MCU 아키텍처까지 한 번에 정리합니다.
2025년 7월부터 9월까지 진행된 항해 플러스 프론트엔드 6기 10주 과정 완주 회고. SPA 바닐라 구현·Virtual DOM·React Hook 구현·클린 코드·테스트·TDD·성능 최적화까지 학습한 내용과 인사이트를 종합 정리한 학습 기록.
항해 플러스 프론트엔드 6기 10주차 회고. Chapter 4-2 코드 관점의 성능 최적화 과제를 진행하며 React Profiler 분석, useMemo·useCallback 최적화, 코드 분할 적용까지 정리한 항해 마지막 주차의 학습 기록.
항해 플러스 프론트엔드 6기 9주차 회고. Chapter 4-1 성능 최적화 — 서버사이드 렌더링(SSR)과 정적 사이트 생성(SSG)을 직접 구현하며 CSR·SSR·SSG·ISR 4가지 렌더링 방식과 인프라 최적화 핵심을 정리한 학습 기록.
항해 플러스 프론트엔드 6기 8주차 회고. 반복 일정 기능을 TDD(Test-Driven Development) 방식으로 구현하며 Red-Green-Refactor 사이클, 테스트 우선 설계의 효과와 한계를 정리한 학습 기록.
항해 플러스 프론트엔드 6기 7주차 회고. 일정 관리 앱에 테스트 코드를 작성하며 Vitest와 Testing Library 사용법, 단위 테스트와 통합 테스트의 차이, 테스트 작성의 시행착오와 베스트 프랙티스를 정리한 학습 기록.
항해 플러스 프론트엔드 6기 5주차 회고. 엔티티 기준으로 컴포넌트·훅·유틸 역할을 분리하고 비즈니스 로직을 컴포넌트에서 떼어내, Jotai로 전역 상태를 관리하며 디자인 패턴과 함수형 프로그래밍 기반 클린 아키텍처를 적용한 학습 기록.
항해 플러스 프론트엔드 6기 4주차 회고. 더티한 바닐라 JavaScript 코드를 클린 코드 원칙으로 리팩토링하고 React와 TypeScript로 마이그레이션하며 코드 품질·아키텍처 개선 기법을 정리한 학습 기록.
항해 플러스 프론트엔드 6기 3주차 회고. useMemo·useCallback 같은 React 핵심 Hook과 자체 상태관리 Hook을 직접 구현하며 closure·메모이제이션·Hook 내부 동작 원리를 깊이 이해한 학습 기록.
항해 플러스 프론트엔드 6기 2주차 회고. Virtual DOM과 이벤트 위임 시스템을 직접 구현하고 diff 알고리즘으로 렌더링 최적화까지 진행하며 React 내부 동작 원리와 성능 트레이드오프를 깊이 이해한 학습 기록.
항해 플러스 프론트엔드 6기 1주차 회고. 프레임워크 없이 바닐라 JavaScript로 SPA(Single Page Application)를 맨땅에서 구현하며 라우터·렌더링·상태 관리의 동작 원리를 직접 익힌 학습 기록.
3박 4일간 제주에서 진행된 구름톤(9oormthon) 13기 해커톤 참여 후기. 카카오·구름이 주최한 IT 인재 양성 프로그램에서 고사리 채집 스팟 공유 서비스 '고고사리'를 개발하며 겪은 기술적 도전과 협업 경험을 공유합니다.
MQTT(Message Queuing Telemetry Transport) 프로토콜의 동작 원리, Publisher/Subscriber 패턴, QoS 레벨, Broker 구조부터 IoT와 PNS 실무 적용까지 경량 메시징 프로토콜의 모든 것을 정리합니다.
