[WEB] 웹 프론트엔드 기초 - 3. 프론트엔드 탄생 배경: 프론트엔드, 백엔드

---

개요

• 사용자와 인터렉션은 거의 없고 단방향의 단조로운 웹 방식에서 Web 2.0 시대 맞이한 후 웹 개발 시장이 변했다.
• Web 2.0에서는 홈페이지가 동적인 화면을 제공하여 클라이언트와 인터렉션하는 하는 방향으로 발전하게 된것이다.
• 이후 Ajax, Javascript, Jquery등이 발전하게 되었다.
• 사용자와의 인터렉션이 점점 증가하는 방향으로 발전한다고 해도 프론트앤드 쪽에서는 복잡한 로직이 없었기에 Frontend, ClientSide와 같은 개념은 존재 했지만, 전문성을 나누진 않았다.

 

프론트엔드, 백엔드 탄생 배경

• 웹 산업은 점차 거대해지고, 사용자의 요구사항도 많아지면서, 웹의 복잡도가 올라갔다.
• 서버는 비즈니스 로직을 처리하랴, 페이지도 계속 렌더링하랴, 부하가 심해졌다.
• 이를 해소하기 위해 프론트엔드가 일부의 비즈니스 로직과 렌더링을 가져갈 필요가 생겼다.
• 이때, 프론트엔드의 DX(개발 경험)을 높혀주는 라이브러리들이 등장했다.

React, Vue, Angular

 

• 위  라이브러리를 기반으로 프론트엔드, 백엔드의 업무가 세분화 되며 전문성을 나눠가지게 되었다.

 

 

 

프론트엔드

• 사용자가 눈으로 보이는 모든것을 개발하는 역할(사용자 인터페이스 작업)
• 백엔드에서 가져온 데이터 입출력을 통한 비즈니스 로직 구성

프론트엔드 기술스택

• HTML, CSS, Javascript
• AngularJS, ReactJS, VueJS

프론트엔드 업무

• UI 그리기
• 비즈니스 로직 처리
• 상태관리
• Web Storage 관리

프론트엔드 목표

1. 데이터를 (예쁘게) 잘 보여주기
2. 데이터를 (화면) 조작하기
3. 서버로 데이터를 보내기
4. 서버에서 받은 데이터를 다루기

 

 

백엔드

• 사용자가 직접 볼 수 없는 웹 서비스의 서버 측 로직을 개발하는 분야
• 소프트웨어 개발 프로세스에서 서버 측 개발 분야

백엔드 언어

• PHP, C++, Java, Python, ​C#

백엔드 업무

• 사용자 인터페이스가 없는 시스템 컴포넌트 작업
• API작성
• 라이브러리 생성
• 데이터베이스 통합
•  

 

 

프론트엔드, 백엔드 비교

	프런트엔드	백엔드
기술	프런트엔드는 HTML, CSS, JavaScript 및 프런트엔드 프레임워크를 사용합니다.	백엔드는 Java, Python, Ruby, API 및 데이터베이스 관리 시스템과 같은 프로그래밍 언어를 사용합니다.
동시성	각 사용자는 고유한 애플리케이션 복사본을 가지고 있으므로 프런트엔드에서 동시성 문제를 처리할 필요가 없습니다.	백엔드는 여러 전략을 사용하여 수천 개의 사용자 요청을 동시에 처리합니다.
캐싱	브라우저 또는 클라이언트 앱은 애플리케이션의 파일을 캐싱하여 성능 개선에 사용합니다.	백엔드 시스템은 파일을 다른 서버나 CDN에 캐싱합니다.
보안	프런트엔드 개발의 보안은 대부분 사용자의 책임입니다. 프런트엔드 개발자는 주로 사용자 입력 유효성 검사 및 사용자 인증 워크플로에 집중합니다.	백엔드 개발의 보안은 데이터베이스, 백엔드 서비스 및 애플리케이션 자체를 보호하기 위해 더 포괄적입니다. 이러한 보안은 암호화, 보안 인증 시스템 및 보안 코딩 방식을 사용하여 구현됩니다.
개발 목표	프런트엔드 개발은 완전하게 기능하고 반응성이 뛰어나며 잘 설계된 사용자 인터페이스를 만드는 데 중점을 둡니다.	백엔드 개발에는 프런트엔드 개발을 지원하는 안정적인 아키텍처 만들기가 포함됩니다.
개발 기술	프런트엔드 개발자는 HTML, CSS 및 JavaScript에 대해 알고 있습니다. 프런트엔드 개발자는 프런트엔드 프레임워크를 사용하고 시각적으로 매력적인 페이지를 만들 수 있습니다. 프런트엔드 개발자는 사용자가 애플리케이션과 상호 작용할 때 발생하는 불만 사항을 해결합니다.	백엔드 개발자는 코딩 및 데이터베이스 관리 기술을 갖추고 있습니다. 코드 보안과 애플리케이션 개발 도구, 플랫폼 및 프레임워크 사용 방법도 알고 있습니다.

 

 

출처

https://aws.amazon.com/ko/compare/the-difference-between-frontend-and-backend/

https://medium.com/@june.programmer/architecture-micro-frontend%EC%9D%98-%EB%93%B1%EC%9E%A5-61062e52d44b