frontend, backend, 데이터베이스, 호스팅

예시를 가지고 한 계층 더 깊이 들어가 봅시다: 사용자가 **"프로필 저장"**을 클릭합니다.

frontend. 웹 브라우저나 모바일 앱으로 돌아가는, 눈에 보이는 앱입니다. 폼을 그리고, 클릭을 알아채고, 사용자가 입력한 내용을 모읍니다. 설계상 이것은 신뢰할 수 없습니다. 누구나 열어보고, 들여다보고, 바꿀 수 있으니까요. 그래서 frontend의 일은 보기 좋고 반응이 빠르게 느껴지는 것이지, 중요한 무언가를 강제하는 게 아닙니다.

backend. 버튼이 클릭되면, frontend는 데이터를 backend로 보냅니다 — 서버에서 돌아가는 코드죠. backend는 사용자가 로그인되어 있는지 확인하고, 데이터를 검증하고("이게 정말 이메일 주소가 맞나?"), 비즈니스 규칙을 적용한 뒤, 그제서야 저장합니다. 사용자가 함부로 손댈 수 없기에, 신뢰는 바로 여기에 머뭅니다.

데이터베이스. backend는 데이터를 데이터베이스에 넘겨 저장합니다. 마법 상자가 아닙니다 — 즉시 검색할 수 있고 절대 잊어버리지 않는, 아주 엄격한 스프레드시트들(테이블이라고 부릅니다)의 모음이라고 생각하세요. 내일이 되면 backend는 프로필을 다시 읽어 내서 또 보여줍니다.

호스팅. prod(실제 서비스) 환경에서는 이 중 어느 것도 여러분의 노트북에서 돌지 않습니다. Cloudflare, Vercel, 또는 어떤 클라우드 플랫폼 같은 호스팅 제공업체에서 빌린 컴퓨터에서 돌아갑니다. 호스팅이 있어야 여러분의 앱이 자기 컴퓨터에서만이 아니라 진짜 웹 주소에서 접근 가능해집니다.

쓸모 있는 직감 하나: 무언가 망가지면 어느 계층인지 물어보세요. "버튼이 아무 반응이 없어"는 frontend입니다. "엉뚱한 걸 저장해"는 보통 backend죠. "내 데이터를 잊어버렸어"는 데이터베이스를 가리킵니다. 계층을 짚어내는 것이 버그를 고치는 일의 절반입니다 — 그리고 AI가 실행에 옮길 수 있는 프롬프트를 쓰는 일의 절반이기도 하죠.