비전공자(공인중개사)가 To-Do 앱을 직접 만들고 ☁️ 클라우드 배포까지 성공한 후기

소개

저는 개발 비전공자, 현직 공인중개사입니다. 매물접수·집보기·계약처럼 이동이 잦은 중개 업무를 그때그때 정리할 '나만의 To-Do 앱' 이 필요했고, AI 도구의 힘을 빌려 직접 만들어보기로 했습니다.

화면만 만드는 데서 그치지 않고, 데이터베이스 → 백엔드 → 프론트엔드까지 직접 클라우드에 배포해서 "인터넷 어디서나 접속되는 진짜 서비스"로 완성하는 것이 목표였습니다. 코드를 모르는 비전공자에게는 정말 도전적인 목표였어요.

진행 방법

🛠 사용 도구

• AI 페어 프로그래밍: Claude (Claude Code) — 명령을 하나씩 주고받으며 코드 작성·오류 해결

• 프론트엔드: React + Vite / 백엔드: Node.js + Express + Mongoose

• DB: MongoDB → MongoDB Atlas(클라우드) / 배포: Heroku(백엔드) + Vercel(프론트엔드)

💡 활용 방식 — "한 단계씩 물어보고, 확인하고, 넘어가기"
코드를 모르니 AI에게 전체를 한 번에 시키지 않고, 작은 단위로 지시 → 결과 확인 → 다음 단계로 진행했습니다. 비전공자에게는 이 방식이 핵심이었어요.

ALT

한국어 학습 앱 스크린샷

🖼️ 이미지 ① — 완성된 To-Do 앱 메인 화면

📌 이미지 설명: 공인중개사 업무에 맞춰 만든 To-Do 앱의 메인 화면입니다. 상단에는 '진행중 · 오늘 마감 · 완료' 업무 현황이 한눈에 보이도록 숫자로 요약됩니다. 그 아래에는 검색창과 함께 매물접수 · 광고관리 · 집보기 · 계약 · 잔금/중도금 · 서류 · 고객상담 등 실제 중개 업무 흐름에 맞춘 카테고리 필터, 매매 · 전세 · 월세 거래유형 필터, 마감일·우선순위 기준 정렬 기능을 넣었습니다. 각 할 일 카드에는 마감까지 남은 D-day, 카테고리, 우선순위, 마감일, 메모가 표시됩니다. (개인정보 보호를 위해 실제 고객명·연락처·주소는 가렸습니다.)

📝 실제로 사용한 프롬프트 (발췌)

① 백엔드 서버 만들기

index.js에 MongoDB를 연결하고 서버를 실행하는 코드를 짜줘.
포트번호는 5000번, MongoDB 연결 성공 시 "연결 성공" 멘트가 뜨게 해줘.

② CRUD 라우터 만들기

할 일을 생성/조회/수정/삭제하는 라우터를 routers 폴더 아래에 따로 만들어 줘.

③ 클라우드 배포용으로 주소 분리하기

배포하면 localhost 주소가 문제가 되니까, API 주소를 .env의
VITE_API_URL 환경변수로 빼줘. 값이 없으면 로컬 주소를 쓰도록.

💻 핵심 코드 (배포에서 가장 중요했던 부분)

환경변수로 비밀 분리 — 비밀번호·실제 주소는 절대 코드/깃에 올리지 않습니다

# .env  (★ git에 올리지 않음 / .gitignore에 등록 ★)
MONGO_URI=mongodb+srv://▇▇▇▇:▇▇▇▇@cluster0.▇▇▇▇▇.mongodb.net/shinhwa-todo
VITE_API_URL=https://▇▇▇▇▇▇▇▇.herokuapp.com/todos

// index.js — 환경변수 사용 + Atlas 연결 안정화
require("dotenv").config();
require("dns").setServers(["8.8.8.8", "1.1.1.1"]); // querySrv ECONNREFUSED 해결
const PORT = process.env.PORT || 5000;             // 배포 호스트의 동적 포트 대응
const MONGO_URI =
  process.env.MONGO_URI || "mongodb://localhost:27017/shinhwa-todo";

결과와 배운 점

🎉 결과
Vercel(프론트) → Heroku(백엔드) → MongoDB Atlas(DB) 3계층이 클라우드에서 연결된 라이브 서비스를 완성했습니다. 개발자도구로 200 OK 응답까지 직접 확인했어요.

🔒 라이브 링크는 보안상 공개하지 않습니다.
이 앱은 아직 로그인 기능이 없어서, 링크를 아는 누구나 데이터를 읽고·수정·삭제할 수 있습니다. 공개 게시물에 그대로 노출하면 데이터가 오염될 위험이 있어, 데모는 캡처 이미지로 대체했습니다.

ALT

구글 크롬 브라우저 스크린샷

🖼️ 이미지 ② — 개발자도구(F12) Network 탭

📌 이미지 설명: 브라우저 개발자도구(F12)의 Network 탭 화면입니다. 배포된 프론트엔드가 데이터를 불러올 때, 요청 주소(Request URL)가 내 컴퓨터(localhost)가 아니라 클라우드 백엔드 서버를 향하고 있고, 응답 상태가 200 OK 인 것을 보여줍니다. 즉 '프론트엔드 → 백엔드 → 데이터베이스'가 모두 클라우드에서 실제로 연결되어 작동한다는 결정적 증거입니다. (응답 서버 정보와 JSON 데이터까지 정상 수신.) (실제 도메인 주소는 보안상 가렸습니다.)

ALT

다양한 옵션을 보여주는 웹페이지 스크린샷

🖼️ 이미지 ③ — MongoDB Atlas(클라우드 DB)에 저장된 데이터

📌 이미지 설명: 클라우드 데이터베이스 MongoDB Atlas에 할 일 데이터가 실제로 저장된 모습입니다. 처음에는 내 컴퓨터 안에서만 돌아가던 로컬 DB였지만, 이 단계에서 인터넷 어디서든 접근 가능한 클라우드 DB로 이전했습니다. 앱에서 추가한 할 일이 이 클라우드 DB에 그대로 쌓이는 것을 확인할 수 있습니다. (문서 내 민감한 값은 가림 처리했습니다.)

ALT

보라색 배경의 웹페이지 스크린샷

🖼️ 이미지 ④ (선택) — 배포 성공 화면 (Heroku / Vercel)

📌 이미지 설명: 백엔드(Heroku)와 프론트엔드(Vercel) 배포가 성공적으로 완료된 대시보드 화면입니다. 빌드가 정상적으로 끝나 'Ready/Success' 상태가 되고, 외부에서 접속할 수 있는 도메인이 생성된 것을 확인할 수 있습니다. (생성된 도메인 주소는 보안상 가렸습니다.)

🧱 과정 중 시행착오 (가장 값진 학습)

🍯 나만의 꿀팁

1. "내 PC에서 되는 것 ≠ 클라우드에서 되는 것" — 포트·DB주소·API주소는 코드에 박지 말고 환경변수로 분리!

2. 비밀번호가 든 .env는 절대 깃에 올리지 않기 (.gitignore 꼭 확인).

3. 비전공자일수록 AI에게 한 번에 다 시키지 말고, 작은 단위로 지시하고 검증하며 가기.

🙋 도움이 필요한 부분

• 지금은 1인용(공유 DB)인데, 로그인/회원 기능을 붙여 사용자별로 데이터를 분리하는 방법을 더 배우고 싶습니다.

• 입문자 수준에서 보안(비밀번호 관리, CORS 제한) 을 깔끔히 적용하는 팁이 있다면 조언 부탁드려요!

🚀 앞으로의 계획

• 로그인 기능 추가 → 여러 사용자가 안전하게 쓰는 서비스로 확장

• 마감 알림, 간단한 업무 통계 기능 추가

• 모바일 화면 최적화

도움 받은 글

: MongoDB Atlas · Vercel · Heroku 공식 문서)