ํˆฌ๋‘๋ฉ”์ดํŠธ ํด๋ก  ์ค‘๊ฐ„์ ๊ฒ€

2024. 2. 23. 00:25ยท ์นดํ…Œ๊ณ ๋ฆฌ ์—†์Œ
๋ชฉ์ฐจ
  1. ์™œ ์ด๋Ÿฐ ๊ธ€์„ ์ ๋‚˜์š”?
  2. ์ด๋Ÿฐ๊ฒŒ ์–ด๋ ค์› ์Œ
  3. +2024-02-23
  4. +2024-03-13

 

์™œ ์ด๋Ÿฐ ๊ธ€์„ ์ ๋‚˜์š”?

๊ฐœ๋ฐœ ๋™์•„๋ฆฌ ์šด์˜์ง„์œผ๋กœ ์ฐธ์—ฌํ•˜๊ฒŒ ๋๋Š”๋ฐ ์œ„์˜ ํˆฌ๋‘๋ฉ”์ดํŠธ๋ฅผ ํด๋ก ์„ ํ•ด์•ผ ํ–ˆ๋‹ค. ๋‚ด๊ฐ€ ์ด๊ฑธ ์–ด๋А์ •๋„ ํด๋ก ํ•˜๋ฉด์„œ ์–ด๋ ค์› ๋˜ ์ ์„ ์ ๊ณ ์ž ํ•œ๋‹ค.

 

์ด๋Ÿฐ๊ฒŒ ์–ด๋ ค์› ์Œ

์ด๋ฏธ ๋งŒ๋“ค์–ด์ง„ ์ œ๊ณต๋ฐ›์€ API๋ฅผ ํ™œ์šฉํ•˜์—ฌ ์ด ์•ฑ์„ ๋งŒ๋“ค์–ด์•ผ ํ–ˆ๋Š”๋ฐ ์ „์—ญ ์ƒํƒœ๊ด€๋ฆฌ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๋ฅผ ๋„์ž…ํ•  ์ˆ˜ ๋ฐ–์— ์—†์—ˆ๊ณ (todos๋ฐ์ดํ„ฐ ๋•Œ๋ฌธ), ๋ฐฑ์—”๋“œ์—์„œ ์ œ๊ณตํ•ด์ฃผ๋Š” ๊ธฐ๋Šฅ์ด ์ข€ ์ œํ•œ์ ์ด์—ˆ๋‹ค (ํŠน์ • ๋ชฉํ‘œ์˜ ํ•ด๋‹นํ•˜๋Š” ํˆฌ๋‘๋ฆฌ์ŠคํŠธ ์–ป์–ด์˜ฌ ๋ฐฉ๋ฒ•์ด ์—†์—ˆ์Œ). ๊ทผ๋ฐ ๊ทธ๋ ‡๋‹ค๊ณ  ๋ฐฑ์—”๋“œ ํ•œํ…Œ ์ด ๊ธฐ๋Šฅ์„ ๋งŒ๋“ค์–ด ๋‹ฌ๋ผ๊ณ  ํ•˜๋Š” ๊ฒƒ๋„ ๋ณ„๋กœ์ธ๊ฒŒ ๋‚˜์ค‘์— ๋ชฉํ‘œ๊ฐ€ 100๊ฐœ ์ •๋„ ๋œ๋‹ค๋ฉด 100๊ฐœ์˜ ๋ฆฌํ€˜์ŠคํŠธ๋ฅผ ๋ณด๋‚ด๊ฒŒ ๋œ๋‹ค.. ๊ทธ๋ž˜์„œ ์ตœ๋Œ€ํ•œ ๋ฐ›์•„์˜จ todoList๋ฅผ UI์˜ ํ•„์š”๋Œ€๋กœ ๋ฐ”๊พธ์—ˆ๋‹ค. recoil์˜ selector๋ฅผ ์ ๊ทน ํ™œ์šฉํ–ˆ๋‹ค.

 

react-query ์‚ฌ์šฉ์„ ์ข€ ๊ณ ๋ฏผํ–ˆ์—ˆ๋‹ค. ๋งŒ์•ฝ todo๋ฅผ ์™„๋ฃŒํ–ˆ๋‹ค๊ณ  ์ฒดํฌํ•˜๋Š” ์ƒํ™ฉ์„ ๊ฐ€์ •ํ•˜์ž. ์šฐ์„ ์€ ์ „์—ญ๋ฐ์ดํ„ฐ๋ฅผ ์ˆ˜์ •ํ•จ๊ณผ ๋™์‹œ์— ์„œ๋ฒ„์— ๋ฆฌํ€˜์ŠคํŠธ๋ฅผ ๋ณด๋‚ด์–ด DB์—์„œ ํ•ด๋‹น todo๊ฐ€ ์—…๋ฐ์ดํŠธ ๋˜์–ด์•ผํ•  ๊ฒƒ์ด๋‹ค. ๋˜, UI์—๋„ ์ฆ‰๊ฐ ๋ฐ˜์˜์ด ๋˜์–ด์•ผ ํ–ˆ๋‹ค. react-query๋ฅผ ์“ฐ๋ฉด ์ด ๋ถ€๋ถ„์„ ์‰ฝ๊ฒŒ ํ•  ์ˆ˜ ์žˆ์ง€ ์•Š์„๊นŒ? ์ƒ๊ฐํ–ˆ๋‹ค. ๊ทธ๋ฆฌ๊ณ  ์ „์—ญ์ ์œผ๋กœ ๊ด€๋ฆฌ๋˜๋‚˜ ๋ณด๋‹ˆ recoil๋„ ์•ˆ ์“ธ ์ˆ˜ ์žˆ๊ณ  ๋ง์ด๋‹ค. ํ•˜์ง€๋งŒ, ์–ด์ฐจํ”ผ ์›”๋ณ„๋กœ ๋ฐ›์€ todoList๋ฅผ ํ•„ํ„ฐ๋ง์„ ํ•˜๋ ค๋ฉด recoil์˜ selector์™€ ๊ฐ™์€ ๋ฌธ๋ฒ•์ด ํ•„์š”ํ–ˆ๊ณ , ์ฆ‰๊ฐ์ ์ธ UI ๋ฐ˜์˜์€ ์ „์—ญ ๋ฐ์ดํ„ฐ์ธ todoList๋ฅผ ๊ณ ์น˜๋ฉด ๋˜๊ณ  ๋ณ„๋กœ ์–ด๋ ต์ง€๋„ ์•Š๊ฒ ๋‹ค ํŒ๋‹จํ•˜์—ฌ ๊ทธ๋ƒฅ recoil๋งŒ ์‚ฌ์šฉํ–ˆ๋‹ค. 

 

recoil์„ ์‚ฌ์šฉํ•˜๋‹ค๋ณด๋‹ˆ ๊ฐ„ํŽธํ•˜์ง€๋งŒ ์ƒํƒœ๊ฐ€ ์–ด๋–ป๊ฒŒ ๋ณ€ํ•˜๋Š”์ง€ ์ถ”์ ํ•˜๊ธฐ ์–ด๋ ค์šด ๊ฒƒ ๊ฐ™๋‹ค. ์ง€๊ธˆ ํˆฌ๋‘๋ฉ”์ดํŠธ ํด๋ก ๋„ ์ด ์ •๋„์ธ๋ฐ ๊ทœ๋ชจ๊ฐ€ ๋” ๊ฑฐ์นœ๋‹ค๋ฉด redux ๋“ฑ๊ณผ ๊ฐ™์€ ๋‹ค๋ฅธ ๋Œ€์•ˆ์„ ์ฐพ์•„๋ด์•ผ ํ•  ๊ฒƒ์ด๋‹ค.

 

์•”ํŠผ,,, ๊ธ‰ํ•˜๊ฒŒ ๋งŒ๋“œ๋А๋ผ ์ฝ”๋“œ๊ฐ€ ์ข€ ์—‰๋ง์ด๋‹ค. ๋™์•„๋ฆฌ ๋ถ€์›๋“ค์ด ํ•ด๋‹น ํ”„๋กœ์ ํŠธ๋ฅผ ๋งŒ๋“œ๋Š” ๊ฒƒ์— ์–ด๋ ค์›€์„ ๋А๋‚„ ๊ฒƒ์ด ๋ฌผ๋ณด๋“ฏ ๋ป”ํ•ด์„œ ์ข€ ๊ฑฑ์ •์ด ๋˜๊ธฐ๋„ ํ•œ๋‹ค..

 

 

+2024-02-23

์•„๋‹ˆ๋‹ค.. ์ด๊ฑฐ ๋ฆฌ์•กํŠธ ์ฟผ๋ฆฌ ์จ์•ผํ• ๋“ฏํ•˜๋‹ค ์ „์—ญ todoList๋ฅผ ์ง์ ‘ ๋ฐ”๊ฟ”๋ณด๋ ค๋‹ˆ๊นŒ ์ฝ”๋“œ๊ฐ€ ์•Œ์•„๋ณด๊ธฐ๋„ ํž˜๋“ค๊ณ  ๋ณต์žกํ•˜๋‹ค. recoil์ด๋ž‘ react-query๋ฅผ ๊ฐ™์ด ์จ์•ผํ•  ๋“ฏํ•˜๋‹ค.

 

+2024-03-13

 

๋ฆฌ์•กํŠธ ์ฟผ๋ฆฌ ์•ˆ์จ๋„ ๋ ๋“ฏํ•˜๋‹ค.

๋ฆฌ์ฝ”์ผ selector์จ๋„ ๋œ๋‹ค. ๋ฐฑ์—”๋“œ์—์„œ post์— ๋Œ€ํ•œ ์‘๋‹ต์œผ๋กœ ์•Œ๋งž์€ ๊ฐ’๋งŒ ๋‚ด๋ ค์ฃผ๋ฉด ๋œ๋‹ค.

 

+ ์ฃผ๋ง์— ๋ฐฑ์—”๋“œ์™€ ์—ฐ๋™ํ•ด๋ณด๊ธฐ๋กœ ํ–ˆ๋‹ค ๊ธฐ๋Œ€๊ฐ€ ๋œ๋‹ค!

  1. ์™œ ์ด๋Ÿฐ ๊ธ€์„ ์ ๋‚˜์š”?
  2. ์ด๋Ÿฐ๊ฒŒ ์–ด๋ ค์› ์Œ
  3. +2024-02-23
  4. +2024-03-13
๊น€ํƒœ์ง„
๊น€ํƒœ์ง„
์„ฑ์žฅํ•˜๊ธฐ ์œ„ํ•œ ๊ธ€์„ ์ž‘์„ฑํ•˜๋ ค๊ณ  ๋…ธ๋ ฅ์ค‘ ์ž…๋‹ˆ๋‹ค
๊น€ํƒœ์ง„
My Dev History๐Ÿ’ป
๊น€ํƒœ์ง„
์ „์ฒด
์˜ค๋Š˜
์–ด์ œ
  • ๋ถ„๋ฅ˜ ์ „์ฒด๋ณด๊ธฐ (131)
    • ํŒŒ์ด์ฌ (8)
    • ์•Œ๊ณ ๋ฆฌ์ฆ˜ (24)
    • ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ (13)
      • ํ”„๋กœ์ ํŠธ (6)
      • ์ด๋ก  (6)
    • html&css (3)
    • css (6)
    • TIL (6)
    • react (15)
    • ํšŒ๊ณ  (5)
      • ์ฃผ๊ฐ„ํšŒ๊ณ  (2)
    • ๊ฐ•์˜ ์ •๋ฆฌ (3)
      • ์ฝ”๋“œ์ž‡ ๋ฆฌ์•กํŠธ ๊ฐ•์˜ ๋ชจ์Œ (3)
    • ์˜ค๋ฅ˜๋กœ๊ทธ (4)
    • ํ”„๋กœ์ ํŠธ (15)
    • ํƒ€์ž…์Šคํฌ๋ฆฝํŠธ (2)
    • Computer Science (4)
      • ๋จธ์‹ ๋Ÿฌ๋‹ (3)
      • ์ปดํ“จํ„ฐ๋„คํŠธ์›Œํฌ (1)
    • ์˜คํ”ˆ์†Œ์Šค (3)
    • ์›น (1)
    • ์ฝ”๋“œ๊ฐœ์„  (1)

๋ธ”๋กœ๊ทธ ๋ฉ”๋‰ด

  • ํ™ˆ
  • ํƒœ๊ทธ
  • ๋ฐฉ๋ช…๋ก

๊ณต์ง€์‚ฌํ•ญ

์ธ๊ธฐ ๊ธ€

ํƒœ๊ทธ

  • ๋ฆฌ์•กํŠธ
  • ๊ณต์‹๋ฌธ์„œ
  • ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ
  • react
  • Flappy game
  • css property
  • ๊ฒŒ์ž„
  • Object
  • ์˜คํ”ˆ์†Œ์Šค ๊ธฐ์—ฌ
  • Recoil
  • white-space
  • CSS
  • javascript
  • ํ”„๋ก ํŠธ์—”๋“œ
  • prototype
  • initial value
  • ์ƒ์†
  • ์˜คํ”ˆ์†Œ์Šค
  • react icons
  • game
  • canvas api
  • redux
  • ๊ฐœ๋ฐœ์ž

์ตœ๊ทผ ๋Œ“๊ธ€

์ตœ๊ทผ ๊ธ€

hELLO ยท Designed By ์ •์ƒ์šฐ.v4.2.2
๊น€ํƒœ์ง„
ํˆฌ๋‘๋ฉ”์ดํŠธ ํด๋ก  ์ค‘๊ฐ„์ ๊ฒ€
์ƒ๋‹จ์œผ๋กœ

ํ‹ฐ์Šคํ† ๋ฆฌํˆด๋ฐ”

๋‹จ์ถ•ํ‚ค

๋‚ด ๋ธ”๋กœ๊ทธ

๋‚ด ๋ธ”๋กœ๊ทธ - ๊ด€๋ฆฌ์ž ํ™ˆ ์ „ํ™˜
Q
Q
์ƒˆ ๊ธ€ ์“ฐ๊ธฐ
W
W

๋ธ”๋กœ๊ทธ ๊ฒŒ์‹œ๊ธ€

๊ธ€ ์ˆ˜์ • (๊ถŒํ•œ ์žˆ๋Š” ๊ฒฝ์šฐ)
E
E
๋Œ“๊ธ€ ์˜์—ญ์œผ๋กœ ์ด๋™
C
C

๋ชจ๋“  ์˜์—ญ

์ด ํŽ˜์ด์ง€์˜ URL ๋ณต์‚ฌ
S
S
๋งจ ์œ„๋กœ ์ด๋™
T
T
ํ‹ฐ์Šคํ† ๋ฆฌ ํ™ˆ ์ด๋™
H
H
๋‹จ์ถ•ํ‚ค ์•ˆ๋‚ด
Shift + /
โ‡ง + /

* ๋‹จ์ถ•ํ‚ค๋Š” ํ•œ๊ธ€/์˜๋ฌธ ๋Œ€์†Œ๋ฌธ์ž๋กœ ์ด์šฉ ๊ฐ€๋Šฅํ•˜๋ฉฐ, ํ‹ฐ์Šคํ† ๋ฆฌ ๊ธฐ๋ณธ ๋„๋ฉ”์ธ์—์„œ๋งŒ ๋™์ž‘ํ•ฉ๋‹ˆ๋‹ค.