"할 일 추가했는데, 새로고침하면 사라져요." "분명히 저장했는데 왜 안 남아있는 거예요?"
11편에서 프론트엔드와 백엔드를 배웠으니 이제 만들 수 있을 것 같은데, 막상 만들어보면 "어? 왜 새로고침하면 다 날아가지?"가 되는 거예요.
저장한다는 게, 생각보다 여러 곳에서 일어나요. 어디에 저장하느냐에 따라 "새로고침하면 사라지냐, 남느냐"가 달라져요.
이 글을 읽고 나면
- 저장소 3가지(메모리, localStorage, DB)를 구분할 수 있다
- 상황에 따라 어디에 저장할지 판단할 수 있다
- AI한테 '어디에 저장해줘'를 정확히 요청할 수 있다
저장소 3가지
💡 복습: localStorage는 11편에서 배웠죠? "메모장에 혼자 적어둔 것"이에요.
1️⃣ 메모리: 새로고침하면 사라짐
메모리는 프로그램이 돌아가는 동안만 유지돼요.
카카오톡 대화 입력창에 "안녕" 쓰다가
→ 전송 안 하고 앱 종료
→ 다시 켜면? "안녕"은 사라짐
드롭다운이 열렸는지, 모달창이 떠 있는지 같은 건 저장할 필요 없죠. 이런 "지금 화면이 어떤 상태인가"를 프로그래밍에서는 State라고 불러요.
2️⃣ localStorage: 내 브라우저에만 남음
11편에서 배웠듯이, localStorage는 "메모장에 혼자 적어둔 것"과 같아요. 새로고침해도 남아있지만, 다른 기기에서는 안 보여요.
3️⃣ DB: 영구 저장, 공유 가능
서버에 있는 데이터베이스(DB)에 저장하면 어디서든 접근 가능해요. 다른 기기, 다른 사람도 볼 수 있어요.
DB는 엑셀 같은 표(테이블) 형태예요.
어디에 저장할지 판단하기
예시로 보면:
| 기능 | 저장 위치 | 이유 |
|---|---|---|
| 게시글 | DB | 다른 사람도 봐야 함 |
| 좋아요 수 | DB | 모든 사람이 같은 숫자 |
| 다크모드 설정 | localStorage | 내 선호도 |
| 로그인 전 장바구니 | localStorage | 임시 저장 |
| 입력창 내용 | 메모리 | 저장 필요 없음 |
실제 대화 예시: 할 일 관리 서비스
이게 바이브 코딩이에요.
- 일단 시킨다
- 확인한다
- 문제 있으면 다시 프롬프트
- 잘 안 풀리면 그때 기술적으로 들어간다
이 시리즈는 이걸 바꾸려는 거예요. 저장소 3가지를 알면 "다른 기기에서 안 되네?" → "아, localStorage니까 그렇구나" → 논리적으로 이해할 수 있어요.
AI한테 요청하는 패턴
오늘의 핵심 정리
셀프체크
오늘 배운 내용, 제대로 이해했는지 확인해볼까요?
□ 게시글 데이터는 어디에 저장해야 하나요?
□ 다크모드 설정은 어디에 저장하는 게 좋을까요?
□ 드롭다운 메뉴가 열렸는지 닫혔는지는 어디에 저장하나요?
□ AI에게 유저 정보를 저장해달라고 할 때 정확한 표현은?
(정답: DB - 공유 필요 / localStorage - 개인 설정 / 메모리 State - 휘발성 OK / DB의 users 테이블에 저장해줘)
다음 글 예고
오늘은 데이터를 어디에 저장하는지 배웠어요.
다음 글에서는 서비스들이 대화하는 방법: API를 알아볼게요.
"프론트엔드가 백엔드한테 어떻게 데이터를 요청하는 거예요?" → API라는 게 뭔지, 어떻게 요청하는지 배워요.
이 시리즈 로드맵
PART 1: 마인드셋 (1~4편)
"AI를 부리는 마음가짐"
[ 1편 ] AI는 유능한 신입사원이다 ✅
[ 2편 ] 바이브 코딩이란 무엇인가 ✅
[ 3편 ] 바이브 코더가 알아야 할 것 ✅
[ 4편 ] 목표 수준: 유능한 상사 되기 ✅
↓
PART 2: 도구 세팅 (5~9편)
"일단 만들어보기"
[ 5편 ] 필수 도구 설치 ✅
[ 6편 ] 코드 에디터 세팅 ✅
[ 7편 ] 터미널 기초 ✅
[ 8편 ] Git & GitHub 기초 ✅
[ 9편 ] AI 코딩 도구 세팅 ✅
↓
PART 3: 기술 개념 - 큰 그림 (10~15편)
"전체 구조 이해하기"
[ 10편 ] 프로그램의 종류 ✅
[ 11편 ] 프론트엔드 vs 백엔드 ✅
[ 12편 ] 데이터는 어디에 저장되나 👈 지금 여기
[ 13편 ] 서비스들이 대화하는 방법: API
[ 14편 ] 프로젝트 구조
[ 15편 ] 데이터 흐름
↓
PART 4: 기술 개념 - 실무 용어 (16~20편)
"AI와 대화할 때 쓰는 용어"
[ 16편 ] 컴포넌트와 페이지
[ 17편 ] 상태(state)란 무엇인가
[ 18편 ] 에러 읽는 법
[ 19편 ] 타입과 린트
[ 20편 ] 디버깅 기초
↓
PART 5: 실전 - 프론트엔드 (21~24편)
"화면 만들기"
[ 21편 ] Next.js 프로젝트 시작
[ 22편 ] 첫 화면 만들기
[ 23편 ] 컴포넌트 분리와 스타일링
[ 24편 ] 사용자 입력 처리
↓
PART 6: 실전 - 백엔드 연동 (25~28편)
"데이터 저장하기"
[ 25편 ] Supabase 세팅
[ 26편 ] DB 테이블 만들기
[ 27편 ] CRUD 구현
[ 28편 ] 인증(로그인) 붙이기
↓
PART 7: 실전 - 배포 (29~31편)
"세상에 공개하기"
[ 29편 ] Vercel 배포
[ 30편 ] 환경변수 관리
[ 31편 ] 도메인 연결
↓
PART 8: 독립 성장 (32~35편)
"혼자서도 성장하기"
[ 32편 ] 에러 해결 루틴
[ 33편 ] 공식 문서 읽는 법
[ 34편 ] 바이브 코더 성장 로드맵
[ 35편 ] 에필로그
"저장해줘"에서 "todos 테이블에 user_id랑 같이 저장해줘"로. 어디에 저장하는지 명확히 지시하면 AI가 정확히 구현해요.
궁금한 점이나 다뤘으면 하는 주제가 있으면 댓글로 남겨주세요!