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

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

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


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

🚩 메뉴와 λͺ¨λ‹¬ λ§Œλ“€κΈ°

πŸ”˜ μ›Œν¬μŠ€νŽ˜μ΄μŠ€ λ§Œλ“€κΈ° (gravatar)

  • 각 μ˜μ—­μ„ Header / WorkspaceWrapper / Workspaces / Channel / ChannelList / DMList / Chats / Modal ꡬ쑰둜 λ‚˜λˆ„μ–΄ λ ˆμ΄μ•„μ›ƒμ„ κ΅¬μ„±ν•œλ‹€.

  • λͺ¨λ“  μ˜μ—­μ„ μ„ΈλΆ„ν™”ν•˜κ²Œ μͺΌκ°œμ–΄ μŠ€νƒ€μΌ μ»΄ν¬λ„ŒνŠΈλ₯Ό μž‘μ—…ν•˜κ²Œ 되면 μΆ”ν›„ μœ μ§€λ³΄μˆ˜ 및 μ½”λ“œ 뢄석에 어렀움이 μžˆμ„ 수 μžˆλ‹€.

gravatar, Globally Recognized Avatar
ν”„λ‘œν•„ 사진 λ„μš°λ―Έμ΄λ‹€. μΈν„°λ„·μ˜ λŒ€λΆ€λΆ„μ˜ μ›Ή μ‚¬μ΄νŠΈμ—μžˆλŠ” 아바타와 같은 사진

  • npm install gravatar gravatar μ„€μΉ˜

  • DTκ°€ ν‘œμ‹œλ˜μ–΄ μžˆμ„ 경우 λ”°λ‘œ νƒ€μž… 슀크립트 npm으둜 μ„€μΉ˜λ₯Ό ν•΄μ€˜μ•Ό ν•œλ‹€.(가끔 νƒ€μž…μ˜ 였λ₯˜κ°€ λ‚  경우 직접 νƒ€μž…μ„ μž…λ ₯ν•΄ μ€˜μ•Όν•œλ‹€.)

  • gravatar μ‚¬μš© μ˜ˆμ‹œ

πŸ”˜ μ›Œν¬μŠ€νŽ˜μ΄μŠ€ λ§Œλ“€κΈ° (쀑첩 λΌμš°ν„°)

  • App - index.tsx μ—μ„œ μ‚¬μš©ν•˜λŠ” 메인 λΌμš°ν„°μ—μ„œλŠ” Workspace만 μ—°κ²°
  • Workspace - index.tsx μ•ˆμ—μ„œ DMκ³Ό Chats의 λΌμš°ν„°λ₯Ό μ—°κ²°ν•œλ‹€.
  • 쀑첩 λΌμš°ν„°λ₯Ό μ‚¬μš©ν•  λ•Œμ—λŠ” /workspace/ pathκ°€ λ™μΌν•˜κ²Œ 계측적인 ꡬ쑰λ₯Ό κ°€μ Έμ•Ό ν•œλ‹€.

πŸ”˜ 메뉴 λ§Œλ“€κΈ°

  • showUserMenu μƒνƒœ κ°’μœΌλ‘œ λͺ¨λ‹¬ ν‘œν˜„ 유무 μƒνƒœ 관리 (showUserMenu)
  • onClickUserProfile λͺ¨λ‹¬ μƒνƒœ λ³€ν™”λ₯Ό μœ„ν•œ 클릭 이벀트

μ»΄ν¬λ„ŒνŠΈλ₯Ό λ‚˜λˆ„λŠ” ꡬ뢄 ? πŸ€”
μž¬μ‚¬μš©μ„ ν•˜κΈ°μœ„ν•΄μ„œ μ»΄ν¬λ„ŒνŠΈλ₯Ό κ΅¬λΆ„ν•œλ‹€. ν•˜λ‚˜μ˜ μ»΄ν¬λ„ŒνŠΈλŠ” ν•˜λ‚˜μ˜ κΈ°λŠ₯만 ν•˜λ„λ‘ μž‘μ—…ν•˜λŠ” 것이 μ’‹λ‹€. 본인의 νŒλ‹¨ λ˜λŠ” νŒ€μ›λ“€μ˜ ν•©μ˜μ— 따라 μ»΄ν¬λ„ŒνŠΈμ˜ ꡬ뢄에 λŒ€ν•΄ μ •ν•˜λŠ” 것이 μ’‹λ‹€. ex) 메뉴, λͺ¨λ‹¬

  • interface Props props λ°›μ•„μ˜¬ λ°μ΄ν„°λ“€μ˜ type 을 μ„ μ–Έν•΄μ€€λ‹€.
  • props 쀑 받을 μˆ˜λ„ 있고 받지 μ•Šμ•„λ„λ  값이 μžˆλ‹€λ©΄ '?' λ₯Ό λΆ™μ—¬μ£Όλ©΄ λœλ‹€.

  • onCloseModal λΆ€λͺ¨μ˜ μ˜μ—­μ„ 클릭 μ‹œμ—λŠ” λͺ¨λ‹¬μ΄ λ‹«νžˆλ„λ‘ ν•œλ‹€.
  • stopPropagation e.stopPropagation(); λ₯Ό 톡해 이벀트 λ²„λΈ”λ§μœΌλ‘œ 본인의 μ˜μ—­μ„ ν΄λ¦­ν–ˆμ„ λ•ŒλŠ” νŒμ—…μ°½μ˜ λ‹«νžˆμ§€ μ•Šλ„λ‘ ν•œλ‹€.

  • μ»΄ν¬λ„ŒνŠΈ μ•ˆμ—μ„œ 기본적으둜 Props 값을 섀정해쀄 수 μž‡λ‹€.
  • Menu μ»΄ν¬λ„ŒνŠΈμ—μ„œ closeButton propsλŠ” 'true' default props κ°’ μ„€μ • (νŒμ—…μ°½ λ‹«κΈ° κΈ°λŠ₯)

πŸ”˜ λͺ¨λ‹¬ λ§Œλ“€κΈ°

  • ν•˜λ‚˜μ˜ μ»΄ν¬λ„ŒνŠΈμ—μ„œ SWR을 μ—¬λŸ¬λ²ˆ μ‚¬μš©ν•  κ²½μš°κ°€ 있기 λ•Œλ¬Έμ— :userDataλ₯Ό ν†΅ν•΄μ„œ λ³€μˆ˜λͺ…을 λ°”κΏ”μ„œ μ‚¬μš©ν•œλ‹€.
  • ν•΄λ‹Ήν•˜λŠ” 데이터에 맞게 λ³€μˆ˜λͺ…을 μ‚¬μš©ν•΄μ•Ό λ§Žμ€ 데이터가 μžˆμŒμ—λ„ μ§κ΄€μ μœΌλ‘œ μž‘μ—…μ΄ κ°€λŠ₯ν•˜λ‹€.

  • μ„œλ²„λ‹¨μ—μ„œ λ˜λŠ” λ°±μ—”λ“œμ—μ„œ 전달받은 νƒ€μž…μœΌλ‘œ κΈ°λ³Έ 데이터 type듀을 지정해 export ν•œλ‹€.
  • μž‘μ—… μ‹œ ν•„μš”ν•œ 데이터 νƒ€μž…μ„ import ν•˜μ—¬ ν•΄λ‹Ή 값에 μ§€μ •ν•˜μ—¬ μž‘μ—…

  • !newWorkspace || !newWorkspace.trim() μž…λ ₯ν•œ 데이터가 없을 경우 μœ νš¨μ„± 체크 (trim은 곡백 μž…λ ₯ μ‹œ 체크)

  • API의 μš”μ²­μ΄ μ™„λ£Œ 된 ν›„μ—λŠ” μž…λ ₯의 데이터가 리셋 λ˜λ„λ‘ν•œλ‹€.(μ‚¬μš©μž κ²½ν—˜)

  • toast.error μ—λŸ¬ λ°œμƒ μ‹œμ—μ„œλŠ” μ½˜μ†” ν‘œκΈ°κ°€ μ•„λ‹Œ 화면에도 μ—λŸ¬ 메세지λ₯Ό 좜λ ₯ν•˜μ—¬ μ‚¬μš©μžκ°€ μ•Œ 수 μžˆλ„λ‘ ν•΄μ£Όμ–΄μ•Ό ν•œλ‹€.

toast πŸ€”
μžλ™μ μœΌλ‘œ λ‚˜νƒ€λ‚¬λ‹€κ°€ 사라지며 μ‚¬μš©μžμ˜ 이벀트λ₯Ό λ°›μ§€λŠ” μ•ŠλŠ” λ‹¨μˆœ λ©”μ‹œμ§€ ν˜•νƒœ

  • μž¬μ‚¬μš©μ΄ κ°€λŠ₯ν•œ Modal에 λŒ€ν•΄ 곡톡 μ»΄ν¬λ„ŒνŠΈλ‘œ 뢄리

input 이 λ“€μ–΄ μžˆλŠ” λͺ¨λ‹¬ νŒμ—…μ°½μ˜ 경우 ( = μ‚¬μš©μžμ˜ μž…λ ₯이 ν•„μš”ν•œ 경우), ν•΄λ‹Ή νŒμ—…μ°½μ„ λ”°λ‘œ 뢄리λ₯Ό ν•΄λ†“λŠ” 것이 λΆˆν•„μš”ν•œ λ¦¬λ Œλ”λ§μ„ 방지할 수 있고 μΆ”ν›„ μœ μ§€λ³΄μˆ˜μ—λ„ μš©μ΄ν•˜λ‹€.


πŸ”˜ λΌμš°ν„° μ£Όμ†Œ 섀계 (라우트 νŒŒλΌλ―Έν„°)

  • useParams λ¦¬μ•‘νŠΈ λΌμš°ν„°λ₯Ό 톡해 νŒŒλΌλ―Έν„° 정보λ₯Ό ν™œμš©ν•  수 μžˆλ‹€.

  • ν”„λ‘ νŠΈ μΈ‘μ—μ„œλ„ μ£Όμ†Œμ˜ url에 λŒ€ν•΄ κ·œμΉ™μ„ μ •ν•΄λ†“μœΌλ©΄ μ£Όμ†Œ μžμ²΄μ—μ„œλ„ 데이터λ₯Ό νŒŒμ•…ν•  수 μžˆλ‹€.

  • userData ? 'true' : 'false' 둜그인 μ•ˆν–ˆμ„ 경우 userDataκ°€ μ—†μœΌλ―€λ‘œ null μ²˜λ¦¬κ°€ λ˜λ„λ‘ 쑰건뢀 μ—°μ‚°μž μ‚¬μš©ν•˜μ—¬ μ²˜λ¦¬ν•œλ‹€.


🚩 DM 보내기

πŸ”˜ DM λͺ©λ‘ λ§Œλ“€κΈ°

  • JSX와 같은 경우 μ½”λ“œκ°€ κΈΈμ–΄μ§ˆ μ‹œ 가독성이 λ–¨μ–΄μ§€λ―€λ‘œ μ»΄ν¬λ„ŒνŠΈλ“€μ΄ λͺ…ν™•ν•˜κ²Œ ꡬ뢄 될 수 μžˆλ„λ‘ 넀이밍을 ν•΄μ•Ό ν•œλ‹€.
  • λ³€μˆ˜λͺ…κ³Ό ν•¨μˆ˜λͺ…이 길어지더라도 λͺ…ν™•ν•˜κ²Œ 뜻이 전달될 수 μžˆλ„λ‘ 이름을 잘 μ§“λŠ” 것이 μ€‘μš”

  • 둜그인 μƒνƒœμ— 따라 className의 λΆ€μ—¬ν•˜μ—¬ Style을 지정해쀀닀.

  • activeClassName μ§€κΈˆ μ£Όμ†Œλž‘ 이 Link μ£Όμ†Œλž‘ κ°™μœΌλ©΄ 'selected'λΌλŠ” ClassName이 λΆ€μ—¬ λœλ‹€.

πŸ”˜ μ±—λ°•μŠ€ λ§Œλ“€κΈ°

  • e.key === 'Enter' μž…λ ₯ν•œ ν‚€κ°€ 'Enter' 일 경우 ν•΄λ‹Ή Submit이 전솑
  • e.shiftKey Shift + Enter μž…λ ₯ μ‹œ ν…μŠ€νŠΈ μ€„λ°”κΏˆ λ˜λ„λ‘ μž‘μ—…
profile
#μ˜μš•λ„˜μΉ˜λŠ”#πŸ’»#✨#Front-end#πŸ’ͺ🏻

0개의 λŒ“κΈ€