πŸ€–μ •λ³΄λ³΄μ•ˆ/πŸ’ 1뢄지식

[Next.js] 개발 μ‹€λ ₯ μƒμŠΉμ— λ„μ›€λ˜λŠ” 유튜브 μΆ”μ²œ

TwoIceFish 2024. 7. 16. 21:55

μ„€λͺ…

 ν•™μŠ΅μ— μžˆμ–΄μ„œ μ•žλ§Œ 보고 λ‹¬λ¦¬λŠ” 것 보닀 λ’€λ₯Ό λŒμ•„λ³Ό λ•Œ μ‹€λ ₯ μƒμŠΉμ΄ 많이 일어 λ‚œλ‹€. Next.js의 ν”„λ ˆμž„μ›Œν¬λ₯Ό 무쑰건 λ”°λΌν•˜λ©° μ‹œμž‘ν–ˆμ„ λ•ŒλŠ” λ™μž‘ν•  수 μžˆλ‹€λŠ” 점에 λŒ€ν•΄μ„œ 큰 μ‹€λ ₯μƒμŠΉμ„ μ–»μ§€λ§Œ 이내 μƒμŠΉμ΄ λ”λ”˜ ꡬ간이 μΌμ–΄λ‚˜κ²Œ λœλ‹€. κ·Έ μ΄μœ λŠ” λ™μž‘μ€ λ˜μ§€λ§Œ νš¨μœ¨μ μ΄μ§€ μ•Šλ‹€λŠ” λœ»μ΄λ‹€. λ‚˜λ„ Next.js둜 κ°œλ°œμ— 손을 λŒ„μ§€ 1년이 λ„˜λŠ” μ‹œμ μ—μ„œ λ‹€μ‹œ κ°œλ…μ„ 작게 λ˜λŠ” μ˜μƒμ„ λ°œκ²¬ν•˜μ—¬ κ³΅μœ ν•œλ‹€.

 

μ˜μƒμ—μ„œ μ•Œκ²Œλœ λ‚˜μ˜ μƒˆλ‘œμš΄ 관점은 Next.jsλŠ” 기본적으둜 μ„œλ²„ μ‚¬μ΄λ“œ λžœλ”λ§(SSR)이며 λͺ…μ‹œμ μœΌλ‘œ ν΄λΌμ΄μ–ΈνŠΈ μ‚¬μ΄λ“œ λžœλ”λ§(CSR)을 지정할 수 μžˆλ‹€λŠ” μ μ΄μ—ˆλ‹€. λ‚˜λŠ” 무쑰건 CSR둜 κ°œλ°œμ„ λ‹€ λ•Œλ € λ„£μ–΄μ„œ fetch와 같은 데이터 솑 μˆ˜μ‹ μ„ Server Action을 μ‚¬μš©ν•˜μ§€ μ•Šμ•˜λ˜ 것이닀. 그리고 return value의 민감성을 μƒκ°ν•˜λ©° interfaceλ₯Ό λ§žμΆ”λŠλΌ μ‹œκ°„μ„ 많이 μΌμ§€λ§Œ μ„œλ²„μ—μ„œλ§Œ 데이터λ₯Ό μ²˜λ¦¬ν•˜λ©΄ 그럴 일이 μ—†λ˜ 것 μ΄μ—ˆλ‹€.

 

Next.jsλ₯Ό μ‹œμž‘ν•˜λŠ” μ‚¬λžŒλ“€μ΄κ²Œ 무쑰건 μΆ”μ²œν•˜λŠ” 바이닀. λ‚˜λŠ” React와 μžλ°”μŠ€ν¬λ¦½νŠΈ CSS도 λͺ¨λ₯Έμ±„λ‘œ μž…λ¬Έν•˜μ—¬μ„œ 주변을 κ°‰μ•„ λ¨Ήλ‹€κ°€ 기초λ₯Ό λŒμ•„λ³Ό 수 μžˆλŠ” μ‹œκ°„μ„ κ°€μ§€λ©΄μ„œ κ°œλ°œμ„ ν•˜μ˜€λŠ”λ° 일정 기간이 되면 ν”Όμ•„λ…Έ μ‹€μŠ΅ν•˜λ‹€ 이둠을 κ³΅λΆ€ν•˜λŠ” νŒ¨ν„΄μ„ 가지 듯이 뭐든 배움에 μžˆμ–΄μ„œ 이 방법을 μ μš©ν•˜λ©΄ λΉ λ₯Έ μ‹€λ ₯μƒμŠΉμ„ κΈ°λŒ€ν•  수 μžˆμ„ 것이닀.

 

Server Actionμ—μ„œ Data κ°±μ‹  법

revalidatePath

Server Componentμ—μ„œ Client Component에 데이터λ₯Ό μ‚½μž… μ‹œ λ“€μ–΄κ°€λŠ” 데이터도 User Client둜 μ„€μ •ν•΄μ•Ό ν•œλ‹€.

 

νŠΉμ§•

  • Next.js 기초 컨샙 μ„€λͺ…

https://www.youtube.com/watch?v=vwSlYG7hFk0

 

  • 29가지 μ‹€μˆ˜λ₯Ό μ•Œλ €μ€Œ

https://www.youtube.com/watch?v=5QP0mvrJkiY&t=2486s