[Web] 웹에서의 서버와 프론트 서버와 백엔드 서버

우리 회사의 프론트엔드 기술 스택은 React + Next.js + Apollo Client였다. 입사 후 Next.js를 공부하게 되면서 SSR와 CSR를 공부하며 스스로 이해가 안됐던 부분은 SSR이 ‘서버에서 완성된 HTML을 내려준다’는 부분 때문이었다.

🤔 아니… 이게 뭔소리여…? 서버는 클라이언트에서 API를 요청하면 데이터를 보내주는 그게 서버 아냐..?? 서버에서 HTML을 내려준다고??? 지금 공부해보니 별거 아니지만, 나는 이 때 이 개념이 너무너무너무 헷갈렸다🥹 그렇게 더 알아보고 찾아본 결과, 웹에서의 서버는 프론트 서버와 백엔드 서버 두가지로 나뉜다는 것을 알게 됐다.

웹 서버 (Web Server)

웹 환경에서는 브라우저(우리가 흔히 사용하는 Chrome, Safari같은 것들)가 클라이언트의 역할을 한다.우리가 주소에 어떠한 도메인을 입력하면, 컴퓨터(서버)가 요청에 대한 응답을 하는데 이 때 프론트 서버와 백엔드 서버로 나뉜다.

프론트 서버

프론트 서버는 어떤 주소에 대한 요청을 보냈을 때, Markup Language (HTML,CSS, Javascript)를 응답해서 사용자에게 GUI 환경을 제공해준다.

→ react, next, styled-components, redux 등

흔히 우리가 아는 React, Vue, Angular 등을 활용하면 프론트 서버와 백엔드 서버를 완전히 구분하여 두 기능을 독립적으로 개발할 수 있게 된다. 그렇다면 이게 어떻게 가능할까?🤔

프론트엔드 개발자가 React 라이브러리를 활용하여 클라이언트(브라우저)에게 제공할 Javascript 파일들을 ES6 + JSX 문법으로 작성하게 되면, Babel 등의 컴파일러가 모든 브라우저에서 호환 가능한 문법으로 변환해준다. 또한 Webpack 등의 모듈 번들러가 HTML, CSS, Javascript 파일들을 효율적인 방식으로 적절히 번들링하여 준비해둔다.

클라이언트가 요청을 보낼 때마다 프론트 서버는 미리 준비해둔 HTML, CSS, Javascript 파일들을 클라이언트에게 제공한다. 그러면 클라이언트(브라우저)는 전달받은 Javascript를 실행해 페이지에 렌더링을 시작한다. 즉, React 라이브러리를 활용했던 Javascript 코드는 동적으로 DOM에 렌더링을 해주기 위한 코드였던 것!

백엔드 서버

백엔드 서버는 프론트 서버와 통신하는 컴퓨터로, 사용자가 프론트 서버에서 입력 및 동작을 했을때 이에 대해 연산, 저장 등의 처리를 하는 서버라고 할 수 있다. 브라우저의 렌더링 과정에서 DB의 데이터가 필요한 경우, 백엔드 서버에게 API 요청을 보내서 필요한 데이터를 요청하고, 백엔드 서버는 이에 알맞는 데이터를 응답해준다.

→ 이러한 맥락에서 백엔드 서버를 API 서버라고도 부른다. 필요한 데이터를 전달해주는 역할만 수행할 뿐, 페이지 렌더링에 필요한 정적 리소스들을 제공해주지는 않기 때문이다.

정적 리소스와 동적 리소스

정적 리소스 (static)

정적 리소스는 변화가 없는 리소스를 뜻한다. 즉, HTML, CSS, Javascript와 같이 미리 서버에 저장해두고 서버가 요청을 받으면 응답만 해주면 되는 것들을 뜻한다. 어느 사용자에게도 동일한 결과값을 보여준다.

동적 리소스 (dynamic)

동적 리소스는 누가, 언제, 어떻게 서버에 요청했는지에 따라 결과값을 다르게 보여주는 리소스를 뜻한다. 사용자에게 맞춤형 콘텐츠를 제공해줄 수 있게 된다.
ex) 유투브의 추천 영상 (사람들마다 추천하는 영상이 다르겠지요?)

프론트 서버와 백엔드 서버를 따로 두는 이유?

백엔드 서버(API)서버는 DB 조회 및 다양한 로직을 처리하는데만 집중하도록 해야한다. 웹 서버(프론트 서버)를 통해 단순히 정적 컨텐츠를 응답해주는 역할을 맡기면서 서버의 부하를 방지할 수 있다!

출처 (Reference)

웹에서의 프론트 서버 / 백엔드 서버 (개념) - 네트워크 study6

[React] 프론트 엔드와 백 엔드 분리 시 동작 원리 (vs 풀 스택)

웹의 정적 & 동적 콘텐츠 그리고 정적 + 동적 콘텐츠

[Web] 웹 서버와 WAS의 차이를 쉽게 알아보자