웹 프론트 Pan Zoom 개발기
서론 지금 다니는 회사에서는 위성영상을 인공지능으로 분석해 사용자들에게 정보를 제공해주는 제품을 만드는 일을 한다. 그 중 최근 위성영상을 세그멘테이션하는 툴을 만들게 되었다. 위성영상을 확대/축소하고 이동을 하는 기능이 어려울거라 생각했지만 기존에 한번 비슷한 툴을 만들었기에 코드를 어느정도 가져오면 되겠지 싶었다. 하지만 마음대로 되지 않았고 공식(?)을 정리하고 기록해야 할 필요성을 느껴 작성하게 되었다. 요구사항 먼저 요구사항중에 줌과 이동 기능이 있었다. 다만 줌을 할때에는 마우스 포인터를 기준으로 잡고 줌인 / 아웃을 해야했다.(GIF 참조) 그리고 이동은 여느 프로그램처럼 드래그로 이동을 하면 되었다. ZOOM 먼저 어려울것 같은 줌부터 해결해보았다. 이걸 어떻게 구현해야하나 고민하고 있을 ..
CORS란? cors란 cross origin resouce sharing의 줄임말로 다른 도메인에 요청을 보낼수 있게 하는 표준 규약이다. 좀 더 간단하게 설명하자면 내 도메인이 foo.com일 때 bar.com에게 요청을 보낼 수 있게 하는 것이다. cors의 기본적인 형태는 다음과 같다. Request GET /resources/access-control-with-get/ HTTP/1.1 Host: aruner.net User-Agent: Mozilla/5.0 (Macintosh; U; Intel Mac OS X 10.5; en-US; rv:1.9.1b3pre) Gecko/20081130 Minefield/3.1b3pre Accept: text/html,application/xhtml+xml,app..