Category Archives: JavaScript

[React/버튼] button 태그로 만든 버튼이 아닌, div 태그로 a 태그(anchor)를 감싼 형태의 button에 대한 이벤트 바인딩 삽질기

By | 9월 23, 2022
0 Comment

환경 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 »

[링크] Frontend (프론트엔드) 개발 팁(tip) 모음

By | 1월 5, 2023
0 Comment

스토리북으로 인터랙션 테스트하기 (20220111) React UI 상태를 URL에 저장해야 하는 방법과 이유 (20211214) 우선순위 힌트로 리소스 로딩 최적화하기 (2021117) CORS에서 이기는 방법 (20211110) 2021년에 살펴볼 법한 브라우저 개발자 도구의 유용한 스타일 관련 기능 (20211027) 당신이 모르는 자바스크립트(javascript)의 메모리 누수의 비밀 (20210611) 출처가 다른 윈도우 간에는 데이터를 어떻게 통신할까 (cross origin) (20220831)?

[링크] React HOC(higher-order component) 관련

By | 7월 29, 2022
0 Comment

사용처 UI패턴은 유사한데(e.g. 목록화면), 데이터소스가 다른 경우(분류/필터링이 달라서 다른 목록이 도출되는 화면들), UI출력 관련 중복코드를 줄이는 데 사용하는 것 같다. 참고 [React] Hook과 함께 HOC 사용해보기

[react/vite] Error: Minified React error #130; visit https://reactjs.org/docs/error-decoder.html?invariant=130&args[]=object&args[]=

By | 7월 22, 2022
0 Comment

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 »

vite react build시 에러 메시지와 함께 엔터를 한 번 눌러줘야 빌드가 되었던 현상

By | 7월 21, 2022
0 Comment

package.json … "scripts": { … "dev": "cross-env NODE_ENV=development API_ENV=dev vite", "build": "cross-env NODE_ENV=production API_ENV=dev tsc && vite build", "buildProd": "cross-env NODE_ENV=production API_ENV=prod vite tsc && vite build", … }, … 여기서 bulidProd 실행시에 [Could not auto-determine entry point from rollupOptions or html files and there are no explicit optimizeDeps.include patterns. Skipping dependency pre-bundling.] 라는 에러메시지와… Read More »

[javascript] 객체(object)를 완전히 상수화(constants) 하기 (deepFreeze)

By | 7월 15, 2022
0 Comment

const 선언으로는 변수 바인딩을 고정할 수 있지만, 해당 변수의 값이 object일 경우, object 내의 값이 변경되는 것을 막을 수는 없다. Object.freeze()로는 1depth까지는 막을 수 있어도 2depth 이상은 막을 수 없다. 그래서 찾아보니 deep freeze를 구현한 구현체가 npm에 존재했다. https://www.npmjs.com/package/deep-freeze

[node.js] 초간단 api 서버 샘플코드

By | 7월 6, 2022
0 Comment

환경 node 16.15.1 package.json { "name": "test-mock-server", "main": "app.js", "packageManager": "yarn@3.2.1", "dependencies": { "cors": "^2.8.5", "express": "^4.18.1" } } app.js var express = require("express"); var cors = require("cors"); var app = express(); app.listen(4000, () => { console.log("Server running on port 4000"); }); app.use(cors()); app.get("/testList", (req, res, next) => { res.json({ data: { list: [ {… Read More »

[react] useState의 setter 를 동기함수(sync ≒ async ~ await) 처럼 사용할 수 있게 해 주는 방법 (결론: 안됨)

By | 4월 29, 2022
0 Comment

나의 코드 샘플 const [dataList, setDataList] = useState<any[]>(); … const data = await getData(id); setDataList(preList => { const tmpList = [ …preList ]; tmpList[i] = data; return tmpList; }); 이것으로 된다고 착각했었으나, 진짜 동기식으로 처리 되는 것이 아니라, setter를 연속 호출 했을 떄, 이전 값이 보존되는 수준의 처리였던 것이다. 진짜 코드 흐름 내에서 동기식으로 처리하려면… Read More »

[AG Grid] client row model 에서 그리드의 row 순번(num, seq) 자동으로 생성하기

By | 4월 22, 2022
0 Comment

환경 ag-grid-react 26.0.0 칼럼 정의 … { field: 'seq', headerName: '순번', valueGetter: 'node.rowIndex + 1' }, … 그리드 property <AgGridReact rowData={rowData} columnDefs={columnDefs} … onSortChanged={(e) => { e.api.refreshCells() }} // client row model 에서 칼럼 헤더 클릭해서 정렬이 변경되었을 때, valueGetter: 'node.rowIndex + 1', 로 만든 순번을 다시 리프레시 해 준다. ></AgGridReact>