원본 repo https://github.com/shahabyazdi/react-multi-date-picker fork 및 npm 배포환경 설정 참고 fork한 프로젝트 로컬에서 최초 실행 @itpsolver/react-multi-date-picker 프로젝트 루트에서 npm i npm build 위 폴더에서 ‘cd website’ 로 웹사이트 폴더 진입 npm i -g gatsby-cli npm i npm run start 브라우저 http://localhost:8000 진입 소스코드 내 모듈명 replace 본 프로젝트 내에 포함된 website 폴더처럼 해당 라이브러리를 esm import… Read More »
어딘가에 숨어서 활약하고 있는 .yarnrc 파일을 제거하자!!
문제상황 toast grid 의 특정 셀을 클릭하여 modal을 띄우는 과정에서 아래와 같은 스크립트 에러 발생 react-dom.development.js:26923 Uncaught TypeError: data.some is not a function at Object.createData (item.js:267:4) at Object.resetData (dropdown.js:314:7) at Grid2.dispatch (utils.js:69:8) at Grid2.resetData (utils.js:69:8) at toastui-react-grid.js:1:4602 at Array.forEach (<anonymous>) at c2.value (toastui-react-grid.js:1:4525) at checkShouldComponentUpdate (react-dom.development.js:14134:33) at updateClassInstance (react-dom.development.js:14698:62) at updateClassComponent (react-dom.development.js:19695:20) 오류메시지의 data가 Grid… Read More »
1. 폴더 최적화 설정 확인 1) 탐색기(내컴퓨터)에서 느린 증상이 있는 폴더 우클릭 > 속성 > ‘사용자 지정’ 탭으로 이동 2) ‘다음에 대해 이 폴더 최적화’ 항목을 ‘일반 항목’으로 변경해 보자. 3) 빨라졌으면 성공, 실패면 다른 방법을…? 설정이 ‘비디오’ 등으로 되어 있으면, 각 파일의 메타정보를 읽어서 처리하는 작업 등에서 시간이 걸린다고 한다.
*.d.ts 파일에 type이 아닌 다른 것들을 기재해서 (e.g. 변수/상수 등..) 인식하지 못했던 것이었다. 해당 파일에는 오직 type만 존재해야 하는 듯 하다.
https://studiomeal.com/archives/166
이번에야말로 CSS Flex를 익혀보자 이번에야말로 CSS Grid를 익혀보자
공통 스크립트 /** * 특정 엘리먼트 '외부'를 클릭했을 때 특정 함수를 실행하도록 하는 이벤트 바인더 */ export const useBindClickOutside = (ref: React.RefObject<HTMLElement>, onClickOutside: (e: React.MouseEvent) => void) => { useEffect(() => { // Invoke Function onClick outside of element const handleClickOutside = (e: any) => { if (ref.current && !ref.current.contains(e.target)) { onClickOutside(e); } }; document.addEventListener('mousedown',… Read More »
<div style={{ backgroundImage: `url("http://blabla/bg.png")`, backgroundPosition: 'center', backgroundRepeat: 'no-repeat', backgroundSize: 'cover', }} ></div>
환경 React 18.2.0 Typescript 4.6.3 eslint 8.16.0 common.ts /** * onKeyDown 이벤트핸들러에서 엔터키로 함수 실행하기 */ export const onKeyDownCall = (e: React.KeyboardEvent, func: (ev: React.SyntheticEvent) => void) => { // 'keypress' event misbehaves on mobile so we track 'Enter' key via 'keydown' event if (e.key === 'Enter') { e.preventDefault(); e.stopPropagation(); func(e); } }; test.tsx //… Read More »
스토리북으로 인터랙션 테스트하기 (20220111) React UI 상태를 URL에 저장해야 하는 방법과 이유 (20211214) 우선순위 힌트로 리소스 로딩 최적화하기 (2021117) CORS에서 이기는 방법 (20211110) 2021년에 살펴볼 법한 브라우저 개발자 도구의 유용한 스타일 관련 기능 (20211027) 당신이 모르는 자바스크립트(javascript)의 메모리 누수의 비밀 (20210611) 출처가 다른 윈도우 간에는 데이터를 어떻게 통신할까 (cross origin) (20220831)?
/* * 스크롤바 디자인 커스텀하는 코드 * * – 일단 antd table 내의 스크롤바를 가공해 보았음 * – webkit 계열에서만 사용할 수 있다고 함. */ /* 스크롤바 폭 */ .ant-table-body::-webkit-scrollbar { width: 8px; /* 여기서 height가 의미가 있나? */ } /* 스크롤바에서 움직이는 부분 */ .ant-table-body::-webkit-scrollbar-thumb { border: 3px solid transparent; border-radius: 2px; background-color: #bbb;… Read More »
방법 중괄호(curly braces)로 감싸주고 javascript string 으로 표현. 예시 return (<p>{"I've seen the movie."}</p>) 참고 https://stackoverflow.com/questions/32979512/react-jsx-how-to-render-text-with-a-single-quote-example-pive-p
리액트 라우터 – 중첩된 라우트 Passing props to when nestining routes in React Router v6?
cluster 기능을 사용하면서, map.getSource([source name]).getClusterExpansionZoom() 함수 호출시 결과로 리턴되는 zoom의 숫자가 증가되지 않아, 결과적으로 줌이 되지 않는 문제가 발생한 적이 있다. 정확한 원인은 알 수 없으나, mapbox studio 로 자작한 맵이 문제인 것으로 판단된다. 커스텀 맵이 아닌 기본형 맵을 사용하니 zoom 숫자가 정상적으로 증가되었다. 이래서 솔루션 삽질은 늘 알 수 없는 변수가 있다니까..
https://www.cssscript.com/multi-level-navigation/
TypeScript enum을 사용하지 않는 게 좋은 이유를 Tree-shaking 관점에서 소개합니다.
https://www.typescriptlang.org/docs/handbook/2/generics.html
How to Recursively Render the React Component
일반적인 조언들 z-index 를 충분히 큰 값으로 설정 position: relative 를 활용 탑메뉴 영역이 overflow:hidden 으로 되어 있는지 확인 내 경우는 탑메뉴 영역이 overflow: auto 로 되어 있는 것이 문제였다.
