즐거운 오류 해결
4일차까지 해결되지 않던 오류를 해결했습니다.
기분이 참 좋았습니다. 😊😊
Router
오늘 오픈 세션 중에는 Router에 대한 Q&A가 많아, SPA에서의 확장 가능한 Router의 중요성에 대하여 설명해주셨습니다.
1. 출제자의 의도
처음 SPA 형태로 index.html 하나만을 가지고, 라우팅 처리가 가능할까? 의문이 들었습니다.
첫날에 배포 먼저 하고 메인에서 버튼으로 이동하면서 URL이 변경되는 부분은 구현을 해둔 상태였는데, URL로 접근 하는 상황에서는 불가능 할 것 같은데, 각 폴더에 엔드 포인트가 있어야 하는 건 아닌가? 하는 궁금증이 들어 해당 내용을 질문을 남겼습니다.
심화 과제를 그 이후에 보고나서 해시 라우터의 필요성을 의도한 것이 아닐까 하는 합리적인 의심만 하는 상태였습니다. 다행히도 오늘 강의를 들으며 어느정도 맞췄구나~ 하는 약간의 기쁨을 느끼는 순간이었습니다.
2. 배포 ver.2
그제에 이어서 오늘은 강의 내용을 토대로 History Router와 Hash Router를 동시에 배포하는 방법에 대하여 찾아보았습니다. 역시나 뛰어난 개발자들이 만든 번들러 답게 vite 빌드 옵션으로 설정이 가능했습니다.
한가지 더 고려할 사항이 PR시 실행되는 Github Action에서는 base 값이 없어야 테스트에 통과할 수 있었습니다. process.env.CI 값은 actions 에선 자동적으로 들어오는 값이라, 로컬에서 별도로 테스트를 할게 아니라면, CI=true 값을 playwright test 앞에 넣을 필요는 없다는 점도 이번 기회에 알게되었습니다.
- history router : https://anveloper.github.io/front_5th_chapter1-1
- hash router : https://anveloper.github.io/front_5th_chapter1-1/index.hash.html
3. 향후 계획
프로젝트나 기획문서를 작성하다보면 남발하는 향후 계획, 향후 추진 사항. 이번에 항해를 하면서는 과제 이후에도 적어도 한가지의 기능을 추가 개발해 볼 생각입니다. 글자로만 존재하는 향후 계획이 안되도록 미리 뭘 만들 지 정해봐야겠습니다.
- 후보1: 아이디 저장 (매우 쉬움)
- 후보2: 사용자별 프로필 로컬 저장 (보통)
- 후보3: Hash 페이지, History 페이지 전환 버튼 (보통)
- 후보4: 두가지 라우터 한 파일에서 동작 (어려움?)
- 후보5: History 페이지도 URL로 접근이 가능하도록 SSG - 오늘 세션 내용 (어려움)
아마도, 흥미도 면에선 둘을 합치기 보단 3번을 구현하고, 5번을 구상해보는 정도로 추가개발이 이뤄질 것 같습니다.
