프론트, 백, 서버, API가 도대체 뭐야?

내가 프론트에 처음 접하고 나서, 뭐가 뭔지 헷갈렸었던 적이 있다.

다들 살아가면서 WEB을 사용해보지 않은 사람이 한 명도 없을 것이다.
하지만 우리는 정작 그 WEB이 어떻게 작동하는 지에 대해 잘 모른다.

그래서 이번에는 우리가 그 웹에 들어가서 클라이언트가 상호 작용할 때, 어떠한 원리로 어디에 전달되어 최종적으로 클라이언트가 원하던 데이터가 출력되는 지에 대해 간단히 정리해보는 시간을 가지려고 한다.

---

일상 비유로 설명하자면...

손님(프론트)이 햄버거 가게에 와서 "치즈버거 하나요!" 라고 말하면,

종업원(서버)이 그 말을 듣고 주방(백엔드)에 주문서(API) 를 전달,

주방(백엔드)은 주문서(API)에 따라 치즈버거를 만들고,

종업원(서버)이 만든 햄버거를 다시 손님(프론트)에게 갖다줌.

이정도로 이해하면 쉬울 것 같다. 다음은 각 분야에 대한 간단한 설명이다.

---

프론트(손님👱)

클라이언트에게 보여지는 부분

'프론트엔드(Front-end)'는 클라이언트에게 가장 먼저 보여지는 부분으로, 클라이언트와의 상호 작용은 여기서 이루어짐.

정보를 입력하거나, 버튼 같은 것을 클릭하게 되면 서버로 API 형식으로 요청이 보내짐.

서버에게 결과를 반환 받은 프론트는 클라이언트에게 화면에 결과를 출력함.

---

서버(종업원🤵)

요청을 받아 처리해주는 컴퓨터

'서버(Server)'는 클라이언트의 요청을 받고, 그에 맞는 정보를 보관·처리하거나 데이터를 전달하는 컴퓨터 또는 프로그램.

WEB의 중간 관리자 역할을 함.

서버는 요청 받은 것을 백엔드에 전달함.

백에게 반환받은 결과는 프론트에 'JSON' 이라는 형식으로 전달함.

---

백(주방👩‍🍳)

눈에 보여지지 않는 계산·처리 담당

'백엔드(Back-end)'는 눈에 안 보이는 '두뇌' 같은 부분으로, 데이터 저장·처리·계산·응답을 담당함.

백은 API에 따라 DB에서 정보를 찾고 결과를 서버에 다시 반환해줌.

---

API(주문서📋)

프론트와 백이 대화하는 약속된 "언어"

프론트와 백엔드가 서로 대화할 수 있게 해주는 약속된 "문법"이자 "통신 수단"임.

프론트와 백을 연결하는 유일한 통신 수단으로, 앱 간의 연결도 API로 함.

---

마무리

위 내용을 보고 도움이 되었다면 좋아요, 댓글, 팔로우 부탁드릴게요 ^^~