[항해플러스] 프레임워크 없이 SPA 만들기 Part 1 회고

오랜만에 시작된 새벽4시 취침

 

프로젝트를 진행하면서 부딪혔던 기술적인 문제

(문제, 시도, 해결, 알게된 것)

템플릿 리터럴로 HTML을 innerHTML에 넣어 렌더링을 구현했는데, 테스트 코드를 돌렸을 때 렌더링을 시킨 HTML에 있는 id를 읽어오지 못하는 이슈가 있었다. 템플릿 리터럴이 innerHTML에 들어가기 이전에 이벤트를 등록할 경우 내부에 있는 id를 읽어오지 못한다는 사실을 알게 되었고 실행 순서를 조정하는 과정을 통해 해결할 수 있었다.

에러 바운더리를 try, catch로 구현을 하고 싶었는데 이벤트가 전파되지 않아 결국 window.addEventListener('error', () => {}) 방식으로 구현했다. 오늘 1주차 과제에 대한 solution을 듣다보니 구조를 잘 짜게 되면 try, catch로도 구현이 가능할 것 같아 solution 코드를 한 번 자세하게 읽어보려고 한다.

새롭게 알게 된 내용

발제 자료와 다른 분들의 코드를 리뷰했을 때, class로 작성한 코드들이 깔끔하다라는 인상을 받았다. 기존에 개발할 때는 이미 react, vue, svelte 등의 좋은 구조가 있기 때문에 class로 개발이 필요한 상황이 없었는데 이번 과제를 리뷰하는 과정에서 class가 어떤 환경에서 필요하고 어떨 때 하면 더 재사용성을 높일 수 있을 지에 대해 확인할 수 있었다. 멘토링을 여기저기 다니면서 비슷한 고민을 하는 분들이 많았고 도움되는 자료도 얻을 수 있었다.

---

Keep : 현재 만족하고 계속 유지할 부분

과제를 끝내고나서 바로 끝내지 않고 구조를 더 낫게 만들 수 있는 방법들에 대해 고민했고, 팀원분들을 포함하여 네트워킹 때 알게 된 분들께도 먼저 다가가 코드리뷰를 작성해드린 부분이 도움이 많이 되었다.

우리는 과제 제출 전에 최종적으로 궁금한 점들을 이야기 해보면 좋겠다는 생각에, 목요일을 멘토링 일정으로 잡았는데 이전에 이 멘토링에만 의존하지 않고 다른 팀들의 멘토링은 어떻게 진행되고 다른 코치님은 어떤 방식으로 멘토링하시는 지를 둘러보았다. 우리 팀의 생각 뿐만 아니라 다른 팀의 생각도 알 수 있어서 도움이 많이 된 부분이다.

Problem : 개선이 필요하다고 생각하는 문제점

초기에 테스트코드에 성공/실패에 목표를 두어 성공이 모두 뜬 후 완료되었다! 하고 좋아했는데, 이후 발제 자료를 확인하니 미처 구현하지 않았던 부분들을 발견하여 앗! 하고 다시 구현하는 과정이 있었다.

Try : 문제점을 해결하기 위해 시도해야 할 것

테스트 코드는 하나의 보조 수단으로 두고, 1순위는 발제자료를 우선적으로 두어야겠다.

 

 

프레임워크 없이 SPA 만들기 제출 PR : https://github.com/hanghae-plus/front_3rd_chatper1/pull/9

개인 레포 : https://github.com/soyoonJ/front_3rd_chatper1/tree/main

[17팀 정소윤][Chapter 1-1] 프레임워크 없이 SPA 만들기 by soyoonJ · Pull Request #9 · hanghae-plus/front_3rd_chat

 

항해 추천인 코드 (20만원 할인) - IXtXJj