물리학과 FE개발자 취준생

Gatsby

(8)

Gatsby

[Gatsby] pagination(페이지네이션) 추가하기

gatsby 블로그에 페이지네이션을 추가해보자. Pagination Pagination(페이지네이션)은 콘텐츠를 여러 페이지에 나누어 보여주고 이전 페이지나 다음 페이지로의 이동 버튼을 제공하는 기술이다. 콘텐츠의 양이 많아질 때 모든 데이터를 한 번에 렌더링하면 웹 페이지 속도가 느려질 수 있는데, 페이지네이션을 사용하면 이러한 속도 저하를 개선할 수 있다.

Gatsby

Pagination

2023.01.12

Gatsby

[Gatsby] gatsby 다크모드(darkmode) 적용하기

gatsby 블로그에 다크모드를 추가해보자. 초기 테마 선택 사용자가 블로그에 방문할 때 어떤 테마를 표시할 것인가? ✓ check list - 방문자의 운영체제 기본 설정에 맞게 표시 - 이전 방문에서 저장된 테마 설정에 맞게 표시 - 블로그 기본 설정값 - 사이트 방문 중 OS 테마 변경

Gatsby

Darkmode

2023.01.06

Gatsby

[Gatsby] gatsby SEO 적용하기(2) - Sitemap

이전 글에 이어서 sitemap을 생성하고 웹 마스터 도구에 등록하는 방법에 대해 알아보자. sitemap은 검색 엔진이 효율적으로 크롤링할 수 있도록 사이트에 있는 페이지 정보(마지막 업데이트 시간, 대체 언어 버전 등)를 제공하는 파일이다. 일반적으로 xml 형식으로 작성되어 사이트 내 다른 페이지로 연결되는 url을 나열한다.

Gatsby

SEO

2022.12.23

Gatsby

[Gatsby] gatsby SEO 적용하기(1) - Meta tag

검색 결과에 gatsby 블로그가 노출될 수 있게 이전 게시글에서 설명한 것처럼 메타 태그를 추가해보자. Meta tag 메타 태그(meta tag)는 웹사이트 소유자가 사이트에 관한 정보를 검색 엔진에 제공하는 방법이다. 항상 <head> 요소 내부에 위치하여 페이지에 대한 설명, 키워드, 뷰포트 설정 등을 지정할 수 있다.

Gatsby

SEO

2022.12.22

Gatsby

[Gatsby] Safari에서 border-radius가 적용되지 않는 현상

border-radius 오류 in Safari 블로그를 배포한 후 맥과 아이패드 사파리로 들어가보니 포스트 썸네일이나 이미지에 적용한 border-radius가 적용되지 않는다는 것을 발견했다. 왼쪽 크롬에서처럼 이미지가 겉테두리 안에 들어가지 않고 강한 자기 주장을 펼친다..

Gatsby

Error

2022.12.09

Gatsby

[Gatsby] thumbnail link(썸네일 링크) card 적용하기

gatsby 썸네일 링크 적용하기. 아래와 같이 마크다운 본문에 텍스트 링크를 작성할 때 썸네일을 포함한 카드 형식으로 보여주는 플러그인에 대해 소개해보려 한다. https://www.gatsbyjs.com/. 설치 방법. gatsby-remark-link-summary plugin을 설치해준다. $ yarn add gatsby-remark-link-summary

Gatsby

Custom

2022.10.29

Gatsby

[Gatsby] gatsby markdown 코드 블록 커스텀하기

gatsby-remark-highlight-code 플러그인을 사용하면 마크다운 파일의 코드 블럭을 예쁘게 만들 수 있다. 설치하기. $ yarn add --save gatsby-transformer-remark gatsby-remark-highlight-code @deckdeckgo/highlight-code. 플러그인 추가. gatsby-config.js 파일에 다음과 같이 gatsby-remark-highlight-code를 추가한다.

Gatsby

MarkDown

Custom

2022.10.25

Gatsby

[Gatsby] gatsby 이미지 플러그인 (gatsby-plugin-image)

Gatsby image plugin 설치하기. 먼저 아래 명령어로 이미지 플러그인을 설치해준다. $ npm install gatsby-plugin-image gatsby-plugin-sharp gatsby-source-filesystem gatsby-transformer-sharp. 그 다음 gatsby-config.js 파일에 플러그인을 추가해준다.

Gatsby

2022.10.05