[VanillaJS] 고양이 사진첩 만들기(2)

❗❗  데브코스 30일차 (09.10)

 

어제에 이어 고양이 사진첩 만들기(2)를 진행했다.

어제 기본 로직을 모두 수행하여,

오늘은 API 로딩 처리, 현재 위치 경로 표시 및 경로 클릭시, 해당 경로로 옮기는 로직을 수행했다.

 

✅ 로딩 처리

API 통신시에 딜레이가 발생하면 기다리는 동안 화면에 로딩중임을 표시하는 로직을 이번에 학습하게 됐다.

일반적인 사이트 이용시 마우스 커서가 동글동글 돌아가는 것도 일종의 로딩 처리이다.

 

로직은 매우 간단하다.

1. API 컨트롤 하는 컴포넌트에서 state값에 로딩 표시를 의미하는 변수 추가(isLoading) 값이 true일때 로딩 처리 의미
2. API 요청 함수가 불릴때 해당 함수 안에서 API요청이 호출되기 전에 setState를 통해 isLoading값을 true로 바꿔줍니다. (로딩중 표시)
3. API 요청 종료후 setState를 통해 isLoading값을 false로 바꿔줍니다. (로딩끝 표시)
4. Loading을 처리하는 컴포넌트에서는 위의 로직에서 발생하는 setState(true, false)에 따라 원하는 이벤트 발생 여부 표시

//로딩 처리 컴포넌트

  $로딩컴포넌트.innerHTML = `
        <div class="content">
            <img style="width : 100%;" src="https://cdn.roto.codes/images/nyan-cat.gif" alt="Loading..." />
        </div>
      `;
    $로딩컴포넌트.style.display = this.state ? "block" : "none";

 

📖 학습한 내용

• VanillaJS
  • 고양이 사진첩 만들기(2)