Nuxt3에서 Web beacon만들기

안녕하세요 Lovefield입니다.

Web beacon은 보통 사용자가 이메일을 읽었는지 확인하는 용도로 많이 사용하는 기술입니다. 1x1px 크기의 이미지를 심어두고 해당 이미지가 로드되었는지를 확인하는 방법입니다. 생각보다 어렵지 않은 기술이므로 짧게 작성해 보겠습니다.

먼저 Server Routes 기능을 이용해야 합니다. ~/server/routes/beacon.ts를 생성해 줍니다.

export default defineEventHandler(async (event) => {
	
});

파일이 생성되었다면 “http://localhost:3000/beacon” 경로로 접근이 가능해집니다. 정보 구성을 URL로 한다면 파일 내에서 getRouterPrams(event)을 통해 params 데이터를 얻을 수 있으며, 정보 구성을 쿼리로 한다면 getQuery(event)을 통해 query 데이터를 얻을 수 있습니다.

export default defineEventHandler(async (event) => {
    const data = getQuery(event); // or getRouterPrams(event)
});

이후 데이터를 가공하고, API 통신을 하거나 파일을 만들어 보관하는 방식을 사용하시면 됩니다. 각자 상황에 맞는 방식들이 존재 하기에, 해당 로직에 대한 설명은 넘어가고 beacon URL이 호출되었을 때 띄워줘야 하는 1x1px 크기의 이미지 정보를 만드는 방법을 서술하겠습니다.

먼저 데이터의 정보가 올바르지 않다면 404를 띄워줘야 합니다.

export default defineEventHandler(async (event) => {
    const data = getQuery(event); // or getRouterPrams(event)

    if(data.email === undefined){
        setResponseStatus(event,404);
    }else{
    }
});

setResponseStatus 함수를 이용해 http status code를 404로 변환해 줍니다.

다음은 이미지 정보를 생성해야 합니다.

export default defineEventHandler(async (event) => {
    const data = getQuery(event); // or getRouterPrams(event)

    if(data.email === undefined){
        setResponseStatus(event,404);
    }else{
        const imageData = new Uint8Array([137, 80, 78, 71, 13, 10, 26, 10, 0, 0, 0, 13, 73, 72, 68, 82, 0, 0, 0, 1, 0, 0, 0, 1, 8, 6, 0, 0, 0, 31, 21, 196, 137, 0, 0, 0, 1, 115, 82, 71, 66, 0, 174, 206, 28, 233, 0, 0, 0, 13, 73, 68, 65, 84, 24, 87, 99, 248, 255, 255, 255, 127, 0, 9, 251, 3, 253, 5, 67, 69, 202, 0, 0, 0, 0, 73, 69, 78, 68, 174, 66, 96, 130]);
        const imageBlob = new Blob([imageData], { type: "image/png" });

        setResponseHeader(event, "content-type", "image/png");
        setResponseHeader(event, "content-length", imageBlob.size);

        return imageBlob;
    }
});

new Uint8Array()를 이용해 데이터를 하나 생성했습니다. 해당 데이터는 흰색으로 이루어진 1x1px 크기의 이미지정보입니다. 해당 이미지 정보를 이용해 Blob 객체를 생성합니다. 그다음 setResponseHeader를이용해 컨텐츠의 타입과 컨텐츠의 크기를 지정해 줍니다. 이제 return을 통해 Blob 데이터를 반환하면 페이지에서 1x1px의 이미지가 뜨는 것을 확인할 수 있습니다.