항해플러스 프론트엔드 5기 후기(1주차) [프레임워크 없이 SPA 만들기]

houndhollis·2025년 3월 30일

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

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

로컬스토리지와 전역 객체를 활용한 상태 관리 방법에 대한 고민
이벤트 리스너 중복 등록을 방지하는 방식이 적절한지 판단하기 어려움
render 함수 자체에서 모든 것을 다 처리하는게 맞는가 고민
전역 상태 관리의 범위를 어디까지 허용해야 하는지 고민
hash Router 와 history Router를 통합하여 관리하는 방법에 대한 고민

2. 시도

로컬스토리지 접근을 최소화하기 위해 전역 객체를 활용하는 방향으로 리팩토링을 진행
이벤트 리스너가 중복 등록되지 않도록 상태 플래그(isEventAttached)를 추가하여 중복 실행을 방지
전역 상태를 객체로 관리할 수 있도록 routerState, userState를 각각의 모듈로 분리
해시 라우터와 히스토리 라우터의 공통된 로직을 routeManager에서 관리하도록 구조를 개선

3. 해결

로컬스토리지 접근을 줄이고, 전역 객체를 활용하여 불필요한 localStorage.getItem 호출을 최소화
isEventAttached 플래그를 사용해 이벤트 리스너가 여러 번 추가되지 않도록 방지
전역 상태를 모듈화하여 필요할 때만 import하여 사용할 수 있도록 리팩토
moveToPage 함수에서 hash Router 와 history Router의 분기 처리를 명확하게 하여 코드 가독성 증가

4. 알게된 것

로컬스토리지와 전역 객체의 성능 차이
- localStorage는 동기적으로 동작하며, 빈번한 접근 시 렌더링 성능에 영향을 줄 수 있음
- 전역 객체는 메모리에서 직접 가져오기 때문에 속도가 훨씬 빠름
  따라서, 자주 접근해야 하는 데이터는 전역 객체에 저장하는 것이 성능 면에서 유리하다는 점을 깨달음
전역 객체를 많이 사용하면 안 좋은 이유
- 전역 객체를 많이 사용하면 네임스페이스 오염 및 유지보수성이 떨어질 수 있음
- 특히, 전역 객체는 앱이 종료될 때까지 메모리를 차지하므로 불필요하게 많은 전역 객체를 생성하는 것은 지양해야 함
- 해결 방법으로는 하나의 전역 객체를 만들어 필요한 변수를 그 안에 정의하는 것이 효과적이라는 점을 배움
객체 메서드 vs. 개별 함수 내보내기
- 관련된 데이터와 해당 데이터를 처리하는 메서드를 하나의 객체로 묶으면 가독성이 향상됨
- 하지만 너무 많은 기능을 하나의 객체에 몰아넣으면 유지보수가 어려울 수 있음
- Boolean 값과 같은 단순한 데이터 반환에는 getter를 활용하는 것도 고려했지만, 함수 호출 방식이 명확하지 않을 수도 있어 선택적으로 사용해야 함
이벤트 리스너 중복 등록 방지
- 이벤트 리스너를 등록할 때 플래그 변수를 활용하면 불필요한 이벤트 중복 등록을 방지할 수 있음
- 이를 통해 성능 최적화에 기여할 수 있다는 점을 배움
분기 처리의 적절한 활용
- 하나의 로직에서 여러 분기를 처리할 때, 조건문이 많아지면 코드의 복잡도가 증가할 수 있음
- 코드의 가독성을 유지하면서도 확장성을 고려한 분기 처리가 필요하다는 점을 다시 한번 인식함
객체 재할당과 Object.assign
- let으로 선언된 객체를 재할당하면 새로운 메모리 주소가 할당됨
  따라서, 기존 객체를 유지하면서 값을 변경하려면 Object.assign()을 사용하여 객체를 업데이트하는 것이 더 적절함