Next.js: λΌμš°νŒ… 질문 - "/profile/:id/edit" 및 μ„œλ²„ db와 같은 λ§€κ°œλ³€μˆ˜ νŒ¨ν„΄ - λ°˜μ‘ ꡬ성 μš”μ†Œμ— 데이터λ₯Ό μ „λ‹¬ν•˜λŠ” 방법은 λ¬΄μ—‡μž…λ‹ˆκΉŒ?

에 λ§Œλ“  2016λ…„ 12μ›” 17일  Β·  3μ½”λ©˜νŠΈ  Β·  좜처: vercel/next.js

μ•ˆλ…•ν•˜μ„Έμš”, 이 λ¬Έμ œκ°€ 이전에 λ…Όμ˜λ˜μ—ˆλ‹€λŠ” 것을 μ•Œκ³  μžˆμ§€λ§Œ 이 νŒ¨ν„΄μ— λŒ€ν•œ λͺ…ν™•ν•œ 닡을 찾을 수 μ—†μ—ˆμŠ΅λ‹ˆλ‹€.
λ¨Όμ € - μ‚¬μš©μž μ •μ˜ μ„œλ²„(http λ˜λŠ” express)λ₯Ό κ΅¬ν˜„ν•˜μ§€ μ•Šμ€ 경우 λ‚΄κ°€ ν‹€λ Έλ‹€λ©΄ μ •μ •ν•˜μ‹­μ‹œμ˜€. 링크 ꡬ성 μš”μ†ŒλŠ” "/profile?id=123&action=edit"와 같은 쿼리 λ¬Έμžμ—΄ λ§€κ°œλ³€μˆ˜λ§Œ μ§€μ›ν•©λ‹ˆλ‹€. 제 말이 λ§žμŠ΅λ‹ˆκΉŒ?
"/profile/:id"와 같은 url λ§€κ°œλ³€μˆ˜ νŒ¨ν„΄μœΌλ‘œ μž‘μ—…ν•˜λ €λ©΄ μ‚¬μš©μž μ •μ˜ μ„œλ²„λ₯Ό κ΅¬ν˜„ν•΄μ•Ό ν•©λ‹ˆλ‹€... 예제λ₯Ό 톡해 μΆ”μΈ‘ν•  수 μžˆμ—ˆλ˜ μ΅œκ³ μ˜€μŠ΅λ‹ˆλ‹€...
κ·Έλ ‡λ‹€λ©΄ "/profile/:id/edit"와 같은 νŒ¨ν„΄μ„ μ–΄λ–»κ²Œ κ΅¬ν˜„ν•˜μ‹œκ² μŠ΅λ‹ˆκΉŒ?
'parameterized-routing' μ˜ˆμ œμ—μ„œ index.jsλŠ” λ‹€μŒκ³Ό 같은 링크λ₯Ό μ‚¬μš©ν•©λ‹ˆλ‹€.
<Link href='/blog?ip=first' as='/blog/first'><a>My first blog post</a></Link>

server.jsμ—μ„œ ν•„μš”ν•œ μ›Œν¬ν”Œλ‘œκ°€ 무엇인지 해독할 수 μ—†μ—ˆμŠ΅λ‹ˆλ‹€.
server.jsλŠ” const match = route('/blog/:id') μ„ μ–Έν•©λ‹ˆλ‹€.

그리고 μ •ν™•νžˆ μ£Όμ†Œ ν‘œμ‹œμ€„λ‘œ κ°€λŠ” 것이 무엇인지 λΆˆλΆ„λͺ…ν•˜κ³  λ°˜μ‘ ꡬ성 μš”μ†Œμ— ν‘Έμ‹œλ˜λŠ” λ°μ΄ν„°λŠ” λ¬΄μ—‡μž…λ‹ˆκΉŒ?
"/profile/:id/edit"와 같은 경둜λ₯Ό μ–΄λ–»κ²Œ μ²˜λ¦¬ν•©λ‹ˆκΉŒ?
일반적인 λ°©μ‹μœΌλ‘œ λ§Žμ€ 경둜λ₯Ό μ²˜λ¦¬ν•˜λŠ” 방법
λ˜ν•œ λ Œλ”λ§ν•˜κΈ° 전에 db 데이터λ₯Ό κ°€μ Έμ˜€λŠ” 경우 κ°€μ Έμ˜¨ 데이터λ₯Ό λ°˜μ‘ ꡬ성 μš”μ†Œμ— μ „λ‹¬ν•˜λŠ” 방법은 λ¬΄μ—‡μž…λ‹ˆκΉŒ?
이 λͺ¨λ“  것은 μ•½κ°„ λͺ¨ν˜Έν•˜λ©° μ„±κ³΅ν•˜μ§€ λͺ»ν•œ 채 λ‚΄ 길을 μΆ”μΈ‘ν•˜λ €κ³  ν•  λ•Œ κ·€ν•˜μ˜ 도움에 μ§„μ‹¬μœΌλ‘œ κ°μ‚¬λ“œλ¦½λ‹ˆλ‹€.

κ°μ‚¬ν•©λ‹ˆλ‹€
쑰금 μ—΄λ €μ Έ

κ°€μž₯ μœ μš©ν•œ λŒ“κΈ€

쒋은 질문 λͺ¨μŒμž…λ‹ˆλ‹€.
λ¬Έμ„œμ— λŒ€ν•œ 정보λ₯Ό 더 μΆ”κ°€ν•˜κ² μŠ΅λ‹ˆλ‹€.

μ§€κΈˆμ€ λ‹€μŒκ³Ό 같이 μƒκ°ν•˜μ‹­μ‹œμ˜€.

  • Next.jsλŠ” νŽ˜μ΄μ§€λ₯Ό μ œκ³΅ν•˜λŠ” λ°©λ²•λ§Œ μ•Œκ³  μžˆμŠ΅λ‹ˆλ‹€. λ§€κ°œλ³€μˆ˜λ₯Ό 톡해 전달해야 ν•©λ‹ˆλ‹€. (예: /blog?id=first )
  • #310을 μ‚¬μš©ν•˜λ©΄ μ™ΈλΆ€ 세계에 ν‘œμ‹œλ˜λŠ” 방식을 μ‚¬μš©μž 지정할 수 μžˆμŠ΅λ‹ˆλ‹€. (예: blog/:id μ°Έμ‘°
  • 그리고 ν΄λΌμ΄μ–ΈνŠΈ μΈ‘ λΌμš°νŒ…μ„ μˆ˜ν–‰ν•  λ•Œ ν΄λΌμ΄μ–ΈνŠΈ μΈ‘ 앱은 μ‚¬μš©μž μ •μ˜ URL에 λŒ€ν•΄ 아무것도 λͺ¨λ¦…λ‹ˆλ‹€.
  • λ”°λΌμ„œ λ‹€μŒκ³Ό 같이 링크λ₯Ό μ‚¬μš©ν•΄μ•Ό ν•©λ‹ˆλ‹€. <Link href='/blog?id=first' as='/blog/first' />

    • href: νŽ˜μ΄μ§€μ˜ μ‹€μ œ URLμž…λ‹ˆλ‹€.

    • as: 이것은 λΈŒλΌμš°μ €μ—μ„œ 보여야 ν•˜λŠ” λ°©μ‹μž…λ‹ˆλ‹€(일반적으둜 μ‚¬μš©μž μ •μ˜ URL νŒ¨ν„΄κ³Ό μΌμΉ˜ν•΄μ•Ό 함).

λͺ¨λ“  3 λŒ“κΈ€

쒋은 질문 λͺ¨μŒμž…λ‹ˆλ‹€.
λ¬Έμ„œμ— λŒ€ν•œ 정보λ₯Ό 더 μΆ”κ°€ν•˜κ² μŠ΅λ‹ˆλ‹€.

μ§€κΈˆμ€ λ‹€μŒκ³Ό 같이 μƒκ°ν•˜μ‹­μ‹œμ˜€.

  • Next.jsλŠ” νŽ˜μ΄μ§€λ₯Ό μ œκ³΅ν•˜λŠ” λ°©λ²•λ§Œ μ•Œκ³  μžˆμŠ΅λ‹ˆλ‹€. λ§€κ°œλ³€μˆ˜λ₯Ό 톡해 전달해야 ν•©λ‹ˆλ‹€. (예: /blog?id=first )
  • #310을 μ‚¬μš©ν•˜λ©΄ μ™ΈλΆ€ 세계에 ν‘œμ‹œλ˜λŠ” 방식을 μ‚¬μš©μž 지정할 수 μžˆμŠ΅λ‹ˆλ‹€. (예: blog/:id μ°Έμ‘°
  • 그리고 ν΄λΌμ΄μ–ΈνŠΈ μΈ‘ λΌμš°νŒ…μ„ μˆ˜ν–‰ν•  λ•Œ ν΄λΌμ΄μ–ΈνŠΈ μΈ‘ 앱은 μ‚¬μš©μž μ •μ˜ URL에 λŒ€ν•΄ 아무것도 λͺ¨λ¦…λ‹ˆλ‹€.
  • λ”°λΌμ„œ λ‹€μŒκ³Ό 같이 링크λ₯Ό μ‚¬μš©ν•΄μ•Ό ν•©λ‹ˆλ‹€. <Link href='/blog?id=first' as='/blog/first' />

    • href: νŽ˜μ΄μ§€μ˜ μ‹€μ œ URLμž…λ‹ˆλ‹€.

    • as: 이것은 λΈŒλΌμš°μ €μ—μ„œ 보여야 ν•˜λŠ” λ°©μ‹μž…λ‹ˆλ‹€(일반적으둜 μ‚¬μš©μž μ •μ˜ URL νŒ¨ν„΄κ³Ό μΌμΉ˜ν•΄μ•Ό 함).

@arunoda κ°μ‚¬ν•©λ‹ˆλ‹€!
κ°„λ‹¨ν•˜κ³  λͺ…ν™•ν•©λ‹ˆλ‹€.

μ—„μ²­λ‚œ. 이 문제λ₯Ό λ‹«μŠ΅λ‹ˆλ‹€.

이 νŽ˜μ΄μ§€κ°€ 도움이 λ˜μ—ˆλ‚˜μš”?
0 / 5 - 0 λ“±κΈ‰