const 선언으로는 변수 바인딩을 고정할 수 있지만, 해당 변수의 값이 object일 경우, object 내의 값이 변경되는 것을 막을 수는 없다. Object.freeze()로는 1depth까지는 막을 수 있어도 2depth 이상은 막을 수 없다. 그래서 찾아보니 deep freeze를 구현한 구현체가 npm에 존재했다. https://www.npmjs.com/package/deep-freeze
Double-Checked Locking with Singleton Double-checked Locking Pattern (DCLP) 을 쓰지 말아야 하는 이유 Java volatile이란?
https://velog.io/@yrnana/React-Query%EC%97%90%EC%84%9C-staleTime%EA%B3%BC-cacheTime%EC%9D%98-%EC%B0%A8%EC%9D%B4
환경 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 »
[javascript] 의존성 관리 [javascript] 성능 최적화 [javascript] 디버깅 React Hooks: useRef 사용법 React useRef의 다양한 활용 방법(mutable object, callback ref와 forwardRef)
https://all-dev-kang.tistory.com/entry/%EB%A6%AC%EC%95%A1%ED%8A%B8-%EB%91%90%EB%B2%88-%EB%A0%8C%EB%8D%94%EB%A7%81-%EB%90%98%EB%8A%94-%EC%9D%B4%EC%8A%88%EC%97%90-%EB%8C%80%ED%95%98%EC%97%ACFeatStrictMode
https://github.com/vitejs/awesome-vite
https://stackoverflow.com/questions/41285211/overriding-interface-property-type-defined-in-typescript-d-ts-file
https://velog.io/@kineo2k/Typescript%EC%97%90%EC%84%9C-window-%EA%B0%9D%EC%B2%B4%EC%97%90-property-%EC%B6%94%EA%B0%80%ED%95%98%EA%B8%B0 참고 위 내용을 찾아봤던 이유는, header/footer.tsx 에 속한 함수를 어떻게 호출할 방법이 없을까 찾아보다가 window객체의 프로퍼티로 함수를 편입시키는 방법을 알게 되었기 때문이었음.
yarn add webpack -D
[React]useEffect Hook에서 async await를 사용하여 API 호출
나의 코드 샘플 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-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>
최초 @ant-design/charts 를 package에 add 하려 했으나, 그랬을 경우에 next.js 와 충돌이 생겨서(next.js에서는 모듈별 css를 사용할 수 없습니다…류의 오류), 하위 항목인 @ant-design/plots 를 add 했더니 오류 없이 잘 되었다. 웬만한 차트들은 plots 만으로도 커버 가능한 것으로 보임 yarn add @ant-design/plots
내 경우는 model 멤버의 데이터타입 때문에 발생했었다. ( string을 보냈는데 int 로 받음 ) 참고 https://velog.io/@ryu_log/%EB%82%B4%EA%B0%80-%EA%B2%AA%EC%9D%80-422-%EC%97%90%EB%9F%AC-FastAPI
TEST_TABLE = sqlalchemy.Table( "TEST_TABLE", metadata, sqlalchemy.Column("user_id", sqlalchemy.Integer), sqlalchemy.Column("del_yn", sqlalchemy.String), sqlalchemy.Column("update_time", sqlalchemy.DateTime) ) # MAX_HISTORY 관리를 위한 delete 작업 MAX_HISTORY = 10 # 레코드를 이 개수만 유지 (FIFO) where_clause = f"""user_id={user_id} AND del_yn <> 'Y'""" query = f""" /* 수정일시 – ISO 8601 format (명시적 datetime 객체 바인딩이 아니라 sqlalchemy.engine.row.Row 로 자동 바인딩 되므로 쿼리단에서 포맷팅… Read More »
간단 요약 프로젝트 루트경로 > .next 폴더를 지우고 재실행 참고 https://stackoverflow.com/questions/67652612/chunkloaderror-loading-chunk-node-modules-next-dist-client-dev-noop-js-failed
개요 가변적으로 row가 추가되는 동적 UI에서 각 컴포넌트의 데이터 초기화, focus 등을 수행하기 위해 ref 가 필요한 사례가 있었음. (ref 배열, array) 소스 const testRefs = useRef<any>([]); … <Input ref={ (el) => (testRefs.current[idx] = el) } … /> … const ref = testRefs.current[idx]; …
onChange={_.debounce((o: any) => handleChange(o, etc), 500)}
환경 react 17.0.2 moment-timezone 0.5.34 소스 import moment from 'moment-timezone'; // tz 를 사용하려면 이걸로 import 해야 함. // 기본 timezone 지정 const DEFAULT_TIMEZONE = 'Asia/Seoul'; // const DEFAULT_TIMEZONE = 'America/New_York'; // 날짜 기간 검색시 기본 기간 export const DEFAULT_SEARCH_PERIOD_DAYS = 7; const cur = moment.tz(new Date(), DEFAULT_TIMEZONE); const start = cur.clone().add((-1 * DEFAULT_SEARCH_PERIOD_DAYS), 'days');… Read More »
