이제 밑준비가 모두 끝났으니, 본격적으로 Klay-Gacha-Machine을 사용해 NFT의 발행준비를 해보자.
- Github에서 프로젝트 다운받기
위 링크에 접속한다.
우측 상단의 Code 버튼을 누른 뒤,
프로젝트를 다운받는다.
물론 이것 말고도 CMD에서 다음 명령어를 치면 곧바로 다운로드가 가능하다.
git clone https://github.com/Planet-Us/Klay_Gacha_Machine.git
직접 Zip파일을 다운로드 받았으면, 해당 파일의 압축을 푼다.
2. IDE 설치하기(vscode, bracket, atom 뭐든 가능)
위 주소로 접속해 VSCODE를 설치한다. 각 운영체제에 맞게 설치하면 된다.
이게 뭐냐면, 코딩할 때 쓰는 코드 편집기(그런데 이제 개발자의 복세편살을 위한 개꿀기능을 곁들인)이다. 막 어디 웹사이트에 접속만 해서 클릭 몇번에 쫘라락 NFT 만들어지는걸 기대하신 분들에게는 미안하다. 그거 다 하려면 머머리가 될 각오가 필요하고, 그리고 익숙해지면 그냥 이렇게 하는게 훨씬 편하다.
혹시 다른 IDE를 쓰고 있다면, 그걸로 해도 된다. vscode를 쓰는 이유는 자체적인 화면분할로 터미널(cmd) 사용도 가능하고, 플러그인 몇개 설치하면 ㄹㅇ 깔끔하게 코딩이 가능하기 때문이다.
아참, 여기까지 왔으면
“이놈 이거 코딩 필요 없다더니, 코딩해야 되는거 아님?”
라는 생각이 들지도 모르겠지만, 코딩은 내가 다 해놨고, 그냥 명령어만 치면 되니까 걱정마시라…(물론 웹사이트 제작은 따로…난 버튼만 만들었을 뿐이야…)
아무튼 설치가 끝났으면, 이제 cmd화면으로 갈 차례이다.
3. 프로젝트 가져와서 내꺼하기
vscode를 실행시키고 좌측 상단의 File탭을 열고 Open Folder를 클릭한다.
다운로드받은 Klay_Gacha_Machine 폴더를 선택하거나 들어간 다음, 폴더 선택버튼을 누른다.
뭐 대충 이런 화면이 떴으면 일단은 성공적으로 프로젝트를 가져온 것이다.
그리고 상단의 Terminal탭을 클릭하고 New Terminal을 클릭하면 다음과 같이 터미널(도스창같은거)이 하나 밑에 뜨게 된다.
프로젝트 폴더가 있는 위치에서 터미널이 실행되는데, 처음에는 Power shell이 뜨게 되니까, 사진과 같이 cmd라는 명령어로 일반 커맨드라인 버전으로 바꾼다(모르면 그냥 cmd입력해서 맨 앞에 저 PS 없어지는지만 확인하면 됨)
그리고 다음 명령어를 입력한다.
npm install
이건 저 프로젝트에 포함된 의존성 모듈을 설치하는 과정이다. 음…그러니까 저 프로젝트는 사실 코어만 있고, 필요한 부품들이 있는데, 그걸 다 넣으면 용량이 확 커지니까 리스트만 만들어놓고 깃헙에 올라가있는 거다. 그걸 다시 설치한다 이거지…
설치에 몇분정도 시간이 소요되는데, 그 사이에 다른 작업을 해두자.
4. NFT 작품과 JSON(Metadata)파일 옮기기
프로젝트 폴더로 이동한 다음, 새폴더 하나를 만들어준다. 폴더 이름은 아무렇게나 지어도 되지만, 예시에서는 images라는 폴더로 만들 것이다.
그 다음 이렇게 images라는 폴더 안에 NFT작품과 Metadata파일을 함께 넣어준다.
여기서 반드시! 꼭! 필수적으로 지켜야 할 사항이 있다!!!!!!!!!!
- 반드시 [이미지파일, json파일]은 각 번호로 매칭시켜둘 것
ex) 0.png, 0.json, 1.png, 1.json - 반드시 파일은 0으로 시작할 것
ex)총 1만개라면 0.png~9999.png, 0.json~9999.json - 이미지파일, json파일은 꼭 연속된 번호로 되어있어야 한다. 이빨빠지듯이 빠져있으면 안된다는 얘기이고, 같은 번호도 안되고, 2–1 이따위 번호도 안된다. 이 부분이 틀리면 보통 에러가 나고, 에러가 안나고 잘 올라간다고 쳐도 발행이 안되는 사태가 발생하니 돈만 버리게 된다!!!
5. Config, .env파일 세팅하기
거의 다 왔다.
먼저 왼쪽 프로젝트 파일창을 보면, config.json이라는 파일이 있는데, 여기에 항목을 채운다.
{
“NumberOfNFT” : 총 NFT갯수 ex) 100 ,
“TokenName” : NFT의 이름. metadata와 똑같이 ex)“MyNFT”,
“TokenSymbol” : NFT의 토큰심볼 EX)“KGN”,
“TreasuryAccount”: NFT발행주소/돈받을주소 ex) “0x071251…”,
“PrivateKey”: 위 주소의 프라이빗 키, Kaikas에서 추출할 수 있음ex)“asdf913f39fh8wf0j39f33f”,
“pinataApiKey”: pinata에서 받아온 api key””,
“pinataSecretApiKey”: pinata의 api secret“”,
“imageExtension”: 이미지 파일의 확장자명 ex) “png”
}
- 숫자를 제외한 문자열들은 꼭 따음표(“”)로 감쌀 것.
구태여 말할 것도 없이 전부 다 채워야 한다. 혹시 뭔지 모르시겠으면 이전 글 1편을 참조하면 된다.
다음은 환경변수를 세팅할 차례이다.
이번엔 프로젝트 파일창의 .env파일을 연다. 파일 이름 자체가 .env이다.
여기에 있는 변수값도 입력해준다.
REACT_APP_NFT_PRICE=1 발행할 NFT의 가격. 1은 1Klay
REACT_APP_NUMBER_OF_NFT=100 발행할 NFT의 총 갯수
REACT_APP_TREASURY_ACCOUNT= 발행될 지갑주소. 따음표 필요 없음
REACT_APP_PRIVATE_KEY=지갑 프라이빗 키. 따음표 필요 없음
REACT_APP_LIVE_DATE=”25 Feb 2022 10:00:00 GMT”발행될 날짜/시간. 형식을 꼭 지킬 것!
REACT_APP_NETWORK=baobab 실행할 네트워크 설정, baobab 아니면 mainnet 따음표 필요 없음
Live_Date의 경우엔, 해당 날짜 이전에는 민팅 버튼이 Disabled로 되어 민팅을 할 수 없다. 다만, 웹사이트에 올릴 땐 그냥 버튼 자체를 숨기고 올릴 것을 추천한다.
여기까지 왔으면 제일 중요한 것만 남기고 거의 80%는 온 것이다.
다음은 마지막, NFT를 업로드하고 발행준비까지 하는 것까지 알아보자!
About Author
