Lesson 12 of 20

데이터는 어디에 저장될까 — 브라우저 vs 서버

혼자만의 서랍과 모두의 금고

웹페이지는 새로고침하면 모든 게 초기화됩니다. 그런데 이상하죠?

다크 모드를 켜 두면 다음에 와도 다크 모드
이 강의의 진도 체크가 유지되는 것도 마찬가지예요

서버에 로그인하지도 않았는데 어떻게 기억할까요? 답은 브라우저 안에도 저장소가 있기 때문입니다.

localStorage

글자 형태의 이름표=값 저장소. 약 5MB. 브라우저를 꺼도 남습니다.

sessionStorage

같지만 탭을 닫으면 사라집니다. 잠깐 쓰는 임시 메모용.

IndexedDB

브라우저 안의 진짜 데이터베이스. 표·인덱스·트랜잭션까지 지원합니다.

Cookie

서버와 자동으로 함께 오가는 작은 쪽지. 로그인 상태 유지에 씁니다. 4KB 정도.

🎮 직접 확인해 보세요

아래 상자에 메모를 저장한 뒤 이 페이지를 새로고침해 보세요. 서버에는 아무것도 보내지 않았는데도 메모가 그대로 남아 있습니다.

High school혼자만의 서랍과 모두의 금고

여기서 중요한 갈림길이 나옵니다.

자료를 내 브라우저에 둘까, 서버에 둘까

	브라우저 (프론트)	서버 (백엔드)
누가 보나	나만	모두
기기를 바꾸면	사라진다	따라온다 ✔
속도	즉시	왕복이 필요
믿을 수 있나	사용자가 고칠 수 있다 ⚠	믿을 수 있다 ✔

"혼자만의 서랍" 과 "모두의 금고" 는 쓰임이 다르다

비유 — 내 방과 은행

둘 곳	맞는 것
내 방 서랍	일기 · 메모 · 자주 쓰는 것
은행 금고	돈 · 계약서 · 남과 관련된 것

남이 봐야 하거나 내가 못 고쳐야 하는 것은 서버로

쇼핑몰로 보면

자료	어디에	왜
다크 모드 설정	브라우저	나만 쓰는 취향
최근 본 상품	브라우저	가벼운 편의
장바구니	서버	기기를 바꿔도 남아야
주문 · 결제	서버	고칠 수 없어야 한다

가격을 브라우저에 두면 0원으로 고쳐서 주문한다

High school결정적인 한계

note 의 경고를 구체적으로 봅시다.

브라우저에 있는 것은 사용자의 것이다

사용자가 할 수 있는 일

도구	할 수 있는 것
개발자 도구 (F12)	저장된 값을 보고 고친다
콘솔	자바스크립트를 직접 실행
네트워크 탭	서버로 가는 요청을 본다

브라우저에서 막은 것은 막힌 게 아니다

가장 흔한 실수

// 브라우저에서 확인
if (수량 > 재고) { alert("재고 부족"); return; }
서버로전송(주문);

사용자가 이 줄을 건너뛰면 그냥 전송됩니다.

브라우저 검증은 편의일 뿐 — 보안이 아니다

비유 — 놀이공원 키 제한

어디서 재나	효과
집에서 스스로 재고 오세요	지키는 사람만 지킨다
입구에서 직원이	모두 지켜야 한다 ✔

검사는 통과해야만 하는 곳에 있어야 한다

그러면 브라우저 검증은 왜 하나

필요합니다. 다만 목적이 다릅니다.

어디	목적
브라우저	친절 — 왕복 없이 바로 알려 준다
서버	안전 — 진짜 방어선

둘 다 한다 — 하나만 하려면 서버를 한다

브라우저에 저장해도 좋은 것

다크 모드 설정
글자 크기 취향
강의 진도 체크
로그인 전 임시 장바구니

절대 브라우저에만 두면 안 되는 것

회원 정보 · 비밀번호 🚫
실제 주문 · 결제 내역 🚫
성적 · 의료 기록 🚫
여러 사람이 함께 보는 데이터 🚫

그래서 진짜 데이터는 서버로 갑니다

이제 데이터를 내 컴퓨터 밖으로 내보냅니다. 인터넷 어딘가에 있는 컴퓨터, 서버(server)에게 맡기는 거예요.

🖥️ 프론트엔드

브라우저 · 내 화면

HTML / CSS / JavaScript
보여주기와 클릭 받기
누구나 들여다볼 수 있음

요청 (Request)
"상품 목록 줘"

응답 (Response)
HTML 또는 JSON

🗄️ 백엔드

서버 · 데이터베이스

Python / Flask + SQLite3
판단하고 저장하기
아무도 못 건드림

이 왕복 한 번이 웹의 전부입니다. 여러분이 유튜브에서 영상을 누르는 순간에도 정확히 이 일이 일어나요.

High school백엔드 DB 가 주는 세 가지 선물

note 의 세 가지를 왜 그런지와 함께.

① 어느 기기에서든 같은 자료

폰에서 담은 장바구니가 컴퓨터에서도 보입니다.

자료가 기기가 아니라 계정에 붙어 있으니까

② 여럿이 나눠 볼 수 있다

이게 가장 큰 차이입니다.

기능	브라우저 저장으로
댓글	불가능 — 남이 못 본다
재고	불가능 — 모두가 같은 숫자를 봐야
순위	불가능

"모두가 같은 것을 본다" 는 한 곳에 있어야 가능하다

③ 사용자가 고칠 수 없다

서버의 DB 는 서버만 고칩니다.

반드시 서버에	왜
가격	0원으로 고치면 안 되니까
포인트 · 잔액	같은 이유
권한 (관리자 여부)	가장 위험
주문 상태	"배송 완료" 를 스스로 못 만들게

"믿을 수 있는 진실은 한 곳에만 있다" — 단일 진실 공급원

비유 — 성적표

성적을 학생이 들고 있는 종이에만 적으면? 고쳐 올 수 있습니다.

학교 서버에 있으면 학교만 고칩니다. 학생이 든 종이는 사본일 뿐이죠.

사용자가 든 것은 항상 사본이라고 생각한다

🎮 진짜 서버에 글을 남겨 보세요

아래는 이 강의 서버(Flask + SQLite3)에 실제로 저장되는 방명록입니다. 방금 만진 localStorage 위젯과 결정적으로 다른 점이 있어요 —

글을 남기고 휴대폰으로 이 페이지를 열어 보세요. 똑같이 보입니다.
다른 사람이 남긴 글도 보입니다. 데이터가 공유되고 있다는 증거예요.

글을 쓸 때마다 브라우저가 서버에 보낸 실제 HTTP 요청과 서버가 실행한 실제 SQL이 아래에 표시됩니다.

High school지금 이 순간에도

note 가 이 페이지 자체를 예로 듭니다. 멋진 마무리예요.

지금 보고 있는 이 강의도 서버의 DB에서 온 것이다

방금 일어난 일

주소창에 URL 을 넣었다
브라우저가 서버에 요청했다
서버가 DB 를 읽었다
HTML 로 만들어서 보냈다
브라우저가 그렸다

14·15강에서 2~4번을 직접 만든다

1강에서 여기까지

강	무엇이 되었나
1	상자 하나
2·3	칸막이 · 한 줄
5·6	표 · 표들의 모음
10	표끼리 이어졌다
12	인터넷 너머에 있다

같은 발상이 층을 쌓으며 여기까지 왔다

남은 여덟 강이 하는 일

강	층
13	진실을 보관 (SQLite)
14	판단한다 (Flask)
15	화면을 만든다 (Jinja2)
16	꾸민다 (Bootstrap)
17~20	쓰기 · 쇼핑몰 · 로그인 · 배포

네 층이 각자 자기 일만 하는 것 — 그게 좋은 설계다

🤔 Check yourself

친구가 남긴 방명록 글이 내 화면에도 보이는 이유는?