[항해 플러스 프론트엔드 3기] 1주차 WIL

1. 문제 (과제, 프로젝트를 진행하면서 부딪혔던 기술적인 문제)

이번 주차를 지나며 겪었던 문제가 무엇이었나요?

 

이번 주에는 바닐라 JavaScript로 SPA를 구현하면서 클라이언트 사이드 라우터를 만드는 데 고민이 많았습니다. URL 경로에 따라 각기 다른 페이지를 동적으로 로드하는 구조를 만들었지만, 라우터를 어디서 선언하고, 각 페이지에 맞게 addRoute를 어떻게 효율적으로 관리할지에 대한 방법을 고민하게 되었습니다.

class Router {
  constructor() {
    this.routes = {};
    window.addEventListener("popstate", this.handlePopState.bind(this));
  }

  addRoute(path, handler) {
    this.routes[path] = handler;
  }

  navigateTo(path) {
    history.pushState(null, "", path);
    return this.handleRoute(path);
  }

  handlePopState() {
    this.handleRoute(window.location.pathname);
  }

  async handleRoute(path) {
    let handler = this.routes[path] || this.routes["*"];
    if (handler) {
      await handler();
    } else {
      console.log("404 Not Found");
    }
  }

  renderPage(page) {
    document.getElementById("root").innerHTML = page.render();
    page.init();
  }
}

2. 시도

문제를 해결하기 위해 어떤 시도를 하셨나요?

 

문제를 해결하기 위해, 각 페이지별로 파일을 분리하여 관리하고, addRoute를 이용해 라우터와 연동하도록 설정했습니다. 예를 들어, 로그인 상태에 따라 /profile과 /login 페이지가 다르게 동작하도록 구현했습니다.

router.addRoute("/profile", () => {
  const user = User.getUser();
  if (!user) {
    router.navigateTo("/login");
    return;
  }
  const profilePage = new ProfilePage();
  document.getElementById("root").innerHTML = profilePage.render();
  profilePage.init();
});

3. 해결

문제를 어떻게 해결하셨나요?

 

각 페이지를 모듈화하면서 라우터와의 의존성을 줄이는 방향으로 해결했습니다. 각 페이지는 자체적으로 render()와 init() 함수를 가지도록 하고, 라우터에서는 단순히 해당 페이지를 불러와서 전환하는 방식으로 구현했습니다.

router.addRoute("*", () => {
  document.getElementById("root").innerHTML = ErrorPage();
});

 

4. 알게된 것

문제를 해결하기 위해 시도하며 새롭게 알게된 것은 무엇인가요?

 

SPA 환경에서 라우터와 페이지를 모듈화하는 것이 생각보다 더 중요하다는 것을 배웠습니다. 이를 통해 코드의 가독성도 좋아지고, 각 부분이 독립적으로 동작하게 되어 유지보수 측면에서도 이점이 많다는 것을 알게 되었습니다.

---

Keep : 현재 만족하고 계속 유지할 부분

이번 주를 마무리 하며 나에게 만족했던 부분은 무엇인가요?

 

과제를 진행하며 일정 시간 내에 해결하고, 라우터와 페이지 모듈화를 통해 효율적인 구조를 구현한 점이 만족스러웠습니다.

Problem : 개선이 필요하다고 생각하는 문제점

이번 주를 마무리 하며 개선이 필요하다고 생각했던 문제점은 무엇인가요?

 

주말에 몰아서 과제를 하다 보니, 테스트 코드가 통과된 이후 더 개선하고 싶은 부분들이 있었는데, 막상 평일에 시간이 부족해 그 점을 실행에 옮기지 못한 것이 아쉬웠습니다.

Try : 문제점을 해결하기 위해 시도해야 할 것

이 문제점을 해결하기 위해 다음 한 주간 시도 할 것은 무엇인가요?

 

다음 주에는 더 나은 코드 작성을 위해 평일에도 조금씩 시간을 쪼개서 작업을 진행해보고자 합니다. 코드 개선 아이디어가 있을 때 바로 반영할 수 있도록 관리하는 습관을 들이려고 합니다.