본문 바로가기
반응형

프로젝트/코드스테이츠 - 4주프로젝트28

리팩토링 : 이벤트 위임으로 인한 버그 아래와 같은 코드에서 onClick이벤트가 li태그에 위임되어서 li태그를 클릭하기만 해도 onClick이벤트가 실행되었다. 아래 움짤을 보자. ..(생략).. {options.map((option, idx) => ( handleDropDownClick(option)} className={selected === idx ? "selected" : ""}> {option} } ..(생략).. 보다시피 태그를 클릭만해도 onClick이 실행되어 delete되고 있다. 아래 움짤은 onClick이벤트가 실행되는 태그를 조정한 후 결과이다. e.preventDefault()}> { options.map((option, idx) => ( handleDropDownClick(option)} className={sel.. 2022. 1. 10.
리팩토링 : 해시태그를 작성하는 input태그에서 엔터누르면 새로고침되던문제 위와 같이 해시태그에서 엔터를 누르면 그냥 새로고침되고 작성도 되지 않던 버그가 있었다. 이벤트버블링, 이벤트 위임인가 했다. 이 버그를 해결하면서 이벤트 버블링, 이벤트 위임을 강제로 공부하였다.. 이에 관해서는 리팩토링 끝나고 먹구름같은 개념들을 더 명확히 하여서 블로깅하기로 하겠다 하여튼 e.preventDefault(), e.stopPropagation()을 경로상의 모든 곳에 호출해보고 return false를 여기저기 넣어보는 등 오랫동안 별짓을 다해봤지만 뻘짓이었다. 스트레스 받아서 멍때리다가 설마..하는 생각이 스쳤다.. form을 div로 바꿔보았더니 해결되었다... 하.. --> 로 바꿈 ..(생략).. ..(생략).. --> 마찬가지로 로 바꿈 원래 모든 버그는 간단한게 원인인건가? .. 2022. 1. 9.
리팩토링 : 카카오지도 DOM은 리렌더링 안시키고 마커만 리렌더링시키는 방법 오늘 면접을 봤는데 면접관님이 useRef사용해서 지도 리렌더링 안시키는 방법이 있으니 이를 사용해보라고 하셨다. 면접이 아닌 멘토링수준.. ㅋㅋ 하여튼 처음에는 집방보면서 어떤 그림인지 대충 파악하고 혼자서 해보려고 했다. 혼자 낑낑대다가 구글링을 시작했다. 카카오공식홈페이지 Dev talk에서 찾을수 있었다. 예전에 모달창 컴퍼넌트에 props로 데이터 전달하는 방법을 알게되고 유레카를 외친적이 있는데 그때랑 비슷한 로직인것같다. 항상 변하지 않는 지도 컴포넌트를 하나 만들어두고 그 안에 props로 전달하는것 오늘은 늦었으니 내일 해보겠다. 2022. 1. 7.
리팩토링 : 지도 위주의 UI로 변경 기능은 크게 바뀐거 없고 CSS만 수정했다. 면접준비하느라 많이 못했음. 2022. 1. 5.
반응형