일주일을 돌아보며..
프로그램기초 주간이 끝나고 2차 프로젝트 기간에 돌입했다. 거의 강의듣고 알고리즘 개념 배우는데 시간을 보낸 것 같다. 별일 없이 지나가나 싶었는데 화요일 늦저녁부터 몸상태가 좋지 않더니 결국 코로나 확진자가 되어 수요일은 거의 공부하지 못했고 쉬면서 회복하는 시간을 가졌다. 목요일부터는 그나마 조금 상태가 나아져서 모든 일정은 소화했으나 개인공부에 온전히 집중하지는 못했던 것 같다.
어제 프로젝트를 통해서 크게 프론트 2명/백엔드 3명으로 역할을 나누기로 했다. 나는 백엔드에 포함이 되었다. 프론트, 백엔드라고 했지만 백엔드는 이미 firebase가 알아서 하기 때문에 내가 할거는 main.js와 router.js에서 html로 화면에 잘 뿌려지게 연결하는 역할인 것 같다. 담당하게된 파트는 웹페이지 탑바 맨 우측에 프로필 이미지를 출력하고 이를 클릭하면 나타나는 프로필 창에 프로필 이미지 출력, 닉네임과 계정 이메일 정보 출력, 프로필 변경과 로그아웃 기능 구현 정도인데 진행상황을 봐서 아마 추가 기능들을 더 구현할지 말지 결정될 듯하다.
아쉬운 점
2일치 TIL를 놓쳤고 미리 firebase를 다뤄보지 않았던 점이다. 그래도 튜터님이 특강 때 설명하신 샘플코드를 일단 혼자서 좀 분석하면서 감을 잡아가고 있고 왜 firebase를 하면 왜 서버와 DB를 별도로 관리하지 않아도 되는지 이해했다.
잘한 점
샘플코드를 분석해보려고 하고 내가 담당하는 부분을 구현을 시도해보면서 무지성 삽질보다는 완전히 이해를 다 하지 못해도 어느 정도 필요한 부분을 이해하고 넘어가는 것이 문제를 더 빠르고 정확하게 해결할 수 있다는 점을 깨달았다는 것이다.
일단 이렇게 하게 된 발단은 탑바 우측 프로필을 클릭하면 프로필 창이 드롭다운되는 기능을 구현하려고 했는데 아래 두 가지 오류에 막혀 삽질을 하게 되었다.
Uncaught ReferenceError: toggleMenu is not defined at HTMLImageElement.onclick
그리고
uncaught typeerror: cannot read properties of null (reading 'classlist') at togglemenu
이에 대한 원인과 해결방안을 좀 찾다보니 느껴진게 여러 파일간에 값을 주고받지 못해 자꾸 함수가 정의되지 않았다거나 값을 못 읽는 것 같았다.
우선 원인을 찾다가,
html 파일 맨 하단에 스크립트를 배치하는 이유는 브라우저 렌더링 과정에서 JS 로드 후 실행하는 작업이 중간에 있으면 html 파싱이 중단되기 때문에 Display에 지연이 발생하고 DOM 트리를 생성하기도 전에 JS로 DOM을 조작하려고 하는 경우 오류가 발생할 수 있음
이런 원인을 가능성을 염두하고 스크립트가 html 맨 하단에 있는지부터 확인했다.
그다음 찾다보니 파일간 import, export의 흐름을 파악해봐야했다.
우선 index.html 파일 내에서 스크립트 type이 module로 설정되어있었는데 이는 이 파일이 모듈로서 동작한다는 의미라고 한다. 모듈시스템은 ES2015에 추가되어 최근 브라우저에서 사용할 수 있는데 이전의 JS파일의 동작방식과 다른 방식으로 작동하고 잘 작동하기 위해 만족해야하는 조건들이 있다고 한다. 대표적인 것 중 하나가 import export였다. 샘플코드의 구조를 보니 전역적으로 사용할 수 있는 이벤트 헨들러를 만들려면 일단 router파일에서 이벤트 함수를 정의해줘야했다. 정의하고 export한 뒤 main.js파일에서 import하고 이벤트 핸들러 리스트에서 만든 전역적 이벤트 함수들을 관리하는 구조였다. 나는 router가 단순히 담당 url를 구분해서 나누고 교통정리하는 기능을 하는 줄 알았는데 여기서는 로그인 정보를 firebase.js에서 받아 필요한 부분을 DOM을 조작하는데 뿌려주는 기능도 하고있는 것 같았다. 뭔가 router파일에서 할 역할이 맞는가 싶어서 나중에 여유가 된다면 다른 js파일로 분할해서 역할분담을 하게 해야할 것 같은데... 그래서 결국은 일단 위의 오류 없이 드롭다운 기능 구현은 해결!
