Solana 개발 101 - 새로운 DAS API로 SvelteKit 앱 만들기

소개

Digital Asset Standard API(DAS) SDK는 타입, 한 줄 추상화, 올바르게 형식화된 응답을 제공하여 Solana의 압축 및 DAS 사용을 간소화합니다.

이 단계별 튜토리얼에서는 DAS SDK의 getAssetsByGroup 메서드를 사용해 웹 페이지에 NFT 컬렉션 이미지를 표시하는 방법을 안내합니다. 또한 더 복잡한 시나리오에서 DAS SDK를 활용하기 위한 기반을 마련합니다.

사전 요구 사항

이 튜토리얼을 최대한 활용하려면 다음 요구 사항을 충족해야 합니다.

• npm 또는 yarn 설치: 프로젝트의 종속성을 관리하는 데 필요한 패키지 관리자입니다.
• JavaScript 기본 지식: 변수, 함수, 객체 등 JavaScript의 기본 개념을 이해해야 합니다.
• Git 설치: 버전 관리와 협업에 필요합니다.

환경 설정

이 튜토리얼을 따라 하려면 여기에 있는 보일러플레이트 저장소를 사용하는 것이 좋습니다.

완성된 빌드의 라이브 화면은 여기에서 확인할 수 있습니다.

1단계: 새 SvelteKit 프로젝트 설정

먼저 새 SvelteKit 프로젝트를 설정해야 합니다. create-svelte 템플릿을 사용해 프로젝트 구조를 만들 수 있습니다. 터미널에서 다음 명령을 실행하세요.

git clone https://github.com/helius-labs/das-ui.git

그런 다음 새 디렉터리로 이동하세요.

cd das-ui

이어서 프로젝트 종속성을 설치하세요.

npm install

2단계: 유틸리티 함수 설정

설정된 src/lib/util 디렉터리에 collection.ts라는 새 파일을 만드세요.

이 파일 안에 아래와 같이 getCollection 함수를 설정하세요.

import { Helius } from 'helius-sdk';

export async function getCollection() {
// Request goes here //
}

getCollection 함수는 DAS API에서 NFT 데이터 컬렉션을 가져오는 비동기 함수입니다. fetch 또는 axios 호출을 설정할 필요 없이 Helius SDK를 사용해 RPC 요청을 보냅니다.

1. 먼저 'nftData' 키로 로컬 스토리지에 저장된 데이터가 있는지 확인합니다. 데이터가 있으면 해당 JSON 데이터를 파싱해 반환합니다.

const storedData = localStorage.getItem('nftData');

if (storedData !== null) {
    return JSON.parse(storedData);
}

이미 가져온 데이터에 대해 불필요한 네트워크 요청을 줄이는 캐싱 방식입니다. 필요에 맞게 캐시 및 로딩 로직을 적용할 수 있습니다.

       2. 다음으로 API 키를 사용해 Helius 클라이언트를 초기화합니다. 사용할 클러스터와 RPC 요청 ID도 선택적으로 전달할 수 있습니다.

const helius = new Helius('YOUR_API_KEY');

3. 페이지네이션을 위한 변수 두 개를 초기화합니다. 이 변수를 사용해 모든 항목을 가져올 때까지 DAS API 결과를 한 번에 1,000개씩 페이지네이션합니다.

let results = [];
let page = 1;
let paginate = true;

4. paginate가 true인 동안 계속 실행되는 while 루프를 시작합니다. 이 루프 안에서 helius.rpc.getAssetsByGroup()을 사용해 DAS API에 요청을 보냅니다. 그룹 키, 그룹 값, 현재 페이지 번호를 제공합니다.

while (paginate) {
    try {
        const response = await helius.rpc.getAssetsByGroup({
            groupKey: 'collection',
            groupValue: 'YOUR_COLLECTION_VALUE',
            page: page,
        });
        ...
    }
    ...
}

5. 응답의 항목을 처리합니다. 항목 수가 1,000개 미만이면 모든 항목을 가져온 것이므로 paginate를 false로 설정해 루프를 종료합니다. 그렇지 않으면 page 변수를 증가시켜 다음 루프 반복에서 다음 항목 세트를 가져옵니다.

const nfts = response.items;

// if the amount of items returned is less than 1000, stop pagination
if (nfts.length < 1000) {
    paginate = false;
} else {
    // otherwise, increase the page number to get the next page of results
    page++;
}

6. 응답의 각 항목에 대해 메타데이터에서 name와 image를 추출한 후 results 배열에 추가합니다.

for (const nft of nfts) {
    const name = nft.content?.metadata.name;
    const image = nft.content?.links?.image;

    results.push({ name, image });
}

7. 마지막으로 결과를 로컬 스토리지에 저장해 다음에 다시 가져올 필요가 없도록 한 후 결과를 반환합니다.

localStorage.setItem('nftData', JSON.stringify(results));
return results;

전체 코드는 다음과 같습니다. 

import { Helius } from 'helius-sdk';

export async function getCollection() {
	const storedData = localStorage.getItem('nftData');

	if (storedData !== null) {
		return JSON.parse(storedData);
	}

	const helius = new Helius('YOUR_API_KEY');
	let results = [];
	let page = 1;
	let paginate = true;
	while (paginate) {
		try {
			const response = await helius.rpc.getAssetsByGroup({
				groupKey: 'collection',
				groupValue: '8Rt3Ayqth4DAiPnW9MDFi63TiQJHmohfTWLMQFHi4KZH',
				page: page,
			});
			const nfts = response.items;

			// if the amount of items returned is less than 1000, stop pagination
			if (nfts.length < 1000) {
				paginate = false;
			} else {
				// otherwise, increase the page number to get the next page of results
				page++;
			}
			for (const nft of nfts) {
				const name = nft.content?.metadata.name;
				const image = nft.content?.links?.image;

				results.push({ name, image });
			}
			localStorage.setItem('nftData', JSON.stringify(results));
			return results;
		} catch (e) {
			console.log(e);
		}
	}
}

YOUR_API_KEY를 실제 Helius API 키로 바꾸고 groupValue를 표시하려는 컬렉션의 실제 값으로 바꾸세요. 이 예시에서 groupValue는 Solana Monkey Business Gen 3의 컬렉션 ID인 8Rt3Ayqth4DAiPnW9MDFi63TiQJHmohfTWLMQFHi4KZH입니다.

3단계: Collection 컴포넌트 만들기

1. $lib/components 디렉터리에 Collection.svelte라는 새 파일을 만드세요. 이 파일 안의 <script> 태그에 필요한 import를 설정합니다.

이 코드에서는 다음을 수행합니다.

• 이 컴포넌트에서 사용할 getCollection 함수를 가져옵니다.
• svelte에서 onMount, onDestroy, afterUpdate를 가져옵니다.
• 각 NFT의 이름과 이미지를 받을 수 있도록 컬렉션을 빈 타입으로 설정합니다.
• onMount 함수에서 getCollection 함수를 호출한 후 컬렉션 데이터를 설정합니다.

2. 이제 이미지가 화면에 들어올 때만 렌더링하도록 Intersection Observer를 설정할 수 있습니다. 이 예시처럼 많은 이미지를 로드할 때 특히 중요합니다.

3. 이제 이전 afterUpdate 함수에서 설정한 observer를 중지하도록 onDestroy를 설정할 수 있습니다.

4. 이제 tailwind를 사용해 그리드 레이아웃을 만들고 모든 화면 크기에 반응하도록 설정할 수 있습니다.

5. 반환된 이미지를 화면에 로드하도록 그리드 내부를 설정합니다.

위 코드에서는 다음을 수행합니다.

• 바깥쪽 div와 tailwind를 사용해 그리드와 열을 설정합니다.
• 각 항목의 이미지 소스를 로드하도록 each 블록을 배치합니다.
• 반환된 각 NFT 항목을 표시하기 위해 그리드 레이아웃에 카드와 이미지 div를 추가합니다.

전체 코드는 다음과 같습니다.

4단계: 컬렉션을 표시할 페이지 만들기

1. src/routes 디렉터리에 +page.svelte라는 새 파일을 만들고 다음 코드를 입력하세요.

이 단계에서는 Collection 컴포넌트를 메인 페이지로 가져옵니다.

2. 다음으로 페이지 레이아웃을 설정합니다.

이 단계에서는 다음을 수행합니다.

• 페이지 콘텐츠가 배치될 컨테이너를 설정합니다.
• 헤더를 추가합니다(<style> 태그에서 스타일 지정).
• 가져온 Collection.svelte를 컨테이너의 <h1> 바로 아래에 배치합니다.

5단계: 서버 시작

이제 SvelteKit 서버를 시작할 준비가 되었습니다. 터미널에서 다음 명령을 실행하세요.

npm run dev

마무리

축하합니다! Helius SDK를 사용해 NFT 컬렉션을 가져오고 표시하는 SvelteKit 프로젝트를 성공적으로 설정했습니다. collection.ts에 설정한 함수는 유연하며 다양한 프레임워크에서 활용할 수 있습니다. 이 튜토리얼은 더 복잡한 사용 사례에서 DAS SDK를 활용하기 위한 기반을 제공합니다.