Portfolio


onClick: async (id) => {
      //클릭한 경로 외에 paths를 날려줌.
      const currentPaths = this.state.paths;
      if (id) {
        const pathIndex = currentPaths.findIndex((path) => path.id === id);
        const nextPaths = currentPaths.slice(0, pathIndex + 1);

        if (currentPaths.length === nextPaths.length) {
          return;
        }

        this.setState({
          ...this.state,
          paths: nextPaths,
        });
      } else {
        if (currentPaths.length === 0) {
          return;
        }
        this.setState({
          ...this.state,
          paths: [],
        });
      }
      await fetchNodes(id);
    },


this.validateState = state => {
    if (!Array.isArray(state)) {
      throw new Error("state must be Array");
    }
    state?.forEach(path => {
      if (typeof path.id !== "string") {
        throw new Error('id must be a string');
      }
      if (typeof path.name !== "string") {
        throw new Error('name must be a string');
      }
      if (typeof path.type !== "string") {
        throw new Error('type must be a string');
      }
    })
  }


window.addEventListener("keydown", (e) => {
  if (e.key === "Backspace") {
    onPrevClick();
  }
});


onPrevClick: async () => {
      const nextPaths = [...this.state.paths];
      nextPaths.pop();
      this.setState({
        ...this.state,
        paths: nextPaths,
      });
      if (this.state.isLoading) {
        return;
      }
      if (nextPaths.length === 0) {
        await fetchNodes();
      } else {
        await fetchNodes(nextPaths[nextPaths.length - 1].id);
      }
    },
  });

optimize setState & validate State

🚩 목표

💡 setState 최적화

✔️ state 정합성 체크

◀️ 백스페이스 키 활성화