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)을 위해 웹 서버의 현대적 기능에 종속..

Cytoscape 소개 Cytoscape은 점 (node)과 선 (edge)으로 이루어진 네트워크의 가시화, 통합, 분석을 가능하게 하는 프리 오픈소스 소프트웨어입니다. 자바로 구현되어 있어 윈도우, 맥, 리눅스등에서 자유롭게 구동합니다. Cytoscape 라이브러리를 사용하여 노드 간의 절차를 시각화하는 그래프를 구현하는 방법에 대해 알아보겠습니다. 설치 cytoscape 패키지를 설치합니다. npm install --save cytoscape cytoscape-klay # typescript 사용 시 추가 설치 npm install --save-dev @types/cytoscape 설정 angular.json 파일에서 아래 내용을 추가합니다. "scripts": ["./node_modules/cyto..

Markdown 이란 마크다운은 일반 텍스트 기반의 경량 마크업 언어다. 일반 텍스트로 서식이 있는 문서를 작성하는 데 사용되며, 일반 마크업 언어에 비해 문법이 쉽고 간단한 것이 특징이다. HTML과 리치 텍스트(RTF) 등 서식 문서로 쉽게 변환되기 때문에 응용 소프트웨어와 함께 배포되는 README 파일이나 온라인 게시물 등에 많이 사용된다. 위키백과 Angular에서 ngx-markdown 패키지를 사용하여 Markdown 기능을 구현하는 방법에 대해 알아보겠습니다. 설치 ngx-markdown 패키지를 설치합니다. $ npm install ngx-markdown --save 설정 angular.json 파일에서 아래 내용을 추가합니다. { ... "architect": { "build": { "..

Markdown 이란 마크다운은 일반 텍스트 기반의 경량 마크업 언어다. 일반 텍스트로 서식이 있는 문서를 작성하는 데 사용되며, 일반 마크업 언어에 비해 문법이 쉽고 간단한 것이 특징이다. HTML과 리치 텍스트(RTF) 등 서식 문서로 쉽게 변환되기 때문에 응용 소프트웨어와 함께 배포되는 README 파일이나 온라인 게시물 등에 많이 사용된다. 위키백과 Angular에서 ngx-markdown-editor 패키지를 사용하여 Markdown Editor 기능을 구현하는 방법에 대해 알아보겠습니다. 설치 ngx-markdown-editor와 ace-builds, bootstrap, font-awesome 패키지도 필수로 설치합니다. $ npm install ngx-markdown-editor --save..

Angular 에서 Web3를 사용할 경우 아래와 같은 오류가 발생할 경우가 있습니다. Module not found: Error: Can't resolve 'crypto' in ... Module not found: Error: Can't resolve 'stream' in ... Module not found: Error: Can't resolve 'fs' in ... Module not found: Error: Can't resolve 'os' in ... [NG_SERVE] BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default. [NG_SERVE] This is no longer the c..

Angular 14 버전을 사용하면서 ERROR ReferenceError: process is not defined 오류가 발생할 경우 해결 방법입니다. 설치 $ npm install --save-dev process 내용 추가 src/polyfill.ts 파일에 다음 내용을 추가합니다. (window as any).global = window; global.Buffer = global.Buffer || require('buffer').Buffer; global.process = require('process');

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..