개발과 기술에 대한 다양한 주제의 글들을 모아놓았습니다
Next.js 15로 프로젝트를 시작하다 보면 가장 먼저 맞닥뜨리는 변화는 바로 App Router입니다. 기존의 pages 기반 라우팅과는 구조부터 방식까지 확연히 달라서 처음 접하는 분들은 혼란스러울 수 있어요. 이번 글에서는 App Router의 기본 개념부터 디...
🌱 시작은 ‘걷기’였습니다 약 3개월 전부터 본격적으로 러닝을 시작했습니다. 츄를 산책시키며 집 앞 한강공원을 걷다 보면, 러닝하는 사람들의 모습을 자연스럽게 접하게 되곤 했어요. 사실 저는 운동을 즐기는 편도 아니고, 땀 흘리는 걸 그다지 좋아하지 않았습니다. 🧠...
Next.js 블로그 SEO 최적화 메타데이터와 구조화된 데이터로 검색 노출 개선하기 블로그를 운영하다 보면 이런 고민이 들곤 합니다. “블로그 이름으로는 검색되는데, 내가 쓴 글은 왜 안 뜨지?” 그래서 이번에 Next.js 기반 블로그에서 SEO 최적화를 직접 적용...
📄 내용 검색엔진 최적화를 위한 기본 중 기본, 바로 robots.txt와 sitemap.xml 설정입니다. 개발자라면 한 번쯤 들어봤지만 실제로 어떻게 적용하는지는 헷갈리기 쉽죠. 이번 글에서는 robots.txt와 sitemap.xml이 무엇이고, 어떤 역할을 하...
내용 로컬 서버에서 Fast Refresh가 무한 루프에 빠져 계속해서 리빌드되는 현상이 발생 🚨 문제 상황 로컬 서버를 실행하면 콘솔에 다음과 같은 메시지가 끊임없이 반복되었습니다 `` tsx [Fast Refresh] rebuilding [Fast Refresh]...
내용 포트폴리오에서 Skills와 Education 섹션에서 스크롤할 때마다 애니메이션이 반복 실행되면서 깜박임 현상이 발생했습니다. 위아래로 스크롤할 때마다 애니메이션이 재시작되어 시각적으로 거슬렸습니다. 원인 분석 `typescript // 문제가 있던 코드 ...
내용 포트폴리오 홈 섹션에서 개인적인 이미지들을 단순히 나열하는 것이 아니라, 스크롤에 따라 역동적으로 움직이는 인터랙티브한 갤러리를 구현하고 싶었습니다. 해결 과정 스크롤 기반 Transform 설정 ``typescript const { scrollY } = useS...
내용 포트폴리오에서 Work Experience 섹션만 다크 테마로 표시하고, 다른 섹션은 라이트 테마를 유지하고 싶었습니다. 단순한 토글 방식이 아닌, 스크롤 위치에 따라 자동으로 테마가 변경되는 시스템이 필요했습니다. 해결 과정 스크롤 기반 테마 감지 로직 ``ty...
🚀 Next.js 블로그 성능 최적화 기록 Next.js로 만든 블로그에서 카드 클릭 시 느린 반응과 이미지 로딩 중 화면 흔들림 등의 문제가 있었습니다. 실제 문제 상황과, 성능을 대폭 개선한 5가지 최적화 전략을 정리합니다. ✅ 문제 상황 페이지 로딩 10초 이상...
🛠 블로그에 마크다운 지원 추가하기｜React Markdown으로 실시간 미리보기 구현 Next.js 기반 블로그에서 개발자 친화적인 글쓰기 환경을 위해 마크다운 지원 기능을 구현했습니다. 실시간 미리보기, 코드 하이라이팅, GitHub Flavored Markdow...
🛠 블로그 개발 기록 이 블로그는 Next.js App Router, TypeScript, Shadcn UI, Radix UI, Tailwind CSS 등을 활용해 개발했습니다. 아래는 개발 과정에서 수행한 주요 작업과, 선택한 기술 및 그 이유에 대한 정리입니다. ...
지인이 운영하는 소규모 학원을 보며, 출결, 공지, 상담 같은 기본 기능조차 정리되지 않은 현실을 보게 되었다. 앱은 부담스럽고, 엑셀이나 단톡방에 의존하다 보니 누락도 많음. 그래서 직접 만들어보기로 했다. 출결 관리, 공지 등록, 상담 기능을 중심으로, 웹 기반이지...