areumsheep / blog

☺️ 개발 블로그 개발

Hello, I'm Areum Yang!

blog's Issues

About, Snippet 추가

SEO 추가

추가 필요

• google-site-verification
• naver-site-verification

gtag, hotjar 개발 환경에선 카운트되지 않도록 환경 변수 추가

• gtag 환경 변수
• hotjar 환경 변수

프로필 velog 링크 추가하기

h(n) 태그에 자동 하이퍼링크 추가

📚 사용 라이브러리

• gatsby-remark-autolink-headers

☠️ 이슈

라이브러리 적용 안됨

gatsby-config.ts에 gatsby-remark-autolink-headers를 추가해도 적용되지 않는다.
하지만 head에 라이브러리의 style과 script는 정상적으로 적용되어 있었다.

[해결]
https://www.gatsbyjs.com/docs/tutorial/part-5/#task-install-and-configure-the-mdx-transformer-plugin-and-dependencies
해당 글에서 gatsby-plugin-mdx 안에 gatsbyRemarkPlugins를 적용시킬 수 있다하여 해당 프로퍼티 안에 넣으니 해결되었다.

svg는 보이는데 스크롤이 적용되지 않음

custom component를 넘겨주다보니 id, style이 적용되지 않음이 확인되어 넘기는 값에 id, style 추가하였다.

게시물 총 개수 추가

목차 추가

RSS 추가

velog와 동시에 글을 올리고 싶은데 방법 고민해보기

Icon과 함께 있는 글자가 세로 가운데 정렬되도록 수정

아이콘의 세로 가운데에 글자가 보이도록 수정

수정 전

수정 후

댓글 추가

참고 링크

• https://giscus.app/ko
• https://github.com/ricale/blog

여기에 오류제보하면 되나여

Docker 사용해보기

• 회사에서 만들었던 Redis 에이전트 설치 Docker 이미지 관련 글 작성

반응형 적용

읽는 시간 추가

☠️ 이슈

라이브러리 적용 안됨

gatsby-remark-reading-time, gatsby-remark-reading-time-2를 사용하다가 업데이트도 너무 오래 전에 됐고 사용이 되지 않았다.
코드를 읽어보니 간단하게 reaing-time 라이브러리를 사용하여 graphql에 넣어주는 식으로 되어 있길래 직접 만들었다.

https://github.com/ngryman/reading-time/blob/master/src/reading-time.ts
해당 코드를 참고하여 유틸 함수를 만들긴 했지만 실제로는 더 간단하게 구현되었다.

페이지 조회수 추가

사용 라이브러리

• firebase (realtime database)

Storybook 배포

사용 라이브러리

• Chromatic

URL

• https://main--63dfcfdfa96b070af0a6ed62.chromatic.com/

기본 글씨체 변경

참고 자료

• https://www.datoybi.com/Fonts-flicker-on-load-in-gatsby/

디자인 변경

amplitude 추가하기

• amplitude 자료를 어디에 사용할 수 있을지 고민 필요
  • hotjar로도 충분하지 않을지?

컴포넌트 분리

• https://mdxjs.com/packages/react/