선택 프로젝트 — 개인 프로젝트

전세픽

LH 전세임대는 주거비 부담을 덜어주는 제도지만, 조건에 맞는 매물을 직접 찾아다녀야 해서 자격이 되어도 끝내 활용하지 못하는 경우가 많습니다. 조건에 맞는 매물만 자동으로 걸러, 지원이 필요한 사람이 제도를 실제로 쓸 수 있게 만들었습니다.

1인 개발 · 기획·크롤링 백엔드·UI·배포/개인 프로젝트/Vanilla JavaScript (ES6+) / CSS3 / NestJS + Fastify / Puppeteer / Naver Maps API / Docker

01 / 04

지역 칩, 엘리베이터·찜 체크박스, 가격·검색 입력까지 서버 요청 없이 즉시 반영됩니다. 프레임워크 없이 순수 JS로 필터·찜·탭 상태를 직접 관리했습니다.

해결한 문제

매물 원본을 외부 사이트에서 크롤링해야 해서 DOM이 바뀌면 그대로 깨졌고, 지도 API 키는 클라이언트에 내보낼 수 없었습니다. 프레임워크 없이 서버 렌더링 HTML 위에서 필터·찜·탭 상태를 다뤄야 하는 제약도 있었습니다.

프레임워크 없이 순수 JS로 필터·찜·열람 이력·탭 상태를 직접 관리하고, 이벤트 위임으로 핸들러를 묶어 리렌더링을 최소화했습니다. 찜과 열람 이력은 로그인 없이 localStorage에 영속화했습니다.
지도 API 키가 노출되지 않도록 서버 프록시 엔드포인트를 두고 이미지 바이너리만 내려보냅니다. 키가 없거나 호출이 실패하면 OpenStreetMap으로 자동 폴백합니다.
크롤링은 매물 유형별로 모듈을 나눠 한 유형이 실패해도 나머지는 살아남게 했고, 5분 TTL 메모리 캐시로 요청 빈도를 낮췄습니다. 정적 지도 이미지에는 24시간 HTTP 캐싱을 걸었습니다.
결제 시스템 없이 후원자를 구분해야 해서, Buy Me a Coffee Webhook으로 후원 이벤트를 받아 서버에 이메일을 등록하고 클라이언트가 인증하면 새로고침 제한이 풀리는 흐름을 만들었습니다.

프레임워크 의존성 · 순수 JS 상태 관리

5분

TTL 캐시 · 지도 24시간 HTTP 캐싱

OSM

지도 키 미설정·실패 시 자동 폴백