HM소프트

태블릿 키오스크를 PWA 풀스크린 앱처럼 만든 기록. manifest display:fullscreen과 display_override 폴백, 캐싱 없는 최소 Service Worker, beforeinstallprompt 3갈래 설치 유도, Fullscreen API 토글, clamp() 폰트 토큰과 nowrap·ellipsis 가독성, 고정 해상도를 버린 반응형 flex까지 다룬다.1편에서 이어서 — 이제 "키오스크답게" 만들 차례1편에서는 여러 추출구를 가진 커피머신의 상태를 WebSocket으로 실시간으로 받아 화면에 반영하는 일을 다뤘다. 기기가 보내는 이벤트를 종류별로 분배하고, 끊기면 재연결하고, 알람을 시각·청각적으로 띄우는 — 말하자면 "데이터가 살아 움직이게" 만드는 작업이었다.그런데 ..

임베디드 기기의 키오스크 UI에서 WebSocket 푸시와 HTTP 폴링을 한 화면에 충돌 없이 공존시킨 기록. 이벤트 봉투 펍/섭 버스, 지수 백오프 재연결과 포기 가드, 소유권 집합으로 라이브·정적 필드를 분담시킨 인계 로직, mock WS 서버와 Playwright E2E 검증까지 다룬다.시리즈를 시작하며 — 기기 상태가 곧 화면인 UI여러 개의 추출구(스테이션)를 가진 음료 추출 기기의 터치 키오스크 UI를 만들었다. 임베디드 보드 위에서 웹(EJS 템플릿 + 바닐라 JS + CSS)으로 서빙되는 태블릿 화면이고, 화면에 보이는 거의 모든 것이 기기의 현재 상태다. 어느 추출구가 비어 있고, 어디서 추출이 진행 중이고, 진행률이 몇 퍼센트이고, 알람이 떴는지. 사용자가 입력하는 폼이 주인공인 보통..

한 코드베이스로 모바일·웹·데스크톱을 빌드하는 Flutter 앱 구조. Riverpod 불변 상태와 copyWith·StateNotifier로 화면과 데이터를 떼고, FutureProvider.family로 상세를 캐시한다. Dio로 타임아웃·조건부 파라미터를 묶고, fromJson이 None·타입 혼입을 흡수하며 즐겨찾기는 낙관적 업데이트로 처리한다.시리즈를 닫으며 — 드디어 사용자가 만지는 화면이 시리즈의 1~3편은 전부 눈에 안 보이는 일이었다. 외부 화면을 긁어 데이터를 모으는 크롤러(1편), 그 데이터를 깨끗하게 정규화해 내려보내는 API와 검색·인증(2편), 그걸 매니지드 호스팅에 올리는 배포(3편). 사용자 입장에서는 아무것도 손에 잡히지 않는다. 마지막 4편은 그 모든 백엔드 노동의 결과를..

Render 무료 플랜이 15분 뒤 잠드는 cold start를 14분 자가 핑 태스크로 막고, lifespan에 생성·취소를 묶는다. Supabase 풀러 트랜잭션 모드(6543)에선 NullPool, 직접 연결은 QueuePool로 포트 하나로 자동 분기. pool_pre_ping으로 죽은 커넥션을, 0.0.0.0·$PORT·CORS로 연결 함정을 잡는다.무료 플랜 위에 서비스를 올린다는 것1편에서 외부 화면을 긁어 데이터를 모으는 크롤러를, 2편에서 그 데이터를 사용자에게 내보내는 API·검색·인증을 다뤘다. 이번 3편은 이 백엔드를 실제로 인터넷에 띄운 배포 이야기다.전제부터 분명히 해 둔다. 이건 트래픽이 폭발하는 서비스가 아니다. 지역에 흩어진 시설 정보를 모아 검색하게 해 주는, 사용자가 아..

이미지 URL None을 배열로 다뤄 터지는 직렬화 500을, 응답 스키마 검증자 한 곳에서 안전한 기본값으로 정규화해 잡는다. 정적·동적 라우트 순서 함정, JSON 검색을 ILIKE로 되돌린 이유, 하버사인 거리 계산은 파이썬에서, joinedload로 즐겨찾기 N+1 제거, 소셜 ID 매칭 인증까지 다룬다.다시 시작하며 — 못 믿을 데이터를 API로 내보내기1편에서는 외부 화면을 Selenium으로 긁어 DB에 쌓는 크롤러와 스케줄러를 다뤘다. 그 글을 이렇게 끝맺었다 — "이렇게 긁어 온 데이터는 솔직히 지저분하다. 어떤 항목은 좌표가 없고, 어떤 필드는 비어 있다." 이번 편은 바로 그 지저분한 데이터를 사용자에게 제공하는 API 계층의 이야기다.스택은 단순하다. 웹 프레임워크로 FastAPI를..

공개 API가 없는 외부 화면을 Selenium으로 긁는 크롤러 설계. navigator.webdriver 숨기기·UA 무작위화·무작위 지연으로 차단을 피하고, 중첩 iframe 전환과 셀렉터 다단계 폴백으로 화면 개편을 견딘다. 식별자 우선 upsert로 멱등성을, 다층 예외 격리와 정직한 partial 로그로 새벽 수집을 지킨다.시리즈를 시작하며 — 출처가 외부에 있는 서비스지역에 흩어진 시설 정보를 한곳에 모아 검색하고, 즐겨찾기하고, 이용 후기를 모아 보여 주는 서비스를 만들었다. 백엔드(Python)가 데이터를 수집·정제·제공하고, 크로스플랫폼 앱이 그걸 소비하는 구조다. 그런데 이 서비스에는 보통의 CRUD 백엔드와 결정적으로 다른 점이 하나 있었다. 데이터의 출처가 우리 손 밖에 있다는 점이..