자바스크립트 이미지핑 기술 알아보기

자바스크립트를 사용하여 서버와 통신하는 다양한 방법이 존재합니다. 오늘은 이미지핑(image ping) 기술에 대하여 알아보고 어떻게 사용하는 예제를 통해 배워보려합니다.

# 이미지핑이란?

서버와의 통신을 확인할때 한번쯤 ping이란 명령어를 사용해보신 적 있으신가요? 예전에는 인터넷 속도나 연결상태를 확인하기 위해서 커맨드에서 자주 사용하던 명령어입니다. 만약 특정 ip에 ping을 사용하면 일정시간을 주기로 해당 ip에 통신하여 연결상태를 알려주는 역할을 하게됩니다.

오늘 알아볼 이미지핑 역시 이처럼 서버와 계속해서 통신하면서 이를 활용하여게 여러가지 용도로 사용할 수 있습니다.

! 이미지핑은 어떻게 사용하는가

코드는 매우 간단합니다. 접근할 주소를 img태그의 src 속성을 사용하여 연결하면 됩니다. 매우 간단하죠. 이런 방식은 script 또는 img 등의 태그를 사용해 비동기식 연결로 예전부터 사용되어왔습니다. 아래의 코드 역시 이미지핑으로 사용되는 코드입니다.

모습은 일반적인 img 태그 사용과 동일하죠. 다만 이미지를 불러와 사용하는 것과는 다른 목적으로 사용될 뿐입니다.

! 이미지핑을 사용하는 이유

장점이라면 클라이언트에서 비동기식 서버 통신을 위해 XHR 객체를 사용한다던가 복잡한 코드를 사용하지 않아도 되므로 매우 간결합니다. 게다가 CORS 이슈를 피하기 위해서도 사용되왔죠. 이미지핑은 서버에 전달할 데이터가 간결하다면 이 방법처럼 손쉬운 방법도 없을 것입니다. 또한 서버측에 전달하는 것 뿐만 아니라 response를 받아와 앞단에서 처리하는 것도 가능합니다. 다만 response 값이 이미지로 전달되므로 json 등의 데이터 전송은 script를 사용하는 것이 더 효과적입니다.

# 이미지핑 구현시 생각할 부분

이미지핑은 간결한 자바스크립트 함수를 즉시호출하여 실행하는 방법이 좋습니다. 또한 호출 후 반복사용하지 않는다면 img 엘리먼트를 생성 후 로딩 후에는 삭제하는 것도 방법입니다. 아래 예제는 이미지핑을 직접 만들어 구동하는 예제입니다.

만약 img 태그가 한번의 핑만 전달, 사용하는 경우 더 이상 사용할 필요가 없으면 아예 해당 태그를 지우는 것도 방법입니다. 아래의 코드를 추가하면 됩니다.

반대로 정해진 시간마다 계속해서 서버에 요청해야하는 경우 위 함수를 반복 실행할 필요가 있을 것입니다. 이 경우 setInterval()을 사용하여 원하는 시간 단위마다 핑을 전달하도록 코드 작성이 필요합니다.

setInterval() 아래 링크를 클릭 >
https://webisfree.com/2014-10-23/[자바스크립트]-일정-시간마다-반복-실행하는-함수-setinterval()-{}

# 서버측은 어떻게 구현되는가?

먼저 만들어진 이미지핑으로 접근된 url에 대하여 서버에서 응답할 수 있도록 스태틱한 파일에 대하여 라우팅 설정이 필요합니다. 라우팅 설정은 각각의 서버 언어마다 다르기 때문에 다른 설정이 필요합니다. 만약 Python의 경우 아래와 같이 작성될 것입니다.
@ app.py

또한 클라이언트의 이미지핑이 어떤 기능을 하느냐에 따라 서버측 코드 역시 달라지게됩니다. 만약 방문자의 로그 정보를 저장하기 위한 목적으로 사용된다면 ip주소, 방문일시 또는 현재 페이지 url 등을 데이터저장소에 저장할 수 있도록 해당 코드가 서버에 필요할 것입니다. 참고로 Python의 경우 requests 모듈을 사용하면 위와 같은 정보를 얻을 수 있죠.

! url 정보가 필요한경우

핑은 서버에 비동기식 이미지 파일로 전달되므로 핑에 담긴 url 정보는 보낸 이미지의 경로만 반환하게됩니다. 즉 내가 webisfree.com/best/ 위치에 있다해도 호출한 이미지의 경로만 가져오게됩니다. 물론 이를 해결하는 방법은 있습니다. 클라이언트에서 이미지핑을 전송할때 현재 위치를 스크립트 url의 쿼리스트링에 추가하여 함께 전달하는 방법을 사용할 수 있습니다. 먼저 현재 페이지의 URI를 가져오기 위해 location.path를 사용하고 이를 인코딩하여 쿼리스트링으로 서버에 전달합니다.

위 예제에서는 쿼리스트링에 전달하기 위해 base64로 변환하는 btoa() 함수를 사용했습니다. 인코딩 방법은 여러가지 방법이 있으므로 서버측에서 디코딩이 가능한 인코딩을 사용하면 됩니다.

# 마치면서

위에 사용한 이미지핑 방식은 코드가 짧고 특별한 내장함수 등을 필요로하지 않는 가장 쉽게 서버와 통신할 수 있는 방법 중 하나입니다. 다만 전달할 데이터가 많지 않아야 이상적이며 서버 역시 최소한으로 처리하여 부담을 최소화하는 것이 좋겠습니다.