인프런 커뮤니티 질문&답변

1. 현재 제가 동물 앨범 만들기 전체 파일 구조와 index.html 코드는 이렇게 작성하였으며, 강의 내용과 동일하게 작성하였습니다

2. api.js 코드와 TabBar.js 코드입니다. 강의 내용과 동일하게 작성하였습니다.

3. content.js 코드와 index.js 코드를 작성하였습니다.

4. 마지막으로 App.js 코드를 작성하였지만, 동물 사진이 웹 화면에 출력이 되지 않고 있습니다!

import TabBar from "./components/TabBar.js";
import Content from "./components/Content.js";
import { request } from "./components/api.js";

export default function App($app) {
  this.state = {
    currentTab: window.location.pathname.replace("/", "") || "all",
    photos: [],
  };

  //tabBar
  const tabBar = new TabBar({
    $app,
    initialState: this.state.currentTab,
    onClick: async (name) => {
      history.pushState(null, null, `/${name}`);
      this.updateContent(name);
    },
  });

  //content
  const content = new Content({
    $app,
    initialState: [],
  });

  //state
  this.setState = (newState) => {
    this.state = newState;
    tabBar.setState(this.state.currentTab);
    content.setState(this.state.photos);
  };

  this.updateContent = async (tabName) => {
    console.log(tabName);
    const name = tabName === "all" ? "" : tabName;

    const photos = await request(name);
    this.setState({
      ...this.state,
      currentTab: tabName,
      photos: photos,
    });
  };

  window.addEventListener("popstate", () => {
    this.updateContent(window.location.pathname.replace("/", "") || "all");
  });

  const init = async () => {
    this.updateContent(this.state.currentTab);
  };
  init();
}