[일일회고] 22.11.03

22.11.03 회고

---

🛠 Today Handled List (오늘 한 것)

1. 프로젝트 리팩토링 - 이벤트 중첩 트러블슈팅
2. 프로젝트 기능추가 - 테이블 조회결과를 CSV로 다운로드 하는 기능
   (react-csv 라이브러리 사용)

---

👍 Liked (좋았던 점)

• 리서치를 통해서 해결방안을 찾든
  동료가 모르는 것을 나서서 찾아주든
  어떤 방식으로라도 지식이 왕래하고 하는 것들이
  나로서는 참 좋았고, 도움이 된다는 생각이 들었다

---

😢 Lacked (아쉬웠던 점)

• 아침 출근 지하철 딱 한타임 늦게 탔는데,
  사람 진짜 왜이렇게 많은건지 모르겠다
  역시 08시 출근이 최고..
• 막 아픈건 아닌데, 코감기라 쉽게 안떨어지는게 너무 힘들다

---

🔮 Learned (배운 점)

• react-csv를 활용해 data를 csv로 다운로드 하기
• event.stopPropagation()을 이용해 이벤트 버블링 방지하기

---

🤞 Longed For (앞으로 바라는 점)

• 앞으로도 뭔가 모르거나 새로운 것들이 많을텐데,
  좀 더 리서치를 잘하는 능력이 필요하다는 생각이 들었다.
  영어를 공부해야 하는 건지
  아님 개발 용어들이 더 익숙해져야 하는건지는 감이 안오지만
  조금이라도 더 정확한 원인을 파악하고
  적절한 해결방안을 찾기위해서는 그런 능력들이 꼭 필요할 것 같다.
  우선 공식문서나 영어로 된 문서를 보는 힘을 기르는게 가장 중요할 듯!

---

💊 Improved Things (개선한 사항)

• react-csv를 현재 프로젝트에서 사용하려고 시도했으나
  곧바로 적용이 잘 되지 않았음
  공식문서(?)에 나와있는대로 data를 주입하고 이것저것 시도를 해 보았으나,
  자꾸 결과물로 data가 아닌 html 태그들이 나옴..
  동료와 함께 리서치를 하다가 동료가 발견한 결과
  react-csv 2.2.2 버전이 next 12버전에서 충돌이 일어난다는 글을 찾음
  react-csv를 2.0.3 버전으로 다운그레이드 하고
  요구사항 대로 로직을 작성하니 원하는대로 동작함!
• 동료가 어제 프로젝트에서 오류를 발견하고 공유해 줌
  상위요소와 하위요소에서 동일한 이벤트 타입이 있었고
  이에따라서 이벤트 중첩이 일어나
  해당 이벤트를 통해 얻고자 하는 결과가 두번씩 중복으로 일어났었음
  살펴본 결과 상위요소와 하위요소에 있는 핸들러가
  모두 동일한 역할을 하고 있었고,
  하위 요소에 있는 핸들러를 제거함으로서 일단 첫번째 문제를 해결함
• 위의 오류와 비슷한 형태로
  하위요소에서 같은 이벤트 타입을 리슨하지만
  원하는 결과값(기능)이 다른 것이 있었음
  그런데 이벤트 중첩이 일어나서,
  상위 요소에서 필요한 기능과 하위요소에서 필요한 기능이
  동시에 동작하는 오류가 있었는데
  하위 요소에 해당 기능을 실행 후 stopPropagation()을 사용해
  상위 요소로 이벤트가 전파되는 것을 막음으로서 해결함.
  해당 함수에 대해 리서치를 해본 결과로는
  주로 이벤트 버블링을 방지하기 위해서 활용이 되는 듯하고
  비슷한 기능의 stopImmediatePropagation()이 있는데
  이것은 상위요소 뿐 아니라 같은 요소내에서
  원하는 기능이 실행된 이후에 선언되어 있는
  모든 이벤트관련 실행을 무시해주는 효과가 있었음!
  가장 중요한 것은 stopPropagation과 stopImmediatePropagation
  둘 모두가 preventDefault처럼 이벤트 동작을 막는 것이 아니라
  이벤트의 전파를 막는 것이라는 걸 꼭 알아야 하고
  동일한 타입의 이벤트에 대해서만 막아준다는 것을 알아야 함!
  Ex) onClick에서 stopPropagation을 사용해도
  상위의 onChange 이벤트는 작성된 그대로 동작을 하게 됨