[typescript] *.d.ts 파일에 정의된 타입을 import 없이 인식하지 못하는 경우 (typescript access type without import not work)
*.d.ts 파일에 type이 아닌 다른 것들을 기재해서 (e.g. 변수/상수 등..) 인식하지 못했던 것이었다. 해당 파일에는 오직 type만 존재해야 하는 듯 하다.
@toast-ui/react-grid (toast grid, tui grid, 토스트그리드) 사용시 data.some is not a function (data.map is not a function)… 등의 에러가 발생했던 경험.
문제상황 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) 빨라졌으면 성공, 실패면 다른 방법을…? 설정이 ‘비디오’ 등으로 되어 있으면, 각 파일의 메타정보를 읽어서 처리하는 작업 등에서 시간이 걸린다고 한다.
[링크] javascript 코드 실행속도(performance) 체크하기
https://studiomeal.com/archives/166
[링크] CSS 학습 관련
이번에야말로 CSS Flex를 익혀보자 이번에야말로 CSS Grid를 익혀보자
[React/버튼] button 태그로 만든 버튼이 아닌, div 태그로 a 태그(anchor)를 감싼 형태의 button에 대한 이벤트 바인딩 삽질기
환경 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 »
[css] 스크롤바(scrollbar) 모양(design, 디자인) 조정하는 샘플코드 (custom…)
/* * 스크롤바 디자인 커스텀하는 코드 * * – 일단 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 »
[react] jsx(tsx) 파일 내 텍스트에서 따옴표(quote, quotation) 입력하기
방법 중괄호(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
[Mapbox] cluster 클릭시 zoom이 되지 않던 현상
cluster 기능을 사용하면서, map.getSource([source name]).getClusterExpansionZoom() 함수 호출시 결과로 리턴되는 zoom의 숫자가 증가되지 않아, 결과적으로 줌이 되지 않는 문제가 발생한 적이 있다. 정확한 원인은 알 수 없으나, mapbox studio 로 자작한 맵이 문제인 것으로 판단된다. 커스텀 맵이 아닌 기본형 맵을 사용하니 zoom 숫자가 정상적으로 증가되었다. 이래서 솔루션 삽질은 늘 알 수 없는 변수가 있다니까..
[링크] html과 css만으로 탑메뉴(GNB, top menu) 만들기
https://www.cssscript.com/multi-level-navigation/
[링크] 타입스크립트 열거형 (typescript enum) 관련 이슈/문제점
TypeScript enum을 사용하지 않는 게 좋은 이유를 Tree-shaking 관점에서 소개합니다.
[링크] 타입스크립트 제네릭 (typescript generic) 관련
https://www.typescriptlang.org/docs/handbook/2/generics.html
[링크/react] 재귀 컴포넌트 만드는 예시 (메뉴, GNB 트리구조 등…)
How to Recursively Render the React Component
[html/css] 탑메뉴(gnb) 작성시 드롭다운 메뉴가 컨텐츠 영역 뒤로 숨겨지던 문제 (dropdown menu gets hidden behind the content)
일반적인 조언들 z-index 를 충분히 큰 값으로 설정 position: relative 를 활용 탑메뉴 영역이 overflow:hidden 으로 되어 있는지 확인 내 경우는 탑메뉴 영역이 overflow: auto 로 되어 있는 것이 문제였다.
[링크] React Render Props 패턴 관련
메모 hooks가 render props를 대부분 대체하지만, 그래도 render props가 필요한 경우가 있다… 라는 류의 글들이 심심찮게 보임 참고 Render Props vs React Hooks: Which Is More Efficient?
[링크] React HOC(higher-order component) 관련
사용처 UI패턴은 유사한데(e.g. 목록화면), 데이터소스가 다른 경우(분류/필터링이 달라서 다른 목록이 도출되는 화면들), UI출력 관련 중복코드를 줄이는 데 사용하는 것 같다. 참고 [React] Hook과 함께 HOC 사용해보기
[vscode] 파일(리소스) 검색시 특정 패턴(디렉토리) 제외하는 설정
Ctrl + P 로 기능 검색 (검색어 "setting ui") Open Settings (UI) 로 진입 텍스트편집기 > 파일 > Exclude > 검색대상에서 제외할 패턴 추가
[펌글/typescript] 함수(function)의 인수(인자,매개변수,arguments)의 형식을 타입(type)으로 선언하기.
예시 type TestParams = Parameters<(a: string, b: number) => void> // [string, number] type SecondParam = TestParams[1] // number 출처 https://stackoverflow.com/questions/51851677/how-to-get-argument-types-from-function-in-typescript
분명히 요청(request)/응답(response)이 존재하는데 크롬(chrome) 네트워크(network) 탭의 xhr이나 doc에서 찾을 수 없을 경우
JSONP 요청인지 확인해 보자 (개발자도구 > js 탭에서) 기타 postMessage를 사용하는 경우도 있다고 하는데… 이건 xhr에 잡히는 건가?
[react/vite] Error: Minified React error #130; visit https://reactjs.org/docs/error-decoder.html?invariant=130&args[]=object&args[]=
vite 환경에서 토스트그리드(toast grid)를 사용하는데, 로컬에서는 잘 돌아가는데, 빌드 후 nginx에 올리니 위 제목과 같은 스크립트 에러가 발생하고 화면이 뜨질 않았다. 얼마간의 검색 후, 해결이라기 보다는 우회책을 찾게 되어 기록한다. Error: Minified React error #130; visit https://reactjs.org/docs/error-decoder.html?invariant=130&args[]=object&args[]= 페이지보다 선행되는 ajax call에 에러가 없는지 점검 (e.g. /api/v1/getMsgList) 1에 문제가 없다면 일부 서드파티 라이브러리에서 ESM에 적합하지 않은… Read More »