# gatsby

31개의 포스트
post-thumbnail

[SSR/SSG] Gatsby 시작하기

안녕하세요. 김용성입니다.오늘은 정적 사이트 구축을 위해 사용되는 Gatsby JS를 설명하고 이를 이용해서 프로젝트를 시작하는 방법에 대해 포스팅하고자 합니다.

어제
·
0개의 댓글
post-thumbnail

Gatsby로 나만의 블로그 만들기 feat. gatsby-starter-bee (2)

Gatsby로 나만의 블로그 만들기 feat. gatsby-starter-bee (1)1) 정적 사이트 생성기인 Jekyll 또는 Gatsby를 이용해서 블로그를 만든다.2) github pages 또는 netlify로 호스팅을 한다.3) google search co

2021년 5월 23일
·
0개의 댓글
post-thumbnail

Gatsby로 나만의 블로그 만들기 feat. gatsby-starter-bee (1)

나만의 블로그를 만들어 보자 💪🏻 벨로그, 티스토리, 미디움 등 좋은 블로그 사이트 들이 많지만 서치를 하다보면 '개발자스럽게' 커스터마이징된 블로그들이 많이 보였다. 그래서 만들어본 나만의 블로그 👀 서치를 하면 이렇게 생긴 블로그들이 많은데 gatsby-s

2021년 5월 20일
·
0개의 댓글
post-thumbnail

[Gatsby] File System Route API

GrapQL 데이터를 사용해 동적으로 페이지를 생성하는 방법으로 다음과 같이 사용될 수 있다.src/pages/products/{Product.name}.js => ex) localhost:8000/products/burgersrc/pages/products/{Prod

2021년 4월 19일
·
0개의 댓글
post-thumbnail

[Gatsby] Gatsby-image-plugin

이미지 사용이 필요할 때 <img> 대신 gatsby-image-plugin 사용

2021년 4월 13일
·
0개의 댓글
post-thumbnail

[Gatsby] Start

node 설치git 설치gatsby-cli 전역설치 npm install -g gatsby-cligatsby new hello-world https://github.com/gatsbyjs/gatsby-starter-hello-worldsrc/pages 폴더의

2021년 4월 12일
·
0개의 댓글

Gatsby 블로그 만드는 방법

\-name 과 version 는 필수로 입력을 해야 한다.\-description 는 프로젝트에 대한 기술을 서술하는 곳이다.\-author 는 1명의 사람만 지정하고, 이름, e-mail, url를 적는다\-dependencies 는 프로젝트를 진행하면서 외부 라이

2021년 2월 18일
·
0개의 댓글

Gatsby 블로그 검색최적화

구글에서 검색 작동원리는 크롤링 - 색인 생성 - 검색결과 게재 3단계로 나누어서 이야기 하고 있다.클롤링 : google 크롤러란 자동화 프로그램이 웹의 신규, 업데이터 된 사이트를 찾고, 발견된 페이지의 URL를 저장한다.(구글은 이미 알고 있는 페이지는 링크를 따

2021년 2월 18일
·
0개의 댓글
post-thumbnail

[gatsby.js] Layout 컴포넌트에서 자식 컴포넌트로 props 전달하기

보통 gatsby에서 layout 컴포넌트가 모든 page에 사용되기 때문에 layout 컴포넌트를 최상위 컴포넌트로 사용한다.만약 Intro page의 코드가 아래와 같을때, 전 페이지에서 공통으로 사용되는 state를 Intro Page로 전달하려면 어떻게 해야할까

2021년 2월 13일
·
0개의 댓글

정적 사이트 생성기를 찾아다닌 기록

남들 다 한다는 GitHub에 블로그를 만들어보고 싶었다.그 뿐이었다... 그 뿐이었는데;;;처음 알아본 것은 Jekyll(제킬이라고 읽는 것 같다.)이었다. Ruby로 만든거고.. 블로그 그냥 만들기 좋겠다. 스킨도 여러가지 많네... 하지만, 딱 꽃히는? 테마가 없

2021년 1월 6일
·
2개의 댓글

첫 포스트: 처음 해보는 정적 블로그

2021년 새해를 맞아 velog에 작성하는 첫 포스팅이다.그동안 나는 AWS Lightsail의 가상 서버 상에서 워드프레스 기반의 블로그를 돌렸었다. (모두들 알다시피 워드프레스는 동적 웹페이지 기반 CMS의 대표주자다) 하지만 개인적 사정으로 인해 서버 유지비로

2020년 12월 31일
·
0개의 댓글
post-thumbnail

React Framework 비교하기

CRA vs next.js vs gatsby.js

2020년 12월 7일
·
2개의 댓글
post-thumbnail

[gatsby] Gatsby에서 i18next 사용하기(다국어지원)

Gatsby 웹사이트에서 다국어지원하기(i18next 라이브러리 사용)

2020년 12월 6일
·
2개의 댓글
post-thumbnail

Gatsby로 Github page 만들기

Gatsby를 써보지 않고 단지 Github로 블로그나 포트폴리오를 작성하고 싶으시 분들을 위해 작성해보았습니다.내가 알던 Jekyll은 이건데..이전에 Jekyll을 이용하여 Github에 포트폴리오를 올렸다. 단순히 테마를 클릭하고 내용을 나에 알맞게 작성하면 알아

2020년 10월 30일
·
0개의 댓글

[gatsby] page transition

Gatsby에서 네비게이션을 통한 page transition 구현하기

2020년 10월 25일
·
0개의 댓글

[gatsby] Loading spinner

gatsby 사이트에서 로딩 스피너 보여주기

2020년 10월 25일
·
0개의 댓글

[gatsby] background-image

Create a image or background image component in gatsby (gatsby-image)

2020년 10월 24일
·
0개의 댓글
post-thumbnail

[project] chaplinhair.com

gatsby를 사용해서 채플린헤어 웹사이트 구축하기

2020년 10월 24일
·
0개의 댓글
post-thumbnail

Gatsby로 만드는 Github 블로그

개념 소개는 훌륭한 포스트들이 많으니 넘어가고 실제로 어떻게 만들 수 있는지 하나하나 기록해보자. 아래의 과정은 우분투를 기준으로 Node js 부터 설치한다. https://nodejs.org/ko/로 설치하거나 아래 명령어로 설치 가능 Gatsby CLI를

2020년 8월 6일
·
0개의 댓글

Gatsby로 블로그 만들기

static blog 블로그 작성하면 파일 전체가 생성 / 물리적으로 사용자가 가지고 있을 수 있다 블로그를 작성하면 git에 배포(daploy)한다. 도메인 (영문 주소) npm (node package manager) npm install -g gatsby-

2020년 5월 24일
·
0개의 댓글