블로그 개발기
Next.js로 개발하는 나만의 블로그, 블로그를 개발하면서 마주친 문제 해결 경험을 공유합니다.
시리즈 내 포스트(14)
내 블로그에 보안 헤더 적용하면서 알아보기
X-Frame-Options, X-Content-Type-Options, Referrer-Policy 등
최근에 동료분이 SEO를 검증하는 클로드 플러그인을 추천해주셔서 해당 플러그인을 사용해봤다. 이 플러그인은 URL만 제공하면 claude가 알아서 해당 사이트의 검색엔진 최적화 점수를 채점해주는 방식이다. SEO를 채점하는 건 light house말고는 없는 줄 알았는데, 생각보다 LightHouse에서는 잡히지 않는 크고 작은 속성들이나 지켜야할 점들이
2026. 04. 19.12분보안기능추가FE
개인 블로그에 Opengraph 카드 UI 만들기
서버 사이드 GET, rehypeRewrite
개인 블로그에 오픈그래프 기능 도입하기 티스토리 블로그나 디스코드, 카카오톡 등 플랫폼 서비스들은 대부분 외부 링크를 입력하면 하단에 해당 링크의 오픈그래프 정보를 알려주는 카드 UI를 렌더링해준다. 이런 UI가 블로그에 있어서는 무조건 있어야 한다고 생각했기 때문에 직접 만들어보기로 했다. 이전에도 글에서 블로그에 유튜브 링크를 걸 경우에 자동
2026. 03. 15.16분구현UX
블로그에 유튜브 임베딩하기
rehypeRewrite 플러그인 함수 개발
블로그 글을 쓰다보면 외부 링크를 작성하는 일이 있다. 예를 들어 프리뷰 네트워크 기반 동적 품질 조절 기능 관련 글에는 시연 영상이 링크되어있다. 티스토리 같은 블로그에서는 유튜브 링크를 걸 경우에 유튜브 영상이 embed 되는 것을 볼 수 있다. 하지만 내 블로그에서는 지원하지 않았기 때문에 유튜브 영상이 링크 되어있는 줄도 모르고 지나칠 가능성이 매
2025. 07. 30.12분구현
Schema hasn't been registered for model 문제 해결하기
mongodb populate 문제
Schema hasn't been registered for model 문제 해결하기 문제 이번에 시리즈 디테일 페이지를 개발하면서 생긴 문제의 에러 메시지이다. 문제 코드 현재 블로그의 시리즈에서 시리즈 디테일 페이지(/series/블로그-개발기)로 이동할 경우 시리즈의 디테일과 속한 포스트 목록을 보여주는 페이지가 나온다. 로컬에서는 잘 작동
2025. 06. 01.5분문제해결기능추가
SSG 렌더링으로 Vercel 콜드스타트 문제 해결하기
직접 해보면서 깨닫는 SSR과 SSG 차이
직접 해보면서 깨닫는 SSR과 SSG 차이 문제 상황 현재 내 블로그는 NextJS로 구현되어있다. NextJS를 선택한 이유는 SEO를 최적화하기 간편하기 때문이었고, 실제로 SSR의 장점인 서버 컴포넌트를 사용해서 블로그 글을 렌더링하고 있었다. 최근 친구의 피드백으로 사이트가 느리다는 피드백을 받았다. 사이트가 성능적으로 문제될 것은 없었는데도
2025. 05. 02.6분NextJS렌더링
FingerPrintJS로 조회수와 좋아요 기능 만들기
쿠키 대체? FingerprintJS
조회수 좋아요 기능 구현하기 조회수와 좋아요 기능은 블로그에 있어서 쉽게 볼 수 있는 요소이다. 티스토리도 공감이라는 이름으로 존재하고, 벨로그도 이 기능이 있다. 벨로그의 경우에는 내가 좋아요한 포스트로 모아볼 수 있어야하기 때문에 유저 인증이 필수적인 서비스이다. 하지만 나는 일개 개인 블로그이기 때문에 내 블로그에 좋아요 누르려고 회원가입을 하는
2025. 04. 19.12분구현Fingerprint
리드미용 블로그 최신 글 뱃지 만들기
with svg 생성 api와 redirect api
작년 여름에 마지막으로 깃허브 프로필을 수정하고 그 뒤로 건들지 않았었는데 이번에 좀 더 심플하게 바꿔보려고 했다. 기존에는 velog를 쓰고 있었기 때문에 velog-stats 레포지토리를 사용해서 velog 최신 글을 깃허브 리드미에 뱃지 형태로 띄워주는 기능을 쓰고 있었다. 이 기능이랑 비슷하게 내 블로그의 최신 글로 연결되는 뱃지를 만들어보고 싶다
2025. 04. 09.9분
요청을 캐시해서 돈을 아껴보자
Cache Control
요청을 캐시해서 돈을 아껴보자 제목은 이렇게 썼지만 블로그를 운영하는데 돈은 안든다 ㅎ.. 캐시에 대한 개념은 익히 들어서 알고 있는 개념이었지만 실제로 적용해본 적이 없다는 것을 깨달았다. 이번에 캐시를 적용해야겠다고 생각한 이유는 내 블로그에서 posts 페이지에서 series 페이지로 이동할 때마다 글 리스트를 불러오는 Get 요청을 매번 실행
2025. 04. 05.8분
블로그 API 최적화
필요한 데이터만 불러오기
현재 내 블로그는 글 목록을 불러올 때 하나의 글에 대한 모든 데이터를 넣어주고 있다. 이건 매우 비효율적이라는 생각이 들었다. 지금이야 글이 몇개 없지만 300개가 넘어갈 경우에는 300개 글에 대한 모든 세부 데이터를 가져오는 것은 오버헤드가 매우 큰 작업이라고 판단했다. 그래서 API route를 최적화해서 글의 제목과 글의 아이디, slug, 작성
2025. 03. 24.5분다크모드 FOUC 깜빡임 현상 수정하기
dangerouslySetInnerHTML
다크모드 FOUC 문제 해결하기 문제 상황 블로그에 다크모드를 만들었다. 다크모드를 만들 때 마다 느꼈지만, 새로고침할 때마다 다크모드가 한타임 늦게 적용돼서 생기는 눈뽕현상이 아주 마음에 들지 않았다. 찾아보니 왜 Flash of Unstyled Content, FOUC 문제라고 불리는 현상이었다. 새로고침하고 나서 다크모드 여부를 해석하고 다크모
2025. 03. 10.10분
Vercel이 말아주는 이미지 CDN 사용해보기
이미지 업로드 with Vercel Blobs
Vercel이 말아주는 이미지 CDN 사용해보기 티스토리나 벨로그 같은 블로그 서비스는 이미지를 복사하고 에디터에 붙여넣기를 할 경우에 이미지가 자체 cdn에 업로드되는 것을 볼 수 있다. 이 기능은 글을 작성할 때 사용자가 원하는 이미지를 바로 붙여넣을 수 있기 때문에 블로그에게는 필수기능이라고 생각이 든다. 이전까지 내 블로그는 이미지의 링크
2025. 01. 13.9분
내가 만드는 블로그로 알아보는 SEO 최적화
Nextjs 검색엔진 최적화
SEO 최적화를 위해 해야할 것들 블로그이기 때문에 검색엔진 최적화를 해보기에 적합하다고 생각했고, Nextjs를 선택한 이유기도 하기 때문에 검색엔진 최적화를 결정했다. 블로그 주소 최적화 위 문서에 따르면 구글에서는 posts/2131vbjbdsf같은 랜덤 형식의 주소보다 의미를 알아볼 수 있는 주소를 권장한다고 한다. 지금 내가 만든 블
2024. 12. 19.19분
블로그 CLS 성능 최적화하기
with Next.js 이미지 최적화
CLS는 이전에 운영하던 블로그에서도 최적화를 한 번 해봤기 때문에 어디서 문제가 생기고 있는지 짐작은 가는 상황이었다. 좀 더 확실한 기록을 위해서 lighthouse를 사용해서 성능 테스트를 진행했다. 성능이 28점으로 매우 낮은 것을 볼 수 있었다. CLS 수치도 무려 0.8이 넘는 것을 볼 수 있었다. CLS 수치 
Next.js로 나만의 블로그 만들기
포트폴리오를 곁들인..
Next.js로 나만의 블로그 만들기 12월 6일자로 네이버 부스트캠프 9기를 수료하고 백수의 삶으로 돌아오게 되었다. 수료 후에도 여러 일정이 있어서 바쁘게 보내고 있지만 부캠 기간 중간에 만들고 싶어서 프로젝트 세팅 정도만 해둔 프로젝트를 꺼내서 다시 해보고 싶어졌다. 나만의 블로그..? 부캠에서도 개인 블로그를 만들어서 사용하시는 분을 여럿 보기도
2024. 12. 17.3분