reactnative 설치 (xcode깔려있어야함.)

yarn ios 로 빌드 되는지 확인 !

빌드 fail경우 

cd ios

pod deintegrate (pods폴더 삭제)

pod cache clean --all (캐시 삭제)

(혹시 안되면 pod install --repo-update)

xcode preference에 들어가서 derived 폴더 안에 삭제. 

이거는 pod install 하면 다시 생김! 

(뭔말인지 모르겠으면 밑에 링크 참고)

yarn 

yarn ios

이제 

firebase project만들기

https://firebase.google.com/

Add project

프로젝트 이름 넣고 

디폴트 내 계정으로 시작!

다음부터는 쭉 따라하면 되는데 

번들id는 xcode에서 가져와서 붙여넣기 하면 된다. 

(xcode에서 원하는 프로젝트파일 열고, 왼쪽의 프로젝트 파일 누르면 이거 뜸

General 들어가서 

Bundle Identifier 의 값을 복붙하면 됨다. )

 GoogleService-Info.plist 파일을 

firebase 프로젝트 만드는 곳에서 다운받아서

프로젝트 안에 넣는다 (위치는 거기서 알려줌.)

그다음에 

AppDelegate.m

에 

#import <Firebase.h>

와 

[FIRApp configure];

만 추가!

[FIRApp configure]; 이거는 (Bool)로 어플리케이션 실행하는 함수로 보이는 거 하단에 {} 넣어줌. 

위치는 마찬가지로 프로젝트 설명란에 있는데 각자 코드에 맞게 넣으면 된다..

특이점은 

appPackage를 다운받지 않았다. 

다음단계에서 링크로 들어가서 analytics다운 받는게 있는데 그걸 하지 않고

yarn add @react-native-firebase/app

yarn add @react-native-firebase/analytics

로 추가했다. (여기에 이미있다고함..)

아 그리고 analytics는 app과 같은 버전으로 맞춰줘야한다!

그리고 firebase.json파일을 보면

// <project-root>/firebase.json
{
  "react-native": {
    "analytics_auto_collection_enabled": false
  }
}

false로 꺼져있다.

잘은 모르겠지만 이게  GDPR compliance 정책상으로 꺼져있다고 한다.

앱실행될때 자동으로 집계하게끔 하는게 꺼져있는 것이다. 

대신 이벤트처리하듯

홈화면 들어갈 때 메서드를 이용해서 집계하는 방법을 쓰면 된다.

To re-enable analytics (e.g. once you have the users consent), call the setAnalyticsCollectionEnabled method:

import { firebase } from '@react-native-firebase/analytics';
// ...
await firebase.analytics().setAnalyticsCollectionEnabled(true);

https://rnfirebase.io/analytics/usage

프로젝트 예시 홈화면 들어갈때 추가되도록 했다. 

  const activateAnalytics = async () => {
    await firebase.analytics().setAnalyticsCollectionEnabled(true)
  }
  useEffect(() => {
    activateAnalytics()
  }, [])

에러 해결방법 참고한 것들

https://developer.apple.com/forums/thread/703823

https://positiveko-til.vercel.app/til/react-native/error65.html

https://rnfirebase.io/analytics/usage

yarn build시 에러

 Build optimization failed: found page without a React Component as default export in
pages/types

error Command failed with exit code 1.

페이지마다 export default ,

default를 기본으로 하는애가 있어야한다고 이해해서 

페이지 types에 없어서 그런가 해봤는데 해결안됨

오히려 타입안에 인터페이스에 default붙이니까 못읽음

찾아보다가 

구성 요소를 페이지 폴더 외부로 이동해야 합니다. Pages/는 Next.js 라우팅이 구조를 기반으로 하므로 페이지 구성 요소에만 사용해야 합니다.  

Next.js에는 페이지 개념을 기반으로 구축된 파일 시스템 기반 라우터가 있습니다. 

파일이 페이지 디렉토리에 추가되면 자동으로 경로로 사용할 수 있습니다. 

위의 동작이 기본 동작이지만 페이지 디렉토리에 페이지가 아닌 파일을 포함하도록 Next.js 앱을 구성할 수 있습니다. 

이렇게 하려면 아래와 같이 next.config.js 파일의 pageExtensions 항목을 수정하면 됩니다. 그런 다음 .page(_document.page.js, _app.page.js, index.page.js 등)를 포함하는 파일 확장자를 갖도록 페이지 구성 요소의 이름을 바꿉니다.

 module.exports = {

    pageExtensions: ['page.tsx', 'page.ts', 'page.jsx', 'page.js']

}

이 구성을 사용하면 Next.js는 페이지/API 경로 및 라우팅을 구축하기 위해 .page를 포함하지 않는 모든 파일을 무시합니다.

이거보고 next.config.js에서 페이지별 설정 넣어야한다는 공식문서보고 혹시 넣어봤는데 build되네 호..

잘 모르겠음 그리고 빌드를 하면 out에 서버페이지가 생기는 거 맞나? 

dev는 개발모드고

정확한 차이를 정리해봐야겠다.

이 공식문서 봄

https://nextjs.org/docs/api-reference/next.config.js/custom-page-extensions#including-non-page-files-in-the-pages-directory

next.config.js

파일에 이거 추가함

module.exports = {
  pageExtensions: ['page.tsx', 'page.ts', 'page.jsx', 'page.js'],
}

다시 원위치..

문제는 이거를 넣으면 

기존 경로

local:3000 이 404로 페이지를 찾을 수 없다고 뜨고 안열린다. 

원래대로 지워줘야 뜨네 흠.. 

아 문서를 읽어보니 

pageExtensions를 넣고 나서 

이름을 바꿔줘야되는구나 

이름 바꿔줌

해결됨

라고 생각했는데 안떠서 다시..

https://stackoverflow.com/questions/65598753/cant-build-react-next-project-found-page-without-a-react-component-as-default

server.js에서 db확인할게 있어서

npm start했는데

UnhandledPromiseRejectionWarning: Error: Could not find a production build in the 

이 에러 뜸

그래서 

npm run build

했는데 에러

 throw er; // Unhandled 'error' event
      ^

Error: EPERM: operation not permitted, open 경로
Emitted 'error' event on WriteStream instance at:

해결: 실행해놓은 npm run dev 취소하고 하니까 됨

이거 하기 전에 build해야되는거임

빌드 잘됨

이거 따라할 때 생겼던 에러와 해결내용

https://medium.com/pinata/how-to-build-erc-721-nfts-with-ipfs-e76a21d8f914

1. ERC721

오픈제플린 최신버전은 ERC721URIStorage 가 ERC721를 대체한다. 이름 바꿔줘야함.

못가져옴 사용이 안되어서 에러 뜸

,DeclarationError: Undeclared identifier.
  --> project:/contracts/UniqueAsset.sol:29:3:
   |
29 |   _setTokenURI(newItemId, metadata);

//기존
import "@openzeppelin/contracts/token/ERC721/ERC721.sol";

//ERC721.sol가 없고 이제 ERC721URIStorage.sol이거 씀
import "@openzeppelin/contracts/token/ERC721/extensions/ERC721URIStorage.sol";

근데 나는 여전히 계속 빨간줄 뜨더라고 그래서 

../node_modules/

로 경로 찾아주니까 빨간줄 사라짐

2. DeclarationError

사실 무엇보다

변수들을 못찾았는데

DeclarationError: Undeclared identifier. Did you mean "hash"?
  --> project:/contracts/UniqueAsset.sol:24:11:
   |
24 |   require(hashes[hash] != 1);
   |           ^^^^^^

,DeclarationError: Undeclared identifier. Did you mean "hash"?
  --> project:/contracts/UniqueAsset.sol:25:3:
   |
25 |   hashes[hash] = 1;
   |   ^^^^^^

그이유는!!!!

괄호를 잘못 묶었더라고..ㅋㅋㅋㅋ...

contract 안에 함수 있는건데 

contract랑 함수를 따로 해서 contract에 담아둔 애들이름 못 쓰는 거였다

결과 컴파일 잘된다!

3. 경고 Visibility for constructor is ignored.

경고 뜨는 건

  Warning: Visibility for constructor is ignored. If you want the contract to be non-deployable, 
making it "abstract" is sufficient.

(경고: 생성자의 가시성은 무시됩니다. 계약을 배포할 수 없도록 하려면 "추상"으로 만드는 것으로 충분합니다.)
  --> project:/contracts/UniqueAsset.sol:16:4:
   |
16 |    constructor() public ERC721("UniqueAsset", "UNA") {}
   |    ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^

생성자에 더이상 가시성(public/ external)이 필요하지 않다고 한다.

왜냐면 생성자는 처음에 배포됐을 때만 읽히니까 다음에 또 불려질 일이 없다.

public을 지웠더니 경고가 사라졌다.

추가적으로는

솔리디티 버전을 코드랑 잘 맞춰줘야하는 것. 필요할 때 f1눌러서 버전수정했다.

따라한 내용 정리

필요한 것

• vscode(nodejs, 솔리디티확장자)
• IPFS 설치
• Ganache — 이더리움의 로컬 블록체인 — 설치
• 트러플 설치
• NodeJS 설치
• 피나타 API 키

스마트 계약 작성

(오픈제플린에서 가져와서 쓸거임)

새프로젝트 폴더 만듦

mkdir mySpecialAsset

디랙토리 초기화

npm init -y

Truffle을 활용해 스마트 계약 프로젝트 초기화

truffle init

Open Zeppelin 계약에 액세스할거라서 설치

npm install @openzeppelin/contracts

contracts 폴더 구조 안에 파일 생성! (솔리디티 버전 맞춰서 하기)

UniqueAsset.sol 

// SPDX-License-Identifier: MIT
pragma solidity >=0.4.22 <0.9.0;

import "../node_modules/@openzeppelin/contracts/token/ERC721/extensions/ERC721URIStorage.sol";
import "../node_modules/@openzeppelin/contracts/utils/Counters.sol";

contract UniqueAsset is ERC721URIStorage{
    //Counters to help us increment the identifiers for the tokens we mint.
    // 카운터 라이브러리(갯수세는역할함)를 쓴다. 이 유형으로
  using Counters for Counters.Counter;
    //변수만듦to keep track of all of the tokens we’ve issued.
  Counters.Counter private _tokenIds;
    //mapping for the IPFS hashes associated with tokens. 
  mapping(string => uint8) hashes;

   constructor() ERC721("UniqueAsset", "UNA") {}


// 특정IPFS해시에 아직 mint안되어있으면 mint하는 함수
// a method to our contract that will allow us to mint an NFT for a specific IPFS hash if not token has been minted yet for that hash
                           //nft수령인//NFT를 생성할 콘텐츠와 관련된 IPFS 해시 //자산에 대한 JSON 메타데이터에 대한 링크를 참조해야 한다
function awardItem(address recipient, string memory hash, string memory metadata) public returns (uint256)
{

  require(hashes[hash] != 1);
  hashes[hash] = 1;
  _tokenIds.increment();
  uint256 newItemId = _tokenIds.current();
  _mint(recipient, newItemId);
  _setTokenURI(newItemId, metadata);
  return newItemId;
}
}

폴더구조 migrations 들어가서 

2_deploy_contract.js

파일 생성

var UniqueAsset = artifacts.require("UniqueAsset");
module.exports = function (deployer) {
  deployer.deploy(UniqueAsset);
};

다 하면 컴파일

truffle compile

만약 오류가 발생하면 Ganache가 실행 중인 포트를 수동으로 설정 (아니면 나처럼 버전, 모듈경로 등의 문제일수도 있음 위에 참조)

truffle-config.js

(가나슈 퀵스타 누르면 뜨는 창에있는거랑 동일하게)

truffle migrate

이걸로 

 NFT 스마트 계약을 배포

이제 스마트 계약을 처리했으므로 기본 자산을 IPFS로 가져와 관련 NFT를 발행할 때 사용할 수 있는지 확인

IPFS에 자산 추가

우리는 Pinata를 사용하여 자산을 IPFS에 추가하고 고정된 상태로 유지하도록 할 것입니다.

https://app.pinata.cloud/pinmanager

uploadFile.js

업로드할 파일 준비

작업을

npm i axios form-data

쉽게 하려면 두 가지 종속성이 필요하다

이 스크립트에

const pinataApiKey = "YOURAPIKEY";
const pinataSecretApiKey = "YOURSECRETKEY";
const axios = require("axios");
const fs = require("fs");
const FormData = require("form-data");
const pinFileToIPFS = async () => {
  const url = `https://api.pinata.cloud/pinning/pinFileToIPFS`;=
  let data = new FormData();
  data.append("file", fs.createReadStream("./pathtoyourfile.png"));
  const res = await axios.post(url, data, {
    maxContentLength: "Infinity", 
    headers: {
      "Content-Type": `multipart/form-data; boundary=${data._boundary}`
      pinata_api_key: pinataApiKey, 
      pinata_secret_api_key: pinataSecretApiKey,
    },
  });
  console.log(res.data);
};
pinFileToIPFS();

코드 넣기 

Pinata에서 로그인하고 새 키 만들면 뜨는

키"YOURAPIKEY"와 비밀키"YOURSECRETKEY"를 넣기 

node uploadFile.js

성공적으로 됐으면 이렇게 뜸

해당 해시는 자산의 검증 가능한 표현이고 IPFS 네트워크의 자산을 의미한다. 누군가가 자산을 변조하고 변경한 경우 해시가 달라진다. 이 해시는 우리의 스마트 계약을 통해 NFT를 발행할 때 사용해야 하는 것이다. 공개 게이트웨이를 제공하는 모든 IPFS 호스트는 이제 콘텐츠를 표시할 수 있다.. 라고 위 링크 글에 있다.

이게 Pinata에 자산을 업로드 하는 거라는데 pinata 내 계정에는 뭔가 달라진게 안보인다.

게이트웨이를 통해서 봐야돼서 그런건가 흠...

이상

뒤에 json 파일 만드는 것 이전까지 해봤다.

https://stackoverflow.com/questions/68608281/file-import-callback-not-supported-on-truffle-migrate

https://forum.openzeppelin.com/t/function-settokenuri-in-erc721-is-gone-with-pragma-0-8-0/5978/21?page=2