728x90 개발일지/NextJS6 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 2 다음 728x90
