A.개발관련자료 (19) 썸네일형 리스트형 [0]Uncaught (in promise) TypeError: Cannot read properties of null (reading 'clientWidth') - react tailwindcss error 1. 해당 width를 적용하는 부분(ex: 데이터를 불러오는 부분, 클릭시 이벤트)에서 width와 관련된 태그내부 길이를 document.getById("").clientHeight로 동적 길이를 측정 후 => useState로 이벤트 실행시 길이 변경 2.tailwind에서 이벤트 발생시 변동되는 값의 경우 적용이 되지 않는 경우가 있다. tailwind css는 정적으로 알려진 클래스에 의존하기 때문에 작동하지 않을수 있다. 따라서 이럴 경우에는 style컴퍼넌트를 사용한다. 참고: https://stackoverflow.com/questions/73199212/change-class-attribute-dynamically-inline-with-tailwind [0]react toggle 버튼 만들기 import React, { useState } from "react"; const ToggleBtn = () => { const [isOn, setisOn] = useState(false); const toggleHandler = () => { setisOn(!isOn); }; return ( ); }; export default ToggleBtn; .toggle { position: relative; cursor: pointer; } .toggle .toggle-container{ width: 44px; height: 24px; border-radius: 30px; background-color: #d4d3d3; transition: all 0.2s ease; } .toggle .toggle-cont.. [0]Warning: ReactDOM.render is no longer supported in React 18. Use createRoot instead. Until you switch to the new API, your app will behave as if it's running React 17. Learn more: https://reactjs.org/link/switch-to-createroot App.js 초기 세팅시 React18 최신버전에서 일어나는 오류 //오류난 코드 import React from "react"; import "./index.css"; import App from "./App"; import { Provider } from "react-redux"; import store from "./features/store"; import ReactDOM from "react-dom"; import { PersistGate } from "redux-persist/integration/react"; import { persistStore } from "redux-persist"; export let persistor = persistStore(store); ReactDOM.rend.. [0]NESTJS typeorm date 타입 날짜 between으로 데이터 찾기 출처: https://www.kindacode.com/snippet/typeorm-selecting-rows-between-2-dates/ import { Between } from "typeorm"; /* Other code */ const userRepository = dataSource.getRepository(User); const users = await userRepository.find({ where: { createdAt: Between( new Date(2019, 5, 3), new Date(2022, 5, 3) ), } }) console.log(users); [0]nestjs typeorm OR, AND 참고: https://orkhan.gitbook.io/typeorm/docs/find-options //AND 연산 userRepository.find({ where: { firstName: "Timber", lastName: "Saw" } }); //OR 연산 userRepository.find({ where: [ { firstName: "Timber", lastName: "Saw" }, { firstName: "Stan", lastName: "Lee" }, ], }); [0]nestjs 페이징 ( take, skip 사용) //1.초기: javascript slice 사용하여 페이징 => 매번 totalQList를 불러와야함 if (req.category === '작성자') { let totalQList = !( req.userId === '' || req.userId === null || req.userId === undefined ) ? await this.customenrCenterQ.find({ userId: req.userId, }) : await this.customenrCenterQ.find(); result.QList = totalQList; // let totalPageCount = Math.ceil(totalQList.length / slicePage); // result.totalPage = totalP.. [0]increment decrement button import React from "react"; import { useSelector, useDispatch } from "react-redux"; import { increment, decrement } from "../../features/CommonSliceReducer"; const ReduxNavigate = () => { const count = useSelector((state) => state.common.i); const dispatch = useDispatch(); return ( ReduxNavigate {count} { dispatch(increment()); }} > increment { dispatch(decrement()); }} > decrement ); }; export d.. [0]redux toolkit의 slice내에서 navigate쓸수 없을 때 (비동기) https://stackoverflow.com/questions/71582643/how-to-call-navigate-inside-redux-toolkits-actions-in-react-js How to call navigate inside Redux Toolkit's actions in React js I've a simple app built on redux-toolkit. I am dispatching createProduct actions which is working fine. I want to navigate to /products/ page form /products/new page after createProduct action. How... stackoverflow.com 페이지 안에서.. 이전 1 2 3 다음
