728x90 개발일지64 ContextAPI 사용해보기 간단한 데이터의 변화를 props 드릴링 없이 전역적으로 관리해주기 위해 ContextAPI를 사용해볼 수 있다. useContext사용법 1. context component 생성 // context.jsx import { createContext, useContext, useState } from "react"; // context 생성 const AnyContextValue = createContext(); const AnyContextUpdate = createContext(); // useContext 생성 export const useContextValue = () => { const context = useContext(AnyContextValue); return context; }; exp.. 2023. 3. 16. utterances를 이용한 Nextjs Github blog 댓글 기능 구현 utterances란? github repository의 이슈 기능을 활용해 내 웹사이트에 댓글 기능을 추가할 수 있는 도구로, 별도의 백엔드 구성을 하지 않고 댓글들을 관리할 수 있다는 장점이 있다. 많이 비교되는 disqus라는 툴도 있지만, disqus가 댓글 작성을 누구나 할 수 있다는 장점이 있지만, 광고가 많다는 단점이 있다. 그에 반해 utterances는 github 계정 소유자만 댓글을 작성할 수 있지만, 별도의 광고도 없고 댓글 작성 시 Markdown을 지원한다는 특징이 있다. 나는 utterances를 github blog에 사용할 생각이기에 굳이 utterances의 장점을 버리고 disqus를 사용할 이유가 없었다. 사용방법 1. repo 생성 public으로 설정된 새 레포가 .. 2023. 3. 15. GithubAPI를 이용한 repository 정보 불러오기 Github REST API 설명서 https://docs.github.com/ko/rest?apiVersion=2022-11-28 GithubAPI 이용 시 토큰이 필요한 경우 아래와 같이 토큰 발급이 가능하다. 우측 상단의 프로필을 통해 Settings 접근 좌측 하단의 Developer settings 접속 Tokens나 Fine-grained tokens를 통해 원하는 권한들을 설정해 토큰을 생성할 수 있다. Github 홈페이지에 여러 api들이 많기때문에 필요에 따라 사용하면 좋을 것 같다. 여기서는 repository 안의 파일들의 정보만을 가져올 것이다. requestURL const BASE_URL = "https://api.github.com/repos/{유저명을 포함한/레포지토리 이름.. 2023. 3. 15. Github pages 블로그에 Markdown 내용 불러오기 필요한 패키지 yarn add gray-matter # 문자열이나 파일에서 머리말을 구문 분석, 파일에서 메타데이터와 내용 등 추출 시 사용 yarn add marked yarn add @types/marked # 타입스크립트의 경우 yarn add react-markdown # 과 유사함 yarn add remark-gfm # 마크다운 문법이 다양하게 적용될 수 있도록 도와주는 플러그인 yarn add react-syntax-highlighter yarn add @types/react-syntax-highlighter # 타입스크립트의 경우 참조 https://yarnpkg.com/package/react-markdown https://yarnpkg.com/package/react-syntax-high.. 2023. 3. 15. 이전 1 ··· 3 4 5 6 7 8 9 ··· 16 다음 728x90
