useState의 상태 값이 css에 적용 해야 될 때가 있다.문제는 tailwind에서 “ w-[${width}px] “ 이런 식으로 지정하면 class는 정상적으로 render되었지만, css가 적용되지 않는다.이러한 경우 **style(인라인 스타일)**을 이용해야 한다.한 개 이상의 스타일을 지정해야 할 경우 { } 안에 다 적용하면 된다. style(인라인 스타일) export default function Item() { const [imageSize, setImageSize] = useState({ width: 100, height: 100 }); const containerStyle = { height: imageSize.height width: imageSize.wi..

일반적으로 모달 닫기 버튼 외에 모달 영역 밖을 클릭 시 닫을 수 있어야 된다.  모달 열고 닫기 기본형useState를 활용해 클릭하는 버튼을 이전 값에 반대되는 값이 들어오게 해서 true면 모달 창이 보이고 false면 닫히게 만들었다.export default function Modal() { const [modal, setModal] = useState(false); return ( setModal((prev) => !prev)}> 버튼 {modal && ( 모달 )} );}  모달 영역 외 클릭시 모달 닫기 useRef를 사용하여 modalBtnRef와 modalRef를 생성하여 modalBtnRef**(모달..

tailwind 폰트 적용하는 방법styles 폴더 하위에 fonts폴더에 notoSansKR.css 파일 생성 후  font-face 붙여놓는다// notoSansKR.css@font-face { font-family: 'NotoSansKR'; font-weight: 100; font-style: normal; src: url('/fonts/NotoSansKR-Thin.ttf') format('truetype');}@font-face { font-family: 'NotoSansKR'; font-weight: 200; font-style: normal; src: url('/fonts/NotoSansKR-ExtraLight.ttf') format('truetype');}@font-face {..