저장 버튼 뒤에서는 무슨 일이 일어날까?

안녕하세요, 레드예요. 내가 한 게임과 짧은 감상을 남기는 웹사이트를 만든다면 어떨까요? 이름은 일단 ‘플레이 노트’라고 붙여봤어요. 오늘의 예시는 메모 칸에 ‘보스전 성공!’을 입력하고 저장하는 장면이에요.

키라리

저장 버튼을 누르면, 내 글은 어디로 가?

화면에 글자가 나타나는 것까지는 보이는데, 그 뒤는 나도 설명하기 어려웠어요. 아이코와 함께 저장 요청이 가는 길을 따라가 봤어요.

화면과 처리 프로그램은 역할이 달라요

프론트엔드: 내가 보고 조작하는 쪽

게임 목록을 보고 메모를 입력하는 화면이 프론트엔드예요. 웹에서는 주로 내 브라우저에서 보이고 작동하는 부분을 말해요. ‘보스전 성공!’을 적는 입력 칸과 저장 버튼이 여기에 해당해요.

백엔드: 요청을 확인하고 처리하는 쪽

화면이 서버 쪽에 “이 메모를 저장해줘”라고 보내는 것을 요청이라고 해요. 백엔드 프로그램은 그 요청을 받아 필요한 조건을 확인하고 처리해요. 예를 들어 로그인 상태, 메모 내용, 저장할 권한을 확인하는 거예요.

네아

저장 버튼은 화면에 있지만, 저장해도 되는지는 서버에서 확인하는 거네요.

서버: 프로그램이 돌아가며 요청에 답하는 곳

이번에는 백엔드 프로그램이 돌아가는 컴퓨터나 실행 환경을 서버라고 생각해볼게요. 메모 저장 코드를 서버에서 실행하는 거예요. 백엔드가 ‘처리하는 프로그램’이라면 서버는 그 프로그램이 일하는 곳인 셈이죠.

‘서버’는 요청에 답하는 프로그램 자체를 가리키기도 해요. 여기서는 역할을 구분하기 위해 실행 환경이라는 뜻으로 쓰고 있어요.

데이터베이스: 기록을 모아두는 곳

게임 기록처럼 나중에도 찾아야 하는 데이터를 모아 관리하는 것이 데이터베이스예요. 줄여서 DB(디비)라고 불러요. 작성자와 메모 내용을 저장해두면 나중에 그 사람의 기록을 찾아볼 수 있어요.

서버가 돌려주는 답을 응답이라고 해요. 화면은 그 응답을 받아 ‘저장 완료’나 ‘저장할 수 없음’을 보여줄 수 있어요. 단, 화면에 완료 문구가 보인다는 사실만으로 DB 저장까지 확인된 것은 아니에요.