728x90 전체 글66 React.memo 사용하기 유저에게 UI를 빠르게 제공하기 위해서는 컴포넌트의 렌더링을 최소화해 성능을 향상시킬 필요가 있다. 이를 위해 React.memo에 대한 간단한 사용법을 기록해본다. 1. React.memo() 컴포넌트가 React.memo()로 래핑될 때, React는 컴포넌트를 렌더링하고 결과를 Memoizing한다. 그리고 다음 렌더링이 일어날 때 props가 같다면, React는 Memoizing된 내용을 재사용한다. React.memo() 사용법 import React from "react"; export const MemoTest = ({ someProps }) => { console.log("Memo test, props 바뀔때만 콘솔 작동"); return ( MemoTest 컴포넌트 props가 바뀔때만.. 2023. 3. 16. 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 2 3 4 5 6 7 8 ··· 14 다음 728x90
