사진 사진 사진 사진 사진 사진 사진 사진
사진 사진 사진 사진 사진 사진 사진 사진
사진 사진 사진 사진 사진 사진 사진 사진
사진 사진 사진 사진 사진 사진 사진 사진

WELCOME TO MY HOMEPAGE

Sungdae's
Homepage

공부하고, 기록하고, 공유하는 곳

SCROLL

개발비화

개인 홈페이지 개발에 첫 삽

그냥 어쩐 일인지 문득 홈페이지가 만들고 싶었다. 그냥 바로 시작했다. 뭐라도 하면 되지 않겠나??.. 기능을 생각해보며 파일 구조를 짰다. 개발은 백엔드부터 먼저 쌓고 프론트는 간단하게 틀만 잡았다.

멘탈이 완전 나가버렸습니다

하지만 만들다보니 문제가 생겼다. 만들면서 "이것도 있으면 좋을 것 같은데?" 하고 추가하다보니 늘어나는 파일과 DB 테이블... 결국 다시 설계를 하게 되었다. 이럴 줄 알았으면 설계를 더 해보고 시작할걸 그랬다.

군입대, 프로젝트 동결건조

입대를 앞두고 어느 날부터 커밋이 멈췄다. 정보보호병으로 군대를 가다보니 Linux와 정보 보안 공부를 열심히 하게 됐다. 결국 홈페이지는 완성하지 못한 채, 고쳐야 할 문제들만 쌓여갔다. 만들고는 싶었지만 유지보수의 문제가 가장 컸다. 배포를 하면 비용은? 문제가 생기면 대처는? 군대에 가면서 제약사항이 너무 많다.

얼마나 만들고 싶었는지 감도 안 옴

Cluade Code를 군 입대 직전에 유튜브로 접해보고, 당시엔 시간이 넉넉하지 못해서 그냥 전역하면 써볼까 생각했었다. 우연한 기회로 군대에서 바이브코딩을 해보게 되었고 이거면 지금 같은 백지상태의 머리로도 소생을 시킬 수가 있지 않을까? 하는 마음에 휴가 때 열어보게 됐다. 그리고 이번 휴가 내내 Claude와 함께 이 홈페이지를 다시 뜯어고쳤다. 복귀하는 날까지 이러고 있을 줄이야..(현재 26.06.07 17:09 ㅋㅋ..).

사용한 기술들

Node.js Runtime
Express Backend Framework
MySQL Database
Vanilla JS Frontend
HTML / CSS Markup & Style
Git Version Control
OpenAI
ChatGPT AI Assistant
Claude
Claude AI Assistant

개발 과정

2025.04.10 · Step 1

기술 스택 선정 · 환경 세팅

  • Frontend: HTML / CSS / Vanilla JS
  • Backend: Node.js (Express) + MySQL
  • MVC 패턴으로 구조 설계
  • GitHub 레포 생성, git init부터 첫 push까지 연동
  • .env로 DB 접속 정보 관리, .gitignore로 민감 파일 제외
2025.04.11 · Step 2

DB · 백엔드 구축

  • Railway에 MySQL 배포, Workbench로 원격 접속해 스키마 적용
  • Express 서버 세팅 (express · mysql2 · dotenv · nodemon 설치)
  • users · posts · comments 테이블 설계
  • 세션 인증 (bcrypt), 게시글 · 댓글 · 회원 API 전체 구현
2025.04.14 · Step 3

프론트엔드 구현 (ChatGPT 시절)

  • 로그인 · 회원가입 · 게시판 · 댓글 UI 구현
  • menubar 동적 삽입, 세션 타이머, 이미지 업로드까지
  • 다 마치지 못한 채 입대 전 여행을 떠나며 방치
  • 2025년 6월 2일 입대
2026.06.05 ~ 2026.06.07 · Step 4

휴가 · Claude로 전면 개편

  • 1년 만에 하다보니 코딩 지식이 백지 상태
  • 사용하는 AI를 ChatGPT->Claude로 변경
  • AI 보조에서 Vibe Coding + Harness Engineering
  • 밀린 버그 수정 (스키마 불일치, 권한 처리, 이벤트 중복 등)
  • 메뉴바 · 게시판 UI 전면 재설계 · Study 페이지 · 프로필 기능 추가
2026.08.08 · Now

INTRODUCE 개편 · 코드 정리

  • 휴가 복귀하고 두 달 간의 아이디어를 정리해서 외박때 반영
  • INTRODUCE 페이지를 폴라로이드 · 포스트잇으로 개편, 사진과 글은 채우는 중
  • 구상만 하던 계획을 ROADMAP.md로 문서화, 단계화
  • 전체적 틀 변화(BOARD 삭제, ARCHIVE 신설, 메뉴바 변경 등)

앞으로는?

완료 게시판 (검색, 페이지네이션, 댓글)
완료 Study 페이지 (기술 카드, Notion 연동)
완료 메인 페이지 개편 (지금 이 페이지)
완료 반응형 모바일 지원
진행 중 INTRODUCE 페이지 개편 (폴라로이드, 포스트잇)
완료 메뉴바 개편 (BOARD → ARCHIVE), 계정 시스템 제거·게시판 → 방명록 전환
진행 중 ARCHIVE 방 페이지 (맛집, 영상, 음악, 버킷리스트, 사진첩)
예정 보안 점검 후 서버 배포