Dony :)

FE로 성장 중 🌱

TIL 🧐

고민한 내용

이번주 플젝에서 모달 외의 영역을 클릭했을 시 켜져있는 모달이 꺼져야하는 요구사항이 있었다.

const checkToClickOnModal = (target: HTMLElement) =>
  target?.closest(".modal") || target?.classList.contains("modal");

처음에는 위와 같이 모달 컴포넌트에 claasName을 줘서 App 컴포넌트를 클릭했을 때 클래스명이 modal인지 아닌지로 구분해서 꺼지도록 하였다.
클래스 네임을 안쓰고 상태로 통제하고 싶었는데.. 클릭한 대상을 알아야하니 해당 방법 밖에 생각나지 않았다.
그리고 App을 클릭할 때 마다 저 이벤트가 작동하기 때문에 효율성 측에서도 좋지 않은거 같다.
그래서 고민하다가 도톨이 알려준 tabindex를 사용하여 모달에 focus가 되도록 하고, 모달에서 onBlur 이벤트를 줘서 모달이 blur 됐을 때 모달이 꺼지도록 하려고 생각했다.
그런데 구현하고 보니 모달이 처음 나타나는 시점에는 모달에 focus가 되지 않아 모달이 나타나는 검색창 버튼들을 클릭했을 때 ref를 사용하여 modal에 focus가 가도록 하였다.
이 방법도 useRef를 사용하는 방법이긴 해서 상태로만 통제하고 싶단 생각이 드는데.. 다른 사람들 코드를 이것저것 참고해도 상태로만 제어하는 방법이 없는거 같기도 하다.
고민거리 추가..!

아쉬워요 🙁

이번 플젝에서 react-query를 사용하고 싶었는데 끝내 사용하지 못했다..ㅠㅠ
써보고 싶다고 지난 주부터 말했는데 기능 구현하느라 못써본게 매우 아쉽다ㅠ_ㅠ
타입스크립트도 제네릭이 어려워서 외면하고 썼더니 코드가 유니온 타입이 많아 코드가 복잡해보인다.
이번 주 타스 스터디 때 제네릭을 공부할 순서니 다음 프로젝트에서는 적극적으로 써봐야겠다!

잘했어요 🙂

이번 주에 주요 기능들은 거의 구현했지만, 검색 결과는 결국 못해서 아쉬웠는데,
그래도 하고싶던 목록 중에 하나던 캔버스 애니메이션도 구현한건 아주 마음에 든다. ㅎvㅎ 미대생 아니랄까봐 UI를 버릴 수가 없네 ^_ㅠ
그래도 UI/UX가 남들에 비해선 강점이라면 강점이니까..?
살려서 하는거도 나쁘진 않겠지?_?
이번 주도 피어세션 시간 때 소통하려고 노력을 많이 했다. (이건 매주 칭찬하는 거 같기도 하고.. 🤫)
구현사항 외에도 고민했던 거리나 토론해보고 싶은 주제도 얘기하면서 서로 많이 얘기하려 노력했더니 1시간 반을 알차게 써서 좋았다 ^ㅠ^
동그리 궁디팡팡 궁디팡팡 👏

참고