Thumbnail
보안 · 네트워크 블록체인

[D.P.(DappProject)] 디앱 프로젝트(NFT 생성, NFT 구매 및 판매) 대시보드

(5)
56개의 수강평 ∙  1,776명의 수강생

무료

지식공유자: h662
총 23개 수업 (3시간 25분)
수강기한: 
무제한
수료증: 미발급
난이도: 
입문
-
초급
-
중급이상
지식공유자 답변이 제공되는 강의입니다
폴더에 추가 공유

중급자를 위해 준비한
[블록체인] 강의입니다.

리액트, 솔리디티(ERC721)를 활용하여 기본적인 NFT 생성, NFT 구매 및 판매를 배우게 됩니다. 스마트 컨트랙트 작성과 리액트를 활용하여 작성한 스마트 컨트랙트를 웹에 연동하는 법을 배우게 됩니다.

✍️
이런 걸
배워요!
블록체인
리액트
솔리디티
ERC721
차크라UI

NFT가 궁금한 당신을 위해, 
기본에 충실한 D.P(디앱 프로젝트)! 

내 손으로 만드는 
디앱 프로젝트 🔍

스마트 컨트랙트 작성 - 프론트 연동 - DApp 제작을 한번에!

디앱프로젝트1 h662-Animals

  • NFT 동물 카드를 생성하고(민팅) 판매등록/구매 등 기본적인 NFT 기능을 배워나갑니다.
  • 스마트컨트랙트(블록체인)은 솔리디티(ERC721)로 작성하고, 리액트로 작성된 스마트컨트랙트와 연동해나가는 과정을 배우게 될 것입니다.

리액트를 활용한 DApp 제작 방법까지 배울 수 있어요.

DApp을 제작하고 싶으신가요? 이 강의에서는 DApp 제작을 위한 스마트 컨트랙트 제작, 연동 등을 직접 따라해보면서 NFT의 기본적인 기능(NFT 생성, NFT 구매 및 판매)을 이해하고, 다양한 분야에 응용할 수 있는 기초를 기르게 됩니다.

  • 스마트 컨트랙트 작성 (블록체인)
  • 리액트 - 스마트 컨트랙트 연동 (프론트엔드)
  • NFT의 기본적인 기능이 들어간 Dapp 제작

다음 내용을 
학습합니다 📚

스마트 컨트랙트 (솔리디티)

  • NFT 민팅 (생성)
  • NFT 판매 (구매 및 판매)
  • 리믹스 (스마트 컨트랙트 IDE) 사용법

프론트엔드 (React, Web3.js)

  • 프론트엔드 셋팅
  • 메타마스크 (블록체인 지갑) 사용법
  • 스마트 컨트랙트 연동 (Web3.js)
  • 차크라UI (간단한 UI 디자인)

📖 확인해주세요

  • 2022년 1월 기준, 제가 실제 사용하는 기술 스택으로 강의를 구성하였습니다.
  • 스마트 컨트랙트를 작성하고 리액트와 연동하는 과정을 중점적으로 다룹니다.

Q&A 💬

Q. DApp 제작이 처음인 사람도 들을 수 있을까요?

설명 위주보다는 실제로 코딩하는 것을 중점적으로 만든 강의이지만, 잘 모르시는 부분은 저와 소통하면서 배워나가면 처음인 분이더라도 충분히 학습할 수 있다고 생각합니다.

Q. 리액트를 몰라도 배울 수 있을까요?

리액트를 한 번도 사용해 본 적이 없다면 리액트에 관한 기초적인 설명은 강의에서 다루지 않기 때문에 배워나가기 조금 힘들 수 있다고 생각합니다. 강의를 들으시다가 리액트에 대해 막히는 부분이 있다면 공유 주시면 답변드리겠습니다.

Q. 강의를 듣고 바로 응용할 수 있을까요?

충분히 응용이 가능하다고 생각합니다. NFT를 구성하는데 있어서 가장 핵심적인 내용들만 포함시켜서 빠르게 DApp을 구축하는 것을 목표로 제작했습니다. 그리고 비슷한 컨텐츠를 계속해서 제작해 나갈 예정이라 다른 컨텐츠들과 같이 듣는다면 응용하는 것은 어렵지 않다고 생각합니다.

이런 분들께 추천드려요!

🎓
학습 대상은
누구일까요?
블록체인 DApp 개발을 시작하려는 사람
리액트를 활용하여 DApp을 제작하고픈 사람
📚
선수 지식,
필요할까요?
리액트

안녕하세요
h662 입니다.
h662의 썸네일

안녕하세요 블록체인 개발자 h662 입니다!

커리큘럼 총 23 개 ˙ 3시간 25분의 수업
이 강의는 영상, 수업 노트가 제공됩니다. 미리보기를 통해 콘텐츠를 확인해보세요.
섹션 0. 스마트 컨트랙트 작성
Intro 미리보기 05:39
첫번째 스마트 컨트랙트 09:39
첫번째 스마트 컨트랙트 (MintAnimalToken.sol) 완성 04:31
판매 스마트 컨트랙트 작성 11:55
구매 함수 (purchaseAnimalToken) 작성 10:39
섹션 1. 프론트엔드(리액트) - 스마트 컨트랙트
프론트엔드 셋팅 1 (ChakraUI, React-Router-Dom) 미리보기 08:36
프론트엔드 셋팅 2 (Web3.js) 11:09
메인 페이지(mintAnimalToken) 작성 1 10:14
메인 페이지(mintAnimalToken) 작성 2 11:58
레이아웃 구성 09:23
My Animal Cards 페이지 작성 09:50
판매 승인 상태 체크 12:20
MyAnimalCard 컴포넌트 작성 1 11:53
MyAnimalCard 컴포넌트 작성 2 11:21
리팩토링 (스마트 컨트랙트 수정) 1 16:07
리팩토링 (스마트 컨트랙트 수정) 2 08:00
판매 페이지 작성 12:47
SaleAnimalCard 컴포넌트 작성 07:46
판매자 정보 가져오기 (getSaleAnimalTokenOwner) 07:16
구매 기능 (onClickBuy) 05:03
Outro 01:25
섹션 2. Extra
Remix IDE 설치 02:19
Metamask (블록체인 지갑) 설치 05:51
강의 게시일 : 2022년 02월 04일 (마지막 업데이트일 : 2022년 02월 04일)
수강평 총 56개
수강생분들이 직접 작성하신 수강평입니다.
5
56개의 수강평
5점
4점
3점
2점
1점
VIEW 추천 순 최신 순 높은 평점 순 낮은 평점 순 평점 순 높은 평점 순 낮은 평점 순
AmbitiousFox thumbnail
5
개발자 분들 중에서 간단하게 댑 nft 거래소 만들어보고 싶으신 분 들으면 좋을 것 같아요!
2022-12-03
있어요 thumbnail
5
굿굿굿굿굿
2022-10-17
상진 thumbnail
5
좋은 강의 감사합니다 !
2022-12-28
김민겸 thumbnail
5
내용이 알찹니다
2023-01-30
고승용 thumbnail
5
지식을 나눔해 주셔서 감사합니다.
2023-02-21