gatsby-source-filesystem 로컬 파일 시스템에서 Gatsby 애플리케이션으로 데이터를 sourcing 하기 위한 Gatsby 소스 플러그인입니다. 플러그인은 파일에서 파일 노드를 생성합니다. 다양한 “transformer” 플러그인은 파일 노드를 다양한 다른 유형의 데이터로 변환할 수 있습니다. Markdown, JSON, 이미지, YA
useStaticQuery useStaticQuery는 빌드 시 리액트 훅을 사용하여 Gatsby의 GraphQL 데이터 계층을 쿼리 하는 기능을 제공합니다. 이를 통해 React 컴포넌트는 구문 분석, 평가 및 컴포넌트에 삽입될 GraphQL 쿼리를 통해 데이터를 검색할 수 있습니다. useStaticQuery 훅은 모든 컴포넌트 또는 페이지에서 사용할
Gatsby Head API Gatsby 에는 페이지의 문서 헤드에 요소를 추가할 수 있는 내장 head가 포함되어 있습니다. react-helmet 또는 기타 유사한 솔루션과 비교할 때 Gatsby Head는 사용하기 쉽고 성능이 우수하며 번들 크기가 더 작고 최신 React 기능을 지원합니다. 12// ex)export const Head = () =
Layout Components Gatsby는 기본적으로 레이아웃을 페이지에 자동으로 적용하지 않습니다. 대신 Layout Component를 사용하면 Header 및 Footer, 그리고 일부 페이지에서 사용하는 사이드바와 같은 여러 가지 레이아웃을 만들 수 있습니다. 또한 레이아웃과 페이지 컴포넌트 간에 데이터를 전달할 수 있습니다. 즉, Layout
Routing 리액트 라우터를 사용하여 페이지를 생성하는 것과 달리 Gatsby는 src/pages 안에 각 .tsx 파일에 대한 페이지를 생성합니다. 예를 들어 src/pages/contact.tsx는 yoursite.com/contact 페이지를 생성하고 src/pages/home.tsx는 yoursite.com/home 페이지를 생성합니다. Gats
Gatsby 설치 및 사용 방법에 대해 알아보겠습니다. Gatsby(개츠비) 란 개츠비는 리액트 기반의 프레임워크입니다. 리액트를 이용하면서도 리액트에 새로운 규칙 몇 가지를 추가해 주면서 아주 약간의 복잡함을 더해주고 있습니다. 주로 서버사이드 렌더링을 위해 사용하는 Next.js 와는 달리 개츠비는 서버 없이, 오로지 정적 웹사이트 생성을 위해 사용하
Framer Motion을 사용하여 애니메이션을 간편하고 쉽게 만드는 방법을 알아보겠습니다. Framer Motion Framer는 디자이너들을 위해 프로토타입 등을 만들어 주는 회사입니다. Framer Motion은 React 용 production-ready 모션 라이브러리입니다. 설치 1$ npm install framer-motion 사용 A
reference는 react 코드를 이용해 HTML 요소를 지정하고 가져올 수 있는 방법입니다. 다시 말해서 자바스크립트로부터 HTML 요소를 가져오고 수정할 수 있도록 해줍니다. 사용 useRef를 사용하여 HTML 요소를 가져옵니다. 다음 코드는 button 클릭 시 input을 포커싱하고 해제하는 예제입니다. 123456789101112131415
React에서 memo 사용 방법에 대해 알아보겠습니다. 컴포넌트가 동일한 props로 동일한 결과를 렌더링 해낸다면, React.memo를 호출하고 결과를 메모이징(Memoizing)하도록 래핑 하여 경우에 따라 성능 향상을 누릴 수 있습니다. 즉, React는 컴포넌트를 렌더링 하지 않고 마지막으로 렌더링 된 결과를 재사용합니다. 1234567imp
react-beautiful-dnd을 사용하여 React에서 깔끔하고 사용하기 쉬운 드래그, 드롭, 애니메이션을 적용하는 방법에 대해 알아보겠습니다. 설치 1$ npm i react-beautiful-dnd TypeScript 사용 시 추가로 설치합니다. 1$ npm i --save-dev @types/react-beautiful-dnd 사용 임시 데이