devlog

13 Posts found

DevlogTypeScriptDOM2025.06.25

게시글 페이지에 이미지 모달 구현하기

마크다운에서 형태로 이미지 너비를 조정할 수 있지만, 세로로 긴 이미지들은 의도보다 크게 표시되는 문제가 있었다. 그래서 일단 모든 이미지를 축소해서 자연스럽게 보이도록 조정했는데, 캡처 스크린샷 같은 이미지들이 너무 작아서 글씨가 잘 보이지 않는 문제가 생겼다. 이 문제를 해결하기 위해 이미지를 클릭하면 확대해서 볼 수 있는 모달 기능을 구현하게...

CanvasDevlogCache2025.06.22

[Canvas API] 동적 그라디언트 배너 만들기

각 포스트마다 개성 있는 비주얼로 만들고 싶었는데, 특히 썸네일 이미지와 자연스럽게 어우러지는 배너가 있다면 더 나은 사용자 경험을 제공할 수 있을 것 같았다. 그래서 썸네일 이미지에서 색상을 추출해 동적으로 그라디언트 배너를 생성하는 시스템을 구현해보았다. → 정적인 배너 대신 각 포스트의 썸네일과 조화를 이루는 동적 배너 만들기 주요 아이디어는...

DevlogView2025.06.20

뷰 모드 기능 개발

블로그를 운영하다 보니 게시글 목록이 점점 늘어나면서 한 가지 아쉬운 점이 생겼다. 모든 글이 똑같은 형태로만 보여서 조금 단조롭다는 느낌이 들었다. 특히 썸네일이 있는 글과 없는 글이 섞여 있을 때, 시각적으로 균형이 맞지 않아 보였다. 그래서 Pinterest나 Medium 같은 사이트들을 둘러보면서 영감을 얻었다. 자신의 취향에 맞게 뷰 모드를...

[

DevlogMetadataAPISEO2025.06.17

[Next.js] Metadata API 사용해 SEO 최적화하기

포트폴리오 페이지인 /는 색인이 잘 되었지만, 정작 중요한 /devlog 부분이 전혀 색인되지 않았다. 발견한 주요 문제점들은 다음과 같다. 메타데이터 부족: title, description 등 기본 SEO 태그가 누락되어 있었음 사이트맵 문제: 사이트맵은 있는데 검색 엔진이 페이지를 제대로 발견하지 못 함 구조화된 데이터 부족: 리치 스니펫이...

DevlogSEORSS2025.06.17

RSS 피드 구현

Next.js 13의 App Router를 활용해 동적 RSS 피드를 구현한 과정이다. RSS Really Simple Syndication 는 웹사이트의 콘텐츠를 구조화된 형식으로 제공하는 표준이다. 독자들은 RSS 리더를 통해 여러 사이트의 새 글을 한 곳에서 확인할 수 있고, 개발자에게는 콘텐츠 배포를 자동화할 수 있는 수단이 된다. 먼저 RSS...

DevlogFramerMotion2025.05.27

[JavaScript] 스크롤 애니메이션 구현하기

정적인 포트폴리오 페이지에 조금 인터랙티브한 애니메이션을 추가해 보았다. 특히 스크롤 기반 네비게이션과 3D 프로젝트 캐러셀 구현에 중점을 두었다. 포트폴리오는 개발자의 첫인상을 결정하는 중요한 요소다. 단순히 정보를 나열하는 것보다 사용자와 상호작용하는 동적인 경험을 제공하고 싶었다. 잘 만들어진 애니메이션은: 자연스러운 전환으로 사용자의 인지적...

NextJSSEODevlog2025.01.04

SEO 최적화

Google 검색엔진에서 내 블로그가 제대로 색인되지 않는 문제를 발견했다. 포트폴리오 페이지인 /는 색인이 잘 되었지만,/devlog 부분이 색인되지 않았다. 이를 해결하기 위해 다음과 같은 단계별 접근을 시도했다. 기본 SEO 설정 점검 먼저, 가장 기본적인 SEO 요소들을 점검했다. App Router의 특성을 활용해 레이아웃과 페이지 구조를...

GiscusSEODevlog2024.12.21

슬러그 변동 문제

Giscus 댓글 기능을 사용하고 있었는데 예상치 못한 문제가 발생했다. Github Discussions에 남아있는 이전 댓글들 변경된 URL로 인한 404 오류 게시글 제목을 수정했더니 URL이 변경되면서 기존 댓글들과의 연결이 끊어진 것이었다. Giscus는 페이지의 URL을 기준으로 댓글을 매핑하는데, 게시글 URL이 제목을 기반으로 생성되다...

NextJSSEODevlog2024.12.17

[Next.js] 사이트맵 자동 생성하기

블로그를 개발하면서 SEO 검색 엔진 최적화 는 필수로 챙겨야 할 요소라고 생각했다. 또 블로그에 새로운 페이지가 업데이트될 때마다 Google이나 다른 검색 엔진에서 어떤 과정을 거치게 될까 궁금해 찾아보다 사이트맵이라는 개념을 알게 되었다. 이 글에서는 next-sitemap 라이브러리를 사용해서 사이트맵을 생성하고, Google Search...

NextJSUpstashRedis2024.11.25

Upstash Redis 활용 실시간 채팅 기능 구현하기

블로그에 채팅 기능이 꼭 필요하지는 않았다. 하지만 Redis를 처음 사용해보고 싶었고, 채팅 기능은 Redis의 장점을 실험해보기 좋은 대상이라고 생각했다. 채팅은 실시간으로 메시지를 주고받아야 하며, 데이터를 빠르게 읽고 쓰는 성능이 필요하기 때문이다. 또한 Redis는 방문자의 수를 집계하는 위젯으로도 활용하고 있다. 처음에는 Redis를 직접...

NextJSObsidianTypeScript2024.11.06

옵시디언을 활용한 포스팅 시스템 구축하기

처음에는 마크다운 파일을 복사해서 Next.js 프로젝트 폴더에 붙여넣는 방식으로 블로그를 관리했다. 하지만 글이 많아질수록 폴더 정리와 수정 사항 관리가 번거로워졌다. 삭제된 글이 남아있거나 수정할 때 파일을 일일이 찾아 이동하는 과정도 비효율적이었다. 이런 과정을 자동화하고 싶었고, 옵시디언 Obsidian 과 Next.js 프로젝트를 연결하기로...

Devlog2024.11.05

중복 포스트 문제

다음은 태그 기반 포스트 필터링 기능을 구현하면서 겪은 문제와 해결 과정을 정리한 내용이다. 블로그에 일반 포스트와 시리즈 포스트라는 두 가지 타입의 글이 존재하는데, 특정 태그로 글을 필터링 하는 기능을 구현하면서 처음에는 단순히 두 종류의 리스트를 합쳐 필터링하는 방식을 선택했다. 이렇게 구현 후 테스트를 진행하니 같은 포스트가 중복해서 노출되는...

Devlog2024.10.28

Devlog 시작

요즘 많은 개발자들이 자신의 지식과 경험을 블로그에 기록하며 소통하고 있다. Tistory나 Velog 같은 검증된 플랫폼이 있지만, 직접 개발해보기로 정했다. 개발 과정 자체가 학습의 기회라고 생각했다. 기획부터 디자인, 개발, 배포까지 모든 과정을 직접 고민하고 경험하면서 더 많은 것을 배울 수 있을 것 같았다. 블로그에 필요한 SEO 최적화나...