개인 홈페이지

군 복무 중 사이버지식정보방에서 GitHub Codespaces를 사용하여 개발

현재까지의 성장 과정을 기록하고 공유하기 위함

Frontend

• React

• TypeScript

• Vite

• Zustand

• React Query

• toast-ui

• react hook form

• zod

Styling

• Tailwind CSS

• Framer Motion

• Lucide

• React Icon

• iconify

Backend & Database

• Supabase (Database, Auth)

Deployment & Tooling

• GitHub Pages

• GitHub Actions (CI/CD)

• GitHub Codespaces

• pnpm

• ESlint

• Prettier

Chatbot

• Google Gemini API

• Supabase Edge Function

• Deno

추가로 해야 할 것

• 라이트모드 색상 인간친화적으로 조정

• 댓글 수정/삭제 기능

• 게시물/댓글 저장/삭제 시 알림 모달 띄우기

• 게시물에 카테고리 추가 및 카테고리 별 분류

• 어드민 보안 보완

• Lighthouse 성능 모니터링 CI 자동화

• Error Boundary 구현

• 게시물 리스트 무한스크롤 구현

• 게시물 조회수 카운팅

• 팝업창 만들어보기 (오늘 하루 보지 않기)

• SEO 최적화

• 사이트맵 자동 생성

• 게시물 AI 요약 기능

• AI 스마트 태깅

• 게시물 임시 저장 기능

• 공유 기능 (URL 복사, SNS)

• 게시물 Reading Progress Bar 구현

• Storybook 도입

• Vitest, React Testing Libray로 테스트

• RSS 구현

• MSW를 사용하여 API Mocking 구현

지금까지 한거

• Vite, TypeScript, SWC 세팅

• ESLint, Prettier 세팅

• Tailwind CSS 세팅 및 CSS 변수 모듈화, Merge 도구 생성

• 기능 기반 디렉토리 구조 설계

• React Query 세팅

• ReactQueryDevtools 사용

• env 설정

• 메인 Layout 구조 잡기

• 라우팅 및 지연로딩

• Supabase 백엔드 연결

• Supabase 비동기 함수 (CRUD)

• 객체 타입 정의 (Post, Comment)

• Date Formatting 도구

• React Hook Form, Zod로 게시물 입력 폼

• 게시물 리스트, 자세히보기, 생성하기 수정하기 페이지

• Context API로 다크모드/라이트모드

• Supabase OAuth로 GitHub 로그인

• 어드민 페이지

• 게시물 카드형식/리스트 배치

• Header, Footer 디자인

• 게시물에 썸네일 이미지 추가

• 게시물 리스트 스켈레톤 UI 적용

• 깃허브 로그인해서 게시물에 댓글

• 이미지 업로드 시 Supabase Storage에 저장

• 이미지 최적화 (browser-image-compresson)

• Toast UI Editor로 마크다운 에디터 적용

• 코드 하이라이팅

• Scroll to top

• 게시물 검색 기능 (PostgreSQL, Full Text Search)

• Open Graph Tag 설정

• 사이트 Title 동적 변경 (React Helmet Async)

• Google Stitch를 사용하여 전체적인 디자인 생성

• Nano Banana를 사용하여 블로그 아이콘 생성 (파비콘)

• 간단한 챗봇 구현 (Supabase Edge Function, Gemini API, Deno)

• Supabase RLS Policy 설정

• Github Action으로 CI 구축

• Github Pages 자동 배포 설정