Category Archives: Lang

프로그래밍 언어

[링크] Typescript에서 window 객체에 property 추가하기

By | 6월 14, 2022

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객체의 프로퍼티로 함수를 편입시키는 방법을 알게 되었기 때문이었음.

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

By | 4월 29, 2022

나의 코드 샘플 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

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

[react] Next.js 에서 antd(ant-design) 차트(chart/그래프) 사용할 때 css 관련 오류

By | 3월 25, 2022

최초 @ant-design/charts 를 package에 add 하려 했으나, 그랬을 경우에 next.js 와 충돌이 생겨서(next.js에서는 모듈별 css를 사용할 수 없습니다…류의 오류), 하위 항목인 @ant-design/plots 를 add 했더니 오류 없이 잘 되었다. 웬만한 차트들은 plots 만으로도 커버 가능한 것으로 보임 yarn add @ant-design/plots

[python/sqlalchemy] utc datetime 필드 목록을 ISO 8601 date format 으로 select 후, 다시 그 값을 where 조건에 사용하는 쿼리 샘플

By | 3월 10, 2022

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 »

[react/useRef] ref 를 배열로 관리하는 샘플

By | 3월 4, 2022

개요 가변적으로 row가 추가되는 동적 UI에서 각 컴포넌트의 데이터 초기화, focus 등을 수행하기 위해 ref 가 필요한 사례가 있었음. (ref 배열, array) 소스 const testRefs = useRef<any>([]); … <Input ref={ (el) => (testRefs.current[idx] = el) } … /> … const ref = testRefs.current[idx]; …

moment.js 에서 timezone 을 적용한 date 객체 다루는 샘플

By | 3월 4, 2022

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

[python] hex encode/decode 유틸 샘플

By | 3월 4, 2022

환경 python 3.9 소스 """ 평문을 인수로 받아서 hex encoded string을 리턴한다. """ @staticmethod def encode_hex(src: str): if not src: return '' return src.encode('utf-8').hex() """ hex encoded string을 인수로 받아서 평문을 리턴한다. """ @staticmethod def decode_hex(enc: str): if not enc: return '' return bytearray.decode(bytearray.fromhex(enc))

에러 메시지 피드백(alert, toast 유형)에 lodash debounce 적용 사례

By | 5월 10, 2022

개요 react axios 공통화 작업(interceptor 등)을 하던 중, 에러 메시지 알림에 debounce 처리를 해야 하는 요건이 발생. 소스 axios-settings.ts (커스텀 파일) /** * axios 기본설정 */ const axiosOpts = { // timeout: 5000, // headers: { // "Content-Type": "application/json", // }, }; // export const ax = Axios.create(axiosOpts); // /** * axios response interceptor */… Read More »

[Python] FastAPI, pydantic 환경에서 api response 수정하는 샘플 (MySql datetime 의 utc 정보 포함한 json encode)

By | 2월 18, 2022

환경 python 3.9 fastapi 0.73.0 pydantic 1.9.0 (VO객체 validtion, json encode/decode 등에 관여하는 라이브러리로 보임) 이슈 MySql에서 select한 datetime 컬럼을 별도의 형식 변환 없이 React client에 전달하고, React에서는 dayjs 를 사용하여 포맷팅/출력 해 주고 싶다. 현재는 api response에 타임존(timezone) 정보가 없기 때문에 국제화 출력이 불가한 상태 현재 DB의 timezone은 KST가 아닌 UTC라고 가정한다. 해결 기본적으로… Read More »