인공지능 웹 서비스 프로젝트 진행 중 (2022-11-14 ~ )

• navigation bar 반응형으로 사이즈를 줄이면 드롭다운 메뉴가 되는 navbar 상태 관리 - 다른 영역을 클릭하거나 창 크기를 리사이징을 하면 드롭다운 메뉴가 없어지지 않는 문제 발생

  • 첫 번째 시도 - setTimeout()으로 시간적 차이를 주고 onBlur 이벤트를 활용 (랜더링 문제로 추측) = 해결한 줄 알았지만 드롭다운 메뉴 링크가 작동이 안되는 경우 발생..

  • 두 번째 시도 - event.stoppropagation()을 이용해서 이벤트 버블링을 막는 방법 시도 = 실패..

  • 세 번째 시도 - node.contains(otherNode)와 addeventlistener('click'), addeventlistener('resize')으로 드롭다운 메뉴 상태 관리 = 성공!!

[참고자료]
https://www.folkstalk.com/2022/09/detect-a-click-outside-an-element-javascript-with-code-examples.html 바깥 요소 클릭 감지

https://developer.mozilla.org/ko/docs/Web/API/Node/contains Node.contains(otherNode)

https://7942yongdae.tistory.com/4 React - 리액트 App 기본 실행 포트 변경하기