IPFS

InterPlanetary File System의 약자로 Peer-to-Peer(P2P) 방식의 분산형 파일 시스템 프로토콜이다.
기존의 중앙 집중화된 방식에서는 데이터에 접근하기 위해서 할당된 주소를 찾아가야했다. 이와 달리, IPFS는 데이터의 내용을 해시값으로 변환하고, 조각으로 나눠서 여러 노드에 나눠 저장한다.
위치가 아니라, 내용을 기반으로 주소를 갖기에, 파일마다 고유한 해시 값을 갖고 있고, 파일의 내용이 변하지 않는 한 항상 동일한 해시 값을 가진다.

불러오기

react-ipfs-image를 사용했다.

사용법은 간단하다.

import { IpfsImage } from "react-ipfs-image";

const Comment = () => {
  return (
    <div>
		<IpfsImage
            hash={ipfsHash}
            style={{
              height: 300,
              width: 400,
            }}
		/>
	</div>
	)
}

default gateway는 https://infura-ipfs.io/ipfs이고 인자로 특정할 수도 있다.

뜯어보면 이렇게 생겼다.
사용법 만큼이나 간단하다.
image source를 http 프로토콜에 맞게 변환하고 반환해주는 것이 전부다.

export const IpfsImage: FC<IIpfsImageProps> = ({
  hash,
  gatewayUrl = DEFAULT_IPFS_GATEWAY_URL,
  ...props
}) => {
  return <img src={`${gatewayUrl}/${cleanUpHash(hash)}`} {...props} />;
};
// cleanUpHash()은 ipfs 주소에서 cleanUpHash(hash)는 "ipfs://"를 지워주는 메서드

저장하기

사전 작업이 필요하다.
1. infura 가입 후 우상단의 CREATE NEW KEY를 눌러 프로젝트를 생성을 진행한다.

2. 네트워크를 IPFS로 설정하고 생성하여, PROJECT ID와 API Key Secret, IPFS API ENDPOINT를 받는다.
   

   

   

   경축! 아무것도 안하여 에스천사게임즈가 새로운 모습으로 재오픈 하였습니다.
   어린이용이며, 설치가 필요없는 브라우저 게임입니다.
   https://s1004games.com

   

3. ipfs-http-client 설치
   $ npm i ipfs-http-client

4. 업로드

import { create as ipfsHttpClient } from "ipfs-http-client";

const projectId = process.env.REACT_APP_PROJECT_ID;
const projectAPIKey = process.env.REACT_APP_API_KEY;

function IpfsModal() {
  	const authorization = "Basic " + btoa(projectId + ":" + projectAPIKey);
  	const ipfs = ipfsHttpClient({
      url: "https://ipfs.infura.io:5001/api/v0",
      headers: {
        authorization,
      },
  	});
  
    const onSubmitHandler = async (event) => {
      event.preventDefault();
      const form = event.target;
      const files = form[0].files;

      if (files.length === 0) {
        return alert("No files selected");
      }

      const file = files[0];
      const result = await ipfs.add(file);
      setIpfsHash(result.path);
      form.reset();
  };

add 메서드는 ipfs 해시값을 반환한다.

참조

https://docs.ipfs.tech/
https://docs.infura.io/infura/networks/ipfs
https://www.npmjs.com/package/react-ipfs-image
https://www.npmjs.com/package/ipfs-http-client