# 개요 **알레오 블록체인을 활용해서 Leo로 zkNFT를 만들어봅시다.** 간단한 이미지를 추가해서 컬렉션과 NFT를 만들어보자 Leo란 알레오의 스마트 컨트랙트 언어로 블록체인 상에서 자동으로 조건을 만족하면 동작하는 단어 그대로 스마트 컨트랙트, 즉 계약에 대한 언어입니다. 이더리움 개발을 해봤다면 Leo는 솔리디티에 비교하면 되고 알레오 NFT는 이더리움의 ERC721과 비교할 수 있는 개념입니다. 그러면 환경설정부터 진행한 뒤 단계별로 알레오 블록체인 NFT를 만들어 봅시다. # 사전 준비 * **LEO 개발 환경 설치하기** * [맥 전용 개발 환경 설치 문서 참고](https://provider.bth.builders/participation/d15fa191-fc3d-4e85-84b0-d30265e779b9/167b3aa9-ea44-4172-a4c7-4eaa01222c67/article/3f170b1f-0761-455e-b700-e62253310770) * [윈도우 전용 개발 환경 설치 문서 참고](https://provider.bth.builders/participation/d15fa191-fc3d-4e85-84b0-d30265e779b9/167b3aa9-ea44-4172-a4c7-4eaa01222c67/article/c75e6405-9da9-4f3d-8f52-56ab3f02bd79) * **미션 결과물 참고하기** * 미션 진행 참고용 aleo\_rock\_scissors\_paper : [[🔗](https://github.com/hex-aragon/aleo_rock_scissors_paper)] * 결과물을 참고하고 싶다면, 위 깃헙 링크를 통해 `git clone` 해보길 권장한다 * **사전 지식** * **ERC721** 개념 : [EIP721](https://eips.ethereum.org/EIPS/eip-721) * **알레오 NFT** 표준 코드 : [ARC-721](https://github.com/AleoHQ/ARCs/discussions/36) # 프로젝트 구조 **전체 프로젝트 구조**입니다. 중요 파일에 대해서 설명을 추가했습니다. ``` ├── README.md ├── _headers ├── arc721_convert_128bit_to_string.js # arc-721 기준으로 128bit를 문자열로 변환하는 자바스크립트 코드 ├── arc721_convert_string_to_128bit.js # arc-721 기준으로 문자열을 128bit로 변환하는 자바스크립트 코드 ├── index.html ├── install.sh ├── package-lock.json ├── package.json ├── public │ └── favicon.ico ├── simple_arc721 │ ├── README.md # 프로젝트 전체 구조에 대해 설명한 파일 │ ├── build # src/main.leo 파일을 컴파일하면 만들어지는 aleo instruction 폴더 │ │ ├── main.aleo # src/main.leo 소스코드를 컴파일하면 만들어지는 aleo instruction 파일 │ │ └── program.json # 프로그램에 대한 설명을 json 파일로 구성 │ ├── deploy.sh # 테스트넷에 배포하는 쉘 스크립트 │ ├── deploy_create_collection.sh # 테스트넷에 배포한 알레오 컨트랙트에 컬렉션을 생성하는 함수를 호출하는 쉘 스크립트 │ ├── deploy_mint.sh # 테스트넷에 배포한 알레오 컨트랙트에 NFT를 민팅하는 함수를 호출하는 쉘 스크립트 │ ├── inputs │ │ └── simple_arc721.in │ ├── local_create_collection.sh # 로컬에서 실행하는 컬렉션 생성 스크립트 │ ├── local_mint_nft.sh # 로컬에서 실행하는 컬렉션 생성 스크립트 │ ├── program.json # 프로그램에 대한 설명을 json 파일로 구성 │ └── src │ └── main.leo # simple_arc721 aleo 프로그램의 소스코드 ├── src │ ├── App.css │ ├── App.jsx # npm create aleo-app@latest 명령으로 생성한 프론트엔드 Aleo sdk 소스코드 │ ├── assets │ │ ├── aleo.svg │ │ └── react.svg │ ├── index.css │ ├── main.jsx # 리액트 루트 자바스크립트 │ └── workers │ ├── AleoWorker.js # 알레오의 워커 자바스크립트 │ ├── util.js │ └── worker.js # App.jsx에서 실제 참고하는 aleo 함수 코드가 포함된 자바스크립트 ├── vite.config.js └── webpack.config.js 8 directories, 31 files ``` # 1\. simple\_arc721\.aleo 구조를 이해해보자\. ##### **1.** simple\_arc721 **NFT의 메타데이터 이미지 - String64** 알레오는 **NFT** **메타데이터를** 특이한 데이터 형식으로 저장합니다. Leo 언어에서는 문자열을 지원하지 않아서 문자열을 128비트로 변환해서 저장해야됩니다. **Leo**의 데이터 타입중 하나인 **uint128** **bit**로 변환해야합니다. **다음은 LEO의 NFT 코드 중 메타데이터를 저장하는 구조체 코드입니다.** **\- String64** ``` struct String64 { part0: u128, part1: u128, part2: u128, part3: u128 } ``` 위와 같이 데이터를 저장하기 위해서는 하단에 있는 자바스크립트 코드처럼 문자열 URL을 128비트로 변환해주는 과정이 필요합니다. 다음 코드의 예시 데이터는 **[ARC-721](https://github.com/AleoHQ/ARCs/discussions/36)** 링크에서 참고했습니다. 위에 참고한 ARC-721링크를 참고했다면 예시 코드에 BaseUri 예시코드에 google.com/을 어떻게 비트스트링으로 변환했는지 예시를 알 수 있습니다. 문자열 "google.com/"을 입력해서 "137489088058657146712104188238903640064n" 값을 만들어내고 뒤에 단위로 u128비트를 붙이면 알레오가 인식할 수 있는 이미지 메타데이터로 변환한 것 입니다. *** ##### arc721\_convert\_string\_to\_128bit.js (이에 대한 자세한 내용은 여기([https://art.privacypride.com/nft-formatting](https://art.privacypride.com/nft-formatting)**)에서 확인할 수 있으며, 문자를 u128로 변환하는 실제 코드 링크는 여기(**[https://github.com/demox-labs/art-factory/blob/main/src/lib/util.ts](https://github.com/demox-labs/art-factory/blob/main/src/lib/util.ts)\*\*)에서 확인할 수 있습니다.) **원리는 다음과 같습니다.** * 입력한 문자열의 길이를 16으로 나누고 그 결과를 utf8로 인코딩한 뒤 그 결과를 Uint8 Array로 변환합니다. * 이후 인코딩된 바이트 배열을 순회하면서 빅인트 변수로 변환하고 그리고 레프트 시프트를 통해 변환한다음에 OR 연산을 진행합니다. * 이후 초기에 나눈 숫자만큼 Bigint 배열에 값을 넣으면서 입력한 문자열을 배열로 만드는데 NFT의 메타데이터로 넣으려면 하단 스크립트를 실행해서 Bigint를 4개의 값으로 만들 수 있게끔 조정해야합니다. * 왜냐하면 Leo코드의 String64 구조체에 변수가 4개이기 때문이죠 주로 살펴봐야할 자바스크립트 함수코드는 다음과 같습니다. **splitStringToBigInts** : 이 함수의 목적은 긴 문자열을 작은 단위로 나누고, 각 단위를 독립적으로 BigInt 값으로 변환하여 처리하는 데 있습니다. **stringToBigInt** : // 이 로직의 목적은 문자열을 UTF-8 바이트 시퀀스로 인코딩한 후, 그 바이트 시퀀스를 하나의 큰 정수로 표현하여, 예를 들어 암호화나 해싱 작업에서 사용할 수 있는 형태로 만드는 것입니다. **padArray** : 이 함수는 배열의 길이를 특정 값으로 고정시키고 싶을 때 유용하며, 특히 BigInt 타입을 다루는 연산에서 필요한 배열 길이를 조정하는 데 사용됩니다. **각 함수별 코드에 대한 설명을 자세히 살펴보면됩니다.** **예제코드 : 문자열을 128비트로** 변환해주는 **자바스크립트** ([https://github.com/demox-labs/art-factory/blob/main/src/lib/util.ts](https://github.com/demox-labs/art-factory/blob/main/src/lib/util.ts)) 이 코드를 자바스크립트로 변환하면 하단과 같은 코드가 나옵니다. ``` function getSettingsFromNumber(settingNum) { const bitStringArray = settingNum .toString(2) .padStart(32, "0") .split("") .reverse(); console.log("bitStringArray", bitStringArray); return { initialized: bitStringArray[0] === "1", active: bitStringArray[1] === "1", whiteList: bitStringArray[2] === "1", frozen: bitStringArray[3] === "1", }; } function getBit(setting) { return setting ? "1" : "0"; } function convertSettingsToNumber(settings) { console.log("call convertSettingsToNumber", settings); const { frozen, active, whiteList, initialized } = settings; console.log("after convertSettingsToNumber", settings); const bitString = `${getBit(frozen)}${getBit(whiteList)}${getBit( active )}${getBit(initialized)}`; console.log("bitString", bitString); return parseInt(bitString, 2); } function safeParseInt(value) { const parsedValue = parseInt(value, 10); console.log("parsedValue", parsedValue); return isNaN(parsedValue) ? 0 : parsedValue; } // 이 로직의 목적은 문자열을 UTF-8 바이트 시퀀스로 인코딩한 후, 그 바이트 시퀀스를 하나의 큰 정수로 표현하여, // 예를 들어 암호화나 해싱 작업에서 사용할 수 있는 형태로 만드는 것입니다. //하지만, 이 구현에는 바이트 순서를 기준으로 왼쪽 시프트를 사용하는 방식 때문에, \ //문자열의 길이가 길어질수록 더 많은 비트를 시프트해야 하며, // 이는 특정 길이 이상에서는 예상치 못한 결과를 초래할 수 있습니다. //게다가, 인코딩된 바이트를 누적할 때 사용하는 방식은 바이트 순서(빅 엔디언, 리틀 엔디언)에 대한 고려 없이 수행됩니다. function stringToBigInt(input) { console.log("call stringToBigInt", stringToBigInt); console.log("input", input); //utf 8로 인코더 변수 설정 //TextEncoder 인스턴스 생성: TextEncoder는 문자열을 UTF-8 바이트 시퀀스로 인코딩하는 데 사용됩니다. //이 예제에서는 encoder 변수에 TextEncoder의 새 인스턴스를 할당합니다. const encoder = new TextEncoder(); // 문자열 인코딩: encoder.encode(input) 메서드는 입력 문자열을 UTF-8로 인코딩하고, 그 결과를 Uint8Array로 반환합니다. //이 배열은 인코딩된 문자열의 각 바이트를 담고 있습니다. const encodedBytes = encoder.encode(input); console.log("encoder", encoder); console.log("encodedBytes", encodedBytes); // BigInt 변수 초기화: bigIntValue는 인코딩된 바이트 값을 단일 BigInt 값으로 누적하기 위해 사용됩니다. 초기값은 0입니다. let bigIntValue = BigInt(0); console.log("bigIntValue", bigIntValue); //인코딩된 바이트 배열의 길이만큼 순회 // encodedBytes Uint8Array(16) [ // 98, 97, 102, 107, 114, // 101, 105, 98, 106, 102, // 111, 108, 100, 107, 117, // 50 // ] for (let i = 0; i < encodedBytes.length; i++) { //바이트 시퀀스를 BigInt로 변환: 인코딩된 바이트 배열을 순회하며 각 바이트를 BigInt로 변환합니다. //이 때, 각 바이트는 해당 바이트의 위치에 따라 적절한 비트만큼 왼쪽으로 시프트됩니다. //예를 들어, 첫 번째 바이트(가장 낮은 주소를 가진 바이트)는 시프트되지 않고, //두 번째 바이트는 8비트, 세 번째 바이트는 16비트, 이런 식으로 왼쪽으로 시프트됩니다. const byteValue = BigInt(encodedBytes[i]); console.log("byteValue", byteValue); const shiftedValue = byteValue << BigInt(8 * i); console.log("shiftedValue", shiftedValue); // BigInt 값의 누적: 각 바이트를 해당하는 비트 위치로 시프트한 후, 이를 bigIntValue에 누적합니다. // 누적은 비트 OR 연산(|)을 사용하여 수행됩니다. 이 과정을 통해 모든 인코딩된 바이트가 하나의 BigInt 값으로 합쳐집니다. bigIntValue = bigIntValue | shiftedValue; console.log("bigIntValue", bigIntValue); } // 결과 반환: 마지막으로, 모든 바이트가 BigInt 값으로 변환되고 누적된 후, 이 BigInt 값이 함수의 결과로 반환됩니다. return bigIntValue; } function bigIntToString(bigIntValue) { console.log("call bigIntToString", bigIntToString); console.log("bigIntValue", bigIntValue); const bytes = []; let tempBigInt = bigIntValue; console.log("tempBigInt", tempBigInt); while (tempBigInt > BigInt(0)) { const byteValue = Number(tempBigInt & BigInt(255)); console.log("byteValue", byteValue); bytes.push(byteValue); console.log("bytes", bytes); tempBigInt = tempBigInt >> BigInt(8); console.log("tempBigInt", tempBigInt); } const decoder = new TextDecoder(); console.log("decoder", decoder); const asciiString = decoder.decode(Uint8Array.from(bytes)); console.log("asciiString", asciiString); return asciiString; } //이 함수의 목적은 긴 문자열을 작은 단위로 나누고, 각 단위를 독립적으로 BigInt 값으로 변환하여 처리하는 데 있습니다. //이 방식은 특히 문자열이 매우 길거나, 문자열로부터 큰 숫자를 추출해야 하는 애플리케이션(예: 암호화, 대규모 수치 계산)에서 유용합니다. //stringToBigInt 함수의 구현 세부 사항에 따라, 각 청크의 변환 과정에서 데이터의 손실 없이 정확한 변환을 보장하기 위한 처리가 포함될 수 있습니다. function splitStringToBigInts(input) { console.log("splitStringToBigInts",splitStringToBigInts) // 변수 설정 및 초기화: // chunkSize: 문자열을 나눌 크기를 정의합니다. 여기서는 16으로 설정되어 있어, 문자열을 16자리 문자열로 나눕니다. // numChunks: 문자열을 chunkSize로 나눈 후 생성될 조각(청크)의 총 개수를 계산합니다. // Math.ceil(input.length / chunkSize)를 통해 입력 문자열의 길이를 청크 크기로 나눈 값의 올림을 계산하여, // 입력 문자열을 완전히 커버할 수 있는 청크의 최소 개수를 결정합니다. const chunkSize = 16; //Math.ceil() 함수는 주어진 숫자보다 크거나 같은 숫자 중 가장 작은 숫자를 integer 로 반환합니다. const numChunks = Math.ceil(input.length / chunkSize); console.log("numChunks",numChunks) //bigInts 배열 초기화: 이 배열은 각 청크를 BigInt 값으로 변환한 결과를 저장하기 위해 사용됩니다. const bigInts = []; for (let i = 0; i < numChunks; i++) { //substr() 메서드는 문자열에서 특정 위치에서 시작하여 특정 문자 수 만큼의 문자들을 반환합니다. // 문자열 분할 및 변환: // for 루프를 사용하여 입력 문자열을 여러 청크로 나눕니다. //각 반복에서 i * chunkSize 위치에서 시작하여 chunkSize 길이만큼의 문자열 조각(청크)을 추출합니다. 이는 substr 메서드를 통해 수행됩니다. const chunk = input.substr(i * chunkSize, chunkSize); console.log("chunk", chunk); // 각 청크는 이전에 설명한 stringToBigInt 함수를 통해 BigInt 값으로 변환됩니다. //이 함수는 문자열을 UTF-8로 인코딩하고, 인코딩된 바이트를 하나의 BigInt 값으로 합칩니다. const bigIntValue = stringToBigInt(chunk); console.log("bigIntValue", bigIntValue); //배열에 bigIntValue 삽입 bigInts.push(bigIntValue); console.log("bigInts", bigInts); } return bigInts; } function joinBigIntsToString(bigInts) { let result = ""; for (let i = 0; i < bigInts.length; i++) { const chunkString = bigIntToString(bigInts[i]); console.log("chunkString", chunkString); result += chunkString; console.log("result", result); } return result; } // 이 함수는 배열의 길이를 특정 값으로 고정시키고 싶을 때 유용하며, // 특히 BigInt 타입을 다루는 연산에서 필요한 배열 길이를 조정하는 데 사용됩니다. //예를 들어, 암호화 알고리즘의 입력값으로 사용되는 배열이나, 데이터 전송 프로토콜에서 특정 길이의 메시지를 요구하는 경우에 적합합니다. //BigInt(0)으로 패딩하는 것은, 배열의 요소가 BigInt 타입일 때 타입의 일관성을 유지하기 위한 것입니다. function padArray(array, length) { // 패딩 길이 계산: // paddingLength는 원하는 최종 배열 길이(length)에서 현재 배열의 길이(array.length)를 뺀 값입니다. // 이 값은 배열에 추가해야 할 0의 개수를 결정합니다. const paddingLength = length - array.length; console.log("paddingLength", paddingLength); // 길이 조건 검사: // 만약 paddingLength가 0 이하라면, 즉 원하는 길이가 이미 현재 배열 길이보다 작거나 같다면, 추가적인 패딩 없이 원래의 배열을 그대로 반환합니다. if (paddingLength <= 0) { return array; } // 패딩 생성 및 배열 확장: // Array(paddingLength).fill(BigInt(0))를 사용해, paddingLength 길이만큼의 새 배열을 생성하고, 모든 요소를 BigInt 타입의 0으로 채웁니다. // 이 패딩 배열을 원래의 배열 array에 concat 메서드를 사용하여 이어붙여, paddedArray라는 새로운 배열을 생성합니다. // 이 과정에서 원래 배열의 모든 요소 뒤에 패딩이 추가됩니다. const padding = Array(paddingLength).fill(BigInt(0)); const paddedArray = array.concat(padding); console.log("padding", padding); console.log("paddedArray", paddedArray); // 결과 반환: // 패딩이 추가된 새 배열 paddedArray를 반환합니다. // 이 배열은 원하는 length 길이를 만족하게 됩니다. return paddedArray; } function parseStringToBigIntArray(input) { const bigIntRegex = /([0-9]+)u128/g; const matches = input.match(bigIntRegex); if (!matches) { return []; } console.log("bigIntRegex", bigIntRegex); console.log("matches", matches); const bigInts = matches.map((match) => BigInt(match.slice(0, -4))); console.log("bigInts", bigInts); return bigInts; } function getPublicKeyFromFuture(input) { const keyRegex = /([0-9]+)field/g; const matches = input.match(keyRegex); if (!matches) { return ""; } console.log("keyRegex", keyRegex); console.log("matches", matches); return matches[0]; } function getRandomElement(list) { const randomIndex = Math.floor(Math.random() * list.length); console.log("randomIndex", randomIndex); console.log("list[randomIndex]", list[randomIndex]); return list[randomIndex]; } const removeVisibilitySuffix = (str) => { console.log("str.replace(/.public$|.private$/,"); return str.replace(/\.public$|\.private$/, ""); }; // 예시 URL //const exampleUrl ="https://aleo-public.s3.us-west-2.amazonaws.com/testnet3/privacy-pride/1.json"; // original ipfs://bafkreibjfoldku25lppuc2eqyrxw23ld7ljk24a3bxk5zlrs2f4xrxdzri/ const exampleUrl = "bafkreibjfoldku25lppuc2eqyrxw23ld7ljk24a3bxk5zlrs2f4xrxdzri"; // URL을 아스키코드 8비트로 변환하고 0으로 패딩 const splitUrl = splitStringToBigInts(exampleUrl); console.log("splitUrl", splitUrl); const paddedAsciiUrl = padArray(splitUrl, 4); console.log("Padded Ascii URL:", paddedAsciiUrl); ```
**출력결과** ``` splitStringToBigInts [Function: splitStringToBigInts] numChunks 4 chunk bafkreibjfoldku2 call stringToBigInt [Function: stringToBigInt] input bafkreibjfoldku2 encoder { encoding: 'utf-8' } encodedBytes Uint8Array(16) [ 98, 97, 102, 107, 114, 101, 105, 98, 106, 102, 111, 108, 100, 107, 117, 50 ] bigIntValue 0n byteValue 98n shiftedValue 98n bigIntValue 98n byteValue 97n shiftedValue 24832n bigIntValue 24930n byteValue 102n shiftedValue 6684672n bigIntValue 6709602n byteValue 107n shiftedValue 1795162112n bigIntValue 1801871714n byteValue 114n shiftedValue 489626271744n bigIntValue 491428143458n byteValue 101n shiftedValue 111050674405376n bigIntValue 111542102548834n byteValue 105n shiftedValue 29554872554618880n bigIntValue 29666414657167714n byteValue 98n shiftedValue 7061644215716937728n bigIntValue 7091310630374105442n byteValue 106n shiftedValue 1955354871813212471296n bigIntValue 1962446182443586576738n byteValue 102n shiftedValue 481681381252703811796992n bigIntValue 483643827435147398373730n byteValue 111n shiftedValue 134190765977223838392385536n bigIntValue 134674409804658985790759266n byteValue 108n shiftedValue 33424381060705267422276354048n bigIntValue 33559055470509926408067113314n byteValue 100n shiftedValue 7922816251426433759354395033600n bigIntValue 7956375306896943685762462146914n byteValue 107n shiftedValue 2170217827590728735362355887603712n bigIntValue 2178174202897625679048118349750626n byteValue 117n shiftedValue 607498732448574832538068070518751232n bigIntValue 609676906651472458217116188868501858n byteValue 50n shiftedValue 66461399789245793645190353014017228800n bigIntValue 67071076695897266103407469202885730658n bigIntValue 67071076695897266103407469202885730658n bigInts [ 67071076695897266103407469202885730658n ] chunk 5lppuc2eqyrxw23l call stringToBigInt [Function: stringToBigInt] input 5lppuc2eqyrxw23l encoder { encoding: 'utf-8' } encodedBytes Uint8Array(16) [ 53, 108, 112, 112, 117, 99, 50, 101, 113, 121, 114, 120, 119, 50, 51, 108 ] bigIntValue 0n byteValue 53n shiftedValue 53n bigIntValue 53n byteValue 108n shiftedValue 27648n bigIntValue 27701n byteValue 112n shiftedValue 7340032n bigIntValue 7367733n byteValue 112n shiftedValue 1879048192n bigIntValue 1886415925n byteValue 117n shiftedValue 502511173632n bigIntValue 504397589557n byteValue 99n shiftedValue 108851651149824n bigIntValue 109356048739381n byteValue 50n shiftedValue 14073748835532800n bigIntValue 14183104884272181n byteValue 101n shiftedValue 7277816997830721536n bigIntValue 7292000102714993717n byteValue 113n shiftedValue 2084482080329179332608n bigIntValue 2091774080431894326325n byteValue 121n shiftedValue 571406344427227070857216n bigIntValue 573498118507658965183541n byteValue 114n shiftedValue 137817543436067725916504064n bigIntValue 138391041554575384881687605n byteValue 120n shiftedValue 37138201178561408246973726720n bigIntValue 37276592220115983631855414325n byteValue 119n shiftedValue 9428151339197456173631730089984n bigIntValue 9465427931417572157263585504309n byteValue 50n shiftedValue 1014120480182583521197362564300800n bigIntValue 1023585908114001093354626149805109n byteValue 51n shiftedValue 264807139785276209055055312790224896n bigIntValue 265830725693390210148409938940030005n byteValue 108n shiftedValue 143556623544770914273611162510277214208n bigIntValue 143822454270464304483759572449217244213n bigIntValue 143822454270464304483759572449217244213n bigInts [ 67071076695897266103407469202885730658n, 143822454270464304483759572449217244213n ] chunk d7ljk24a3bxk5zlr call stringToBigInt [Function: stringToBigInt] input d7ljk24a3bxk5zlr encoder { encoding: 'utf-8' } encodedBytes Uint8Array(16) [ 100, 55, 108, 106, 107, 50, 52, 97, 51, 98, 120, 107, 53, 122, 108, 114 ] bigIntValue 0n byteValue 100n shiftedValue 100n bigIntValue 100n byteValue 55n shiftedValue 14080n bigIntValue 14180n byteValue 108n shiftedValue 7077888n bigIntValue 7092068n byteValue 106n shiftedValue 1778384896n bigIntValue 1785476964n byteValue 107n shiftedValue 459561500672n bigIntValue 461346977636n byteValue 50n shiftedValue 54975581388800n bigIntValue 55436928366436n byteValue 52n shiftedValue 14636698788954112n bigIntValue 14692135717320548n byteValue 97n shiftedValue 6989586621679009792n bigIntValue 7004278757396330340n byteValue 51n shiftedValue 940783947759187132416n bigIntValue 947788226516583462756n byteValue 98n shiftedValue 462791915321225230942208n bigIntValue 463739703547741814404964n byteValue 120n shiftedValue 145071098353755500964741120n bigIntValue 145534838057303242779146084n byteValue 107n shiftedValue 33114896050883922353551572992n bigIntValue 33260430888941225596330719076n byteValue 53n shiftedValue 4199092613256009892457829367808n bigIntValue 4232353044144951118054160086884n byteValue 122n shiftedValue 2474453971645503791721564656893952n bigIntValue 2478686324689648742839618816980836n byteValue 108n shiftedValue 560768060721761383881293603555770368n bigIntValue 563246747046451032624133222372751204n byteValue 114n shiftedValue 151531991519480409511034004871959281664n bigIntValue 152095238266526860543658138094332032868n bigIntValue 152095238266526860543658138094332032868n bigInts [ 67071076695897266103407469202885730658n, 143822454270464304483759572449217244213n, 152095238266526860543658138094332032868n ] chunk s2f4xrxdzri call stringToBigInt [Function: stringToBigInt] input s2f4xrxdzri encoder { encoding: 'utf-8' } encodedBytes Uint8Array(11) [ 115, 50, 102, 52, 120, 114, 120, 100, 122, 114, 105 ] bigIntValue 0n byteValue 115n shiftedValue 115n bigIntValue 115n byteValue 50n shiftedValue 12800n bigIntValue 12915n byteValue 102n shiftedValue 6684672n bigIntValue 6697587n byteValue 52n shiftedValue 872415232n bigIntValue 879112819n byteValue 120n shiftedValue 515396075520n bigIntValue 516275188339n byteValue 114n shiftedValue 125344325566464n bigIntValue 125860600754803n byteValue 120n shiftedValue 33776997205278720n bigIntValue 33902857806033523n byteValue 100n shiftedValue 7205759403792793600n bigIntValue 7239662261598827123n byteValue 122n shiftedValue 2250502776992565297152n bigIntValue 2257742439254164124275n byteValue 114n shiftedValue 538349779047139554361344n bigIntValue 540607521486393718485619n byteValue 105n shiftedValue 126937211059536063344148480n bigIntValue 127477818581022457062634099n bigIntValue 127477818581022457062634099n bigInts [ 67071076695897266103407469202885730658n, 143822454270464304483759572449217244213n, 152095238266526860543658138094332032868n, 127477818581022457062634099n ] splitUrl [ 67071076695897266103407469202885730658n, 143822454270464304483759572449217244213n, 152095238266526860543658138094332032868n, 127477818581022457062634099n ] paddingLength 0 Padded Ascii URL: [ 67071076695897266103407469202885730658n, 143822454270464304483759572449217244213n, 152095238266526860543658138094332032868n, 127477818581022457062634099n ] ``` 위의 자바스크립트를 실행하면 **문자열을 uint128비트의 bigint 값이 담긴 배열 4개의 값으로 출력해줍니다. 해당 값은 NFT의 메타데이터로 쓰이며 초기에 설명한 String64 구조체의 입력값이 되는 것입니다.**
그리고 위와 같은 데이터는 알레오의 온체인 데이터로 만들 때 필요한 데이터지만 반대로 온체인에서 오프체인으로 데이터를 가져올 때는 128비트를 문자열로 만들어야 하는데요 다음코드에서 그 과정을 볼 수 있습니다. *** ##### arc721\_convert\_128bit\_to\_string.js 다음코드는 주어진 128비트 값을 16진수 문자열로 바꾼 후 16진수 문자열을 다시 아스키 코드로 8비트로 변환하는 자바스크립트 코드입니다. 각 단계별로 **console.log**를 통해 **데이터** 흐름을 알 수 있습니다.
**예제코드 : 128비트를 문자열로** **자바스크립트** ``` // 주어진 128비트 값 // const u128Value0_collection_num = BigInt( // "122921125932422346952394642653916961969" // ); const u128Value0_collection_num = BigInt( "268826264694461553421063619632887168628" ); //268826264694461553421063619632887168628u128 const u128Value0_base_uri = BigInt("140152554740597500994461819226067828736"); const u128Value1 = BigInt("140152554740597502496524452237299901250"); const u128Value2 = BigInt("133324194421918155921132289162654938981"); const u128Value3 = BigInt("93509703548909910993375653557521895508"); const u128Value4 = BigInt("147831289382731815962129268963868147712"); // 128비트 값을 16진수 문자열로 변환 const hexString_coll_num = u128Value0_collection_num.toString(16); const hexString_base_uri = u128Value0_base_uri.toString(16); const hexString = u128Value1.toString(16); const hexString2 = u128Value2.toString(16); const hexString3 = u128Value3.toString(16); const hexString4 = u128Value4.toString(16); // 16진수 문자열을 아스키코드 8비트로 변환 // 128비트 값인 "140152554740597500994461819226067828736"을 아스키코드 8비트로 변환하기 위해서는 // 해당 값을 16진수 문자열로 변환한 뒤, 각 16진수 값을 8비트 아스키코드 문자로 매핑해야 합니다. //아래는 JavaScript 코드를 사용한 예시입니다: let asciiString = ""; let col_num = ""; let base_uri = ""; let metadata_1 = ""; let metadata_2 = ""; let metadata_3 = ""; let metadata_4 = ""; //hexString_coll_num; console.log("hexString_coll_num", hexString_coll_num); for (let i = 0; i < hexString_coll_num.length; i += 2) { const hexByte = hexString_coll_num.substr(i, 2); const decimalValue = parseInt(hexByte, 16); col_num += String.fromCharCode(decimalValue); } for (let i = 0; i < hexString_base_uri.length; i += 2) { const hexByte = hexString_base_uri.substr(i, 2); const decimalValue = parseInt(hexByte, 16); base_uri += String.fromCharCode(decimalValue); } for (let i = 0; i < hexString.length; i += 2) { const hexByte = hexString.substr(i, 2); const decimalValue = parseInt(hexByte, 16); asciiString += String.fromCharCode(decimalValue); metadata_1 += String.fromCharCode(decimalValue); } //asciiString += " "; for (let i = 0; i < hexString2.length; i += 2) { const hexByte = hexString2.substr(i, 2); const decimalValue = parseInt(hexByte, 16); asciiString += String.fromCharCode(decimalValue); metadata_2 += String.fromCharCode(decimalValue); } for (let i = 0; i < hexString3.length; i += 2) { const hexByte = hexString3.substr(i, 2); const decimalValue = parseInt(hexByte, 16); asciiString += String.fromCharCode(decimalValue); metadata_3 += String.fromCharCode(decimalValue); } for (let i = 0; i < hexString4.length; i += 2) { const hexByte = hexString4.substr(i, 2); const decimalValue = parseInt(hexByte, 16); asciiString += String.fromCharCode(decimalValue); metadata_4 += String.fromCharCode(decimalValue); } console.log( "Original 128-bit Value u128Value0_collection_num:", u128Value0_collection_num.toString() ); console.log( "Original 128-bit Value u128Value0_base_uri:", u128Value0_base_uri.toString() ); console.log("Original 128-bit Value u128Value1 :", u128Value1.toString()); console.log("Original 128-bit Value u128Value2 :", u128Value2.toString()); console.log("Original 128-bit Value u128Value3 :", u128Value3.toString()); console.log("Original 128-bit Value u128Value4 :", u128Value4.toString()); console.log("col_num", col_num); console.log("base_uri", base_uri); console.log("Original metadata_1 ", metadata_1); console.log("Original metadata_2 ", metadata_2); console.log("Original metadata_3 ", metadata_3); console.log("Original metadata_4", metadata_4); console.log("ASCII String:", asciiString); const int128Value = BigInt("122921125932422346952394642653916961969"); console.log(int128Value); ``` **출력 결과** ``` node arc721_convert_128bit_to_string.js hexString_coll_num ca3e0e283993109bd25925361f0efe74 Original 128-bit Value u128Value0_collection_num: 268826264694461553421063619632887168628 Original 128-bit Value u128Value0_base_uri: 140152554740597500994461819226067828736 Original 128-bit Value u128Value1 : 140152554740597502496524452237299901250 Original 128-bit Value u128Value2 : 133324194421918155921132289162654938981 Original 128-bit Value u128Value3 : 93509703548909910993375653557521895508 Original 128-bit Value u128Value4 : 147831289382731815962129268963868147712 col_num Ê>(9Y%6þt base_uri ipfs:// Original metadata_1 ipfs://QmNvtnkcB Original metadata_2 dMNK1M76ivg3CRwe Original metadata_3 FYPV7wSwZgGBKXPT Original metadata_4 o7EL3 ASCII String: ipfs://QmNvtnkcBdMNK1M76ivg3CRweFYPV7wSwZgGBKXPTo7EL3 122921125932422346952394642653916961969n ``` ***
##### **2\. 알레오 NFT 토큰 아이디** NFT 토큰 아이디입니다. 이더리움에서는 자동적으로 토큰아이디를 업데이트 시켜주면서 1씩 증가하는데요 이것은 유일무이한 식별값으로 이 아이디 값이 NFT와 FT를 구분하는 데이터로 볼 수 있습니다. ``` struct TokenId { token_number: u128, collection_number: u128 } ``` **위와 같이 토큰 아이디 구조체에 컬렉션 넘버와 토큰 넘버를 같이 저장해서 활용할 수 있게 구조를 설정했습니다.** **토큰 넘버와 컬렉션 넘버를 unsigned int 128비트로 구성할 수 있게끔 구조체를 만들었습니다.** ##### ##### **3\. NFT 레코드 데이터** ``` record Token { owner: address, id : TokenId, metadata_uri: String64 } ``` NFT 레코드 데이터에서는 Owner가 누구인지, 아이디 값은 무엇인지, 메타데이터는 어떤 것인지를 설정함으로서 NFT 데이터에서 필수적인 데이터를 구조화했습니다. 토큰아이디를 통해서는 컬렉션 넘버와 토큰 아이디를 알 수 있으며, 메타데이터 URL을 통해서는 NFT의 이미지 데이터를 알 수 있습니다.
##### **4\. 컬렉션 레코드 데이터** ``` record Collection { owner: address, id: u128, } ``` 컬렉션은 NFT의 집합 개념입니다. 따라서 컬렉션에서는 제일 중요한 데이터가 Id와 Owner라고 생각해서 구조를 주소와 아이디로 레코드를 구성했습니다.

##### **5\. Create collection$컬렉션 만들기$ transition 함수 코드** 컬렉션을 받는 aleo address를 설정하고 컬렉션 아이디를 설정해서 컬렉션을 생성할 수 있습니다. ``` transition create_collection(receiver: address, collection_id : u128) -> Collection{ return Collection { owner: receiver, id: collection_id, }; } ``` ##### 5-1 Leo create collection 함수 실행 예시 **예시))** 다음과 같이 알레오의 주소값과 아이디 값 (uint128)로 입력해서 만듭니다. ``` leo run "함수명" "주소값 " "Aleo주소값" ``` ##### 5-2. 로컬에서 Leo 프로그램으로 create collection 실행하기. ``` leo run "create_collection" "aleo1un2ns2xfja44dqnk6mnttkgsv5s0rtnqp8vyrwfd3wdfh7qm959s7mgrpv" 0u128 ``` ##### **5-3. 테스트넷에 "simple\_arc721" Leo 프로그램 배포하기** **테스트넷 배포** 테스트넷 배포는 다음과 같은 코드로 실행할 수 있습니다. **APPNAME**은 Leo 프로그램의 아이디입니다. **(simple\_arc721) 배포시에는 꼭 PRIVATEKEY가 있어야 하며 API와 브로드 캐스트도 정상 동작중일 때 배포가 가능합니다.** 테스트넷이 불안정할 때는 배포가 되지 않을수도 있습니다. ``` #!/bin/bash API="https://api.explorer.aleo.org/v1" BROADCAST="testnet3/transaction/broadcast" APPNAME="simple_arc721" PRIVATEKEY="private_key" snarkos developer deploy \ "${APPNAME}.aleo" \ --private-key "${PRIVATEKEY}" \ --query "${API}" \ --path "./build/" \ --broadcast "${API}/${BROADCAST}" \ --priority-fee 1000000 ``` ##### **5-4. 배포된 테스트넷에서 Leo 프로그램으로 "create\_collection" 실행하기** 테스트넷에 배포한 컨트랙트 함수 **create\_collection** 호출하기 **snarkos 커맨드를 이용해서 테스트넷에 배포한 simple\_arc721 프로그램의 create collection 함수를 호출할 수 있습니다.** $1은 쉘 스크립트 실행시 첫 번째 입력인자입니다. ``` #!/bin/bash PRIVATEKEY=$1 APPNAME="simple_arc721" cd .. && snarkos developer execute "${APPNAME}.aleo" "create_collection" "aleo1un2ns2xfja44dqnk6mnttkgsv5s0rtnqp8vyrwfd3wdfh7qm959s7mgrpv" 0u128 --private-key "${PRIVATEKEY}" --query "https://api.explorer.aleo.org/v1" --broadcast "https://api.explorer.aleo.org/v1/testnet3/transaction/broadcast" --priority-fee 1000000 ``` ##### 6\. NFT mint 하기 transition 함수 코드 ``` // Define a mint transition that takes a balance and returns a token transition mint(receiver: address, token_id: TokenId, metadata: String64 ) -> Token { return Token { owner : self.caller, id: token_id, metadata_uri: metadata }; } ``` NFT를 민팅할 때 **필수 데이터인** **receiver**, **token** **id**, **metadata** **uri**를 설정함으로서 민팅할 수 있습니다. ##### **6-1. Leo NFT mint 함수 실행 예시** 위의 Leo 코드에서 봤던 것 처럼 토큰아이디의 객체(**컬렉션** **넘버**, **토큰** **넘버**) 와 메타데이터 구조체 (part0 \~ part4)까지 만든 뒤 민팅합니다. ``` leo run "함수명" "Aleo address" "토큰 아이디 객체" "메타데이터 값" ``` ##### **6-2.** 로컬에서 Leo 프로그램으로 NFT "mint" 실행하기 ``` TOKEN_ID="{ token_number: 0u128, collection_number : 0u128 }" META_DATA="{ part0: 140152554740597502496524452237299901250u128, part1: 133324194421918155921132289162654938981u128, part2: 93509703548909910993375653557521895508u128, part3: 147831289382731815962129268963868147712u128 }" leo run "mint" "aleo1un2ns2xfja44dqnk6mnttkgsv5s0rtnqp8vyrwfd3wdfh7qm959s7mgrpv" "${TOKEN_ID}" "${META_DATA}" ``` ##### **6-3. 배포된 테스트넷에서 Leo 프로그램으로 "mint" 실행하기** 테스트넷에 배포한 컨트랙트 함수 mint 호출하기 $1은 쉘스크립트의 첫 번째 입력인자입니다. **PRIVATEKEY**를 쉘스크립트 실행시 첫 번째 인자에 입력해주세요. ``` #!/bin/bash TOKEN_ID="{ token_number: 0u128, collection_number : 0u128 }" META_DATA="{ part0: 140152554740597502496524452237299901250u128, part1: 133324194421918155921132289162654938981u128, part2: 93509703548909910993375653557521895508u128, part3: 147831289382731815962129268963868147712u128 }" PRIVATEKEY=$1 APPNAME="simple_arc721" cd .. && snarkos developer execute "${APPNAME}.aleo" "mint" "aleo1un2ns2xfja44dqnk6mnttkgsv5s0rtnqp8vyrwfd3wdfh7qm959s7mgrpv" "${TOKEN_ID}" "${META_DATA}" --private-key "${PRIVATEKEY}" --query "https://api.explorer.aleo.org/v1" --broadcast "https://api.explorer.aleo.org/v1/testnet3/transaction/broadcast" --priority-fee 1000000 # > deploy_create_collection.txt ``` ##### **7\. simple\_arc721\.aleo 프로젝트 생성 커맨드** ``` leo new simple_arc721.aleo ``` # **알레오** **simple\_arc721.aleo** **전체 코드** ``` // The 'simple_arc721' program. program simple_arc721.aleo { struct String64 { part0: u128, part1: u128, part2: u128, part3: u128 } struct TokenId { token_number: u128, collection_number: u128 } record Token { owner: address, id : TokenId, metadata_uri: String64 } record Collection { owner: address, id: u128, } transition create_collection(receiver: address, collection_id : u128) -> Collection{ return Collection { owner: receiver, id: collection_id, }; } // Define a mint transition that takes a balance and returns a token transition mint(receiver: address, token_id: TokenId, metadata: String64 ) -> Token { return Token { owner : self.caller, id: token_id, metadata_uri: metadata }; } } ``` 알레오 SDK를 이용해서 프론트엔드 + Leo 구조로 프로젝트 만들기 React Javascript 코드와 Leo를 이용해서 다음과 같은 프로젝트를 만들어보자. **공식 문서 참고 링크 [https://developer.aleo.org/sdk/create-aleo-app/installation](https://developer.aleo.org/sdk/create-aleo-app/installation)** **프로젝트 생성 명령어** ``` npm create aleo-app@latest ``` **프로젝트 이름 설정 : simple-aleo-nft** **프레임워크 설정** : **React** **기술 스택 선택** : **React + Javascript (타입스크립트, 바닐라 자바스크립트 등 옵션에 따라 선택 가능)**
![스크린샷 2024-02-03 01-02-17.png](https://i.ibb.co/80LkkF3/2024-02-03-01-02-17.png) **프로그램 설치 및 셋팅** ``` cd simple-aleo-nft npm install npm run install-leo npm run dev ``` # 프론트엔드 구조 React Javascript + Leo ##### ##### src/App.jsx 코드 화면에 표시되는 자바스크립트 코드를 구성하는 파일입니다. 각 컴포넌트의 구성을 볼 수 있습니다. ``` import { useState } from "react"; import reactLogo from "./assets/react.svg"; import aleoLogo from "./assets/aleo.svg"; import "./App.css"; import simple_arc721 from "../simple_arc721/build/main.aleo?raw"; import { AleoWorker } from "./workers/AleoWorker.js"; const aleoWorker = AleoWorker(); function App() { const [count, setCount] = useState(0); const [executing, setExecuting] = useState(false); const [executingCreCol, setExecutingCreCol] = useState(false); const [executingMint, setExecutingMint] = useState(false); const [deploying, setDeploying] = useState(false); async function create_collection() { const inputValue = prompt("Enter a address value (e.g., aleo1~~~):"); const inputValue2 = prompt("Enter a u128 value (e.g., 0u128):"); console.log("inputValue", inputValue); console.log("inputValue2", inputValue2); // Check if inputValue is not null (user clicked Cancel) or empty if ( inputValue !== null && inputValue !== "" && inputValue2 !== null && inputValue2 !== "" ) { setExecutingCreCol(true); const result = await aleoWorker.localProgramExecution( simple_arc721, "create_collection", [inputValue, inputValue2] // You can use inputValue here ); console.log("result", result); setExecutingCreCol(false); alert(JSON.stringify(result)); } else { alert("Invalid input. Please enter a value."); } } async function mint() { const inputValue = prompt("Enter a address value (e.g., aleo1~~~):"); const inputValue2 = prompt( "Enter a TokenID Object value (e.g., token_number : 0u128, collection_number:0u128):" ); const inputValue3 = prompt( "Enter a NFT Meta_DATA value (e.g., { part0: 140152554740597502496524452237299901250u128, part1: 133324194421918155921132289162654938981u128, part2: 93509703548909910993375653557521895508u128, part3: 147831289382731815962129268963868147712u128" ); console.log("inputValue", inputValue); console.log("inputValue2", inputValue2); console.log("inputValue3", inputValue3); // Check if inputValue is not null (user clicked Cancel) or empty if ( inputValue !== null && inputValue !== "" && inputValue2 !== null && inputValue2 !== "" && inputValue3 !== null && inputValue3 !== "" ) { setExecutingMint(true); const result = await aleoWorker.localProgramExecution( simple_arc721, "mint", [inputValue, inputValue2, inputValue3] // You can use inputValue here ); console.log("result", result); setExecutingMint(false); alert(JSON.stringify(result)); } else { alert("Invalid input. Please enter a value."); } } async function deploy() { setDeploying(true); try { const result = await aleoWorker.deployProgram(simple_arc721); console.log("Transaction:"); console.log("https://explorer.hamp.app/transaction?id=" + result); alert("Transaction ID: " + result); } catch (e) { console.log(e); alert("Error with deployment, please check console for details"); } setDeploying(false); } return ( <>

Aleo + React

Edit src/App.jsx and save to test HMR

{/* Advanced Section */}

Advanced Actions

Deployment on Aleo requires certain prerequisites like seeding your wallet with credits and retrieving a fee record. Check README for more details.

Click on the Aleo and React logos to learn more

); } export default App; ``` *** ##### src/Worker.js **실제 프로그램 실행 및 배포를 담당하는 자바스크립트 파일** ``` import { Account, ProgramManager, PrivateKey, initThreadPool, AleoKeyProvider, AleoNetworkClient, NetworkRecordProvider, } from "@aleohq/sdk"; import { expose, proxy } from "comlink"; await initThreadPool(); async function localProgramExecution( program, aleoFunction, inputs) { const programManager = new ProgramManager(); console.log("programManager", programManager); const account = new Account(); console.log("account", account); programManager.setAccount(account); console.log( "program", program, "aleoFunction", aleoFunction, "inputs", inputs ); const executionResponse = await programManager.run( program, aleoFunction, inputs, false ); console.log("executionResponse", executionResponse); return executionResponse.getOutputs(); } async function getPrivateKey() { // const key = import.meta.env.VITE_APP_PRIVATE_KEY; const key = new PrivateKey() return proxy(key); } async function deployProgram(program) { const keyProvider = new AleoKeyProvider(); keyProvider.useCache(true); // Create a record provider that will be used to find records and transaction data for Aleo programs const networkClient = new AleoNetworkClient( "https://api.explorer.aleo.org/v1" ); const account = import.meta.env.VITE_APP_ACCOUNT; const recordProvider = new NetworkRecordProvider(account, networkClient); // Initialize a program manager to talk to the Aleo network with the configured key and record providers const programManager = new ProgramManager( "https://api.explorer.aleo.org/v1", keyProvider, recordProvider ); programManager.setAccount(account); // Define a fee to pay to deploy the program const fee = 16; // 1.9 Aleo credits // Deploy the program to the Aleo network const tx_id = await programManager.deploy(program, fee); // Optional: Pass in fee record manually to avoid long scan times // const feeRecord = "{ owner: aleo1xxx...xxx.private, microcredits: 2000000u64.private, _nonce: 123...789group.public}"; // const tx_id = await programManager.deploy(program, fee, undefined, feeRecord); return tx_id; } const workerMethods = { localProgramExecution, getPrivateKey, deployProgram }; expose(workerMethods); ``` # 로컬에서 create\_collection을 프론트엔드로 실행시켜보자. **첫 번째 입력인자로 owner로 입력될 인자값 aleo address를 입력한다.**
![스크린샷 2024-02-03 01-17-05.png](https://i.ibb.co/7zfRq9h/2024-02-03-01-17-05.png)
**두 번째 입력인자로 collection id로 입력될 인자값 0u128를 입력한다.** ![스크린샷 2024-02-03 01-17-12.png](https://i.ibb.co/02sh3p1/2024-02-03-01-17-12.png) **로컬에서 컬렉션 실행 결과를 볼 수 있다.** ![스크린샷 2024-02-03 01-25-46.png](https://i.ibb.co/rmV5fKc/2024-02-03-01-25-46.png)

# 로컬에서 mint를 프론트엔드로 실행시켜보자. 첫 번째 입력인자로 aleo address를 입력해준다. ![스크린샷 2024-02-03 01-34-04.png](https://i.ibb.co/DM8DgWy/2024-02-03-01-34-04.png)
**두 번째 인자로 컬렉션 아이디와 토큰 아이디를 입력해준다.** 예시는 다음과 같다. ``` { token_number: 0u128, collection_number : 0u128} ``` ![스크린샷 2024-02-03 01-34-04.png](https://i.ibb.co/DM8DgWy/2024-02-03-01-34-04.png) 세 번째 입력인자는 위에서 설명했던 문자열을 비트로 바꿨었던 4개의 BaseUri (String64) 값이다. ``` { part0: 140152554740597502496524452237299901250u128, part1: 133324194421918155921132289162654938981u128, part2: 93509703548909910993375653557521895508u128, part3: 147831289382731815962129268963868147712u128} ``` ![스크린샷 2024-02-03 01-34-16.png](https://i.ibb.co/VvvQP8k/2024-02-03-01-34-16.png) **4번째는 민팅된 결과다.** ![스크린샷 2024-02-03 01-37-35.png](https://i.ibb.co/Z1t8PGp/2024-02-03-01-37-35.png)
**그리고 NFT의 ipfs 메타데이터를 확인해보자!** 위에서 3번째에 입력했던 메타데이터의 입력값들을 "arc721\_convert\_128bit\_to\_string.js"코드에 u128Value1,2,3,4에 입력한 뒤 실행시키면 하단과 같은 ipfs 메타데이터 URL을 볼 수 있다. ![스크린샷 2024-02-03 01-39-05.png](https://i.ibb.co/LvFCKC1/2024-02-03-01-39-05.png) ipfs://bafybeiaiywvp3ifqhdvkltcycktdtwwwjsf65lxxpsc2mzsaujfossjfwq/ ![스크린샷 2024-02-03 01-41-50.png](https://i.ibb.co/zVDBRK7/2024-02-03-01-41-50.png) 그러면 위와 같이 nft 메타데이터를 포함하고 있는 ipfs url이 보이는데 여기서 icon\_url이 이미지 url인데 이 url에 nft storage 링크를 합치면 다음과 같은 url에서 이미지를 확인할 수 있다. [https://nftstorage.link/ipfs/QmQ58AMQGv8vQb6uvbb745aDQU416nEuaFa1mTMUNdRNhW](https://nftstorage.link/ipfs/QmQ58AMQGv8vQb6uvbb745aDQU416nEuaFa1mTMUNdRNhW)
![스크린샷 2024-02-03 01-44-38.png](https://i.ibb.co/6cK9MFt/2024-02-03-01-44-38.png) (출처 : 드래곤볼 손오공)

그리고 위에 이미지와 달리 이번에는 다음 URL에 있는 사진으로 돌 NFT를 만들 생각이다. ![rock.png](https://i.ibb.co/7QLF4HC/rock.png) **ipfs full url :** [https://bafkreibjfoldku25lppuc2eqyrxw23ld7ljk24a3bxk5zlrs2f4xrxdzri.ipfs.nftstorage.link/](https://bafkreibjfoldku25lppuc2eqyrxw23ld7ljk24a3bxk5zlrs2f4xrxdzri.ipfs.nftstorage.link/) **ipfs cid는 다음과 같으며 초기에 설명했던 "arc721\_convert\_string\_to\_128bit.js" 코드를 실행해서 NFT의 메타데이터에 넣을 수 있게 변환하면 다음과 같다.** 문자열 데이터 : ``` bafkreibjfoldku25lppuc2eqyrxw23ld7ljk24a3bxk5zlrs2f4xrxdzri ``` uint128 배열 데이터 4개 ``` Padded Ascii URL: [ 67071076695897266103407469202885730658n, 143822454270464304483759572449217244213n, 152095238266526860543658138094332032868n, 127477818581022457062634099n ] ``` 변환한 메타데이터 배열 ``` META_DATA="{ part0: 67071076695897266103407469202885730658u128, part1: 143822454270464304483759572449217244213u128, part2: 152095238266526860543658138094332032868u128, part3: 127477818581022457062634099u128 }" ``` **첫 번째인자로 Owner Address를 입력한다.** ![스크린샷 2024-02-03 15-32-40.png](https://i.ibb.co/hCgz9qT/2024-02-03-15-32-40.png) **두 번째 인자로 컬렉션 넘버와 토큰넘버를 입력한다.** ![스크린샷 2024-02-03 15-32-54.png](https://i.ibb.co/HgGz8ST/2024-02-03-15-32-54.png)

**세 번째인자로 NFT 메타데이터 uint128 비트 배열을 입력한다.** ![스크린샷 2024-02-03 15-33-19.png](https://i.ibb.co/rdB8YbN/2024-02-03-15-33-19.png)
이후 민팅결과를 화면에서 볼 수 있다. 해당 과정은 전부 로컬에 있는 Leo 프로그램에서 진행됐다. ![스크린샷 2024-02-03 15-35-10.png](https://i.ibb.co/yFtcdK5/2024-02-03-15-35-10.png)

**github url 주소 : [https://github.com/hex-aragon/simple-aleo-nft](https://github.com/hex-aragon/simple-aleo-nft)**

작업물 추가

코멘트

코멘트 작성하기