Weekly I Learned
1. 문제 (과제, 프로젝트를 진행하면서 부딪혔던 기술적인 문제)
SPA 라우팅을 직접 구현하면서
window.history.pushState()와location.hash를 사용했으나, 코드가 점차 흩어지고 복잡해지면서 유지보수가 어려워졌다.
main.js내 이벤트 핸들러가 명확한 기준 없이 나열되어 가독성과 확장성에 어려움을 느꼈다.
과제 초반, 테스트 코드에 대한 이해 없이 기능 개발에만 집중하면서 테스트 실패를 뒤늦게 인지하였다.
2. 시도
라우팅 로직을
BaseRouter클래스로 추상화하고, 이를 기반으로BrowserRouter,HashRouter를 각각 구현하여 라우팅 구조를 명확하게 정리.
guardRoute개념을 통해 인증 여부에 따른 라우팅 처리를 공통화.
3. 해결
BaseRouter 클래스를 통해 라우팅의 관심사를 분리하고, 재사용 가능한 구조로 리팩토링하여 유지보수성과 확장성을 확보하였다.
4. 알게된 것
History API,hashchange,popstate이벤트의 차이점과 클라이언트 라우팅의 내부 동작 원리를 실무적으로 체득했다.
정적 호스팅 환경에서의 SPA 라우팅 설정과 배포시 제약사항을 경험할 수 있는 기회가 되었다.
테스트 흐름 자체가 개발 가이드라인 역할을 할 수 있다는 점을 알게 되었다.
Keep : 현재 만족하고 계속 유지할 부분
라우터 추상화를 통해 라우팅 로직을 구조적으로 정리한 점은 매우 만족스러웠고, 이 경험은 앞으로의 프로젝트에서도 많은 도움이 될 것 같다.
과제를 끝까지 완주하며 기술적으로도, 심리적으로도 성장할 수 있었던 점이 좋았다.
Problem : 개선이 필요하다고 생각하는 문제점
이벤트 핸들러가 main.js에 흩어져 있어 구조적으로 비효율적이고 추후에 확장하기 어려울 것이라 생각한다.
과제 초반 테스트 코드를 충분히 분석하지 않아, 기능과 테스트가 분리되어 개발 효율이 떨어졌었던 것 같다.
Try : 문제점을 해결하기 위해 시도해야 할 것
이벤트 핸들러를 역할 단위로 분리하고, 이벤트 위임 및 모듈화를 적용해 코드 가독성과 유지보수성을 높일 예정이다.
다음 프로젝트부터는 개발 초기 단계에서 테스트 코드를 먼저 분석하고, 테스트 주도 개발(TDD)에 더 적극적으로 접근해 볼 계획이다.
