Next.js를 사용하는 프로젝트 생성 하는 방법에 대해 알아보겠습니다. 시스템 요구 사항 Node.js 14.6.0 이상 MacOS, Windows(WSL 포함) 및 Linux가 지원됩니다. 프로젝트 생성 리액트 프로젝트를 생성하는 방법과 비슷하게 create-next-app 명령어를 사용합니다. @latest를 추가하면 최신 버전으로 프로젝트를 생성합니다. npx create-next-app@latest # or yarn create next-app TypeScript 프로젝트로 시작하려면 --typescript 옵션을 추가합니다. npx create-next-app@latest --typescript # or yarn create next-app --typescript 위의 방법으로 프로젝트를 생성..

gatsby-source-filesystem 로컬 파일 시스템에서 Gatsby 애플리케이션으로 데이터를 sourcing 하기 위한 Gatsby 소스 플러그인입니다. 플러그인은 파일에서 파일 노드를 생성합니다. 다양한 "transformer" 플러그인은 파일 노드를 다양한 다른 유형의 데이터로 변환할 수 있습니다. Markdown, JSON, 이미지, YAML, CSV 및 기타 수집 가지 데이터 유형이 지원됩니다. 설치 $ npm install gatsby-source-filesystem 사용 방법 예시로 blog-posts 디렉토리를 생성하고 디렉터리 안에 post1.md, post2.md 파일을 생성합니다. gatsby-config.ts 파일의 plugin 부분을 아래와 같이 수정합니다. path 속성..

useStaticQuery useStaticQuery는 빌드 시 리액트 훅을 사용하여 Gatsby의 GraphQL 데이터 계층을 쿼리 하는 기능을 제공합니다. 이를 통해 React 컴포넌트는 구문 분석, 평가 및 컴포넌트에 삽입될 GraphQL 쿼리를 통해 데이터를 검색할 수 있습니다. useStaticQuery 훅은 모든 컴포넌트 또는 페이지에서 사용할 수 있습니다. const data = useStaticQuery(graphql` query HeaderQuery { site { siteMetadata { title } } } `); 사용 방법 TypeScript를 사용하고 gatsby-config.ts 파일에서 GraphQL 타입 생성에 관한 항목인 graphqlTypegen 값이 true로 설정되어..

Gatsby Head API Gatsby 에는 페이지의 문서 헤드에 요소를 추가할 수 있는 내장 head가 포함되어 있습니다. react-helmet 또는 기타 유사한 솔루션과 비교할 때 Gatsby Head는 사용하기 쉽고 성능이 우수하며 번들 크기가 더 작고 최신 React 기능을 지원합니다. // ex) export const Head = () => Home Page; SEO Component 를 사용하여 Head 함수를 정의할 수 있습니다. // src/components/Seo.tsx import React from 'react'; interface ISeoProps { title: string; } export default function Seo({ title }: ISeoProps) { r..

Layout Components Gatsby는 기본적으로 레이아웃을 페이지에 자동으로 적용하지 않습니다. 대신 Layout Component를 사용하면 Header 및 Footer, 그리고 일부 페이지에서 사용하는 사이드바와 같은 여러 가지 레이아웃을 만들 수 있습니다. 또한 레이아웃과 페이지 컴포넌트 간에 데이터를 전달할 수 있습니다. 즉, Layout Component를 사용하여 여러 페이지에서 일반적으로 사용하는 Header 및 Footer의 레이아웃을 공유하도록 구성할 수 있습니다. 예제 src/components/ 디렉터리를 생성하고 Layout.tsx 파일을 생성합니다. 아래와 같이 Gatsby 의 Link를 사용하여 페이지를 이동하는 Layout Component를 구성합니다. // src/..

Routing 리액트 라우터를 사용하여 페이지를 생성하는 것과 달리 Gatsby는 src/pages 안에 각 .tsx 파일에 대한 페이지를 생성합니다. 예를 들어 src/pages/contact.tsx는 yoursite.com/contact 페이지를 생성하고 src/pages/home.tsx는 yoursite.com/home 페이지를 생성합니다. Gatsby로 Routing 하는 것은 간단하고 리액트 라우터도, 스크린도 만들 필요 없고 그 경로와 요소들을 일일이 설명할 필요도 없다는 장점이 있습니다. // src/pages/index.tsx import React from 'react'; export default function Index() { return Hello world; } 참고 https:..

Gatsby 설치 및 사용 방법에 대해 알아보겠습니다. Gatsby(개츠비) 란 개츠비는 리액트 기반의 프레임워크입니다. 리액트를 이용하면서도 리액트에 새로운 규칙 몇 가지를 추가해 주면서 아주 약간의 복잡함을 더해주고 있습니다. 주로 서버사이드 렌더링을 위해 사용하는 Next.js 와는 달리 개츠비는 서버 없이, 오로지 정적 웹사이트 생성을 위해 사용하는 오픈소스 프레임워크입니다. 정적 웹 페이지, 플랫 페이지는 저장된 그대로 사용자에게 전달되는 웹 페이지로서, 이는 웹 애플리케이션에 의해 생성되는 동적 웹 페이지와 반대되는 용어이다. 즉, 정적 웹 페이지는 모든 상황에서 모든 사용자에게 동일한 정보를 표시하며, 콘텐츠 타입이나 문서 언어의 협상(negotiate)을 위해 웹 서버의 현대적 기능에 종속..

Framer Motion을 사용하여 애니메이션을 간편하고 쉽게 만드는 방법을 알아보겠습니다. Framer Motion Framer는 디자이너들을 위해 프로토타입 등을 만들어 주는 회사입니다. Framer Motion은 React 용 production-ready 모션 라이브러리입니다. 설치 $ npm install framer-motion 사용 Animation Framer Motion의 애니메이션은 모션 컴포넌트의 유연한 animate 속성을 통해 제어됩니다. 간단한 애니메이션의 경우 animate props에서 직접 값을 설정할 수 있습니다. motion.div animate={{ rotate: 360 }} transition={{ duration: 2 }} initial initial: boolea..

reference는 react 코드를 이용해 HTML 요소를 지정하고 가져올 수 있는 방법입니다. 다시 말해서 자바스크립트로부터 HTML 요소를 가져오고 수정할 수 있도록 해줍니다. 사용 useRef를 사용하여 HTML 요소를 가져옵니다. 아래 코드는 button 클릭 시 input을 포커싱하고 해제하는 예제입니다. import { useRef } from 'react'; function RefEx() { const inputRef = useRef(null); const onClick = () => { inputRef.current?.focus(); // 5초 뒤에 focus 사라짐 setTimeout(() => { inputRef.current?.blur; }, 5000); }; return ( cli..

React에서 memo 사용 방법에 대해 알아보겠습니다. 컴포넌트가 동일한 props로 동일한 결과를 렌더링 해낸다면, React.memo를 호출하고 결과를 메모이징(Memoizing)하도록 래핑 하여 경우에 따라 성능 향상을 누릴 수 있습니다. 즉, React는 컴포넌트를 렌더링 하지 않고 마지막으로 렌더링 된 결과를 재사용합니다. import React from 'react'; function MyComponent(props) { /* props를 사용하여 렌더링 */ } export default React.memo(MyComponent, areEqual); 사용 이전 포스트 [React] Drag and Drop에서 드래그, 드롭 시 바뀐 부분이 아닌 전체가 리랜더링이 되어 텍스트의 흔들림이 가끔..