๐Ÿ”—2311

Bora Imยท2023๋…„ 11์›” 24์ผ
0

HTML๊ณผ CSS๋ฅผ ํ™œ์šฉํ•ด์„œ ์ฝ˜ํ…์ธ ๋ฅผ ์ˆจ๊ธฐ๋Š” 10๊ฐ€์ง€ ๋ฐฉ๋ฒ•


๋ฆฌ์•กํŠธ ๋ Œ๋”๋ง ์ตœ์ ํ™”ํ•˜๋Š” 8๊ฐ€์ง€ ๋ฐฉ๋ฒ•๊ณผ ๊ณ ์ฐฐ
React์˜ ์„ฑ๋Šฅ์„ ์ตœ์ ํ™”ํ•˜๋Š” 10๊ฐ€์ง€ ๋ฐฉ๋ฒ•


setState์˜ ๋™์ž‘ ์›๋ฆฌ, prevState
state ๋ณ€๊ฒฝํ•จ์ˆ˜ ์‚ฌ์šฉํ•  ๋•Œ ์ฃผ์˜์  : async
setState์˜ ๋น„๋™๊ธฐ ์ฒ˜๋ฆฌ๋กœ ์ธํ•œ ๋ฒ„๊ทธ ํ•ด๊ฒฐํ•˜๊ธฐ
setState๊ฐ€ ๋‚ด ๋งˆ์Œ์ฒ˜๋Ÿผ ๋™์ž‘ํ•˜์ง€ ์•Š๋Š” ์ด์œ (feat.๋น„๋™๊ธฐ)
๋ถ€๋ชจ๋‹˜์˜ ์€ํ˜œ๋ฅผ ๋Œ๋ ค์ฃผ๋Š” ๋ฐฉ๋ฒ•


[React] ๋ผ์šฐํ„ฐ(Router)์™€ ๋ ˆ์ด์•„์›ƒ(Layout) ์ชผ๊ฐœ๊ธฐ
[๋ฆฌ์•กํŠธ๋ฅผ ๋‹ค๋ฃจ๋Š” ๊ธฐ์ˆ ] Outlet๊ณผ Layout์„ ์ด์šฉํ•ด ๋ผ์šฐํ„ฐ ๊ด€๋ฆฌ


Recoil + React Query

  • useQuery(queryKey, queryFn[, options]) : GET ๐Ÿ”—
    • queryKey : ์‘๋‹ต ๋ฐ์ดํ„ฐ๋ฅผ ์บ์‹œํ•  ๋•Œ ์‚ฌ์šฉํ•  Unique Key
    • queryFn : ์š”์ฒญ ์ˆ˜ํ–‰์„ ์œ„ํ•œ Promise ๋ฅผ ๋ฐ˜ํ™˜ํ•˜๋Š” ํ•จ์ˆ˜
  • useMutation(mutationFn[, options]) : POST PUT DELETE ๐Ÿ”—
    • mutationFn : Promise๋ฅผ ๋ฐ˜ํ™˜ํ•˜๋Š” ํ•จ์ˆ˜

[์ „์—ญ์ƒํƒœ๊ด€๋ฆฌ] Recoil
Recoil State(์ƒํƒœ) ๊ด€๋ฆฌ
Recoil์„ ์ด์šฉํ•œ ์†์‰ฌ์šด ์ƒํƒœ๊ด€๋ฆฌ
Recoil ๋กœ React ์Šค๋Ÿฝ๊ฒŒ ์ƒํƒœ๊ด€๋ฆฌํ•˜๋Š”๋ฒ•
Recoil๋กœ ์ƒํƒœ๊ด€๋ฆฌํ•˜๊ธฐ(feat. SSR...)


Multi Themes ์ ์šฉ - Next.js
useEffect์™€ useLayoutEffect์˜ ์ฐจ์ด
Suspense๋ฅผ ์ด์šฉํ•œ Skeleton ๊ตฌํ˜„

0๊ฐœ์˜ ๋Œ“๊ธ€

๊ด€๋ จ ์ฑ„์šฉ ์ •๋ณด