Skip to content

jissssu/react-sns

Β 
Β 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

Β 

History

1 Commit
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 

Repository files navigation

ReCoder Week3: React-SNS

μ„œλ‘ 

μ•ˆλ…•ν•˜μ„Έμš” πŸ™ŒπŸ» λ‹€λ“€ ν•œ μ£Ό λ™μ•ˆ λ―Έμ…˜ μ§„ν–‰ν•˜μ‹œλŠλΌ κ³ μƒν•˜μ…¨μŠ΅λ‹ˆλ‹€!

이번 λ―Έμ…˜μ€ μƒˆλ‘œμš΄ 주제둜 λŒμ•„μ™”μŠ΅λ‹ˆλ‹€! λ°”λ‘œ SNS μ„œλΉ„μŠ€λ₯Ό κ΅¬ν˜„ν•΄ λ³΄λŠ” κ²ƒμΈλ°μš”. μ΄λ²ˆμ£Όμ—λŠ” μ±„νŒ…λ°© κΈ°λŠ₯을 κ΅¬ν˜„ν•˜λŠ” 것뢀터 μ‹œμž‘ν•΄μ„œ 점차적으둜 κΈ°λŠ₯을 ν™•μž₯ν•΄ λ‚˜κ°€ 보렀고 ν•©λ‹ˆλ‹€. λ”°λΌμ„œ 이번 λ―Έμ…˜μ—μ„œ μ€‘μš”ν•œ 점 쀑 ν•˜λ‚˜λŠ” ν™•μž₯성을 κ³ λ €ν•˜μ—¬ κ°œλ°œν•΄ λ³΄λŠ” κ²ƒμž…λ‹ˆλ‹€! μƒˆλ‘œμš΄ κΈ°λŠ₯이 μΆ”κ°€λ˜κ³  κΈ°μ‘΄ κΈ°λŠ₯이 λ³€κ²½λ˜μ–΄λ„ μœ μ—°ν•˜κ²Œ λŒ€μ²˜ν•  수 μžˆλ„λ‘ μ½”λ“œλ₯Ό μž‘μ„±ν•΄ λ³΄μ„Έμš” πŸ™‚

λ˜ν•œ νˆ¬λ‘λ¦¬μŠ€νŠΈ λ§Œλ“€κΈ°λ‘œ λ¦¬μ•‘νŠΈλ₯Ό κ°€λ³κ²Œ λ§›λ³΄μ•˜λ‹€λ©΄ μ΄λ²ˆμ—λŠ” λΉ„μŠ·ν•œ κΈ°λŠ₯μ΄μ§€λ§Œ ν•œλ²ˆ 더 React의 기초적인 μ‚¬μš©λ²•μ— μ΅μˆ™ν•΄μ§€κ³ , λ‹€μ–‘ν•œ hook을 ν™œμš©ν•΄ 수 μžˆλŠ” λ―Έμ…˜μ΄ λ˜μ—ˆμœΌλ©΄ μ’‹κ² μŠ΅λ‹ˆλ‹€!

ν˜Ήμ‹œ 어렀움이 μžˆκ±°λ‚˜ 도움이 ν•„μš”ν•˜λ‹€λ©΄ μ–Έμ œλ“ μ§€ μ €λ₯Ό 뢈러 μ£Όμ„Έμš” πŸ™‹β€β™€οΈπŸƒπŸ»β€β™€οΈ


λ―Έμ…˜

🎯 λ―Έμ…˜ λͺ©ν‘œ

  • useEffect와 useRef의 μ‚¬μš©λ²•μ„ μ΄ν•΄ν•©λ‹ˆλ‹€.
  • React의 λ‹€μ–‘ν•œ hook에 λŒ€ν•΄ μ•Œμ•„ λ΄…λ‹ˆλ‹€.
  • μ½”λ“œμ˜ ν™•μž₯성을 염두에 두고 κ°œλ°œμ„ μ§„ν–‰ν•©λ‹ˆλ‹€.

βœ… ν•„μˆ˜ μš”κ±΄

  • κ²°κ³Ό ν™”λ©΄μ˜ κΈ°λŠ₯을 κ΅¬ν˜„ν•©λ‹ˆλ‹€.
  • λŒ€ν™” λ‚΄μš©μ„ json νŒŒμΌμ— μ €μž₯ν•˜κ³ , 이λ₯Ό λΆˆλŸ¬μ™€ μ‚¬μš©ν•©λ‹ˆλ‹€.
  • 말풍선과 ν•¨κ»˜ μ‚¬μš©μž 사진, 이름, 보낸 μ‹œκ°„μ„ ν‘œμ‹œν•©λ‹ˆλ‹€.
  • useRef 와 useEffect λ₯Ό μ΄μš©ν•˜μ—¬ μž…λ ₯창에 μžλ™μœΌλ‘œ focus λ˜λ„λ‘ ν•©λ‹ˆλ‹€.
  • μƒˆλ‘œμš΄ λ©”μ‹œμ§€λ₯Ό μž…λ ₯ν–ˆμ„ λ•Œ μŠ€ν¬λ‘€μ„ μ±„νŒ…λ°© ν•˜λ‹¨μœΌλ‘œ μ΄λ™μ‹œν‚΅λ‹ˆλ‹€.

🏷️ 선택 사항

  • React의 λ‹€μ–‘ν•œ hook을 μ‚¬μš©ν•΄ λ΄…λ‹ˆλ‹€.
  • β€˜λ°©ν•΄ κΈˆμ§€ λͺ¨λ“œβ€™κ°€ ν™œμ„±ν™”λ˜μ—ˆμ„ λ•Œ μ±„νŒ…λ°© ν•˜λ‹¨μ— μ•Œλ¦Ό λ©”μ‹œμ§€λ₯Ό λ„μš°κ³  λ©”μ‹œμ§€ μž…λ ₯을 λ°©μ§€ν•©λ‹ˆλ‹€.
  • λ””μžμΈμ€ λ§ˆμŒλŒ€λ‘œ λ³€κ²½ν•˜μ…”λ„ λ©λ‹ˆλ‹€!
  • μΆ”κ°€ν•˜κ³  싢은 κΈ°λŠ₯이 μžˆλ‹€λ©΄ 마음껏 μΆ”κ°€ν•΄ μ£Όμ„Έμš”!

πŸ“– 생각해 λ³Ό μ§ˆλ¬Έλ“€

  • useEffect 와 useRefλŠ” μ–΄λ– ν•œ μƒν™©μ—μ„œ μ‚¬μš©ν•˜λ‚˜μš”?
  • useState useEffect useRef 이외에 μ–΄λ–€ hook듀이 μ‘΄μž¬ν•˜λ‚˜μš”?
  • Custom hook은 μ–Έμ œ μ‚¬μš©ν• κΉŒμš”?

참고 자료

About

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • JavaScript 80.8%
  • HTML 19.2%