프레임워크 없이 SPA를 완성한다는 것. 사실 개발을 처음 배웠을때 부터 react를 사용하고 그 후에는 react의 프레임워크인 nextjs를 사용했었으니 사실 바닐라js만을 이용해 웹 어플리케이션을 만든다는게 큰 챌린지 였던 것 같습니다. ex) hash 와 router 가 가장 크게 어려웠?던 부분 같아요.
폴더 구조
이건 배웠다기보다는 다들 가장 많이 사용하는 src -> pages , components, utils, 등등
기술적 성장
해시 라우터 부분이 특히 힘들었습니다. 원래는 import router from 'userRouter' 이렇게만 사용을 했었어서 그저 import만 하면 끝나는 기능이 router 였는데 이렇게 history API 그리고 hash를 동시에 구현하는것이 성장했다고 생각합니다.
해시 라우팅 vs 히스토리 라우팅 React Router 같은 클라이언트 라우터를 사용할 때, 두 가지 방식이 있어: 해시 라우팅 (Hash Routing) window.location.hash를 사용해 페이지를 변경함. 예: window.location.hash = "/login"; → URL이 http://example.com/#/login으로 변경됨. 브라우저가 서버에 새로운 요청을 보내지 않고 클라이언트에서 경로를 감지해서 화면을 바꿈. 히스토리 라우팅 (History API Routing) window.history.pushState()를 사용해 페이지를 변경함. 예: window.history.pushState({}, "", "/login"); → URL이 http://example.com/login으로 변경됨. 이 방식은 브라우저의 히스토리 스택에 새 상태를 추가하지만, 해시 라우팅처럼 #을 사용하지 않음.
리팩토링을 마무리했다는 것 자체가 만족스럽습니다... 아직 품질에 대해서 논할수 있나 싶습니다..ㅎㅎ
내가 nextjs에서 useRouter로 끌어서 사용하던 부분이 사실 이런 원리로 동작하는구나 라는 걸 알수 있었음.
아무래도 직장인이다 보니 적절한 시간 분배가 제일 중요한 것 같습니다.
개념을 잘 모르겠고 과제가 이해가 안되는 부분에 대해서는 빠르게 질문하고 넘어가는게 좋습니다.