서버와 클라이언트란? (백엔드와 프론트엔드란?)

웹사이트가 돌아가기 위해서는 컴퓨터가 두 대 필요하다. 

서버 역할을 하는 컴퓨터가 한 대, 클라이언트 역할을 하는 컴퓨터가 한 대 필요하다. 

 

유저가 접속한 컴퓨터를 클라이언트라고 하고

유저에게 필요한 것(예: 웹페이지)이 있는 컴퓨터를 서버라고 한다.

유저는 클라이언트 컴퓨터를 통해 원하는 정보를 요청하고, 

서버 컴퓨터는 요청을 받으면 필요한 정보를 찾아서 클라이언트 컴퓨터에게 보내준다.

 

구체적인 예를 들어볼까? 

우리가 검색창에 'google.com'을 입력하면 구글의 메인 웹페이지가 뜬다.

내 컴퓨터의 하드 드라이브에는 구글의 html 코드가 없는데도 나는 구글의 메인 웹페이지를 볼 수 있다. 

구글의 메인 웹페이지 html 코드는 구글 컴퓨터의 하드 드라이브에 저장되어 있다.

내 컴퓨터(클라이언트)가 구글 컴퓨터(서버)에게 메인 웹페이지를 가져오라고 요청했고,

구글의 컴퓨터가 하드 드라이브에 저장된 google의 메인 웹페이지 html를

내 컴퓨터로 보내주었기 때문에 나는 구글의 웹페이지를 볼 수 있는 것이다.

 

정리하자면 다음과 같다.

 

1. 클라이언트와 서버

클라이언트

웹브라우저가 있는 컴퓨터. 서버에게 정보를 요청함.

클라이언트 쪽의 모든 것을 통틀어 프론트엔드라고 함.

 

서버

웹서버가 있는 컴퓨터. 클라이언트에게 정보를 제공함.

서버 쪽의 모든 것을 통틀어 백엔드라고 함.

 

API (Application Programming Interface)

클라이언트와 서버가 데이터를 주고받는 방법

 

웹의 동작 방식

1) 유저가 브라우저와 인터랙션(웹사이트 접속, 클릭, 드래그 등)

2) 클라이언트(브라우저)가 서버에게 필요한 정보 요청

3) 서버가 데이터베이스에서 필요한 정보 가져옴

4) 서버가 데이터베이스에서 가져온 정보를 API로 변환

5) 서버가 클라이언트에게 API로 응답

6) 클라이언트가 API를 받아서 필요한 동작 수행

 

2. Frontend 개발자와 Backend 개발자

프론트엔드 개발자는 클라이언트 쪽, 즉 화면에 보이는 것들을 담당함. (식당 홀 담당)

백엔드 개발자는 서버 쪽, 즉 화면 뒤에서 프론트가 요청하는 것을 준비하고 전달함. (식당 주방 담당)

풀스택 개발자는 둘 다 하는 사람.

 

Frontend 개발자가 하는 일

주요 사용 언어 : HTML, CSS, Javascript, ...

- UI 개발 : 화면에 보이는 UI 요소 제작

- event에 대한 로직 개발 : 유저가 웹사이트와 인터랙션할 때(클릭, 스크롤, 드래그 등) 화면에 일어나는 일들을 처리

- 크로스 브라우징/디바이스 : 웹사이트가 모든 화면, 기기에서 잘 동작하도록 만듦

- 데이터 시각화 : 데이터를 유저가 보기 좋게 만드는 것

 

Backend 개발자가 하는 일

주요 사용 언어 : Java, Javascript, Python, PHP, ...

- API 제작 : 프론트의 요청에 API로 응답

- Data Pipeline 구축 : 데이터 ETL(Extract Twist Load)이 가능하도록 만듦 

- Infrastructure & Architecture 구성 : 서버가 어떤 상황에서도 문제없이 잘 동작하도록 만듦(ex. 접속자 수 폭등하는 경우, 서버가 공격받는 경우 등)