awscheat sheetcomputer sciencecontainercrawlingdartdatabasedjangodockergitgolanggraphqlhrhttpiacjavakubernetesmapmonitoringnestjsnetworknodeooppythonsecurityserverlessstorageterraformttbkktypescript,javascriptuxvalidation
4000개의 지도 데이터를 느려보이지 않게 불러와서 로딩하기
떡볶이맵의 데이터가 점점 많아지면서 marker cluster용 api를 구축해야 했지만, 어떠한 라이브러리가 좋은지 파악하지 못했고 (내가 직접 구현할 수도 있고) best practice를 공부하지 못했기 떄문에 해당 작업을 잠시 뒤로 미루게 되었다. 하지만 전국 떡볶이 데이터가 1000개를 넘어가던 시점부터 쎄한 느낌이 들었고, 응답까지 상당히 많은 시간이 소요됐기 때문에 지도에 데이터가 늦게 떠서 상당히 불편했다. 페이지네이션을 적용한 이후인 현재 데이터를 4000개정도이다. 스크린샷 2021-10-22 오후 10 59 00 나름 기발한?생각으로 장소 데이터를 가져오는 api에 페이지네이션을 적용해보기로 했다. 테이블 형태의 페이지네이션 api라면 한번의 요청에서 limit만큼의 데이터를 받으면 될 일이지만, 지도에서는 모든 데이터를 불러와야 하기 때문에 아래와 같은 api 시나리오를 구성했다. 해당 지도 bound내의 count를 가져오는 api…
홈서버가 죽었을때 슬랙으로 모니터링하기
문제점 떡볶이맵의 백엔드 서버는 홈서버에서 운영되고 있기 때문에 해당 서버의 헬스체크는 홈서버 내에서 이루어질 수 없었고, 이로 인해 정전 등의 이유로 컴퓨터가 꺼지는 등의 장애 상황을 신속하게 파악하기 힘들었습니다. 해결방안 이러한 문제점을 해결하기 위해 외부에서 홈서버의 건강상태를 체크해주는 API를 만들어야 했습니다. 떡볶이맵 서버와 상관없는 홈서버 자체의 API를 만들어서 헬스체크를 할 수도 있었지만, 좀더 다양한 상황에 유연하게 대처가 가능하도록 떡볶이맵 클라이언트에서 api 요청시에 실패하는 경우에 모니터링을 받는 식으로 구축을 하고 싶었습니다. 두가지 방식이 생각이 났는데, sentry를 frontend에 연동하는 방법이 있고, 다른 하나는 api 요청 실패시 serverless api를 통해 슬랙으로 노티를 받는 방법이 있었습니다. sentry vs slack sentry를 사용하는건 간단하지만 실시간으로 noti를 받으려면 team plan…
문득 떡볶이가 먹고싶을때, 이곳을 방문하라
10주전 새로운 토이프로젝트가 뭐가 있을까 고민하다가 1주일에 한번은 먹어야 하는 떡볶이를 아이템으로 한 떡볶이맵을 만들어 보기로 결심했다. 도메인을 먼저 정하는게 중요했는데, 떡볶이의 영어발음인 tteokbokki는 너무 길고, 한국인이 저 철자를 다 외우는 사람이 많지는 않다고 생각되어 ttbkk.com라는 간단한 도메인을 구입했다. (12달러로 .com치고는 매우 저렴했다) iitc라는 지도 관련 오픈소스를 알고 있었기 때문에, 여기에서 쓰이는 코드를 활용하고자 leaflet이라는 map 라이브러리를 사용해보기로 했고, 기존에 익숙하게 사용하던 react와 요즘 대세?인 recoil을 도입해보기로 했다. typescript는 지도 라이브러리를 사용하기에 매우 불편했다... 이건 js인가 ts인가... 한국은 현재 국외로 지도반출이 불가하여, 구글맵에서는 9호선 데이터 등의 최신정보가 반영되어 있지 않아서 naver맵이나 kakao맵을 사용해야 했다. 하지만 leaflet…
세상의 모든 주소를 세 단어에 담다
what3words란? what3words (W3W)는 전 세계 지도 상의 스팟(3m x 3m)을 3개의 무작위 단어로 표현한 좌표체계입니다. 이 기능을 사용하면 마이크로 단위의 장소 공유와 주소가 없는 지점도 세 단어 주소로 공유/검색이 가능합니다. 현재 27개 언어로 W3W 세단어 주소가 제공 중이며, 카카오에서도 what3words와의 제휴를 통해 한글 W3W 주소체계를 서비스 하기 시작했습니다. image API KEY 발급 what3words를 사용하기 위해서는 https://accounts.what3words.com/ko/register에서 API KEY를 발급 받아야 합니다. image pip 패키지 설치 공식 문서는 https://docs.what3words.com/wrapper/python/에 있습니다. what3words에서는 pip 패키지를 지원하여 python에서 매우 편리하게 이 기능을 사용할 수 있습니다. 위경도 <-> W3W 변환 파이썬 코드로 what…
0) 계기 어느날 저희 아빠가 저에게, 아빠 : “이게 경기도 번지수를 보여주는 사이트인데, 일정 구역을 프린트해서 보고 싶어.” 아들 : “컴퓨터로 이렇게 잘 보이는데 왜 뽑아야되나요?” 아빠 : “어르신들과 같이 보는데 노트북으로 보여드리기는 그렇고, 전지로 뽑아가고 싶어.” 아들 : “네… 오늘 안에 처리해드리죠.” 해서 크롤러를 만들게 되었습니다. 1) 정보수집 보통의 지도 서비스에서는 지도 데이터를 각각의 작은 타일로 구성되어 있습니다. 따라서 그 작은 타일들을 전부 다운로드해서 하나의 이미지로 만드는 작업을 하면 됩니다. 일단 경기도부동산포털의 지도에서 타일 데이터(map tile)를 어떤 식으로 가져오는지 찾아봅시다. image 로딩과 동시에 페이지 검사를 들어가서 network 탭을 살펴보면, 아래와 같은 결과가 나옵니다. image 예상한대로 맵 타일을 여러 개 받아오는 것이 보이네요, 좀더 자세하게 확인하기 위해 하나를 클릭해봅시다. image image…