728x90 개발일지64 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. NextJs에서의 로딩 처리 모든 페이지를 미리 렌더링하는 NextJS 특성상, 다른 페이지로 라우팅이 진행될때, 사용자는 가만히 멈춰있는 화면을 보게될 수 있다. 오늘은 nextJS에서의 로딩을 적용해줘봤다. // _app.tsx // 미리 만들어놓은 로딩 훅과 로딩 스피너 import { useLoading } from "src/hooks/useLoading"; import { LoadingSpinner } from "src/components/videos/video/LoadingSpinner"; {isLoading ? : null} 로딩스피너는 CSS로 만들어도 좋고, SVG나 GIF, 라이브러리 등 자유롭게 적용하면 좋을 것 같다. // useLoading.ts import Router from "next/router"; i.. 2022. 11. 29. 이전 1 ··· 5 6 7 8 9 10 11 ··· 16 다음 728x90
