React TypeScript | πŸ’¬ Slack 클둠 μ½”λ”© (2)

rimmzΒ·2022λ…„ 7μ›” 1일
0
post-thumbnail

Slack 클둠 μ½”λ”©[μ‹€μ‹œκ°„ μ±„νŒ… with React]


Slack(μŠ¬λž™) μ„œλΉ„μŠ€λ₯Ό 따라 λ§Œλ“€λŠ” Reacr Web 개발
βœ… ν•΄λ‹Ή κ°•μ˜λ₯Ό μˆ˜κ°• ν›„ μž‘μ„±ν•œ 볡슡 및 개인 μŠ€ν„°λ”” κΈ°λ‘μž…λ‹ˆλ‹€.

🚩 둜그인 / νšŒμ›κ°€μž… κΈ°λŠ₯ κ΅¬ν˜„

πŸ”˜ νšŒμ› κ°€μž… νŽ˜μ΄μ§€ λ§Œλ“€κΈ°

  • useCallback - νŠΉμ • ν•¨μˆ˜λ₯Ό μƒˆλ‘œ λ§Œλ“€μ§€ μ•Šκ³  μž¬μ‚¬μš© ν•  λ•Œ μ‚¬μš© (λ¦¬μ•‘νŠΈ λ Œλ”λ§ μ„±λŠ₯ μ΅œμ ν™”λ₯Ό μœ„ν•œ ν›…)
  • [] deps λ°°μ—΄μ•ˆμ— μžˆλŠ” μƒνƒœ 값듀이 λ³€ν™”κ°€ μžˆμ„ λ•Œλ§Œμ„ 감지

  • e.preventDefault() Form νƒœκ·Έ κΈ°λ³Έ Submit 이벀트 막기 (μƒˆλ‘œκ³ μΉ¨ 방지)

πŸ”˜ μ»€μŠ€ν…€ ν›… 생성

❗ μ»€μŠ€ν…€ 훅을 λ§Œλ“€κΈ° 전에

  • μ€‘λ³΅λ˜λŠ” μ½”λ“œλ“€μ΄ μ–΄λ–€ 것인지 ν™•μ‹€ν•˜κ²Œ 확인 해보기
  • μ½”λ“œλ₯Ό μ™„μ„±ν•œ 후에 쀑볡이 λ˜λŠ” μ½”λ“œλ₯Ό 확인 ν•΄λ³΄λŠ” 것이 λ”μš± 쉽닀.

  • 데이터λ₯Ό λ°›μ•„μ˜€κ³  ν™•μΈν•˜λŠ” Input νƒœκ·Έ κ΄€λ ¨ν•΄μ„œ 곡톡 μ»€μŠ€ν…€ ν›… 생성
  • value, handler, setValue λ°˜ν™˜ν•˜μ—¬ ν•„μš”ν•œ 데이터λ₯Ό μ‚¬μš©
  • ❗ input νƒ€μž… μ—λŸ¬ ❗ μ œλ„€λ¦­ νƒ€μž…μ„ μ΄μš©ν•˜μ—¬ return 값도 μžλ™μ„ νƒ€μž…μ΄ μ •ν•΄μ§€λ„λ‘ν•œλ‹€.

μ œλ„€λ¦­ νƒ€μž…? πŸ€”
νƒ€μž…μ˜ 값이 정해지면 return 값도 μžλ™μœΌλ‘œ 정해진닀.

  • νƒ€μž…μ„ 마치 ν•¨μˆ˜μ˜ νŒŒλΌλ―Έν„°μ²˜λŸΌ μ‚¬μš©ν•˜λŠ” 것을 의미
  • <T>λ₯Ό μΆ”κ°€ν•˜λ©°, Tλ₯Ό λ§€κ°œλ³€μˆ˜μ˜ νƒ€μž… λ˜λŠ” λ°˜ν™˜ νƒ€μž…μœΌλ‘œ μ„€μ • (T λŒ€μ‹ μ— λ‹€λ₯Έ λ¬Έμžμ—΄μ„ μ‚¬μš©ν•΄λ„ λœλ‹€.)

πŸ”˜ axiox μš”μ²­ 전달 CORS, Proxy

  • axiox λ₯Ό μ‚¬μš©ν•΄μ„œ 비동기 처리
  • λ§Œλ“€μ–΄μ§„ API μš”μ²­ 리슀트λ₯Ό μ°Έκ³ ν•˜μ—¬ μ„œλ²„ μ—°κ²° μž‘μ—… 진행 μ˜ˆμ •

  • then() μš”μ²­ 성곡 μ‹œ μ‹€ν–‰λ˜λŠ” μ½”λ“œ

  • catch() μš”μ²­ μ‹€νŒ¨ μ‹œ μ‹€ν–‰λ˜λŠ” μ½”λ“œ

  • finally() 결과에 관계없이 promiseκ°€ 처리되면 μ‹€ν–‰λ˜λŠ” μ½”λ“œ

  • API μš”μ²­μ„ 보내기 전에 State 데이터 값을 μ΄ˆκΈ°ν™”ν•΄μ£Όλ©΄ μΆ”ν›„ μš”μ²­μ— λŒ€ν•œ κ²°κ³Όλ₯Ό μ •ν™•νžˆ λ°›μ•„ λ³Ό 수 μžˆλ‹€.

  • API μž‘μ—…μ„ ν•  λ•Œ 개발자 도ꡬ - [Network] νƒ­μ—μ„œ 톡신 κ³Όμ • 및 κ²°κ³Ό 확인해야 ν•œλ‹€.

❗ CORS μ—λŸ¬ ν•΄κ²° 방법 ❗

CORS ? πŸ€”
도메인과 Api μ„œλ²„μ˜ 도메인이 λ‹¬λΌμ„œ μƒκΈ°λŠ” 문제
즉, CORS μ—λŸ¬λŠ” μš”μ²­ λΈŒλΌμš°μ €μ—μ„œ λ‹€λ₯Έ 도메인(ν”„λ‘œν† μ½œ, 포트번호)을 κ°€μ§€λŠ” μ„œλ²„λ‘œ μš”μ²­μ΄ κ°ˆλ•ŒΒ λΈŒλΌμš°μ €μ—μ„œ λ°œμƒν•˜λŠ” λ³΄μ•ˆμ •μ±…μ΄λ‹€.

  • λ°±μ—”λ“œ μ„œλ²„μ— μ—λŸ¬ 상황 μ „λ‹¬ν•˜κΈ°
  • webpack.configμ—μ„œ Proxy μ£Όμ†Œλ₯Ό μž…λ ₯ν•˜μ—¬ 파일 μˆ˜μ •μœΌλ‘œ ν•΄κ²°

  • signUpError νšŒμ›κ°€μž… μ‹œ μ—λŸ¬κ°€ λ‚  경우 μ„œλ²„μ—μ„œ λ³΄λ‚΄μ£ΌλŠ” μ—λŸ¬λ©”μ„Έμ§€λ₯Ό 좜λ ₯ν•  수 μžˆλ„λ‘ λ³€μˆ˜ 처리

πŸ”˜ 둜그인 νŽ˜μ΄μ§€ λ§Œλ“€κΈ°

  • Link aνƒœκ·Έ λŒ€μ‹  Link νƒœκ·Έλ₯Ό μ‚¬μš©ν•˜μ—¬ μƒˆλ‘œκ³ μΉ¨μ΄ λ˜μ§€ μ•Šλ„λ‘ ν•œλ‹€.

<a> νƒœκ·Έμ˜ hrefλŠ”Β νŽ˜μ΄μ§€λ₯Ό μ΄λ™μ‹œν‚¬ λ•Œ νŽ˜μ΄μ§€λ₯Ό μƒˆλ‘œ 뢈러였게되고
Reactμ—μ„œ μ œκ³΅ν•˜λŠ” <Link> νƒœκ·ΈλŠ” HTML5 History APIλ₯Ό μ‚¬μš©ν•˜μ—¬ λΈŒλΌμš°μ €μ˜ μ£Όμ†Œλ₯Ό λ°”κΎΌλ‹€.

  • 개발자 도ꡬ - Cookies 'connect.sid' μˆ˜λ™μœΌλ‘œ 데이터 delete (μˆ˜λ™ λ‘œκ·Έμ•„μ›ƒ)
  • μΆ”ν›„ ν”„λ‘ νŠΈμ—μ„œ λ‘œκ·Έμ•„μ›ƒ κΈ°λŠ₯을 κ΅¬ν˜„ μ‹œ μ„œλ²„μ—μ„œλ„ μ‹€μ œλ‘œ μ € 데이터λ₯Ό μ‚­μ œν•œλ‹€.

πŸ”˜ SWR μ‚¬μš©ν•˜κΈ° (μΏ ν‚€ κ³΅μœ ν•˜κΈ°)

  • Context API λŒ€μ‹ μ— SWR을 μ‚¬μš©ν•˜μ—¬ μž‘μ—…ν•œλ‹€.

SWR ? πŸ€”
Nextjs 둜 유λͺ…ν•œ vercel μ—μ„œ λ§Œλ“  원격데이터 fetch λ₯Ό μœ„ν•œ μ»€μŠ€ν…€ ν›… npm λͺ¨λ“ˆ

  • data : μš”μ²­ 성곡 μ‹œ λ°›μ•„μ˜¨ 데이터 (데이터가 없을 μ‹œ λ‘œλ”© 쀑)

  • error : μ—λŸ¬ μ‹œ λ°œμƒν•œ 담겨져 μžˆλŠ” 데이터

  • νƒ­ λ³€κ²½μ‹œ μš”μ²­μ„ μžλ™μœΌλ‘œ λ‹€μ‹œ 보내주어 μ΅œμ‹  μƒνƒœμ˜ νŽ˜μ΄μ§€λ‘œ μœ μ§€ν•œλ‹€.

  • fetcher에 넣은 μ£Όμ†Œλ₯Ό axios λ₯Ό 톡해 μš”μ²­ν•˜κ³  λ°›μ•„μ˜¨ 데이터λ₯Ό λ°˜ν™˜ μ£ΌλŠ” 곡톡 ν›… 생성

  • withCredentials ν”„λ‘ νŠΈμ—”λ“œμ™€ λ°±μ—”λ“œμ˜ 도메인이 λ‹€λ₯΄λ©΄ μΏ ν‚€λ₯Ό 생성해쀄 수 μ—†μœΌλ―€λ‘œ, ν•΄λ‹Ή μ˜΅μ…˜μ„ μ„€μ •ν•˜κ²Œλ˜λ©΄ 도메인이 달라도 μΏ ν‚€κ°€ 생성이 λœλ‹€.


πŸ”˜ SWR μ„€μ • μ‚΄νŽ΄λ³΄κΈ°

  • SWR은 주기적으둜 API μš”μ²­μ„ ν•œλ‹€. μš”μ²­ μ£ΌκΈ° 및 방법 κ΄€λ ¨ν•œ μ˜΅μ…˜μ— λŒ€ν•΄μ„œλŠ” 직접 섀정을 ν•  수 μžˆλ‹€.

  • revalidate : 직접 원할 λ•Œ μš”μ²­ ν•˜λŠ” 방법 (둜그인 성곡 μ‹œ λ°”λ‘œ μš”μ²­)

  • dedupingInterval : μ›ν•˜λŠ” μ‹œκ°„μ— 주기적으둜 μš”μ²­ μ„€μ • 방법

  • κ·Έ μ™Έ λ‹€μ–‘ν•œ μ˜΅μ…˜ 확인 https://swr.vercel.app/ko/docs/options


πŸ”˜ μ›Œν¬μŠ€νŽ˜μ΄μŠ€ λ§Œλ“€κΈ° + λ‘œκ·Έμ•„μ›ƒ

  • λ‘œκ·Έμ•„μ›ƒ μ‹œ 데이터가 μ‘΄μž¬ν•˜μ§€ μ•ŠμœΌλ―€λ‘œ λ‹€μ‹œ 둜그인 νŽ˜μ΄μ§€λ‘œ 이동 (데이터 유무둜 νŒλ‹¨)

  • 둜그인 성곡 μ΄ν›„μ—λŠ” μ±„λ„μ˜ νŽ˜μ΄μ§€λ‘œ 이동 ν•˜λ„λ‘ μ„€μ •(데이터 유무둜 νŒλ‹¨)

❗ return 문은 항상 ν›… 보닀 μ•„λž˜μ— μžˆμ–΄μ•Όν•œλ‹€.


πŸ”˜ SWR ν™œμš©λ²•(Optimistic UI)

  • revalidate μ„œλ²„μ— λ‹€μ‹œ μš”μ²­μ„ λ³΄λ‚΄μ„œ 데이터λ₯Ό λ‹€ κ°€μ Έμ˜΄
  • mutate μ„œλ²„μ— μš”μ²­μ„ μ•ˆλ³΄λ‚΄κ³  데이터λ₯Ό μˆ˜μ • (데이터 μš”μ²­μ‹œ 기쑴에 가지고 있던 dataλ₯Ό κ°€μ Έμ˜¨λ‹€.)

낙관적인 UI, Optimistic UI πŸ€”
μ„œλ²„μ— μš”μ²­ 응닡 없이 미리 κ·Έ κ²°κ³Όλ₯Ό μ˜ˆμΈ‘ν•΄μ„œ 화면에 λ³΄μ—¬μ£ΌλŠ” κ²ƒμœΌλ‘œ μ‚¬μš©μž κ²½ν—˜μ— 긍정적인 영ν–₯을 μ€€λ‹€. ex) μΈμŠ€νƒ€κ·Έλž¨ ν•˜νŠΈ 클릭 μ‹œ λ°”λ‘œ ν‘œμ‹œ

  • mutate Optimistic uiλ₯Ό μ œκ³΅ν•˜κΈ° μœ„ν•΄μ„œλŠ” 데이터 λ‘λ²ˆμ§Έ 인자 값이 true 이여야 ν•œλ‹€.

  • dedupingInterval λͺ‡ μ΄ˆλ§ˆλ‹€ 주기적으둜 싀행을 μ„€μ •ν•˜λŠ” μ˜΅μ…˜μ΄μ§€λ§Œ, μΊμ‹œ μœ μ§€ κΈ°κ°„μœΌλ‘œ μ„œλ²„μ— μš”μ²­μ„ ν•œλ²ˆ ν•œ μ„±κ³΅ν•œ 데이터λ₯Ό μœ μ§€ν•˜κ³  있기 λ•Œλ¬Έμ— μ—°μ†μ μœΌλ‘œ μš”μ²­ν•  일이 μ—†λ‹€.

  • 비동기 μš”μ²­λΏλ§Œ μ•„λ‹ˆλΌ ν•¨μˆ˜λ‘œλ„ μ‚¬μš©ν•  수 있으며, μ „μ—­ μƒνƒœ κ΄€λ¦¬λ‘œλ„ μ‚¬μš©ν•  수 μžˆλ‹€.


πŸ”— μ°Έκ³ 

https://ghost4551.tistory.com/46

profile
#μ˜μš•λ„˜μΉ˜λŠ”#πŸ’»#✨#Front-end#πŸ’ͺ🏻

0개의 λŒ“κΈ€