[JavaScript] 중간 프로젝트 - 동물앨범 만들기

아래 강의를 수강하며 배운 내용을 정리한 글입니다

[한 번에 끝내는 자바스크립트: 바닐라 자바스크립트로 SPA 개발까지 - 효빈] https://inf.run/WfRmY

 

 

중간 프로젝트로 간단한 동물앨범을 만들어 보면서 복습해보겠습니다

 

 

html 구조

** CSS 설명은 생략합니다

[전체.펭귄.코알라.판다] 탭으로 나누어 콘텐츠를 분류하겠습니다

<div id="app">
  <div class="tab-bar">
    <a href="/"><div>전체</div></a>
    <a href="/penguin.html"><div class="clicked">펭귄</div></a>
    <a href="/koala.html"><div>코알라</div></a>
    <a href="/panda.html"><div>판다</div></a>
  </div>
  <div class="content">콘텐츠</div>
</div>
<script src="./src/penguin.js"></script>

 

 

데이터 호출 및 사용

프로젝트에 사용할 데이터는 https://animal-api-two.vercel.app/ 에서 가져와 사용하고,

template 배열에 img 태그들을 저장하여 $content에 추가해줍니다

const API_URL = "https://animal-api-two.vercel.app/";
const $content = document.querySelector("div.content");
let template = [];

const getData = async () => {
  let res = await fetch(API_URL);
  try {
    if (res) {
      let data = await res.json();
      data.photos.forEach((element) => {
        template.push(`<img src="${element.url}" alt="${element.name}" />`);
      });
      $content.innerHTML = template.join("");
    }
  } catch (error) {
    console.log(error);
  }
};

getData();

 

 

그럼 다음과 같이 화면에 이미지 리스트가 보여집니다

 

 

탭별 처리

각 탭을 눌렀을 경우에는 해당하는 이미지만 불러와지도록 코드를 작성해줍니다

탭 별로 html, js 파일을 별도로 가지고 해당 탭을 클릭했을 때는 해당 동물을 불러오는 코드가 작성된 js 파일이 불러와지도록 선언합니다

 

 

아래는 koala.html 과 koala.js 파일의 예시입니다

클릭된 탭의 div에 clicked class를 부여하여 구분을 주고, 하단에는 koala.js 스크립트를 불러오도록 선언하였습니다

<div id="app">
  <div class="tab-bar">
    <a href="/"><div>전체</div></a>
    <a href="/penguin.html"><div>펭귄</div></a>
    <a href="/koala.html"><div class="clicked">코알라</div></a>
    <a href="/panda.html"><div>판다</div></a>
  </div>
  <div class="content"></div>
</div>
<script src="./src/koala.js"></script>

 

 

koala.js 에서는 https://animal-api-two.vercel.app/koala 에서 데이터를 가져와 보여줍니다

const API_URL = "https://animal-api-two.vercel.app/";

const $content = document.querySelector("div.content");
let template = [];

const getData = async (name) => {
  let res = await fetch(`${API_URL}${name}`);
  try {
    if (res) {
      let data = await res.json();
      data.photos.forEach((element) => {
        template.push(`<img src="${element.url}" alt="${element.name}" />`);
      });
      $content.innerHTML = template.join("");
    }
  } catch (err) {
    console.log(err);
  }
};

getData("penguin");