🥲 개요
동료들이 하는 것을 보고 동기부여를 얻고자 시작하게된 항해99...
첫 과제부터 아주 빡셌다... 사실 어찌보면 그렇게 어렵지 않을 수도 있고, 기초적인 부분이긴하다.
근데 나는 정말 많은 것을 놓치고 있다는 사실에 또 한 번 놀랐다.
"내가 자바스크립트를 진짜 못하는구나... " 싶었다.
그래서 이번 글은 과제에 대한 회고와 기술 부분에 대한 정리를 하고자한다.
1. 문제 (이번 주차를 지나며 겪었던 문제가 무엇이었나요?)
- 라우터를 제대로 이해하지 못했습니다. 특히 history api와 hash 에 대한 이해가 부족했기 때문에 구현은 했지만 코드를 설명할 수는 없었습니다.
- 여러 테스트코드 (basic, advanced, hash, e2e)를 통과하는데 굉장히 애먹었습니다. vitest로 작성된 부분들은 이해하는데 크게 문제 없었지만, PlayWright로 e2e 테스트를 하는 코드는 처음봐서 애먹었습니다.
- 배포 관련 에러가 많이 났습니다. 기껏 테스트를 통과했더니, 배포라는 큰 관문이 있었습니다...! 그것 때문에 라우터를 수정했다가 git reset 했다가.. 굉장히 곤란한 상황들이 많았습니다.
- 이벤트 위임할 때 부모 요소 하나에 이벤트 리스너를 연결해서 해결하는 것이였는데, 각각의 링크에다가 event.preventDefault() 만 하면 되는거 아닌가 싶어서 링크들에 다 이벤트리스너를 연결해버렸습니다.. 완전히 이벤트 위임을 반대로 이해해버렸던 것이죠..
2. 시도 (문제를 해결하기 위해 어떤 시도를 하셨나요?)
- AI (Claude) 60%
- 다른 동료분들 PR 30%
- 지식뭉치 5%
- 동료들에게 질문 5%
3. 해결 (문제를 어떻게 해결하셨나요?)
- 라우터를 제대로 이해하지 못했기 때문에 했던 코드들과 지식뭉치와 관련 블로그들을 읽어보며 다시 톺아보고 있습니다.
- 테스트 코드를 이해하는데 AI가 도움을 굉장히 많이 줬습니다..!
- 성찬님께서 도움을 주셨습니다..🥲 감사하게도.. (정적 페이지 배포에서는 에러페이지 추가, index.html에 사용자가 SPA에 접근했을 때 처리하는 로직, vite.config.js 수정 등..)
배포를 위해서 해야되는 부분들은 잘 뒀다가 나중에도 써먹어볼 수 있겠습니다. - 이벤트 위임을 이해한 뒤로는.. 다시 수정했습니다. a 태그에 preventDefault가 아니라, nav태그에 이벤트 위임을 했었는데 안되는 문제가 있었습니다. 근데 body에 이벤트 위임을 하니까 해결이 되었습니다.
제 컴포넌트 구조에서는 페이지가 렌더링될 때 마다 재생성되기 때문에 이전 이벤트리스너가 제거가 되지 않는 문제가 발생했었습니다. 그래서 body에 위임했고, 만약 nav에 하고싶다면 렌더링 후에 DOM 요소를 찾는 로직을 구현해줘야합니다 (생명주기) 근데 그거를 공부라해야할지.. 오버엔지니어링이라 해야할지.. 여러 생각이 들었습니다!
4. 알게된 것
- history API , hash
- 테스트 코드를 이해하는 방법
- 이벤트 위임
Keep : 현재 만족하고 계속 유지할 부분
- 구현하는데 이슈상황들이 많고 안풀리는 부분도 많았는데, 포기하지 않았던 점.
Problem : 개선이 필요하다고 생각하는 문제점
이번 주를 마무리 하며 개선이 필요하다고 생각했던 문제점은 무엇인가요?
P1. AI 툴을 너무 많이 사용하면서, 동시에 이해하려고 하지 못했다. 본질이 무엇인지 꿰뚫어보자!
P2. 팀원들과 많이 이야기하면서, 질문들을 적어보자! 멘토링 시간이 살짝 맛없었다.. 나도 구현하기에 바빴지만, 참석못한분들도 있고해서 질문들이 없어서... 풍성하지 못했다!
Try : 문제점을 해결하기 위해 시도해야 할 것
이 문제점을 해결하기 위해 다음 한 주간 시도 할 것은 무엇인가요?
P1. 과제를 시작하기전에 학습자료 정독!
P2. 팀원들과 스몰토크토크!
새로운 걸 배우는 것을 좋아하는 프론트엔드 개발자입니다!