프론트엔드(Front-end), 백엔드(Back-end) 차이점

프론트엔드(Front - end)

프론트엔드란 유저가 보는 화면구성 및 유저와 상호작용할 수 있는 인터페이스 부분을 말한다.

 

프론트엔드

 

스마트폰의 어플을 켰을때 표시되는 화면과 버튼이나 PC를 통해 웹사이트에 접속하였을 때 사용자에게 보이는 웹 페이지 구성과 디자인, 버튼 클릭이나 스크롤을 통한 화면 전환의 과정 등 전체적인 UX(User Experience), UI(User Interface) 부분을 포함하며, 유저와 가장 먼저 상호작용하는 인터페이스 부분이다.

 

프론트엔드 개발 언어

- HTML(HyperText Markup Language)

웹 페이지의 레이아웃 및 구조를 정의하는 마크업 언어이다.

- CSS(Cascding Style Sheets)

HTML로 구조화 및 정의된 요소들의 스타일을 디자인하는 스타일 시트 언어이다.

CSS를 통해 화면의 색상, 폰트, 여백 구성, 배경 설정 등 전체적인 시각적 요소를 설정할 수 있다.

- JavaScript

웹 페이지에서 유저와 상호작용하여 실행되는 입력이나 컨텐츠 변경, 화면 페이지 변경 등의 작업을 할 수 있도록 하는 개발언어이다. 프론트엔드 측에서 가장 많이 사용되는 언어이다.

 

프론트엔드 주요 도구

프론트엔드는 유저에게 보여주는 화면 구성을 제작하는 것뿐만 아니라 웹 페이지나 애플리케이션을 이용하는 사용자 경험 자체를 제공해야 하는 만큼 여러 유용한 기술이 존재한다. 현재 가장 널리 사용되는 프론트엔드 주요 프레임워크 및 라이브러리는 다음과 같다.

 

- 리액트(React)

페이스북에서 만든 자바스크립트 라이브러리로, 웹 페이지에서 동적인 User Interface를 만들 때 주로 사용된다. 웹 페이지에서 UI 구성 및 관리, 재사용이 가능하며, Virtual DOM이라는 기능을 통해 UI 업데이트를 효율적으로 할 수 있다.  웹뿐만 아니라 모바일 애플리케이션까지 사용할 수 있어 다양한 플랫폼에서 반응형 UI를 제작할 수 있다는 장점으로 인기가 많은 라이브러리이다.

 

- 앵귤러(Angular)

구글이 만든 타입스크립트 기반 오픈소스 프레임워크로서 싱글 페이지 애플리케이션을 제작하는 데 사용되는 도구이다. 프로젝트의 생성부터 테스트, 빌드, 배포까지 모든 기능을 제공하며, MVC(Model-View-Controller) 아키텍처를 채택하여 제작된 애플리케이션은 확장성이 높다는 장점이 있다. 

 

- 뷰(Vue.js)

구글에서 앵귤러 JS 프로젝트에 참여한 이력이 있는 Evan You(에반 유)라는 개발자가 만든 자바스크립트 프레임워크이다. 가볍고 작은 용량을 가지고 있으며  리액트와 유사한 면이 많다. UI 구성에 반응형 컴포넌트 기반 접근 방식을 채택하여 각 컴포넌트는 재사용이 가능하다. 뷰 또한 Virtual DOM을 사용하여 성능을 최적화하고 UI 업데이트를 효율적으로 처리할 수 있다.

 

 

API와 라이브러리 차이

API와 라이브러리 차이

 

 

 

---

 

백엔드(Back - end)

백엔드는 유저에게 보이지 않는 서버 및 데이터베이스 등 복잡한 기능적인 부분을 말한다.

 

백엔드

 

 

프론트엔드와 달리 사용자 눈에 보이지 않으며 프론트엔드에서 유저가 선택하거나 취한 액션을 실제적으로 실행되도록 하는 기능적인 부분과 데이터베이스, 데이터 가공 및 전달, API 연결 등 서버 측 개발 분야를 총괄한다.

 

백엔드 개발 언어

- JAVA

가장 대표적인 객체지향 프로그래밍 언어로 안전성, 보안성, 이식성이 뛰어난 언어이다.

- Python

문법이 간단하고 다양한 프레임워크와 라이브러리가 지원되는 객체지향 언어이다.

- JavaScript

프론트엔드 분야에서 많이 사용되지만 백엔드 개발에서도 사용된다.

- PHP

웹 개발에 주로 사용되는 스크립트 언어로 동적 웹 페이지나 웹 애플리케이션을 많드는데 적합한 언어이다.

 

---

 

프론트엔드 백엔드 차이

프론트엔드와 백엔드의 차이를 카페로 비유해보자.

 

프론트엔드는 카페의 카운터와 같다.

고객은 카페에 들어와서 카운터 측에 표시된 다양한 카페 음료 메뉴판과 진열되어 있는 빵이나 케이크를 보고 주문을 할 수 있도록 한다. 그리고 최종적으로 원하는 음료나 빵을 카운터를 통해 주문을 하게 된다.

 

백엔드는 카페의 바리스타와 제빵사와 같다.

이렇게 카운터를 통해서 들어온 주문을 통해 카페 안쪽의 주방에서는 고객의 주문을 보고 필요한 재료와 도구를 사용하여 음료나 커피를 제조하고, 빵을 데워주는 등의 작업을 한다. 그 후 완성된 음료와 빵을 고객에게 전달한다. 이때 고객은 주방에서 어떤 도구나 방식으로 자신의 커피나 빵이 만들어지는지 볼 수 없다.

 

즉, 프론트엔드는 사용자와 직접적으로 상호작용하는 부분을

백엔드는 프론트엔드에서 필요한 정보들을 처리하고 기능을 제공하는 부분을 담당한다는 것을 알 수 있다.