[개념 정리] 클라이언트/서버, 프론트/백 엔드

Jeeseob Kim·2022년 1월 21일
2

개념 정리

목록 보기
1/1

기본적으로 우리가 사용하는 웹, 앱 등의 (인터넷 연결이 필요한)소프트웨어는 간단하게 살펴보면


아래 사진 처럼 유저 - 클라이언트 - API 서버 - DB의 구조를 가진다.

Client와 Server

실제로는 여기서 정말 엄청난 서버들이 있고, 다 분산처리되고... 어렵다ㅠㅠ


어쟀든 흔히 FE(Front-End), BE(Back-End)라고 구분하는 형태는 여기에서 나온다고 할 수 있다.


Front-End


네트워크를 기준으로 왼쪽이 User인 우리가 보는 Client로 해당 소프트웨어(스마트폰, 컴퓨터 등)의 화면을 구현하는 것이 Front-End개발이다.


보통 웹 프론트엔드라고 하면 크롬에서 F12누르면 나오는 그 코드를 구현한다고 생각하면 된다.
실제로는 다양한 프레임워크, 라이브러리 등을 포함한 코드의 연산으로 그러한 코드가 만들어지는 것이고, 그것과 똑같이 만들진 않는다.

아래와 같이, 웹페이지의 보여지는 부분을 만드는 것이 프론트엔드(클라이언트)개발자라고 생각하면 된다.


네이버 메인페이지

사진속 네이버 메인페이지 처럼 스마트폰, 컴퓨터 등 전자기기를 통해 내 눈에 들어오는 것들을 구현하는 개발자이다.

오브젝트들의 위치나 형태, 서버에서 받아온 데이터를 어떻게 제공할 것인지 등에 대하여 고민하고, 이를 개발하는 개발자이다. 디자이너, 백엔드 개발자 등과 협업을 진행할 것이고, UI/UX에 대한 고민을 많이 할 것 같다.



Back-End


네트워크를 기준으로 오른쪽 네트워크 뒷단의 서버를 개발하는 것이 Back-End 개발이다.

우선 서버란 다른 소프트웨어(클라이언트)에게 서비스를 제공하는 소프트웨어(혹은 하드웨어)이다.

우리가 흔히 사용하는 웹에서 백엔드는 앞에서 설명한 프론트엔드가 필요로하는 데이터(사진, 기사, 등등)을 DB(DataBase)에서 가져와 보여주는 것이라고 생각하면 된다.


보통 이러한 백엔드 서버는 API를 제공하는 형태로 개발되는데
API란 Application Programming Interface의 약자로
간단하게 말하면 클라이언트와 서버를 이어주는 인터페이스라고 할 수 있다.

인터페이스를 설명하기 위해서 자동차를 예시로 들 수 있을 것 같다.

우리는 자동차가 동작하는 원리를 알고있진 않다.
하지만 핸들, 엑셀, 브레이크 등을 조작하는 간단한 조작방법만 배운다면,
자동차를 어렵지 않게 운전할 수 있다.


즉 내부의 어려운 원리를 숨기고,

사용방법만을 사용자에게 노출시켜 사용에 편리함을 주는 것이다.

서버에서의 API도 이러한 형태로,
프론트엔드에서 원하는 데이터를 DB에 저장하거나, DB에서 가져오는 등의 기능을 개발하고 이를
원리를 몰라도 사용할 수 있도록 인터페이스의 형태로 제공하는 것이다.



아직 공부하고 있는 학생입니다.
잘못된 정보, 수정해야되는 부분이 있다면 언제든지 말씀해주시면 수정하곡 배우겠습니다.
긴 글 읽어주셔서 감사합니다.

profile
Data Engineering, Spark, Distributed System을 공부하는 대학원생 입니다.

0개의 댓글