나는 이걸 왜 하는가?
- DOM 건드리는 바닐라 JS를 배웠으니 이제 직접 실습해보기 위해
- 상태관리가 무엇인지 공부하기 위해
- GIT으로 협업하는 방법을 익히기 위해
프로젝트 결과물
삽질의 과정
3개의 HTML 파일에서 같은 상태를 바라보게 하기
하나의 모듈파일에 상태 넣어두고 여러 JS파일에서 import하면 참조되겠지?
- 안 돼. 그럴 생각 없어. 돌아가.
- 각 HTML 파일에서 로드된 JS파일의 실행 컨텍스트는 각각 만들어지고, 그 파일들이 import한 모듈 컨텍스트는 각각의 실행컨텍스트 위에 새로이 만들어져 쌓인다.
- 게임 페이지에서 import한 state.js 모듈과 랭킹 페이지에서 import한 state.js 모듈은 파일명만 같지 새로운 모듈스코프를 생성했기 때문에 상태 공유가 불가능하다.
그렇다면 어떻게 같은 상태를 바라보게 할 수 있을까?
- 하나의 HTML에서만 가능하니까 SPA로 만들기
- localStorage에 담아서 페이지 이동할때에도 달고 다니기
우리는 어플 규모가 작기도 하고, 모듈로 상태를 공유할 수 있을 거라는 믿음으로 HTML을 나눠 작업했기 때문에 그냥 localStorage에 담아두고 매 페이지에서 getItem 해서 가져오는 것으로.
회고
피드백
- 에러메시지 뜨거나 스크롤바 뜰 때 덜컹거리지 않게 할 것, 에러메시지 안보이니 접근성 위반하지말고 명도 조절할 것, margin 좀 넉넉하게 줄 것
- 발표하는 자료인데 제대로 잘 정리해서 준비할 것
좋았던 점
- 그동안 모호한 개념이었지만 알아볼 기회가 없었던 상태관리에 대해 공부할 수 있었다.
- SPA를 왜 쓰는지 알게되었다. 서버에 저장할 게 아니라면 상태 들고다니기 너무 귀찮음.
- 확실히 팀플을 하니 git 사용하는 것이 점점 익숙해졌다.
- 로그인이나 서버에의 데이터 저장 등 확장가능성이 있는 프로젝트라 좋다.
느낀 점/아쉬운 점
- JS 코드 구현 연습용 미니프로젝트라고 안일하게 생각하고 토픽이나 스타일링 신경 안썼는데 호되게 혼났다. 다른 팀들이 얼마나 아이디어와 스타일링에 신경썼는지도 감명과 자극을 받았다. 결국 유저에게 제공되는 것은 화면인데, 프로페셔널하지 않게 프로젝트를 대한 것이 부끄러웠다.
- 여전히 github에서 제공하는 project와 issue를 잘 사용하지 못해서 아쉽다.
