[Typescript + React] props๊ฐ ์ ๋ฌ ์, ํ์ ์ง์ Props ํ์ ์ ์ : React.FC type TProps = { studentList: TStudent[]; isFetching: boolean; totalCount: number; setPage: React.Dispatch<React.SetStateAction<number>>; }; const TableStudentListByStatus: React.FC<TProps> = ({ studentList,...Sep 5, 2023 ยท 2 min readdanakim.hashnode.dev
Next.js์ Routing๋ผ์ฐํ ์ ๋คํธ์ํฌ ์ฉ์ด๋ก์ ๋คํธ์ํฌ์์ ์ฃผ์๋ก ์ด๋ํ์ฌ ํด๋น ์ฃผ์์ ์ฐ๊ฒฐ๋์ด์๋ ๋ฐ์ดํฐ๋ฅผ ์ฌ์ฉํ๋ ์ผ๋ จ์ ๊ณผ์ ์ ์๋ฏธ ๋ผ์ฐํฐ๋ ๋ผ์ฐํ ์ ์ํํ ์ ์๋ ์ฅ์น pages (ํน์ src/pages) ํด๋ ์๋์ ํ์ผ์ ์ถ๊ฐํ๋ ๋ฐฉ์์ผ๋ก ๊ฐ ์ปดํฌ๋ํธ์ URL์ ๋ถ์ฌ install - ๋ฆฌ์กํธ์์๋ ๋ผ์ฐํฐ๋ฅผ ์ ๊ณตํ์ง ์๊ธฐ ๋๋ฌธ์ react-router-dom์ด๋ผ๋ ํจํค์ง๋ฅผ ์ค์น router ๊ฐ์ฒด ํ์ธ ๊ฐ๋ฅ ๋์ ๋ผ์ฐํ (Dynamic Rout...Aug 30, 2023 ยท 2 min readdanakim.hashnode.dev
React Query(=TanStack Query)https://hjk329.github.io/react/react-query-queries/ fetching, cashing, ์๋ฒ ๋ฐ์ดํฐ์์ ๋๊ธฐํ๋ฅผ ์ง์ํด์ฃผ๋ ๋ผ์ด๋ธ๋ฌ๋ฆฌ axios + react-query fetch + react-query React application์์ ๋น๋๊ธฐ ๋ฐ์ดํฐ๋ฅผ ๋ถ๋ฌ์ค๋ ๊ณผ์ ์ค ๋ฐ์ํ๋ ๋ฌธ์ ๋ค์ ํด๊ฒฐํด์ค React Component ๋ด๋ถ์์ ๊ฐ๋จํ๊ณ ์ง๊ด์ ์ผ๋ก API๋ฅผ ์ฌ์ฉํ ์ ์์ ์ต์ ๋ฐ์ด...Aug 29, 2023 ยท 7 min readdanakim.hashnode.dev
Next.js 12 vs 13๋ฆฌ์กํธ ๋ฌธ๋ฒ์ฐ๋ ํ๋ก ํธ + ๋ฐฑ์๋ ํ๋ ์์ํฌ ๋ฌธ๋ฒ ๋ณ๊ฒฝ ๋ก๋ฉ์ค์ผ ๋ loading.js ํ์ผ ๋ง๋ค๊ธฐ ๋ฐ์ดํฐ ์๋ฒ์์ ๊ฐ์ ธ์ฌ ๋ getServerSideProps() ์ผ๋๋ฐ ์ด์ ์์ ๊ทธ๋ฅ ํจ์๋ช ์์ฑ ํ, import use from "react" fetch ๋ฌธ๋ฒ ์ธ ๋, cache: 'no-store'์ฐ๋ฉด ์์ ์ ์ฐ๋ getServerSideProps()์ ๋น์ท ์ด๋ฏธ์ง ํ๊ทธ ๊ธฐ๋ฅ ํฅ์(Layout Shift ...Aug 28, 2023 ยท 1 min readdanakim.hashnode.dev
Build Admin Dashboard App using Ant DesignInstall npm install antd yarn add antd https://github.com/ant-design/ant-design Usage import React from 'react'; import { Button, DatePicker } from 'antd'; const App = () => ( <> <Button type="primary">PRESS ME</Button> <DatePicker placeho...Aug 28, 2023 ยท 1 min readdanakim.hashnode.dev
