JS 상에서 어트리뷰트에 객체 동적 할당

imgList

---

https://unsplash.com/documentation#get-a-random-photo

Unsplash API Documentation | Free HD Photo API | Unsplash

다음과 같이 API를 통해 이미지를 Unsplash 사이트에서 랜덤으로 가져오고, 해당 이미지를 클릭하였을 경우 이미지 관련 정보들이 담긴

팝업창으로 화면 상에 띄우도록 코드를 구현하였다.

for(let i = 0; i < data.length; i++) {
        imageLists.innerHTML += `
            <li class="image-list"
                data-user=${data[i].user}
                data-image=${data[i].urls.full}
            >
                <img src=${data[i].urls.full} alt=${data[i].alt_description}>
            </li>
        `
    }

이미지 요소를 클릭하였을 때 JS에서 동적으로 생성해둔 해당 이미지 요소의 어트리뷰트를 토대로 팝업창의 내용을 구성하려고 하였으나

데이터 내에 user 프로퍼티는 객체였고 해당 객체를 문자열 형태로 마크업에 저장하다 보니, 스크립트 상에서 사용할 수 있는 객체 형식이

아닌 Object 문자 그 자체로 저장되는 문제가 발생하였다.

 

해결

for(const img of imgs) {
        const {urls, alt_description, user} = img;
        const {name, instagram_username, profile_image: {medium}} = user;
        const li = document.createElement('li');

        li.classList.add('image-list');
        li.dataset.user = JSON.stringify({name, instagram_username, medium});
        li.dataset.image = `${urls.regular}`;
        li.innerHTML = `<img src="${urls.regular}" alt="${alt_description}">`;
        imageLists.appendChild(li);

        li.addEventListener('click', function() {
            const obj = {
                image: this.dataset.image,
                ...JSON.parse(this.dataset.user)
            }
            modal.classList.add('active');
            thumbnail.src = obj.image;
            profileImg.src = obj.medium;
            userName.textContent = obj.name;
            insta.textContent = obj.instagram_username;
        })
    }

요소의 어트리뷰트에 객체를 바인딩하기 위해서 코드를 다음과 같이 수정하였다.

1. fetch한 data의 프로퍼티가 많거나 중첩 객체일 경우에는 디스트럭쳐링 할당을 사용하여 변수화하여 식별되도록 한다.
2. 어트리뷰트에 향후 참조될 데이터를 적재하고 싶은 경우에는 HTMLElement.dataset을 사용한다.
3. 클라이언트로부터 이벤트가 발생하고 서버로 객체를 전송하려면 객체를 문자열화해야 된다. 이를 위해 JSON.stringify 메서드를 통해 객체를 JSON 포맷의 문자열로 변환하는 직렬화 과정이 필요하다.
4. 이벤트가 발생하면 클라이언트에서 어트리뷰트 dataset에 저장되어 있는 객체를 전송하는데, 이때 전송된 JSON 데이터는 문자열이다. 이 문자열을 객체로서 사용하려면 JSON.parse 메서드를 통해 문자열을 객체화하는 역직렬화 과정이 필요하다.