[VanillaJS] 프로그래머스 과제 테스트를 연습하면서 배운 웹 페이지 구조

250x250

Notice

Recent Posts

Recent Comments

Link

juyeong's github

« 2024/11 »
일	월	화	수	목	금	토
					1	2
3	4	5	6	7	8	9
10	11	12	13	14	15	16
17	18	19	20	21	22	23
24	25	26	27	28	29	30

Tags more

Archives

Today

Total

관리 메뉴

🖥 dev-ruby

[VanillaJS] 프로그래머스 과제 테스트를 연습하면서 배운 웹 페이지 구조 본문

javascript

[VanillaJS] 프로그래머스 과제 테스트를 연습하면서 배운 웹 페이지 구조

ruby_s 2022. 5. 11. 13:07

728x90

SMALL

이번에 우테캠 5기 2차 과제테스트를 준비하기 위해 프로그래머스에 고양이 사진첩 애플리케이션 이라는 과제테스트를 풀어보았다. 지난번에 고양이 사진 검색하기를 했었는데 그때 바닐라JS가 처음이라 진짜 아무것도 모르고 이것저것 뒤지면서 구현했더니 머리에 남아있는게 없다.. 바닐라 JS자체가 너무 재미없어서 꾸역꾸역 해서 그런것도 있는 것 같다 ㅎ
뭐 쨋든 서론은 이만하고,

이번 포스팅에서는 과제테스트를 딱 열었을 때 아무것도 없는 생 파일에 어떻게 구조를 구성해나가면 될 지 알아볼 것이다.

먼저 처음엔 index.html이 있을 것이다. 자바스크립트를 구현하면서 해당 파일안에 요소가 계속 추가 될 것이다.
html파일에서 할 일은 js파일을 연결해주면 된다.

<html>
  <head>
    <title>고양이 사진첩!</title>
    <link rel="stylesheet" href="./src/styles/style.css" />
  </head>
  <body>
    <h1>고양이 사진첩</h1>
    <main class="App"></main>
    <script src="src/js/index.js" type="module"></script>
  </body>
</html>

script태그는 <head>안에 넣어도, <body>안에 넣어도, <html>안에 넣어도 상관 없다. 다만, html의 body태그보다 js파일일 먼저 컴파일될 시 js파일은 body안의 태그들을 읽지 못할 것이다. 우리가 DOM을 조절하려면 조절할 요소들보다 아래 쪽에 script를 연결해줘야 한다.
여기서 또 중요한 게 있다. script태그의 속성에 보면 type="module"이 보인다. export/import방식으로 구현하고 싶다면 이 속성을 꼭 추가해줘야 한다.

이제 js파일을 하나씩 생성해보자. 나는 아래처럼 파일구조를 구성했다.

컴포넌트 분리는 선택이 아닌 필수다 !

1. index.js

import App from "./App.js";
new App(document.querySelector(".App"));

가장 먼저 해야 할일은 메인 자바스크립트 파일(App,js)에 DOM요소를 연결해주는 것이다. import로 App을 가져온 후, new 연산자로 App객체안 에 최상단의 App DOM요소를 넣어주면 된다.

2. api.js

const API_END_POINT =
  "https://zl3m4qq0l9.execute-api.ap-northeast-2.amazonaws.com/dev";

export const request = async (nodeId) => {
  try {
    const response = await fetch(`${API_END_POINT}/${nodeId || ""}`, {
      method: "GET",
    });
    if (response.ok) return response.json();
    else throw new Error("error");
  } catch (e) {
    throw new Error("error");
  }
};

한번 구현해보니까 api를 요청하는 부분을 처음에 구현해놓는 것이 편한 것 같다고 느꼈다. 그래서 다음은 api를 요청하는 파일이다.

공통 url은 전역변수로 두었다. 네이밍(API_END_POINT)은 다른 사람들 코드를 참고했다.
기본적으로 api요청 함수는 async await함수로 구현하자. try catch문으로 예외 처리도 해주자.
Promise가 올바르게 전달 받아졌다면 response를 json으로 리턴해주자.
(에러를 뱉을 때는 throw로 뱉어줄 것)

3. App.js

import { request } from "../api/api.js";
import Breadcrumb from "./Breadcrumb.js";
import Nodes from "./Nodes.js";
import ImageView from "./ImageView.js";
import Loading from "./Loading.js";

const cache = {};

export default function App($app) {
    this.state = {
        isRoot: true,
        nodes: [],
        depthStack: [],
        currentPath: null,
        selectedFilePath: null,
        isLoading: true,
    };
  
    this.setState = (nextState) => {
        this.state = nextState;
    };
  
    this.init = async () => {
        try {
            const rootNodes = await request(null);
            this.setState({
            ...this.state,
            nodes: rootNodes,
            });
        } catch (e) {
            throw new Error(e);
        }
    };
    this.init();
}

초기 App이다.

this.state: `this.${변수명}`이런 방식으로 지역변수를 선언해주면 된다. state안에 필요한 요소들을 하나씩 추가해주는 방식으로 구현한다.

this.setState: 지역변수들이 변경될 때마다 각 컴포넌트에 변경사항을 반영해주기 위해 생성한 함수이다.

this.init: 첫 초기 화면을 구성하기 위해 만든 함수이다.
1. await request()로 api요청을 받아온다.
2. this.setState()로 변경사항을 반영해준다. -> ...this.state: 기존 state는 그대로 반영하고 nodes는 rootNodes로 변경하도록.

4. Nodes.js

export default function Nodes({ $app, state, onClick, onBackClick }) {
  this.state = state;
  this.onClick = onClick;
  this.onBackClick = onBackClick;

  this.setState = (nextState) => {
    this.state = nextState;
    this.render();
  };

  const nodes = document.createElement("div");
  nodes.className = "Nodes";

  this.render = () => {
    const template = this.state.nodes
      .map((node) => {
        return `
        <div class="Node" data-node-id="${node.id}">
          <img src="./assets/${node.type.toLowerCase()}.png"
          data-node-id="${node.id}"/>
          <div>${node.name}</div>
        </div>
      `;
      })
      .join("");

    const backTemplate = `
      <div class="Node">
        <img src="./assets/prev.png" />
      </div>`;

    nodes.innerHTML = this.state.isRoot
      ? template
      : `
      ${backTemplate}
      ${template}
    `;

    $app.appendChild(nodes);
  };

  nodes.addEventListener("click", (e) => {
    const { nodeId } = e.target.closest(".Node").dataset;
    if (nodeId) {
      const selectedNode = this.state.nodes.find((node) => node.id === nodeId);
      if (selectedNode) {
        this.onClick(selectedNode);
      }
    } else {
      this.onBackClick();
    }
  });

  this.render();
}

그냥 최종 코드를 붙이겠다 이 컴포넌트도 마찬가지로 상단에 this.${변수명}으로 필요한 변수들을 정의한다.

여기서 컴포넌트 의존도를 줄이기 위해 매개변수로 받아온 $app, state 같은 변수들을 this.state = state 처럼 지역변수로 만들어 주도록 한다.

여기도 this.setState가 보이는데, Nodes의 setState는 App.js에서 호출된다. App.js의 setState안에서 호출된다. App에서 상태가 변경되면 setState가 호출되고 그 안에서 nodes.setState({변경된 변수}) 이렇게 호출된다. 그럼Nodes의 지역변수인 this.state에 App에서 변경되었던 nextState가 반영된다.

아래 참고.

  this.setState = (nextState) => {
    this.state = nextState;
    nodes.setState({
      isRoot: this.state.isRoot,
      nodes: this.state.nodes,
      currentPath: this.state.currentPath,
    });
  };

그리고 꼭 컴포넌트 안의 지역변수가 변경되었다면 this.render()를 다시 호출해줘야 html에 반영이 된다. 따라서 this.setState에서 변경사항이 다 반영된 후 render()를 호출해주도록 한다. 아 그리고 변경되었을 때만 호출 되는게 아니라 초기에도 호출이 필요하기 때문에 최하단에 this.render(); 도 추가해줘야 한다.

  this.setState = (nextState) => {
    this.state = nextState;
    this.render();
  };

render에서는 해당 컴포넌트에 관련된 추가해줘야 할 요소들을 조작한다. 조작만 하면 안된다. 우리는 new App안에 $app으로 최상단 DOM요소를 전달 받았기 때문에 각 컴포넌트마다 $app을 전달해줄 필요가 있다. $app에 추가해줄 요소들을 appendChild로 추가해준다.

$app.appendChild(nodes);

이벤트 리스너의 경우 웬만하면 render함수 안에 정의하지 말고 밖에 정의하도록 하자. -> 이벤트 최적화

nodes.addEventListener("click", (e) => {
    const { nodeId } = e.target.closest(".Node").dataset;
    if (nodeId) {
      const selectedNode = this.state.nodes.find((node) => node.id === nodeId);
      if (selectedNode) {
        this.onClick(selectedNode);
      }
    } else {
      this.onBackClick();
    }
  });

이런식으로 다른 컴포넌트들도 구성하면 된다 ! 아래에 전체 코드를 첨부하겠다.

index.js

import App from "./App.js";
new App(document.querySelector(".App"));

api.js

const API_END_POINT =
  "https://zl3m4qq0l9.execute-api.ap-northeast-2.amazonaws.com/dev";

export const request = async (nodeId) => {
  try {
    const response = await fetch(`${API_END_POINT}/${nodeId || ""}`, {
      method: "GET",
    });
    if (response.ok) return response.json();
    else throw new Error("error");
  } catch (e) {
    throw new Error("error");
  }
};

App.js

import { request } from "../api/api.js";
import Breadcrumb from "./Breadcrumb.js";
import Nodes from "./Nodes.js";
import ImageView from "./ImageView.js";
import Loading from "./Loading.js";

const cache = {};

export default function App($app) {
  this.state = {
    isRoot: true,
    nodes: [],
    depthStack: [],
    currentPath: null,
    selectedFilePath: null,
    isLoading: true,
  };

  const loading = new Loading({ $app, initialState: this.state.isLoading });

  const breadcrumb = new Breadcrumb({
    $app,
    state: this.state.depthStack,
    onClick: (index) => {
      // 루트 노드를 선택한 경우
      if (index === null) {
        this.setState({
          ...this.state,
          isRoot: true,
          depthStack: [],
          nodes: cache["root"],
          selectedFilePath: null,
        });
        return;
      }

      // 현재 path를 선택한 경우
      if (index === this.state.depthStack.length) {
        return;
      }

      // 그 외
      const depthStack = this.state.depthStack.slice(0, index + 1);

      this.setState({
        ...this.state,
        depthStack: depthStack,
        nodes: cache[depthStack[depthStack.length - 1]].id,
        selectedFilePath: null,
      });
    },
  });

  const nodes = new Nodes({
    $app,
    state: this.state,
    onClick: async (node) => {
      try {
        this.setState({
          ...this.state,
          isLoading: true,
        });
        if (node.type === "DIRECTORY") {
          if (cache[node.id]) {
            this.setState({
              ...this.state,
              isRoot: false,
              depthStack: [...this.state.depthStack, node],
              nodes: cache[node.id],
            });
          } else {
            const nextNodes = await request(node.id);
            this.setState({
              ...this.state,
              isRoot: false,
              depthStack: [...this.state.depthStack, node],
              nodes: nextNodes,
            });
            cache[node.id] = nextNodes;
          }
        } else if (node.type === "FILE") {
          this.setState({
            ...this.state,
            selectedFilePath: node.filePath,
          });
        }
      } catch (e) {
        throw new Error(e.message);
      } finally {
        this.setState({
          ...this.state,
          isLoading: false,
        });
      }
    },
    onBackClick: async () => {
      try {
        this.setState({
          ...this.state,
          isLoading: true,
        });
        this.state.depthStack.pop();
        const prevId = this.state.depthStack.length
          ? this.state.depthStack[this.state.depthStack.length].id
          : null;

        if (prevId === null) {
          this.setState({
            isRoot: true,
            nodes: cache["root"],
            depthStack: this.state.depthStack,
          });
        } else {
          this.setState({
            ...this.state,
            isRoot: false,
            nodes: cache[prevId],
            selectedFilePath: null,
            depthStack: this.state.depthStack,
          });
        }
      } catch (e) {
        throw new Error(e.message);
      } finally {
        this.setState({
          ...this.state,
          isLoading: false,
        });
      }
    },
  });

  const imageView = new ImageView({ $app, state: this.state.selectedFilePath });

  this.setState = (nextState) => {
    this.state = nextState;
    nodes.setState({
      isRoot: this.state.isRoot,
      nodes: this.state.nodes,
      currentPath: this.state.currentPath,
    });
    breadcrumb.setState(this.state.depthStack);
    imageView.setState(this.state.selectedFilePath);
    loading.setState(this.state.isLoading);
  };

  this.init = async () => {
    try {
      const rootNodes = await request(null);

      this.setState({
        ...this.state,
        nodes: rootNodes,
      });
      cache["root"] = rootNodes;
    } catch (e) {
      throw new Error(e);
    } finally {
      this.setState({
        ...this.state,
        isLoading: false,
      });
    }
  };
  this.init();
}

Nodes.js

export default function Nodes({ $app, state, onClick, onBackClick }) {
  this.state = state;
  this.onClick = onClick;
  this.onBackClick = onBackClick;

  this.setState = (nextState) => {
    this.state = nextState;
    this.render();
  };

  const nodes = document.createElement("div");
  nodes.className = "Nodes";

  this.render = () => {
    const template = this.state.nodes
      .map((node) => {
        return `
        <div class="Node" data-node-id="${node.id}">
          <img src="./assets/${node.type.toLowerCase()}.png"
          data-node-id="${node.id}"/>
          <div>${node.name}</div>
        </div>
      `;
      })
      .join("");

    const backTemplate = `
      <div class="Node">
        <img src="./assets/prev.png" />
      </div>`;

    nodes.innerHTML = this.state.isRoot
      ? template
      : `
      ${backTemplate}
      ${template}
    `;

    $app.appendChild(nodes);
  };

  nodes.addEventListener("click", (e) => {
    const { nodeId } = e.target.closest(".Node").dataset;
    if (nodeId) {
      const selectedNode = this.state.nodes.find((node) => node.id === nodeId);
      if (selectedNode) {
        this.onClick(selectedNode);
      }
    } else {
      this.onBackClick();
    }
  });

  this.render();
}

Breadcrumb.js

export default function Breadcrumb({ $app, state, onClick }) {
  this.state = state;
  this.onClick = onClick;
  this.setState = (nextState) => {
    this.state = nextState;
    this.render();
  };

  this.$target = document.createElement("nav");
  this.$target.className = "Breadcrumb";
  $app.appendChild(this.$target);

  this.render = () => {
    if (this.state.length) {
      this.$target.innerHTML = `<div class="nav-item">root</div>
    ${this.state
      .map(
        (node, index) =>
          `<div class="nav-item" data-index="${index + 1}">${node.name}</div>`
      )
      .join("")}`;
    } else {
      this.$target.innerHTML = `<div>root</div>`;
    }
  };

  this.$target.addEventListener("click", (e) => {
    const { index } = e.target.closest(".nav-item").dataset;
    this.onClick(parseInt(index, 10) || null);
  });

  this.render();
}

ImageView.js

const IMAGE_PATH_PREFIX = `https://fe-dev-matching-2021-03-serverlessdeploymentbuck-t3kpj3way537.s3.ap-northeast-2.amazonaws.com/public`;

export default function ImageView({ $app, initialState }) {
  this.state = initialState;
  this.setState = (nextState) => {
    this.state = nextState;
    this.render();
  };

  this.$target = document.createElement("div");
  this.$target.className = "Modal ImageViewer";

  this.render = () => {
    this.$target.innerHTML = `
      <div class="content">
      ${this.state ? `<img src="${IMAGE_PATH_PREFIX}${this.state}" />` : ""}
      </div>
    `;
    this.$target.style.display = this.state ? "block" : "none";
  };

  this.$target.addEventListener("click", (e) => {
    e.target === this.$target["Modal"]
      ? this.$target.classList.remove("ImageViewer")
      : false;
    this.$target.innerHTML = "";
    this.$target.style.display = "none";
  });

  this.render();
  $app.appendChild(this.$target);
}

Loading.js

export default function Loading({ $app, initialState }) {
  this.state = initialState;

  this.$target = document.createElement("div");
  this.$target.className = "Loading Modal";
  $app.appendChild(this.$target);

  this.setState = (nextState) => {
    this.state = nextState;
    this.render();
  };

  this.render = () => {
    this.$target.innerHTML = `
        <div class="content">
            <img src="./assets/nyan-cat.gif"/>
        </div>
    `;

    if (this.state) this.$target.style.display = "block";
    else this.$target.style.display = "none";
  };
  this.render();
}

728x90

LIST

저작자표시

'javascript' 카테고리의 다른 글

[HTML/JS] dataset활용하기 (data-*) (0)	2022.05.10
net::ERR_ABORTED 404 (Not Found) 에러 해결 (0)	2022.05.10
[자바스크립트] 문자열 중 몇개가 다른 문자인지 개수 세기 \| 문자열 비교 (0)	2022.01.25
[자바스크립트] 객체(Object) 반복문 돌리는 법 (0)	2022.01.25
[자바스크립트] replace() 함수 \| 문자열에서 원하는 부분 바꾸기, 변경하기, 대체하기 \| 정규식으로 문자열 변환하기 (0)	2022.01.10

'javascript' Related Articles

🖥 dev-ruby

[VanillaJS] 프로그래머스 과제 테스트를 연습하면서 배운 웹 페이지 구조 본문

[VanillaJS] 프로그래머스 과제 테스트를 연습하면서 배운 웹 페이지 구조

1. index.js

2. api.js

3. App.js

4. Nodes.js

'javascript' 카테고리의 다른 글

티스토리툴바