01기반 구축
블로그의 기반을 만들다.
React 19, TypeScript, Vite에 React Compiler를 적용하고, TanStack의 파일 기반 라우팅과 Supabase 데이터 연결을 구성했습니다.
달라진 점
앱의 공통 구조, 타입이 적용된 라우트, 블로그 조회 캐시, Vitest 테스트 환경을 마련했습니다.
- React 19
- TypeScript
- Vite
- TanStack Router
- Supabase
근거 커밋b0244f6 ↗
━━ HISTORY / 실무와 개인 프로젝트
만들고.
다시 만들고.
계속 만드는 중.
Bally’s Interactive에서의 프론트엔드 실무부터 Hugo, Next.js, React로 다시 만들어 온 개인 블로그까지. 웹을 만들고, 발행하고, 다듬어 온 기록입니다.
02 / 실무 경험
BALLY’S INTERACTIVE2022.09 — 2023.12 / 영국
프론트엔드 엔지니어
Bally’s Interactive
Bally’s Interactive에서 프론트엔드 개발자로 일했습니다. Jackpotjoy는 제가 다뤘던 웹서비스의 성격을 보여주는 대표적인 사례입니다.
여러 브랜드의 캠페인 페이지
영국·유럽·북미 대상 게이밍 플랫폼에서 React와 TypeScript로 여러 브랜드의 마케팅 랜딩페이지를 개발했습니다.
재사용 가능한 UI 구조
브랜드별 캠페인을 반복 배포할 수 있도록 재사용 가능한 컴포넌트 구조를 직접 설계하고 코드 중복을 줄였습니다. Styled-components와 Storybook 기반 UI 시스템을 운영했습니다.
API 연동과 브라우저 호환성
REST·GraphQL API를 연동하고, 반응형 레이아웃과 크로스브라우저 호환성에 대응했습니다.
기획부터 프로덕션 배포까지
다국적 팀의 디자이너·기획자·백엔드 엔지니어와 영어로 협업했습니다. 마케팅 일정에 따른 빠른 출시 주기 속에서 기획부터 실서비스 배포까지 참여했습니다.
출처: 본인 이력서 · Bally’s 경력
아래 공개 페이지는 제품의 맥락을 보여줍니다. 개별 기능의 담당 범위나 재직 당시의 화면을 증명하는 자료는 아닙니다.
공개 제품 사례 / JACKPOTJOY
03 / 세 번의 블로그
2024 → 2025 → 202601 / 2024.10 — 2024.12
m25k
Hugo / Markdown / Sass / GitHub Pages
정적 사이트로 시작한 기록 공간.
Hugo의 nostyleplease 테마를 사용해 일간·주간·월간 기록, 리뷰, 여행, 영어·한국어 글을 분류했습니다. 템플릿과 Sass로 읽기 화면을 조정했습니다.
Hugo 빌드와 GitHub Pages 배포 워크플로를 구성하고, 목록 개수와 브라우저 표시를 다듬었습니다. Markdown 파일을 중심으로 글을 관리하던 버전입니다.
02 / 2025.01 — 2025.08
minju25kim-next
Next.js 15 / MongoDB → Supabase / Plate / Tailwind / Fly.io
파일에서 발행 애플리케이션으로.
Next.js와 Fly.io로 시작해 MongoDB/NestJS 검색 백엔드를 연동했고, 이후 Supabase 기반 블로그·개발 글 목록과 유지되는 라이트/다크 테마를 구현했습니다. 작성 도구는 생성·수정·읽기 화면을 분리한 Plate 기반 에디터로 확장했습니다.
데이터베이스 기반 글쓰기와 Markdown·구조화된 에디터 값의 분리를 시도했습니다. TanStack Query 도입은 커밋 기록에서 진행 중인 실험으로 남아 있습니다.
03 / 2026.03 — 2026.09
dotcom
React 19 / Vite / TanStack Router / Supabase / TipTap
새로운 기반, 더 선명한 정체성.
현재 저장소는 Vite 앱, 파일 기반 라우팅, 통합 콘텐츠 테이블, TipTap 발행 도구를 사용합니다. 홈·콘텐츠·장비 페이지를 하나의 시각 언어로 연결했습니다.
아래 상세 기록은 이 저장소의 변화입니다. 세 저장소는 개인 블로그를 만드는 방식의 변화를 보여주며, 버전 사이의 직접적인 코드·데이터 이관 여부까지 의미하지는 않습니다.
Git에서 찾은 기록 / MongoDB를 쓰던 시기
2025.01 — 2025.04검색은 프론트엔드와 백엔드가 연결된 기능이었습니다: Next.js 검색 UI → /api/search → NestJS /search → MongoDB Atlas Search.
MongoDB로 콘텐츠 저장
NestJS 백엔드에서 Mongoose를 사용한 MongoDB 콘텐츠 생성·조회·수정·삭제 기능을 추가했습니다.
minju25kim-nest / deb0efa ↗Atlas Search와 Next.js 검색 UI
백엔드에 제목·본문·키워드를 대상으로 하는 Atlas Search 집계를 추가하고, 최대 2글자 차이를 허용하는 유사 검색을 적용했습니다. 같은 날 Next.js /api/search에서 백엔드 /search로 검색어를 전달하도록 연결했습니다.
minju25kim-nest / 9fc21e7 ↗minju25kim-next / f22bf1e ↗키보드로 다루는 검색
입력 디바운스, 슬래시 키로 검색 열기, 방향키 결과 선택, 바깥 클릭으로 닫기 등 검색 인터랙션을 다듬었습니다.
minju25kim-next / 168c774 ↗Next.js에서 MongoDB 직접 연결
이후 개편에서 공통 MongoClient 연결을 추가하고 dev 컬렉션의 글 수, 카테고리, 조회 수, 최근 글을 조회했습니다.
minju25kim-next / 09114aa ↗프론트엔드 데이터 구성을 Supabase로 전환
Next.js 저장소에서 MongoDB 연결 도구를 제거하고 개발 콘텐츠를 Supabase 기반으로 전환했습니다. 코드 변경 시점이며, 별도 백엔드의 실제 운영 종료일을 뜻하지는 않습니다.
minju25kim-next / 3f24931 ↗
04 / 현재 블로그 · 상세 개발 기록
2026.03 — 2026.09 / 오래된 순 ↓11개의 기록
- 02외부 연동운영 종료 / 2026.07
운동 기록을 사이트로 가져오다.
매일 실행되는 GitHub Actions로 Strava OAuth 토큰을 갱신하고 연간 통계와 최근 활동을 Supabase에 동기화했습니다.
달라진 점정기 데이터 수집과 활동 페이지를 연결했습니다. 이 연동 기능과 워크플로는 이후 7월 1일에 제거했습니다.
- GitHub Actions
- OAuth
- Supabase
- 03글쓰기·발행
브라우저에서 쓰고 발행하다.
Supabase 기반 개발 노트 페이지에 GitHub 로그인, 편집 화면 접근 제어, TipTap 리치 텍스트 에디터를 추가했습니다.
달라진 점서식 편집부터 글 수정까지 블로그 안에서 처리하고, 공개 목록에는 발행된 글만 표시하도록 했습니다.
- TipTap
- GitHub OAuth
- React Context
- 04외부 연동
장비 소개를 구조화된 콘텐츠로 만들다.
Supabase 레코드와 Storage 이미지 URL을 바탕으로 장비 페이지를 구현하고, 카테고리·사양·스크롤 애니메이션을 적용했습니다.
달라진 점글 중심의 사이트에서 장비의 정보와 특징을 별도로 보여주는 공간으로 확장했습니다.
- Supabase Storage
- React
- CSS
근거 커밋80abd65 ↗ - 05글쓰기·발행
흩어진 콘텐츠 모델을 통합하다.
블로그와 개발 글을 하나의 content 테이블로 합치고 기존 데이터를 이관했습니다. 읽기와 편집 경로도 /content로 정리했습니다.
달라진 점콘텐츠 유형, UUID, 발행 여부에 따른 조회 정책, 20개 단위 페이지네이션을 갖춘 공통 발행 흐름을 만들었습니다.
- SQL migrations
- Row-level security
- TanStack Router
근거 커밋53714a6 ↗ - 06디자인
사이트만의 시각 언어를 찾다.
초록색 포인트를 사용하던 화면을 신문에서 영감을 받은 브루탈리즘 디자인으로 바꿨습니다. 모노스페이스 글꼴, 큰 제목, 굵은 선과 주황색 강조를 적용했습니다.
달라진 점공통 색상 토큰과 목록형 레이아웃으로 홈, 콘텐츠, 장비 페이지의 디자인을 통일했습니다.
- CSS custom properties
- Responsive layouts
- Typography
- 07글쓰기·발행
발행 과정을 더 견고하게 다듬다.
편집 라우트의 관리자 검증과 데이터베이스 쓰기 정책을 강화했습니다. 슬러그 자동 생성·정규화·중복 검사와 초안/발행 관리 화면을 추가했습니다.
달라진 점삭제 확인과 관리자용 초안 미리보기를 제공하고, 일반 방문자에게는 미발행 글이 보이지 않도록 했습니다.
- Supabase RLS
- Route guards
- Editor UX
- 08디자인
좁은 화면에서도 읽기 편하게.
모바일 메뉴와 반응형 레이아웃, 공통 404 화면을 정리했습니다. 데스크톱 기준을 1280px로 높이고 장비 페이지의 글자 크기를 키웠습니다.
달라진 점좁은 창에서는 한 열로 표시하고, 임시 장비 통계를 실제 데이터에서 계산한 값으로 교체했습니다.
- Responsive CSS
- Theme tokens
- Data-driven UI
- 09유지보수
예시 프로젝트를 걷어내다.
사이트에서 가상의 프로젝트 소개를 제거했습니다.
달라진 점샘플 프로젝트 대신 저장소에서 확인할 수 있는 실제 작업에 포트폴리오의 초점을 맞췄습니다.
- Content curation
근거 커밋8ca1760 ↗ - 10유지보수
외부 연동의 종료도 개발의 일부.
Strava 페이지, 동기화 스크립트, 예약 워크플로와 홈의 운동 통계를 제거했습니다. 커밋에는 API 요금이 이유로 기록되어 있습니다.
달라진 점외부 연동 범위를 줄이면서도 기존 구현은 Git 기록에 남겼습니다.
- Dependency maintenance
- GitHub Actions
근거 커밋ec208dd ↗ - 11유지보수
사용하지 않는 자산을 정리하다.
디자인과 기능이 바뀐 뒤 남아 있던 미사용 자산을 저장소에서 삭제했습니다.
달라진 점현재 블로그를 유지하기 위한 정리 작업을 이어갔습니다.
- Repository maintenance
근거 커밋fbd7f1e ↗
05 / 기록의 출처
확인 기준일: . 블로그 기록은 세 저장소의 커밋, 설정, 소스 코드를 바탕으로 정리했습니다. 표시한 기간은 확인 가능한 커밋 기록이며 실제 서비스 운영 기간을 뜻하지는 않습니다.
Bally’s 재직 기간과 담당 업무는 본인 이력서를 바탕으로 작성했고, 제품 사례는 현재 공개된 Jackpotjoy 페이지를 연결했습니다. 현재 블로그의 여러 커밋에는 Claude가 공동 작성자로 기록되어 있습니다. 비공개 ChatGPT 대화는 사용하지 않았습니다.