Frontend Developer๐ฉโ๐ป
Props ํ์ ์ ์ : React.FC type TProps = { studentList: TStudent[]; isFetching: boolean; totalCount: number; setPage: React.Dispatch<React.SetStateAction<number>>; }; const TableStudentListByStatus: React.FC<TProps> = ({ studentList,...
๋ผ์ฐํ ์ ๋คํธ์ํฌ ์ฉ์ด๋ก์ ๋คํธ์ํฌ์์ ์ฃผ์๋ก ์ด๋ํ์ฌ ํด๋น ์ฃผ์์ ์ฐ๊ฒฐ๋์ด์๋ ๋ฐ์ดํฐ๋ฅผ ์ฌ์ฉํ๋ ์ผ๋ จ์ ๊ณผ์ ์ ์๋ฏธ ๋ผ์ฐํฐ๋ ๋ผ์ฐํ ์ ์ํํ ์ ์๋ ์ฅ์น pages (ํน์ src/pages) ํด๋ ์๋์ ํ์ผ์ ์ถ๊ฐํ๋ ๋ฐฉ์์ผ๋ก ๊ฐ ์ปดํฌ๋ํธ์ URL์ ๋ถ์ฌ install - ๋ฆฌ์กํธ์์๋ ๋ผ์ฐํฐ๋ฅผ ์ ๊ณตํ์ง ์๊ธฐ ๋๋ฌธ์ react-router-dom์ด๋ผ๋ ํจํค์ง๋ฅผ ์ค์น router ๊ฐ์ฒด ํ์ธ ๊ฐ๋ฅ ๋์ ๋ผ์ฐํ (Dynamic Rout...
https://hjk329.github.io/react/react-query-queries/ fetching, cashing, ์๋ฒ ๋ฐ์ดํฐ์์ ๋๊ธฐํ๋ฅผ ์ง์ํด์ฃผ๋ ๋ผ์ด๋ธ๋ฌ๋ฆฌ axios + react-query fetch + react-query React application์์ ๋น๋๊ธฐ ๋ฐ์ดํฐ๋ฅผ ๋ถ๋ฌ์ค๋ ๊ณผ์ ์ค ๋ฐ์ํ๋ ๋ฌธ์ ๋ค์ ํด๊ฒฐํด์ค React Component ๋ด๋ถ์์ ๊ฐ๋จํ๊ณ ์ง๊ด์ ์ผ๋ก API๋ฅผ ์ฌ์ฉํ ์ ์์ ์ต์ ๋ฐ์ด...
๋ฆฌ์กํธ ๋ฌธ๋ฒ์ฐ๋ ํ๋ก ํธ + ๋ฐฑ์๋ ํ๋ ์์ํฌ ๋ฌธ๋ฒ ๋ณ๊ฒฝ ๋ก๋ฉ์ค์ผ ๋ loading.js ํ์ผ ๋ง๋ค๊ธฐ ๋ฐ์ดํฐ ์๋ฒ์์ ๊ฐ์ ธ์ฌ ๋ getServerSideProps() ์ผ๋๋ฐ ์ด์ ์์ ๊ทธ๋ฅ ํจ์๋ช ์์ฑ ํ, import use from "react" fetch ๋ฌธ๋ฒ ์ธ ๋, cache: 'no-store'์ฐ๋ฉด ์์ ์ ์ฐ๋ getServerSideProps()์ ๋น์ท ์ด๋ฏธ์ง ํ๊ทธ ๊ธฐ๋ฅ ํฅ์(Layout Shift ...
UI Library / Design Framework
Redux์ ๊ธฐ๋ฅ์ ๊ฐ์ง๋ง, ํํ๋ฒ์ด ์ฌ์์ง. ์ธํ ๋ฌธ๋ฒ ํ์ ์์. ์ค์น npm install zustand ์ปดํฌ๋ํธ๋ค ๊ฐ์ ๋ณ์๋ฅผ ๊ณต์ ํ๊ณ ์ถ์ ๋ import create from 'zustand' import { devtools } from "zustand/middleware"; //state ๋ณด๊ดํจ -> ๋ณดํต ๋ณ์์ ๋ด์์ ์ฌ์ฉ(useStore) const useStore = create(()=> { count : 0, ...
props = properties ๊ธฐ๋ณธ์ ์ผ๋ก ๊ฐ์ฒด๋ก ์ ๋ฌ๋จ ํ๊ฐ์ props App.js import React from 'react'; import Hello from './Hello'; function App() { return ( <Hello name="react" /> ); } export default App; Hello.js - props ์์ฝ์ด๋ก ๋ฐ๋๋ฒ import React from 'react'; fu...
map
[NextJs + StyledComponent] : ์๋ก๊ณ ์นจ์ ์คํ์ผ ์ ์ฉ์ด ์๋๋ ์ด์ ๋ฐ์ barbel ํ๋ฌ๊ทธ์ธ ์ค์น : yarn add babel-plugin-styled-components yarn add @types/styled-components -D // ์ถ๊ฐ๋ก .barbelrc ํ์ผ ์์ฑ { "presets": ["next/babel"], "plugins": [["styled-components", { "ssr": tru...
