# gatsby

Gatsby로 Front-End Portfolio Page 만들기 - 02. 스타터 그리고 섀도잉 개념
JASON의 프론트엔드 포트폴리오 페이지 개발일지 2탄 입니다.

Gatsby 블로그 검색기능 도입하기
정적 콘텐츠를 제공하는 블로그에서 검색 기능은 필수이다.본인도 공부하며 기록해둔 포스팅을 뒤적거릴 자주있어 검색 기능을 추가하기로 결정했다.웹 사이트에 검색을 도입하기 위해서는 아래 세 가지 컴포넌트가 필요하다.search indexsearch index는 데이터를 조

Gatsby로 Front-End Portfolio Page 만들기 - 01. Gatsby란?
JASON의 프론트엔드 포트폴리오 페이지 개발일지 1탄 입니다.

나만의 블로그를 만들어보자 - Gatsby
github 블로그를 보면서 나도 만들어 보고 싶다고 생각한 적 없나요? Gatsby로 할 수 있어요.
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 통신을 할 수 있게 합니다. 예시로, 페이지와 생성된 팝업
Gatsby 로 블로그 만들기 .03
gatsby도 react 기반의 라이브러리이기 때문에 seo에 매우 좋지않다.seo를 위해 react-helmet 이라는 라이브러리를 다운받아준다.말그대로 헬멧 을 씌워서 그 안에 meta tag 들을 작성해주면 된다.해당 페이지의 제목을 나타내기 때문에 SEO에서 가

Gatsby 로 블로그 만들기 .01
실행시킨 후 localhost:8000 으로 접속 가능하다.큰 폴더구조는 react와 비슷하다.content : blog의 마크다운 파일들을 저장하는 폴더public : 정적 파일src : 동적 파일보통 src 안에있는 파일들만 건들것이다.src 안의 폴더구조는 이러