1. 문제 (과제, 프로젝트를 진행하면서 부딪혔던 기술적인 문제)
SPA(Single Page Application)에서 History API를 활용해 라우터를 구현하는 과정에서 렌더링 순서와 상태 관리를 처리하는 데 어려움을 겪었습니다.
특히, 로그인 상태와 라우팅 간의 불일치로 인해 페이지 전환 시 비로그인 상태에서도 보호된 페이지에 접근할 수 있는 문제가 발생했습니다. 또한, 컴포넌트들이 제대로 업데이트되지 않거나 이전 상태가 유지되는 현상도 있었습니다.
2. 시도
-
싱글톤 패턴을 적용해 라우터 인스턴스를 생성하여, 중앙에서 라우터와 로그인 상태를 관리하고, 페이지 이동 시 적절한 조건 검사를 추가했습니다.
-
History API의 pushState와 replaceState를 사용해 페이지 전환 시 URL을 조작하고 popstate 이벤트를 통해 브라우저의 뒤로가기/앞으로 가기 이벤트를 처리했습니다.
-
각 컴포넌트에서 로그인 상태를 기반으로 조건부 렌더링을 수행하고, UserPreferences 객체를 통해 로컬 스토리지에 유저 데이터를 저장하여 로그인 상태를 유지하도록 했습니다.
-
DOMContentLoaded 이벤트와 popstate 이벤트를 사용해 초기 로드와 브라우저 탐색 시 라우터를 초기화하고, 현재 상태에 맞는 컴포넌트를 렌더링했습니다.
3. 해결
-
navigateTo 메서드에서 로그인 상태와 페이지 접근 권한을 확인하도록 로직을 수정했습니다.
-
예를 들어, 로그인이 필요한 페이지 접근 시 비로그인 상태라면 /login 페이지로 리다이렉트하고, 로그인 상태에서 /login 페이지에 접근할 경우 홈으로 리다이렉트하도록 했습니다.
-
UserPreferences와 router.isLoggedIn 상태를 활용해, 페이지 렌더링 시 사용자 정보가 올바르게 반영되도록 했습니다.
-
renderHomePage, renderProfilePage 등의 컴포넌트 함수 내부에서 로그아웃 이벤트 리스너를 추가해 로그아웃 시 로컬 스토리지와 라우터 상태를 모두 초기화하고, 홈 페이지로 리다이렉트하는 방식으로 상태 관리 문제를 해결했습니다.
4. 알게된 것
SPA에서 라우터를 직접 구현할 때, History API와 popstate 이벤트를 적절히 활용하는 것이 중요하다는 것을 알게 되었습니다.
브라우저의 기본 탐색 기능과 사용자 정의 라우터 간의 상태를 일관되게 유지해야 안정적인 네비게이션이 가능합니다.
상태 관리를 위해 싱글톤 패턴을 사용하여 라우터 인스턴스를 중앙에서 관리하는 방식이, 여러 컴포넌트에서 상태를 공유하고 관리하는 데 효과적이라는 것을 깨달았습니다.
컴포넌트 기반으로 조건부 렌더링을 구현할 때, 상태 변화에 따른 컴포넌트 업데이트가 즉시 반영되지 않는 문제를 겪으면서, 이벤트 리스너와 상태 관리를 신중히 고려해야 한다는 점을 배웠습니다.
Keep : 현재 만족하고 계속 유지할 부분
상태 관리와 이벤트 처리에 대한 이해가 깊어졌고, 로컬 스토리지와 전역 상태 관리 기법을 활용하여 로그인 상태를 일관성 있게 유지한 점이 좋았습니다.
팀원들과 계속해서 소통하려고 노력한 점 !! 이 좋았습니다.
Problem : 개선이 필요하다고 생각하는 문제점
시간이 너무 없어서 제공해주신 자료를 다 못 챙겨봤다는게 아쉽다.
다른 사람들의 코드도 보고싶었는데 이번주에 너무 바빴달까 ,,
끈질기게 코드를 못 뜯어본게 살짝 아쉽다
생성형 ai에 의존한 내가 싫다.
Try : 문제점을 해결하기 위해 시도해야 할 것
팀원들과 더더 소통 많이하기, 시간 조금 더 내어서
관련 영상과, 자료 꼼꼼히 보고 지피티 선생님이랑 잠깐 의절하기
