들어가며 이제는 당연하게 사용되는 다크 모드를 블로그에 적용하려고 한다. 솔직히 엄청 간단할 것이라고 생각했는데 블로그를 제작하면서 제일 많은 시간을 투자했다. 이번 포스팅에서 다크 모드를 적용하는 방법과 함께 내가 겪었던 문제점들을 공유하려고 한다. 먼저 기능 구현을 하고 회고를 하는 것이다 보니, 중간 과정 코드들은 예시정도로만 보고 넘어가자.😅 처음…

Gatsby 4.19 버전부터는 Gatsby Head API 가 추가되었다. 2020년 이후로 react-helmet 이 업데이트가 되지 않고 있는 상황이니 이를 참고하여 작업하면 좋을 것 같다. 필자는 Gatsby 4.17 버전이라서 아직 사용해보지는 못했지만😢, 이를 사용하면 gatsby-plugin-react-helmet 을 사용하지 않…

SEO에 대한 포스팅은 여기 에서 확인할 수 있다. Gatsby react helmet 설정하는 방법은 Gatsby 블로그 SEO 설정하기 2 - react helmet 에서 확인할 수 있다. 블로그를 운영하면서 웹사이트가 상단에 노출시키고 싶다는 욕심이 생겼다. 그래서 SEO를 설정해보기로 했다. 검색 엔진은 웹사이트의 콘텐츠를 수집하고, 색인화하고…

이 글은 gatsby-plugin-mdx 플러그인 사용을 기준으로 작성되었다. 들어가며 대부분의 Gatsby 블로그에서는 마크다운 파일을 파싱하기 위해 gatsby-transformer-remark 를 사용한다. 하지만 필자는 리액트 컴포넌트를 Mdx 내부에서도 사용할 수 있다고 생각해서 gatsby-plugin-mdx 를 사용 중이다! 이를 …

여러 개발 블로그를 보면 글의 목차를 보여주는 Toc 기능이 있는 것을 볼 수 있다. 보기에 편한 기능도 있지만 개인적으로 멋있어보였다!ㅎㅎ gatsby 블로그에서 Toc기능 구현하는 방법을 찾아보던 중 gatsby-remark-autolink-headers 라는 플러그인을 찾았다. 이 플러그인은 마크다운 파일의 headder 를 찾아서 링크를 걸어주…