Facts
- 5시간 동안 지하철 노선도 2단계 역 추가/수정/삭제 기능을 구현했다.
- 지하철 노선도 1단계가 merge되었다.
- 이벤트에 대해 공부했다.
Feelings & Findings
5시간 동안 지하철 노선도 2단계 역 추가/수정/삭제 기능을 구현했다.
역을 추가하는 것은 api 요청만 보내고 화면에 render만 하면 되기 때문에 편했다. 이후의 과정도 순조롭게 진행될 줄 알았는데, 수정을 할 때 모달 UI를 만드는 것과 수정 버튼을 눌렀을 때 현재 어떤 역이 선택되었는지 알게 하는 것이 어려웠다.
수정 api를 요청할 때, PUT에 현재 수정 중인 역의 id와 수정될 역의 name을 보내야 했는데, 수정 중인 역의 id를 가져오는 것에서 애를 먹었다.
고민을 하다가 수정 버튼을 눌렀을 때, 그 버튼에서 span의 innerText를 상태 값으로 저장해놓고, span 자체도 상태 값으로 저장하는 것으로 구현을 했다.
이렇게 순조롭게 끝날 줄 알았지만 삭제를 할 때 문제가 발생했다.
삭제를 눌렀을 경우에는 li 태그만 삭제하면 되는 것이 아닌 li 태그의 바깥에 있는 hr 태그도 삭제해야 했다. 버튼에서 closest를 해서 li를 찾고, li의 nextelementsibling를 해서 hr 태그를 삭제하고, li를 삭제하면 되겠지만 좋은 방법은 아니라고 생각했다. li의 nextelementsibling 사이에 어떤 것이 언제 추가될 지 모르기 때문이다.
그래서 dataset으로 역 이름을 할당했고, 역 이름을 가진 요소를 삭제하는 것으로 구현했다.
지금 생각해보니 li태그 안에 hr을 넣고 css를 조정하는 것이 가장 좋을 것 같다. 내일 가서 바꿔야겠다.
아, 그리고 유저가 많은 역을 추가했을 때, 시간 복잡도가 올라갈 것을 대비해서 object로 구현했는데 목록 조회에서 받는 데이터가 array인 것을 보지 못했었다. 그래서 내일은 다시 array로 바꿔서 구현해야한다...😭😭😭
지하철 노선도 1단계가 merge되었다.
try-catch에 대한 질문을 많이 했는데, 솔직히 말도 안되는 짓을 하고 있다고 생각해서 혼날 줄 알았지만 오히려 칭찬을 받았다.
말도 안되는 짓이라고 생각한 것은 try-catch에서 에러가 발생하면 콘솔 창에 표시되는 것이 싫어서 다시 try-catch로 감싸고, catch에서는 아무 일도 하지 않음으로써 에러를 없애버렸기 때문이다. 하지만 콘솔에 에러가 아예 없으면 개발자가 나중에 어떤 에러가 발생했는지 찾기가 힘들기 때문에 그냥 띄워주는 것이 좋을 것 같다고 하셨고, 이에 동의해서 내일은 코드를 바꾸려고 한다.
그리고 try-catch의 catch에서 throw 에러를 하는 것도 이상하지 않다고 하셨다.
그리고 토큰으로 로그인 여부를 검사하는 것에 대한 리뷰어님의 의견은 듣지 못해서 너무 아쉽다.
괜찮으니까 merge를 해주신 것이라고 믿고 이대로 진행하려고 한다.
이벤트에 대해 공부했다.
일요일에 진행되는 스터디인 하브루타를 대비해 이벤트에 대해 공부를 했다. 우선 keyup 이벤트에서 한글로 입력했을 경우 엔터를 누르면 2번 이벤트가 실행되는 것에 대해 이유가 궁금하다.
그리고 onclick과 addEventListener('click')의 차이점도 궁금한데, 책에 나와있는 것 말고 다른 차이점이 있을지에 대해 알아봐야겠다.
캡처링, 타깃, 버블링에 대해서 조금 더 자세히 알게 되었고, addEventListener의 3번째 인수로 true를 할당하게 되면 캡처링을 잡을 수 있다고 한다. 하지만 대체로 사용하는 일은 적을 것이라고 해서 일단 알아두고만 있다.
예전에 궁금했던 것 중에서 이벤트 리스너가 등록된 순서대로 이벤트가 실행될까? 에 대한 의문도 풀렸다. 등록된 순서대로 실행된다고 한다. 이 부분은 실험을 해서 알아볼 수 있었겠지만... 그럴 시간이 없었고, 까먹기도 했었는데 오늘 알게돼서 값진 하루였다.
Plans
- 지하철 노선도 2단계 노선 관리 기능 구현하기
- 10시까지 공부하기
