Frontend
번들 사이즈 줄이기: 초기 로딩 속도 개선을 위한 첫걸음
프로덕션 빌드 경고 해결을 위해 ESLint 정리, 페이지 단위 코드 분할, depcheck를 통한 의존성 다이어트로 번들 크기를 줄이고 Lighthouse 점수를 개선한 기록입니다.
블로그
개발 일지와 소소한 기록들
Frontend
Backend
대용량 파일 스트리밍 다운로드 구현기
8GB가 넘는 대용량 파일을 기기에 원격 전송하면서 겪었던 메모리 초과(OOM) 문제를 해결하고, 소켓 통신으로 실시간 진행률을 표시하도록 개선한 과정입니다.
Frontend
유한 상태 머신(FSM) 도입으로 복잡한 분기 조건문(IF-ELSE) 청소하기
차량 종류와 예약 상태에 따라 복잡하게 얽히던 관제 화면의 동작 분기 코드를 상태 머신(FSM) 구조로 해결한 사례를 공유합니다.
Frontend
Backend
차량 상태 모니터링을 위한 Socket.io 도입기
주기적 조회(Polling) 방식을 웹소켓(Socket.io) 기반 실시간 양방향 통신으로 전환하여 극복한 과정에 대해 알아보자
Frontend
Backend
웹 개발자를 위한 비디오 스트리밍 기초
인코딩, 디코딩, 프레임, 색공간 등
Backend
GStreamer와 WebRTC를 활용한 실시간 영상 스트리밍 파이프라인 구축
GStreamer를 활용하여 실시간 카메라 영상을 획득하고, H.264 인코딩을 거쳐 WebRTC 프로토콜로 브라우저에 전송하는 미디어 파이프라인 설계 및 구현 방법을 정리했습니다.
Frontend
웹 브라우저로 실시간 통신하기: WebRTC의 핵심 개념과 동작 원리
별도의 플러그인 없이 웹 브라우저 간에 오디오, 비디오, 데이터를 실시간으로 전송할 수 있는 WebRTC의 기본 개념에 대해 알아보자
ETC
수동 배포 장애 월 5건에서 1건으로: Docker와 Self-hosted Runner 기반 CI/CD 자동화 구축기
Self-hosted Runner와 Docker를 활용해 배포 프로세스를 자동화하고, Django 마이그레이션 꼬임 문제를 해결하여 배포 안정성을 높인 경험을 공유합니다.
ETC
협업의 기준 세우기: 프로젝트 규모에 맞는 Git Flow 브랜치 전략 도입기
복잡한 협업 환경에서 코드 충돌을 예방하고 릴리스 안정성을 확보하기 위해 Git Flow 브랜치 전략을 적용한 경험을 소개합니다.
Frontend
MSW(Mock Service Worker)로 개발 일정 2주 단축하기
MSW로 모의 API를 구축하여 개발 대기 시간을 없애고 일정을 2주 단축한 경험
Frontend
Backend
Django Template에서 React/TypeScript로의 점진적 마이그레이션 전략
기존 Django MTV 레거시 시스템을 React와 TypeScript 구조로 점진적 전환하여 개발 복잡성을 개선한 과정에 대해 알아보자