728x90 분류 전체보기66 TypeScript-React에서 ReduxToolkit 사용해보기 React TypeScript에서 ReduxToolkit을 사용하기 위해 간단한 설정만 기록합니다. javaScript에서 ReduxToolkit 사용하는법은 아래 링크의 예제를 참고해보셔도 좋습니다. https://hanbbistory.tistory.com/53 AppDispatch = useDispatch; export const useAppSelector: TypedUseSelectorHook = useSelector; 위의 설정을 마치면 js에서 dispatch를 사용하는 것과 같이 사용할 수 있다. // Form.tsx import { useAppDispatch, useAppSelector } from "../hook/useRedux"; import { FormEvent } from "../ty.. 2023. 1. 18. React에서 formData 코드 간소화하기 한 폼의 여러 input의 변경을 관리하기 위해 onChangeHandler 같은 함수를 만들어 사용할 수 있다. // form.tsx onSubmitHandler(e, dispatch)}> onChangeHandler(e)} /> onChangeHandler(e)} required /> onChangeHandler(e)} required > {isEdit ? "수정하기" : "등록"} // useForm.tsx const [formData, setFormData] = useState({ profile_url: "", author: "", content: "", createdAt: todayDate(), }); const onChangeHandler = (e: InputEvent) => { let typ.. 2023. 1. 18. @EntityRepository()를 대신한 repository 생성 방법 새로운 토이 프로젝트를 만들면서 겸사겸사 백엔드 찍먹을 위해 nestjs를 이용해보려고 했다. 로컬 환경에서 CRUD를 만드는게 생각보다 간단해서, 본격적으로 DB와 연결을 시키려고 하니, 별도의 repository를 만들어 연동시켜줘야 한다고 한다. 일반적으로 nest는 request -> controller -> service -> controller -> response 순으로 작동하나, DB와 관련된 일을 시키기 위해서는 repository를 생성해야한다고 한다. 즉, request -> controller -> service -> repo* -> service -> controller -> response 로 한 단계가 추가된다. (Repostitory pattern) @EntityReposit.. 2022. 12. 28. Next JS에서 react-responsive 적용하기 이번에 새로 만들고 있는 토이 프로젝트를 작업하던 중, 모바일 화면일때만 화면을 보여주고 싶었다. 단, 모든 컴포넌트에 미디어쿼리를 통해 작성해줄 수는 없는 노릇이기에 react-responsive를 적용해 화면이 481px을 넘어가면 고정된 페이지를 보여줄 수 있도록 코드를 작성했다. // 패키지 설치 yarn add react-responsive // hook // useMideaQuery.tsx export const Desktop = ({ children }: any) => { const isDesktop = useMediaQuery({ minWidth: 481, }); return isDesktop ? children : null; }; export const Mobile = ({ childre.. 2022. 12. 18. 이전 1 ··· 5 6 7 8 9 10 11 ··· 17 다음 728x90
