Inflearn brand logo image
Inflearn brand logo image
์ฑ„๋„ํ†ก ์•„์ด์ฝ˜

[D.P.2(DappProject2)] ๋””์•ฑ ํ”„๋กœ์ ํŠธ2(Klaytn ๋„คํŠธ์›Œํฌ๋ฅผ ํ™œ์šฉํ•œ NFT ์ƒ์„ฑ ๋ฐ ํŒ๋งค)

์ด ๊ฐ•์˜๋ฅผ ํ†ตํ•ด Klaytn ๋„คํŠธ์›Œํฌ์—์„œ NFT๋ฅผ ๋ฐœํ–‰ํ•˜๋Š” ๋ฐฉ๋ฒ•์„ ๋ฐฐ์šธ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ๋”๋ถˆ์–ด React+TypeScript ์กฐํ•ฉ์œผ๋กœ ๋””์•ฑ์„ ๊ตฌ์„ฑํ•˜๋Š” ๋ฒ•์„ ๋ฐฐ์›๋‹ˆ๋‹ค.

Thumbnail

์ค‘๊ธ‰์ž๋ฅผ ์œ„ํ•ด ์ค€๋น„ํ•œ
[๋ธ”๋ก์ฒด์ธ] ๊ฐ•์˜์ž…๋‹ˆ๋‹ค.

์ด๋Ÿฐ ๊ฑธ ๋ฐฐ์šธ ์ˆ˜ ์žˆ์–ด์š”

  • ์Šค๋งˆํŠธ ์ปจํŠธ๋ž™ํŠธ ์ž‘์„ฑ

  • ๋””์•ฑ ๊ฐœ๋ฐœ

  • NFT ๋ฐœํ–‰ ๋ฐ ํŒ๋งค

์žฌ๋ฏธ์žˆ๊ฒŒ ์‹œ์ž‘ํ•˜๋Š” ๋””์•ฑ ํ”„๋กœ์ ํŠธ, 
ํด๋ ˆ์ดํŠผ ๋„คํŠธ์›Œํฌ NFT ๋ฐœํ–‰ + ๋””์•ฑ ๊ฐœ๋ฐœ๊นŒ์ง€!

๋‚ด ์†์œผ๋กœ ๋งŒ๋“œ๋Š” 
๋””์•ฑ ํ”„๋กœ์ ํŠธ ์‹œ์ฆŒ 2 ๐Ÿ’Ž

  • Klaytn(ํด๋ ˆ์ดํŠผ) ๋„คํŠธ์›Œํฌ์—์„œ NFT๋ฅผ ๋ฐœํ–‰ํ•˜๊ณ , NFT๋ฅผ ๋ฏผํŒ…/๊ฑฐ๋ž˜ํ•  ์ˆ˜ ์žˆ๋Š” Dapp์„ ๊ฐœ๋ฐœํ•ฉ๋‹ˆ๋‹ค.
  • OpenSea์™€ ๊ฐ™์€ NFT ๋งˆ์ผ“์—์„œ ์‹ค์ œ ๊ฑฐ๋ž˜ํ•  ์ˆ˜ ์žˆ๋Š” NFT๋ฅผ ์‰ฝ๊ณ  ๋น ๋ฅด๊ฒŒ ๊ฐœ๋ฐœํ•˜๋Š” ๋ฐฉ๋ฒ•์„ ๊ณต์œ ํ•ฉ๋‹ˆ๋‹ค.

๋Œ€์„ธ๋Š” ๋””์•ฑ, ๋‚˜๋„ ๋งŒ๋“ค ์ˆ˜ ์žˆ์–ด์š”!

  • โœ… NFT ๋ฐœํ–‰์„ ์œ„ํ•œ ์Šค๋งˆํŠธ ์ปจํŠธ๋ž™ํŠธ ์ž‘์„ฑ ๋ฐฉ๋ฒ•
  • โœ… ์Šค๋งˆํŠธ ์ปจํŠธ๋ž™ํŠธ์™€ ์—ฐ๋™๋˜๋Š” Dapp ๊ฐœ๋ฐœ

๋””์ง€ํ„ธ ํŠธ๋žœ์Šคํฌ๋ฉ”์ด์…˜(Digital Transformation)์ด ๋Œ€์„ธ๋กœ ๋– ์˜ค๋ฅด๋Š” ์š”์ฆ˜, Web 3.0, ๋ธ”๋ก์ฒด์ธ, ๋ฉ”ํƒ€๋ฒ„์Šค, Dapp, NFT ๊ฐ™์€ ํ‚ค์›Œ๋“œ๊ฐ€ ํ™œ๋ฐœํ•˜๊ฒŒ ๊ฑฐ๋ก ๋˜๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค. ํ•˜์ง€๋งŒ ๋ง‰์ƒ NFT๊ฐ€ ๋ญ”์ง€, Dapp์ด ๋ญ”์ง€์— ๋Œ€ํ•ด์„œ๋Š” ๋ง‰์—ฐํ•˜๊ฒŒ๋งŒ ๋Š๊ปด์ง€๊ณ  ๋„๋ฌด์ง€ ๊ฐ์„ ์žก๊ธฐ ์–ด๋ ต์ฃ .

ํ•˜์ง€๋งŒ ๋‚ด ์†์œผ๋กœ ๊ฐ„๋‹จํ•œ Dapp์„ ๋งŒ๋“ค์–ด๋ณธ๋‹ค๋ฉด ์–ด๋–จ๊นŒ์š”? ์ด ๊ฐ•์˜์—์„œ๋Š” NFT๊ฐ€ ๋ฌด์—‡์ธ์ง€, ๋ธ”๋ก์ฒด์ธ๊ณผ ํ•จ๊ป˜ ์–ด๋–ป๊ฒŒ ์ƒˆ๋กœ์šด ๊ฐ€์น˜๋ฅผ ๋ถ€์—ฌํ•˜๋Š”์ง€๋ฅผ ์ง์ ‘ ์Šค๋งˆํŠธ ์ปจํŠธ๋ž™ํŠธ(Smart Contract)๋ฅผ ์ž‘์„ฑํ•ด๊ฐ€๋ฉฐ ํŒŒ์•…ํ•ด๋‚˜๊ฐ‘๋‹ˆ๋‹ค. ๋‚˜์•„๊ฐ€ ์ง์ ‘ ๊ฐ„๋‹จํ•œ Dapp์„ ๊ฐœ๋ฐœํ•ด๋ด„์œผ๋กœ์จ Web 3.0 ์‹œ๋Œ€๊ฐ€ ๊ฐ€์ ธ์˜ฌ ๋””์ง€ํ„ธ ํŠธ๋žœ์Šคํฌ๋ฉ”์ด์…˜์ด ๋ฌด์—‡์ธ์ง€ ๊ฐ์„ ์žก์•„๋ณผ ์ˆ˜ ์žˆ๊ฒŒ ๋ฉ๋‹ˆ๋‹ค.

์ง€๋‚œ ๊ฐ•์˜๊ฐ€ ๊ถ๊ธˆํ•˜๋‹ค๋ฉด? ๐Ÿ“–


๋น ๋ฅด๊ฒŒ ๋ฐฐ์šฐ๊ณ  
๊ณง๋ฐ”๋กœ ํ™œ์šฉํ•ด๋ณด์„ธ์š” ๐Ÿšฉ

  • 1๏ธโƒฃ OpenSea์™€ ๊ฐ™์€ ๋งˆ์ผ“ํ”Œ๋ ˆ์ด์Šค์—์„œ ํŒ๋งคํ•  ์ˆ˜ ์žˆ๋Š” NFT๋ฅผ ์Šค๋งˆํŠธ์ปจํŠธ๋ž™ํŠธ ๋ฐฐํฌ์™€ ํ•จ๊ป˜ ์ง์ ‘ ํ™•์ธํ•ฉ๋‹ˆ๋‹ค.
  • 2๏ธโƒฃ ์‹ค์ œ NFT์™€ Dapp์—์„œ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ๋Š” ํ”„๋กœ์ ํŠธ๋ฅผ ์ค€๋น„ํ•˜์˜€์Šต๋‹ˆ๋‹ค.
  • 3๏ธโƒฃ Klaytn ๋„คํŠธ์›Œํฌ์— ํŠนํ™”๋œ Kaikas ์ง€๊ฐ‘๊ณผ caver-js ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๋ฅผ ์‚ฌ์šฉํ•ด๋ด…๋‹ˆ๋‹ค.

๋‹ค์Œ ๋‚ด์šฉ์„ 
ํ•™์Šตํ•ฉ๋‹ˆ๋‹ค ๐Ÿ“š

NFT ๋ฐœํ–‰

  • OpenSea์™€ ๊ฐ™์€ ๋งˆ์ผ“ํ”Œ๋ ˆ์ด์Šค์—์„œ ๊ฑฐ๋ž˜ ํ•  ์ˆ˜ ์žˆ๋Š” NFT๋ฅผ ๋ฐœํ–‰ํ•˜๊ธฐ ์œ„ํ•ด์„œ๋Š” ์–ด๋–ป๊ฒŒ ์Šค๋งˆํŠธ ์ปจํŠธ๋ž™ํŠธ๋ฅผ ์ž‘์„ฑํ•ด์•ผ ํ•˜๋Š”์ง€๋ฅผ ํ•™์Šตํ•ฉ๋‹ˆ๋‹ค.
  • ๋‹จ์ˆœํ•œ ๋ฐœํ–‰์ด ์•„๋‹Œ ๋žœ๋ค ๋ฏผํŒ…, ๋ฐœํ–‰๋Ÿ‰ ์ œํ•œ ๊ฐ™์€ ์š”์†Œ๋ฅผ ๋‘์–ด NFT ํ”„๋กœ์ ํŠธ๋ฅผ ์–ด๋–ป๊ฒŒ ๊ธฐํšํ•˜๋Š”์ง€ ๋ฐฐ์šฐ๊ฒŒ ๋ฉ๋‹ˆ๋‹ค.

Dapp ๊ฐœ๋ฐœ

  • ์›น ๊ฐœ๋ฐœ์— ๋งŽ์ด ์‚ฌ์šฉ๋˜๋Š” React(NextJS)+TypeScript ์กฐํ•ฉ์œผ๋กœ ๊ตฌ์„ฑํ•˜์˜€์Šต๋‹ˆ๋‹ค.
  • Klaytn ๋„คํŠธ์›Œํฌ์— ํŠนํ™”๋œ Kaikas ์ง€๊ฐ‘๊ณผ Caver-js๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ Dapp์„ ๊ฐœ๋ฐœํ•˜๋Š” ๋ฐฉ๋ฒ•์„ ํ•™์Šตํ•ฉ๋‹ˆ๋‹ค.

Q&A ๐Ÿ’ฌ

Q. ์Šค๋งˆํŠธ ์ปจํŠธ๋ž™ํŠธ์™€ Dapp์„ ์ฒ˜์Œ ๊ฐœ๋ฐœํ•˜๋Š” ์‚ฌ๋žŒ๋„ ๋“ค์„ ์ˆ˜ ์žˆ๋Š” ๊ฐ•์˜์ธ๊ฐ€์š”?

๋„ค. ๋ธ”๋ก์ฒด์ธ์„ ์ฒ˜์Œ ์ ‘ํ•˜์‹œ๋Š” ๋ถ„๋“ค์—๊ฒŒ๋Š” ์ƒ์†Œํ•˜์‹ค ์ˆ˜ ์žˆ์ง€๋งŒ ์–ด๋ ต์ง€ ์•Š๊ฒŒ ๋”ฐ๋ผ์˜ค์‹ค ์ˆ˜ ์žˆ๋‹ค๊ณ  ์ƒ๊ฐํ•ฉ๋‹ˆ๋‹ค. ์ง€๋‚œ ๋ฌด๋ฃŒ ๊ฐ•์˜์ธ ๋””์•ฑํ”„๋กœ์ ํŠธ 1์„ ๋จผ์ € ์ˆ˜๊ฐ•ํ•˜์‹  ๋‹ค์Œ ์ˆ˜๊ฐ•ํ•˜์‹œ๋Š” ๊ฒƒ์„ ์ถ”์ฒœ๋“œ๋ฆฝ๋‹ˆ๋‹ค.

Q. ์ˆ˜์—…์€ ์–ด๋–ป๊ฒŒ ์ง„ํ–‰๋˜๋‚˜์š”?

์ด๋ก ์ ์ธ ์„ค๋ช…๋ณด๋‹ค๋Š” ์ฝ”๋”ฉ์„ ํ†ตํ•ด ๋น ๋ฅด๊ฒŒ ํ•™์Šตํ•˜๋Š” ๊ฒƒ์„ ๋ชฉํ‘œ๋กœ ํ•˜๊ณ  ์žˆ๋Š” ๊ฐ•์˜์ž…๋‹ˆ๋‹ค. ๋ฌผ๋ก  ํ•„์ˆ˜์ ์œผ๋กœ ์•Œ์•„๋‘์–ด์•ผ ํ•  ์ด๋ก ์— ๋Œ€ํ•ด์„œ๋Š” ์„ค๋ช…์„ ํ•ฉ๋‹ˆ๋‹ค.

Q. ๊ฐ•์˜๋ฅผ ๋“ฃ๊ธฐ ์ „ ์ค€๋น„ํ•ด์•ผ ํ•  ๊ฒƒ์ด ์žˆ๋‚˜์š”?

Dapp ๊ฐœ๋ฐœ์— React(๋ฆฌ์•กํŠธ)๋ฅผ ์‚ฌ์šฉํ•˜๊ธฐ ๋•Œ๋ฌธ์— React์— ๋Œ€ํ•œ ์„ ์ˆ˜ ์ง€์‹์ด ํ•„์š”ํ•ฉ๋‹ˆ๋‹ค.

Q. ์ด ๊ฐ•์˜๋ฅผ ๋งŒ๋“  ๋ถ„์„ ์†Œ๊ฐœํ•ด์ฃผ์„ธ์š”.

์ €๋Š” ๋ธ”๋ก์ฒด์ธ ๊ธฐ๋ฐ˜์˜ ๋ฉ”ํƒ€๋ฒ„์Šค ๊ตฌ์ถ•์„ ๋ชฉํ‘œ๋กœ ๋‹ฌ๋ ค๋‚˜๊ฐ€๋Š” ํ˜„์—… ๋ธ”๋ก์ฒด์ธ ๊ฐœ๋ฐœ์ž h662์ž…๋‹ˆ๋‹ค. 
๊ฐ•์˜, ์Šคํ„ฐ๋””, ๋””์Šค์ฝ”๋“œ ์šด์˜ ๋“ฑ ๊ตญ๋‚ด ๋ธ”๋ก์ฒด์ธ ๊ฐœ๋ฐœ ์ปค๋ฎค๋‹ˆํ‹ฐ ํ™œ์„ฑํ™”๋ฅผ ์œ„ํ•ด ๋…ธ๋ ฅํ•˜๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค.

์ด๋Ÿฐ ๋ถ„๋“ค๊ป˜
์ถ”์ฒœ๋“œ๋ ค์š”!

ํ•™์Šต ๋Œ€์ƒ์€
๋ˆ„๊ตฌ์ผ๊นŒ์š”?

  • NFT์— ๊ด€์‹ฌ์žˆ๋Š” ํ”„๋กœ๊ทธ๋ž˜๋จธ

  • Dapp์„ ๊ฐœ๋ฐœํ•˜๊ณ  ์‹ถ์€ ๊ฐœ๋ฐœ์ž

์„ ์ˆ˜ ์ง€์‹,
ํ•„์š”ํ• ๊นŒ์š”?

  • ๋ฆฌ์•กํŠธ(React)

์•ˆ๋…•ํ•˜์„ธ์š”
h662์ž…๋‹ˆ๋‹ค.

2,701

๋ช…

์ˆ˜๊ฐ•์ƒ

74

๊ฐœ

์ˆ˜๊ฐ•ํ‰

49

๊ฐœ

๋‹ต๋ณ€

4.9

์ 

๊ฐ•์˜ ํ‰์ 

3

๊ฐœ

๊ฐ•์˜

์•ˆ๋…•ํ•˜์„ธ์š” ๋ธ”๋ก์ฒด์ธ ๊ฐœ๋ฐœ์ž h662 ์ž…๋‹ˆ๋‹ค!

์ปค๋ฆฌํ˜๋Ÿผ

์ „์ฒด

31๊ฐœ โˆ™ (4์‹œ๊ฐ„ 10๋ถ„)

๊ฐ•์˜ ๊ฒŒ์‹œ์ผ: 
๋งˆ์ง€๋ง‰ ์—…๋ฐ์ดํŠธ์ผ: 

์ˆ˜๊ฐ•ํ‰

์•„์ง ์ถฉ๋ถ„ํ•œ ํ‰๊ฐ€๋ฅผ ๋ฐ›์ง€ ๋ชปํ•œ ๊ฐ•์˜์ž…๋‹ˆ๋‹ค.
๋ชจ๋‘์—๊ฒŒ ๋„์›€์ด ๋˜๋Š” ์ˆ˜๊ฐ•ํ‰์˜ ์ฃผ์ธ๊ณต์ด ๋˜์–ด์ฃผ์„ธ์š”!