1. 문제 (과제, 프로젝트를 진행하면서 부딪혔던 기술적인 문제)
과거에 바닐라 자바스크립트를 정말 간단하게만 써 보았고, 1년이 지난 터라,
자바스크립트로 DOM을 조작하는 데 많은 시간을 사용했다.
-
이벤트
DOM이 새로 렌더링 된 후, 이벤트 리스너를 새로 추가해야 하는 점이 어려웠다. -
에러 바운더리를 이용한 에러 처리의 조건을 명확히 알지 못 했다. - 테스트코드
-
history API의 pushState에서 첫 번째 인자에 넣는 state 객체는 어디에 무얼 쓰면 좋을까?
2. 시도
-
setTimeout 등의 방법으로, 이벤트를 새로 추가했지만, 테스트 코드 상에서 통과할 수 없었다. 더 나은 방법이 있을까 고민하다가 모든 이벤트를 추가하기 위해 렌더링 되는 스코프에 모든 이벤트 리스너를 작성했다.
-
각각의 에러가 발생할 때 try catch 문을 쓰고, error 메시지를 표기하는 등의 처리를 하였다. route는 조건 처리로 redirect 되도록 guard만 하였다. 그리고 validation으로 email이 없으면 로그인 button이 눌리지 않도록 작성해보고, route가 넘어가지 않도록도 작성해보았다.
-
pushState의 state 객체는, 상태 값을 가지게 되고, 이를 활용할 수 있다고 이해했다.
3. 해결
-
이벤트의 경우, 테스트 코드를 전부 통과하였고, 작동 또한 잘 되었다. 다만 이게 좋은 코드인가? 큰 페이지의 경우, 원치 않는 부분까지 이벤트가 전달될 가능성이 있어서, 어떻게 처리를 하는 게 좋은 방법인지 모르겠다는 생각이 들었다.
-
테스트 코드의 체킹은 다 되었지만, error 가 남아서, fail 되었다.
-
써 보긴 하였으나, 일반적으로 없어도 무방하겠단 생각이 들었다. 혹시나 필요하다면 쓰지 않을지?
4. 알게된 것
-
그동안 얼마나 리액트를 이용해서 편하게 개발하였는지 알게 되었다. 자바스크립트의 이벤트 동작 방식에 대해 알아 보고 어떤 식으로 관리할 수 있는가? 고민하여 더 좋은 방법을 찾아봐야겠다.
-
준일 코치님의 1주차 과제 설명을 보고 render에 try catch를 걸고, route 자체에서 throw error를 통해 에러 바운더리를 형성하고 확인할 수 있다는 점을 알았다.
-
긴 시간을 작은 턱에 붓지 말고, 빠르게 과제 위주로 진도를 나가고, 이후에 다시 보며 수정해야겠단 생각이 들었다.
Keep : 현재 만족하고 계속 유지할 부분
- 공부를 해 나가고, 정보를 공유하는 것은 좋다.
Problem : 개선이 필요하다고 생각하는 문제점
-
기존에 테스트 코드와 과제 자료만 보고 모르는 걸 찾아 가며 진도를 나갔는데, 발제 자료와 참고 자료 위주로 전진해야겠다.
-
작성한 부분을 확인하면서 진행하며, 적절한 빈도의 커밋을 하는 게 좋겠다.
Try : 문제점을 해결하기 위해 시도해야 할 것
- 발제 자료를 다시 찾아 보고, AI를 적극 활용하고, 남의 PR도 보고, 팀원은 물론 다른 조 사람들과도 얘기하며, 적극 해결하도록 나아가야겠다.
