NextJS 특정 페이지의 OG(Open Graph) 태그 다르게 적용하기

오래전부터 Google Search Console에 블로그를 등록했음에도 불구하고 생각보다 트래픽이 좋지 않았다. 페이지 색인이 생성되지 않아 발생한 문제였는데, 그중 [리디렉션이 포함된 페이지]를 이유로 많은 페이지들의 색인이 생성되지 않았다.

⏰ 쉽고 빠른 약속 정하기, 모두의 시간 🐰 프론트엔드 개발 회고글

서비스 링크 공유를 위한 클립보드 복사 기능 및 share api를 보다 간단하게 활용할 수 있는 custom hook 작성하기

CRA를 Vite로 마이그레이션하기

내가 맡은 부분의 QA를 모두 해결하고 미뤄두었던 Tanstack query 도입을 진행했다. React query에 대해서 이전부터 많이 들어왔고, 또 많이 사용한다 하여 꼭 한번 사용해 보고 싶었는데, 다행히 여유 시간이 생겨 직접 도입해 볼 수 있었다!

아래 사진과같이 참여자의 이름으로 필터링 하는 기능이 필요하다! 따라서 개별 선택과 전체 선택 기능이 필요한데, 생각보다 고려해야 할 사항이 많아서 기록해 본다.이미 전체 전체 선택된 상태에서 전체선택 버튼을 한 번

모바일 환경에서 애니메이션이 동작할 때 잔상이 생긴다면 어떻게 해결해야 할까?

IT 연합 동아리 DND 8기 지원서 작성부터 최종 발표회까지의 과정 회고

움직이는 이미지는 시각적으로 완성도를 높이지만, 그 용량이 너무 크다는 게 문제였다. 보통 웹 사이트 접속 시 로딩이 3초 이상 걸리면 사용자 대부분이 이탈한다고 하는데, 아래 사진을 보면 서비스 내의 gif 파일을 로딩하는 데 대락 5초 ~ 7초 정도 걸린다는 것을 확인했다 😱

포스트 목록에 썸네일 이미지를 추가하고 싶어서 gatsby-plugin-image 라이브러리의 StaticImage로 대충 디자인 해 보고 있었다.그런데 emotion의 `styled`를 적용하면 이미지가 아예 뜨질 않았다 😳

최근들어 CRA나 CNA를 사용하지 않고 개발환경을 직접 구축해 보고 싶은 마음이 생겼다. 그래서 create-next-app을 사용하지 않고 직접 next + ts 개발환경을 세팅해 보자!

오랫동안 고민하던 에러 해결하기... MailedIt! 서비스를 개발하다 오랫동안 해결하지 못한 에러가 있었다. Notion처럼 텍스트를 입력하고 엔터를 누르면 새로운 블럭이 만들어지는데, 기존 텍스트의 마지막 음절이 딸려오는 에러가 발생했다.

2021년 2학기 신촌연합IT창업동아리 CEOS 14기 활동을 하며 MailedIt! 팀에 프론트엔드 개발자로 합류했다. 약 한 달 동안 개발을 진행하며 배운 점과 느낀 점을 써 보자고!

프로젝트에 구글 로그인을 도입하면서 이를 프론트단에서도 처리해야 했다. 다행히 라이브러리가 잘되어 있어서 구현하는 데에 큰 어려움은 없었지만, 그 과정이 재미있었기도 했고 몇 가지 에러를 겪어서 기록해 보았다!

axios request interceptors 로 access token 재발급하기

Utterances 댓글을 다른 포스트로 옮겨 보자! Gatsby와 댓글 플러그인 Utterances를 사용하다 보면 아래와 같은 경우가 발생한다. 카테고리명 수정 카테고리 이동 markdown 파일명 변경 하지만 댓글이 변경된 포스트를 따라 자동으로 옮겨지지 않기 때문에 코멘트가 저장되는 repository의 issue를 직접 수정해야 한다.

테스트용 블로그 첫 글 💐