Today I Learned
[Front-End] - React
오늘은
Konkrit사이트를 클론 코딩하였는데 마무리는 못하고mainPage와 Component인Header,Intro,Nfts정도를 작업하였다.
main.jsx
const web3 = new Web3(window.ethereum);
const contract = new web3.eth.Contract(CONTRACT_ABI, CONTRACT_ADDRESS);- 먼저 함수 바깥에서
Web3.js라이브러리의 새 객체를 생성하고 브라우저에서 제공하는ethereum provider객체를 초기화한다. ethereum provider객체는window객체에서 가져온전역객체이다.ethereum provider는 사용자가 브라우저에서 제공하는 이더리움 네트워크와 상호작용할 수 있도록 한다.contract객체는 스마트 컨트랙트의abi와address를 사용하여 스마트 컨트랙트와 상호작용할 수 있도록 초기화한다.
const getTotalNft = async() => {
try{
if (!contract) return;
const response = await contract.methods.totalNft().call();
setTotalNft(response);
} catch(error) {
console.error(error);
}
};getTotalNft라는 비동기 함수를 정의하였는데, 먼저 if문을 작성하여contract객체가 존재하지 않으면 함수를 종료시키도록 하였다.totalNft메서드를 통해response에 할당하고 그 할당된 값(총 발행량)을 상태 변수에 저장한다.- 이와 비슷한 구조로
getMynft,getMintedNft비동기 함수를 추가로 작성해주었다. - 그리고 main.jsx에서 작업하였기 때문에
Intro,Nfts컨포넌트에 각각 props로 상태가 변경된 상태 값들을 전달해주었고Intro와Nfts에서 전달받은 props를 참조해주었다.
Nfts.jsx
const getNfts = async(p) => {
try {
let nftArray = [];
for (let i = 0; i < 10; i++) {
const tokenId = i + 1 + (p-1) * 10;
let response = await axios.get(
`${process.env.REACT_APP_JSON_URL}/${tokenId}.json`
);
nftArray.push({ tokenId, metadata: response.data });
}
setNfts(nftArray);
} catch(error) {
console.error(error);
}
};getNfts비동기 함수는 페이지 번호를p로 입력받아 해당 페이지의 nft 목록을 가져오는 함수이다.- 반복문을 통해 10개의 nft정보를 가져와
nftArray배열에 추가한다. tokenId는 각 nft 정보를 식별자로 구별할 수 있게 해주었는데i값에 현재 페이지 번호를 곱하고 `을 더하여 계산된다.tokenId와metadata를 담은 객체를nftArray배열에 푸쉬한다.nftArray배열을setNfts에 담아 상태 변수에 저장한다.
추가로 오늘 배운 내용
.toLocaleString은 자바스크립트의 내장 객체 메소드로 숫자를 해당 지역의 형식에 맞게 문자열로 변환하는 데 사용된다.
