목록2022/07/01 (2)
치춘짱베리굿나이스
useClickOutside 모달을 라이브러리를 쓰지 않고 직접 구현하면서 (react-portal을 사용하였다) 모달 바깥을 클릭했을 때 모달이 닫히도록 구현을 하고 싶었다 유용한 훅을 많이 포함하고 있는 패키지인 react-use를 설치하여 useClickAway 훅을 이용하면 한번에 해결되겠지만, 지금 프로젝트에서 react-use가 설치되어 있지 않기도 했고 (이거 하나 때문에 설치하기도 애매하고) 생각보다 구현이 어렵지 않아 훅을 직접 제작해 보았다 코드 import { useEffect, useRef } from 'react'; const useClickOutside = onClicKOutside => { const ref = useRef(null); const handleClickOutsid..
코드 리팩토링하기 짧막한 내생각 긴 프리온보딩 기간이 끝나고 오랜만에 기존에 하던 프로젝트들에 복귀하였다 (몇개없지만…) 프리온보딩 기간동안 나름 성장해서 그런지 내가 작성한 코드를 슬쩍 봐도 아… 이건좀… 싶은 요소들이 많이 보였다… 마침 프로젝트 전체 리팩토링 및 배포 준비 과정에 들어가 내 코드를 리팩토링하였음 기능은 이전과 똑같이 동작하나 몹쓸 코드들만 개편한 것에 가깝다 합의한 사항들 폴더 구조 src/components └── pages └── Mypage ├── assets // folder ├── components // folder ├── constants.js ├── hooks // folder ├── index.jsx ├── styles // folder └── utils // fol..