GitHub API를 사용하여 React 앱에 코드 표시

React 앱에 내 GitHub 저장소 중 하나의 코드를 표시하고 싶었고 새 버전을 푸시 할 때 사이트에서 자동으로 업데이트되기를 원했습니다.

내가 직접 만든 작은 구성 요소 라이브러리를 위해 이것을 원했기 때문에 저장소에서 구성 요소의 최신 버전을 볼 수있었습니다. 이를 위해 GitHub API와 Prism 구문 강조 패키지를 사용했습니다.

1. 구문 강조를 위해 GitHub 클라이언트 패키지와 Prism을 추가합니다.

npm i @octokit/rest react-prism axios

2. React 앱에서 GitHub에 인증합니다.

• 여기 에서 개인 액세스 토큰 을 만들어 브라우저에서 GitHub에 인증합니다.
• 토큰에 액세스하려면 로그인해야합니다. 이렇게하면 사용할 문자열 형식의 Oauth 토큰이 생성됩니다. 한 번만 액세스 할 수 있으므로 복사하십시오.
• octokit.js 라는 JS 모듈을 만들고 Octokit 을 가져 왔습니다.
• 새 GH 인스턴스를 만듭니다. 유일한 필수 매개 변수는 auth및에 대한 Oauth 토큰입니다 userAgent.

import { Octokit } from "@octokit/rest"  
export const octokit = new Octokit({     
     auth: "your token string here",    
     userAgent: 'skylight v1' 
});

• 프로젝트 루트에 .env 파일을 만듭니다. 프로젝트 루트의 명령 줄에 touch .env.
• 쓰다 nano .env
• .env 파일에서라는 변수를 만들고 REACT_APP_GH값을 GitHub 토큰에 할당합니다.

octokit.js 모듈에서 토큰 문자열을 숨겨진 변수로 바꿉니다.

import { Octokit } from "@octokit/rest"
export const octokit = new Octokit({     
     auth: process.env.REACT_APP_GH,    
     userAgent: 'skylight v1' 
});

5. GitHub API 호출

• useOctokit이라는 사용자 지정 후크에서 끝점을 호출했습니다.

import { useState, useEffect } from 'react';
import { octokit } from '../utils/octokit';
export default function useOctokit(path) {
   const [code, setCode] = useState(null);
   
   useEffect(() => {
     async function onLoad() {
       await octokit.request(
          'GET /repos/{owner}/{repo}/contents/{path}', {
             owner: 'jawblia',
             repo: 'components',
             path: `src/lib/components/${path}`
       }).then(res => console.log(res)
       }).catch(err => console.log(err));
    }
onLoad();
},[])
return {
   code
    }
};

GH API는 이 접근 방식을 사용하여 시간당 5,000 호출로 속도를 제한한다고 생각하므로이 접근 방식은 트래픽이 많은 사이트에는 사용할 수 없습니다.

응답을 Console.logging하면 브라우저에서 성공적인 호출을 볼 수 있습니다.

console.log(res):

여기에 많은 정보가 있습니다. Github의 URL, 파일 이름, 경로. 눈에 띄게 빠진 한 가지는 실제 코드입니다. 응답, content매개 변수에 있습니다. Github는 바이너리 파일을 온라인으로 전송할 수 있도록 텍스트 문자열로 전송하는 형식 인 base64로 모든 콘텐츠를 인코딩합니다 . 여기 에 대해 자세히 알아 보십시오 .

console.log(res.data.content):

aW1wb3J0IFJlYWN0IGZyb20gJ3JlYWN0JzsgCmltcG9ydCBGbGV4IGZyb20g
Jy4vbGF5b3V0L0ZsZXgnOwoKY29uc3QgQmFkZ2UgPSAoeyB2YWx1ZSB9KSA9
PiB7CiAgICByZXR1cm4gKAogICAgICAgICAgICA8RmxleCBjZW50ZXIgbWlk
ZGxlIGNsYXNzTmFtZT17YGJhZGdlICR7IXZhbHVlID8gJ2JhZGdlLS1ub25l
JyA6Jyd9IGB9PgogICAgICAgICAgICAgICAgPGg0IGNsYXNzTmFtZT0iaGVh
dnkiPnt2YWx1ZSB8fCAwfTwvaDQ+CiAgICAgICAgICAgIDwvRmxleD4KICAg
ICk7Cn0KIApleHBvcnQgZGVmYXVsdCBCYWRnZTs=

• base64로 인코딩 된 문자열을 인수로 사용하고 디코딩 된 버전을 일반 텍스트로 반환 하는 내장 JS 메서드 atob이 있습니다. (btoa는 반대로 base64로 문자열을 인코딩합니다.)

import { useState, useEffect } from 'react';
import { octokit } from '../utils/octokit';
export default function useOctokit(path) {
   const [code, setCode] = useState(null);
   
   useEffect(() => {
     async function onLoad() {
       await octokit.request(
          'GET /repos/{owner}/{repo}/contents/{path}', {
             owner: 'jawblia',
             repo: 'components',
             path: `src/lib/components/${path}`
        }).then(res => {
            const encoded = res.data.content;
            const decoded = atob(encoded);
            setCode(decoded);
       }).catch(err => console.log(err));
    }
onLoad();
},[])
return {
   code
    }
};

• code후크에서 돌아 옵니다.

• state에 저장된 일반 텍스트 코드를 반환합니다.

import React, { useState } from 'react';
import useOctokit from '../hooks/useOctokit';
import Codeblock from '../data/raw/Codeblock';
const CodeDetails = (path) => {
  const { code } = useOctokit(path);
  return <Codeblock code={code} lang='js'/>;
  }
export default CodeDetails;

• 구성 요소에서 Prism을 가져오고 highlightAll()useEffect와 함께 메서드를 사용하여 구문을 강조 표시합니다.

import React, { useEffect } from 'react';
import Prism from 'prismjs';
import './_styles/assets/prism.css';
const Codeblock = ({ code, lang }) => {
  useEffect(() => {
    Prism.highlightAll();
  }, [code]);
return (
<div className="codeblock">
   <pre className="line-numbers">
   <code className={`language-${lang}`}>
     {code}
   </code>
   </pre>
</div>
);
}
export default Codeblock;

       

그게 다야.

참조 :

• Base64는 여기에서 디코딩 할 수 있습니다. https://www.base64decode.org/하지만 atob 메서드를 사용하여 디코딩합니다 .
• base64 에 대한 추가 정보 .
• https://docs.github.com/en/rest — GitHub API 문서