개발 블로그를 만들게 된 이유
- 개발을 시작할때부터 작성하던 개발블로그를 직접 만들고 싶다는 생각, 개발자라면 자기가 직접만든 개발 블로그를 가지고 있어야 한다는 생각을 하며 나에게 익숙한 velog의 작성 폼과 여기저기서 보고 참고한 나만의 개발 블로그입니다.
- 현재 Firebase를 사용해서 DB를 구축하고 API를 만들고 Vercel을 사용해서 쉽게 배포했지만 앞으론 백엔드 개발 지식을 늘려 나만의 서버 나만의 DB 내가만든 API를 사용할때까지 점차 진화될것입니다.
기술 스택
1. Frontend
React 18 - 컴포넌트 기반 UI 구성
React Router v7 - SPA 라우팅 관리
Styled Components - CSS-in-JS 스타일링
Zustand - 가벼운 전역 상태 관리
CodeMirror 6 - 고급 마크다운 에디터
React Markdown - 마크다운 렌더링
2. Backend
Firebase Authentication - GitHub OAuth 로그인
Firestore - NoSQL 데이터베이스
AWS S3 Bucket - 이미지 파일 저장
페이지별 소개
1. 메인 페이지 (MainPage)
블로그의 첫 화면으로, 작성된 포스트들을 효과적으로 보여주는 페이지입니다.
최신 포스트 섹션: 최근 5개 포스트를 카드 형태로 표시
전체 포스트 목록: 나머지 포스트들을 리스트 형태로 나열
빈 상태 처리: 포스트가 없을 때 친화적인 메시지 표시
2. 포스트 작성 및 수정 페이지 (FormPage)
Velog와 유사한 직관적인 포스트 작성 환경을 제공합니다.
ㄱ. 주요 기능
CodeMirror 에디터: 마크다운 작성 및 실시간 미리보기
이미지 업로드: 드래그 앤 드롭으로 간편한 이미지 첨부
태그 시스템: 포스트 분류를 위한 태그 기능
카테고리 분류: React, TypeScript, JavaScript, Next, CSS 등 기술별 분류
ㄴ. 에디터 특징
실시간 마크다운 미리보기 (좌: 에디터, 우: 프리뷰)
마크다운 문법 툴바 (헤딩, 굵게, 기울임, 코드블록 등)
이미지를 드래그 앤 드롭하면 자동으로 Firebase Storage에 업로드
포스트 작성 시 필수 항목 검증 (제목, 내용, 카테고리)
3. 포스트 상세 페이지 (DetailPage)
깔끔하고 읽기 좋은 포스트 읽기 환경을 제공합니다.
마크다운 렌더링: GFM(GitHub Flavored Markdown) 지원
TOC(목차) 자동 생성: 헤더 기반 네비게이션
스크롤 진행도: 읽기 진행 상황 시각화
포스트 관리: 작성자 전용 수정/삭제 기능
4. 로그인 페이지 (LoginPage)
GitHub OAuth를 통한 간편 로그인 시스템입니다.
관리자 인증: 특정 GitHub 계정만 로그인 허용
자동 리다이렉션: 로그인 후 원래 페이지로 이동
5. About 페이지 (AboutPage)
개발자 소개 및 이력을 담은 포트폴리오 성격의 페이지입니다.
6. 일반 유저의 메인화면
7. 404 페이지
ㄱ. 주요 기능
사용자 경험
다크모드 지원: 시스템 설정에 따른 테마 자동 전환 
반응형 디자인: 모바일/태블릿/데스크톱 최적화
스크롤 진행바: 헤더에 읽기 진행도 표시
부드러운 애니메이션: CSS transition을 활용한 자연스러운 UI
콘텐츠 관리
실시간 마크다운 에디터: 작성과 동시에 미리보기 제공
이미지 최적화: Firebase Storage를 통한 효율적 이미지 관리
카테고리 필터링: 기술 스택별 포스트 분류 및 검색
읽기 시간 계산: 포스트 길이 기반 예상 읽기 시간 표시
인증 & 보안
GitHub OAuth: 안전한 소셜 로그인
권한 기반 라우팅: 인증된 사용자만 작성/수정 가능
환경변수 보안: Firebase 설정 정보 암호화
ㄴ. 배포 및 운영
배포 플랫폼
Vercel: 자동 빌드 및 배포 파이프라인
도메인 연결: 커스텀 도메인 설정 가능
환경변수 관리: Vercel 대시보드를 통한 설정 관리
성능 최적화
Code Splitting: React Router의 지연 로딩 활용
이미지 최적화: WebP 포맷 지원 및 리사이징
번들 최적화: Webpack을 통한 파일 크기 최소화
보완할 점
ㄱ. 현재 한계점
SEO 최적화 부족: SSR이 없어 검색엔진 최적화 한계
댓글 시스템 미구현: 독자와의 소통 기능 부재
검색 기능 없음: 포스트 내용 기반 검색 불가
카테고리 시스템: 하드코딩된 카테고리, 동적 관리 필요
백업 시스템: Firebase 의존도가 높아 데이터 백업 방안 필요
ㄴ. 개선 계획
Next.js 마이그레이션: SSR/SSG를 통한 SEO 개선
검색 엔진 구축: Elasticsearch 또는 Algolia 도입
댓글 시스템: Firebase 기반 실시간 댓글 기능
향후 발전 방향
ㄱ. 백엔드 자체 구축
현재는 Firebase에 의존하고 있지만, 점진적으로 자체 백엔드로 전환할 계획입니다.
Node.js/Express 또는 NestJS로 API 서버 구축
PostgreSQL 또는 MongoDB로 데이터베이스 이전
AWS S3 또는 Cloudinary로 이미지 저장소 변경
Redis를 활용한 캐싱 시스템 도입
ㄴ. 고도화 기능
머신러닝 기반 포스트 추천 시스템
마크다운 템플릿 시스템
다국어 지원
ㄷ. 구독 시스템 및 RSS 피드
관리자 페이지: 포스트 통계 및 관리 도구
PWA 지원: 오프라인 읽기 및 푸시 알림
마무리
- 이 블로그는 단순한 포스트 작성 도구를 넘어서, 개발자로서의 성장 과정을 기록하고 공유하는 플랫폼입니다. - - Firebase의 간편함에서 시작해 점차 복잡한 아키텍처로 발전시켜 나가며, 기술적 도전과 학습의 장으로 활용할 예정입니다.
- 개발자라면 누구나 한 번쯤 꿈꾸는 '나만의 블로그'를 현실로 만들면서, 기술적 성장과 함께 진화하는 플랫폼으로 키워나가겠습니다.