반응형 Dev. Yelee ˗ˋˏϟˎˊ˗99 MUI <ClickAwayListener/> 안에 <Select/> 메뉴 클릭하면 닫힐때 MUI 기반 컴포넌트로 작업 중 난관에 봉착 1. 문제 // .. code console.log(e)} /> 컴포넌트 외 영역을 클릭하면 가 사라지도록 하기 위해 컴포넌트를 사용했다. 문제는 Select 박스를 클릭해서 열고 메뉴를 클릭하는 순간 의 onClickAway가 실행되면서 가 사라져 버린 것. 2. 원인 가 open상태일 때 보이는 메뉴 박스는 컴포넌트 외부에 생성되기 때문 3. 해결 에 mouseEvent={'onMouseUp'} prop을 추가해주면 된다! default가 onClick이다보니 Select 박스를 클릭하는 순간 onClickAway도 실행되면서 Box가 닫힌다. 그래서 클릭이 아닌 onMouseUp 되는 순간 onClickAway가 실행되도록 하면 Select 박스에 영향이.. 2022. 12. 1. [Next.js] 페이지(Pages) 구성하기 Next.js 공식 문서에서 Getiing Started를 살펴보면 root 디렉터리에 있는데 /pages와 /public 디렉터리에 대해 안내되어 있다. Next.js 프로젝트를 구성하는데 중요한 첫 단계라 볼수 있는 pages 폴더 구성에 대해 알아봅시다! 1. Pages란? Next.js 프로젝트에서는 pages 디렉토리 하위에 생성되는. js,. jsx,. ts,. tsx 파일 명에 따라 자동으로 라우팅 된다. 예를 들어 아래와 같이 pages 하위에 about.tsx, notice.tsx 파일이 있다면 about.tsx는 localhost:3000/about notice.tsx는 localhost:3000/notice 로 접근이 가능해진다 pages ├── about.tsx ├── notice... 2022. 11. 27. Typescript 타입스크립트 에러 Object is possibly 'null' 에러 useEffect(() => { const container = document.querySelector('.container'); container.addEventListener('scroll', listener); return () => { container.removeEventListener('scroll', listener); }; }); 대충 이런 상황에서 container 변수에 빨간 줄이 뜨면서 object is possibly 'null'이라는 에러가 출력됐다 원인 개발하는 입장에서 저 container에 dom이 들어간다고 확신하지만, 타입 스크립트 입장에서는 아닌가 보다,,ㅎ null값이 들어갈 수도 있다고 판단이 되어 뜨는 오류! 해결 옵셔널 체인징을 이용하자! useEffect.. 2022. 11. 22. 크롬 브라우저에서 input 자동완성 파란색 배경 없애기 1. 문제 webkit기반 브라우저에서 input 자동완성으로 텍스트를 선택하면 아래 스크린샷 처럼 푸른빛의 background-color가 자동으로 적용된다 2. 원인 크롬 브라우저에서 input 자동완성 사용 시 아래와 같은 css가 기본 에이전트 스타일로 적용된다. 배경색과 컬러가 !important로 적용되어있다 보니 아무리 배경색을 바꾸고 폰트 컬러를 바꿔도 적용이 되지 않는 것이다 background-color: rgb(232, 240, 254) !important; background-image: none !important; color: -internal-light-dark(black, white) !important; 3. 해결 이럴 땐 -webkit-autofill 속성 이용하여 box.. 2022. 10. 18. 이전 1 ··· 5 6 7 8 9 10 11 ··· 25 다음 반응형
