[JavaScript] 클릭 시 새로운 유저 불러오기

아이콘을 클릭할 때마다 해당 유저의 정보를 가지고 오고 random user를 클릭하면 새로운 유저들을 가지고 오도록 만들었습니다.

 

파일 구조

 

getElement.js

요소 지정  모듈

먼저 getElement.js에서 요소를 지정해주기 전에 만약에 요소가 없다면 error문을 반환시킵니다.

const getElement = (selection) =>{
    const element = document.querySelector(selection);
    if(element) return element;
    throw new Error('없는 요소입니다.')
}

export default getElement;

 

 

fetchUser.js

유저데이터 모듈

 url에 사용자 정보를 제공하는 api를 가져오고 fetch를 통해 네트워크 요청을 보내고 respone.json으로 응답 데이터를 JSON 형식으로 파싱합니다.  

const URL = 'https://randomuser.me/api/';

const getUser = async () => {
    const response = await fetch(URL);
    const data = await response.json();
    console.log(data);
    const person = data.results[0];
    
     person 객체에서 {}안에 있는 속성 값을 추출해서 각각 변수에 할당
    const {phone, email} = person;
    const {large: image} = person.picture; // large는 무슨 말인지 보기 어려우니 image으로 바꾼다.
    const {password} = person.login;
    const {first, last} = person.name;
    const {
        dob : {age} // 분할 할당 객체라고 하는데 `person.dob` 객체에서 `age` 속성 값을 추출하고, `age` 변수에 할당한다.
    } = person;
    const {
        street : {number, name}
    } = person.location;
    return {
        image,
        phone,
        email,
        password,
        age,
        street: `${number} ${name}`,
        name: `${first} ${last}`,
    }
}

export default getUser;

 

 

displayUser.js

유저 정보 띄우는 모듈

 이미지, 제목, 내용, 버튼 요소를 선택하여 변수에 할당한 후 fetchUser에서 반환하는 데이터를 인수로 넣어서 호출합니다.

 displayUser에서 각 요소에 title, value, bnts  선언하고 bnts를 클릭하면 title, value가 바뀌고 btns에 있는 클래스가 지워지고 클릭한 btn에 active가 생깁니다.

// 유저를 표시
import getElement from "./getElement";


const userImage = getElement('.user-img');
const title = getElement('.user-title');
const value = getElement('.user-value');
const btns = [...document.querySelectorAll('.icons')];

const displayUser = (person) => {
    userImage.src = person.image;
    value.textContent = person.name;
    title.textContent = 'My name is';
    removeActive(btns);
   
    btns.forEach((btn) => {
        const label = btn.dataset.label;
        btn.addEventListener('click', () => {
            title.textContent = 'my ${labelr} is';
            value.textContent = person[label];
            removeActive(btns);
            btn.classList.add('active');
        })
    })
}

 

 

removeActive.js

모든 액션을 지우는 모듈

 btn에 active가 있는 css를 다 지웁니다. 

export default function removeActive(items) {
    items.forEach((btn) => btn.classList.remove('active'));
}