-
FE(Frontend)와 BE(Backend)CS 2023. 11. 19. 01:54
프론트엔드와 백엔드는 웹 애플리케이션의 서로 다른 두 부분을 나타내며, 각각은 애플리케이션 기능의 서로 다른 측면을 담당한다. 어떠한 웹 사이트에 방문하더라도 눈에 보이는 직접적인 화면이 있고 보이지 않는 숨은 부분이 존재하는데 이러한 두 부분을 프론트엔드와 백엔드로 나눌 수 있다.
FE(Frontend)?
사용자와 직접적인 상호작용을 할 수 있는 눈에 직접적으로 보이는 화면을 담당한다.
일반적으로 프론트엔드는 HTML, CSS, JavaScipt 등을 사용하여 사용자 인터페이스(UI) 요소나 디자인 등 사용자와 직접적으로 상호작용할 수 있는 웹의 시각적인 부분을 담당한다.
- HTML(Hyper Text Makrkup Language): 웹 페이지의 구조와 콘텐츠를 정의하는 마크업 언어이다. 프로그래밍 언어가 아니다.
- CSS(Cascading Style Sheets): HTML 문서에 적용되는 스타일과 레이아웃, 디자인등을 정의하는 스타일 시트 언어이다.
- JavaScript: 웹 페이지를 동적으로 제어하기 위한 프로그래밍 언어이며, 웹 페이지의 요소들을 자유롭게 조작할 수 있도록 해준다.
프론트엔드를 쉽게 이해하기 위해 사람을 예로 들자면,
HTML은 사람의 뼈를 담당한다. CSS는 우리의 피부와 옷 등 꾸밈의 요소에 해당하며, JavaScript는 우리의 동작을 담당한다고 볼 수 있다.
이와 같이 3가지가 조화를 이루어 하나의 웹 사이트를 구성하는 것이다.
BE(Backend)?
사용자의 눈에 보이지 않는 부분을 담당한다.
백엔드는 일반적으로 애플리케이션의 논리, 데이터베이스, 서버 등과 같은 작업을 관리하며, 데이터 처리와 요청 처리 및 애플리케이션의 원활한 작동을 위한 작업을 담당한다.
백엔드는 프론트엔드와 다르게 서버 측에서 동작한다. 데이터베이스 연동을 통해 데이터를 처리하고, 요청이 들어온 데이터를 제공한다.
백엔드는 프론트엔드와 다르게 다양한 서버 구현 방식이 있는데, PHP와 Node.js, JAVA, Python 등의 프로그래밍 언어를 사용하여 서버를 구현한다.
결론
프론트엔드는 사용자와 직접 상호작용하고 데이터 또는 추가 기능에 대한 요청을 백엔드에 보내며, 이러한 요청을 백엔드에서 받아서 처리하고 데이터베이스와 상호작용하며 필요한 데이터나 결과를 프론트엔드에 반환한다.
'CS' 카테고리의 다른 글
JSON, XML, YAML? (1) 2023.11.26 API(Application Programming Interface) (1) 2023.11.26 MPA(Multi Page Application) vs SPA(Single Page Application) (0) 2023.11.19 CSR과 SSR의 개념 및 동작 방식 (1) 2023.11.17 인터페이스(interface)란? (0) 2023.11.16