728x90 분류 전체보기66 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. TypeScript 기초 문법 정리 TypeScript 기본 문법 기본 TS 타입 선언 // 문자열 let str: string = "hello"; // 숫자 let num: number = 100; // 배열 let arr: Array = [10,20,30]; let arr2: number[] = [10,20,30]; let arr3: Array = ["hello","hellololo" ]; let arr4: [string, number] = ["hello", 182]; // 객체 let obj:object = {name:"hello", age:29}; let person:{name: string, age:number}; // Boolean let isAvaliable: boolean = true; // 함수 선언 parameter와 r.. 2022. 11. 1. javaScript 스프레드 연산자로 객체 다뤄보기 js에서 객체는 동일한 key값(프로퍼티명)이 있는 경우 뒤의 프로퍼티가 첫 번째 프로퍼티를 덮어쓴다. let a = {x: 1, x: 2} console.log(a) // {x: 2} 이를 이용해 객체를 스프레드 연산자로 가져오면서 수정을 해줄 수 있다. let obj = { name: "john", job: "dev", }; console.log({ ...obj, job: "devdevdevdevdev" }); // => { name: 'john', job: 'devdevdevdevdev' } 혹시라도 객체 안에 객체가 또다시 있는 형식의 데이터에서 수정이 이뤄져야 한다면, 유사하게 아래와 같이 적용해줄 수 있다. let obj = { name: "1223", job: "222222", count: .. 2022. 10. 7. React useNavigate로 props 넘기기 useNavigate로 다른 페이지의 화면으로 이동할 때, props처럼 값을 넘기는 방법을 알아봤다. // 보내는컴포넌트.jsx import { useNavigate } from "react-router-dom"; const 어떤함수=()=>{ const navigate = useNavigate() let someDatas = { name:"hihi" value:"here" } return navigate(`/다른페이지주소`,{ state: someDatas });}> 다른페이지로 갑니당 } // 받는 컴포넌트.jsx import { useLocation } from "react-router-dom"; const 어떤함수=()=>{ const location = useLocation(); console.. 2022. 10. 5. 이전 1 ··· 6 7 8 9 10 11 12 ··· 17 다음 728x90
