프레임워크 없이 SPA 만들기 회고 WIL

anvel·2025년 3월 28일

프론트엔드 항해 플러스 항해99 항해플러스

항해 플러스

목록 보기

5/39

1. 문제

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

테스트 도구에 대한 접근이 어색하였습니다. (첫 PR)
구현이나 배포는 다해놓고 정작 basic에 해당하는 테스트도 통과하지 못하는 상황이 당혹스러웠습니다.

화살표 함수의 불필요한 래핑으르 하는 습관이 있다는 걸 알았습니다.

// 맞지 않는 기본값 정의, url이 없다고 무조건 main이 아닌 경우도 있을 수 있는데, 고려하지 못함
const render = (url = ROUTE.MAIN) => {};
// 아무 생각없이 화살표 함수를 오용할 결우 넘겨줘야 할 파라미터를 누락하는 휴먼에러
document.addEventListener("click", () => render());
// 화살표 함수로 선언된 함수를 또 자기실행함수로 화살표함수를 넣는 불필요한 습관
(() => render())();

이외에도 코딩을 하면서 생각을 담지 않고, 손이 먼저 움직이는 안좋은 습관들 때문에, 겉으로는 동작하는 것 처럼 보이지만, 로직대로만 움직이는 테스트 도구에서는 오류가 나타나 '맞는 것 같은데 왜 안되지?' 하는 자승자박의 문제들을 겪었습니다.
코칭을 받으면서 TDD가 아닌 테스트를 알아야 한다는 조언을 듣기 전까지 3~4일 정도는 테스트 코드 맞춤형 코딩을 하였습니다.

2. 시도

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

3일차 정도에 겨우 basic을 통과하고 나서, 기존의 기능 구현에 급급하게 짠 코드로는 오히려 시간이 더 소요될 것으로 판단되어, 메인 로직의 파일들을 _(lagacy)로 변경하고, 다시 한 단계씩 함수를 새 파일에 옮겼습니다.
불필요한 습관으로 작성된 블록 스타일이나 화살표 함수의 오용 부분이 없는 지, 기본값 초기화를 하는 타이밍이 잘못된 부분이 없는 지 중점적으로 보면서 코드를 재구성하였습니다.

3. 해결

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

먼저 동료의 도움을 한번 받아봤습니다. Live share 확장 프로그램을 통해 코드 리뷰를 실시간으로 받으면서 form의 submit 이벤트가 동작하는 타이밍이 안맞는 부분을 조언을 받거나, e2e에 대한 정확한 개념이 없을 때 과제를 수행하기 위한 상태에 대하여 도움을 받았습니다.
이후에 코드 리팩토링을 하면서 route가 잘못 초기화되는 부분에 대하여 확인하고, 이를 수정하여 과제의 기본 조건인 PR에 통과하게 되었습니다.
또한, 과제에 어느정도 이미 세팅이 된 vite를 활용하는 방법이나, 세션에서 알려주신 부분들을 활용하여 배포시 history router와 hash router 상황 하의 동작을 정확하게 이해하는 것 또한 해결에 큰 도움이 되었습니다.

제출 -1일차에 다행히 과제 요건을 모두 충족하였고, 세션에서 인상깊게 본 History Router환경에서의 URL 접근을 위한 SSG를 구현하는 부분까지 진행할 수 있었습니다.
- history router : https://anveloper.github.io/front_5th_chapter1-1/
  - SSG vite 플러그인 적용완료 :
    - https://anveloper.github.io/front_5th_chapter1-1/login
    - https://anveloper.github.io/front_5th_chapter1-1/profile
- hash router : https://anveloper.github.io/front_5th_chapter1-1/index.hash.html

4. 알게된 것

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

vite의 동작, vitest와 DOM 테스트의 기본 개념
playwright와 E2E(End to End)의 기본 개념
나 자신의 잘못된 코딩 습관
코드 리뷰의 필요성

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

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

이번 항해 99를 시작하고, 러닝 메이트님이 공유해주신 회고글을 보면서 기록을 하는 습관을 가지고자 처음으로 블로그 글을 쓰게 되었습니다.
하루에 2 ~ 3시간 씩 2일 단위로 나누어 하루는 온전히 개발에 투자하고, 나머지 하루 중 1시간은 중간 회고를 하는데 투자하는 다짐으로 1주차를 보냈습니다.
글을 잘 쓰는 편이 아니라 일치의 경험을 적어도 3가지 꼭지로 정의하도록 강제하여, 만족하지는 않지만 계속 유지를 하려고 노력중에 있습니다.

5일차에 작성한 향후 계획

5일차에 작성했던 간단한 향후 계획을 수행하였습니다.

기능 3. 라우터 페이지 전환버튼 만들기: 간단한 DOM 조작 기능

기능 5. History Router SSG: 빌드 후 HTML 복제 vite 플러그인

// plugins/ssg-copy.js
import fs from "fs";
import path from "path";

export const ssgCopyHTML = (routes = []) => {
  return {
    name: "vite-plugin-ssg-copy-HTML",
    closeBundle() {
      const dist = path.resolve("dist");
      const originHTML = path.join(dist, "index.html");
      routes.forEach((route) => {
        const target = path.join(dist, route);
        const targetHTML = path.join(target, "index.html");
        if (!fs.existsSync(target)) fs.mkdirSync(target, { recursive: true });
        fs.copyFileSync(originHTML, targetHTML);
      });
    },
  };
};