# gatsby
Gatsby 페이지 라우팅 하는법
Gatsby에서 페이지간 라우팅 하는 방식은 2가지가 있습니다. 첫번째는 a 태그를 활용하는 것입니다. pages 폴더 내에 선언된 파일들은 '/파일명'으로 페이지 간 이동이 가능합니다. 하지만 React 기반으로 설계된 프레임워크인 Gatsby를 감히 매번 페이지 이
Gatsby 링크의 성능상 이점
Perfetchgatsby는 perfetch를 사용하여 성능을 높인다이를 위한 것이 Gatsby Link API에서 제공하는 Link 컴포넌트페이지가 로드되면 Gatsby는 리소스 로드 속도를 높이기 위해 현재 페이지에서 사용되는 모든 링크를 찾은 후, 각 링크의 페
GraphQL + Gatsby
그래프큐엘의 장점 : 필요한 데이터만 받아올 수 있음!!출처 : 인프런 React 기반 Gatsby로 기술블로그 만들기
gatsby + typescript로 블로그만들기 (1)
출처는 인프런입니다. 갯츠비와 타입스크립트 그래프큐엘을 통해서 블로그 만들기를 하며 배운것들을 정리합니다. 23년 4월 5일 typescript의 핵심 기능 : types 이렇게 타입을 지정해준다, 만약 타입이 잘못되었다면 에러가 뜬다 흔히 리액트에서 지정하는 컴
Gatsby로 Front-End Portfolio Page 만들기 - 02. 스타터 그리고 섀도잉 개념
JASON의 프론트엔드 포트폴리오 페이지 개발일지 2탄 입니다.
Gatsby 블로그 검색기능 도입하기
정적 콘텐츠를 제공하는 블로그에서 검색 기능은 필수이다.본인도 공부하며 기록해둔 포스팅을 뒤적거릴 자주있어 검색 기능을 추가하기로 결정했다.웹 사이트에 검색을 도입하기 위해서는 아래 세 가지 컴포넌트가 필요하다.search indexsearch index는 데이터를 조
Gatsby로 Front-End Portfolio Page 만들기 - 01. Gatsby란?
JASON의 프론트엔드 포트폴리오 페이지 개발일지 1탄 입니다.
나만의 블로그를 만들어보자 - Gatsby
Gatsby를 선택한 이유 Github 블로그를 만들 때 주로 Jekyll와 Gatsby를 사용한다. Jekyll은 Rudy 언어로, Gatsby는 React를 기반으로 만들어졌다. 평소에 React에 관심이 있었기 때문에 Gatsby를 선택하게 되었다. Gatsby 및 테마 설치하기 Gatsby CLI를 설치해야 한다. 원하는 테마를 골라 새...
Gatsby - Image
https://www.gatsbyjs.com/plugins/gatsby-plugin-image/npm install gatsby-plugin-image gatsby-plugin-sharp gatsby-source-filesystem gatsby-transfor
Gatsby 데이터패칭 (GraphQL- 정적쿼리, 페이지 쿼리)
Gatsby가 페이지에 데이터를 전달해 주는 방법 Gatsby가 타 프레임워크와 다른 점Gatsby는 Wordpress사이트나 Shopify상점, 블로그, filesystem, DB, API... 등으로부터 데이터를 끌어오게 해준다.\-> 데이터를 끌어와서 그 데이터로
Gatsby 설치, 실행, 레이아웃 적용
Gatsby는 리액트 기반의 프레임워크로 리액트에 새로운 몇가지 규칙을 적용한 프레임워크이다. Gatsby 핵심 포인트, 주의사항정적웹사이트(쇼핑몰, 블로그 등)에 적합하고 동적인 웹사이트(이용자 별로 다른 데이터를 보여줘야함)에는 적합하지 않다.그래서 사이트를 빨리
[Gatsby] 나만의 기술 블로그 개발부터 배포까지 - 2: 첫 화면 띄우기 및 배포
저번 시간에 이어서 계속 Gatsby 프로젝트 설정 시간이다. 오늘은 첫 화면까지 띄워보는 것을 목표로 작업을 할 예정이다. 함께하겠는가?
https://ricale.kr/blog 로 이전했습니다.
블로그를 직접 구현하고 싶은 충동에 휩싸여 Gatsby + GitHub Pages 로 블로그를 구현(아직 미완, 계속 개선 중)해서 이전했습니다. 기존 글들은 해당 블로그로 그대로 옮겼으니, 찾는 글이 있으시면 방문해주세요.
TIL 230116 - utterances 다이나믹 테마
iframe 을 사용하는 utterances 에 window.postMessage() 로 이벤트 전달window.postMessage() 메소드는 Window 오브젝트 사이에서 안전하게 cross-origin 통신을 할 수 있게 합니다. 예시로, 페이지와 생성된 팝업