비전공자 PM 이 정리한 간단한 백엔드 vs 프론트엔드 정리

백엔드와 프론트엔드의 가장 큰 차이점은 어디서 동작하고 어떤 역할을 수행하느냐에 있습니다. 각 프레임워크의 역할과 차이를 정리 해 보았습니다. 

1. 동작하는 환경

• 백엔드
  • 서버에서 동작합니다.
  • 주로 데이터 처리, 비즈니스 로직 실행, 그리고 클라이언트 요청을 처리하는 역할을 합니다.
• 프론트엔드
  • 클라이언트(브라우저나 앱)에서 동작합니다.
  • 사용자가 보는 화면(UI)을 그리거나 동적인 기능(버튼 클릭, 애니메이션 등)을 구현하는 역할을 합니다.
    
    

2. 역할과 기능

백엔드의 주요 역할

• 데이터 처리: 클라이언트가 요청한 데이터를 데이터베이스에서 가져오거나 저장합니다.
• 비즈니스 로직: 특정 조건에 따라 데이터를 처리하거나 계산하는 작업을 수행합니다.
• API 제공: 클라이언트가 서버에 요청하고 데이터를 받아갈 수 있도록 API(REST, GraphQL)를 제공합니다.
• 인증 및 보안: 로그인, 권한 검사와 같은 보안 관련 기능을 담당합니다.
• 서버 관리: 서버를 안정적으로 운영하고 에러를 처리합니다.

대표 백엔드 프레임워크:

• Node.js + Express (JavaScript)
• Django (Python)
• Spring Boot (Java)
• Ruby on Rails (Ruby)
• Flask (Python, 경량 프레임워크)

프론트엔드의 주요 역할

• UI/UX 개발: 화면에 데이터를 시각적으로 표시하고 사용자가 편리하게 상호작용할 수 있도록 구현합니다.
• 동적 기능 구현: 버튼 클릭, 드롭다운 메뉴, 애니메이션 등 동적인 요소를 제어합니다.
• API 호출: 백엔드에서 제공한 API를 사용해 데이터를 가져오거나 전송합니다.
• 라우팅: 페이지 전환 시 전체 페이지를 새로고침하지 않고 빠르게 이동하도록 합니다. (Single Page Application, SPA)

대표 프론트엔드 프레임워크:

• React (페이스북)
• Vue.js (진입 장벽이 낮고 가벼움)
• Angular (구글, 대규모 프로젝트에 적합)

3. 개발 언어

• 백엔드 
  
  • 예: Python(Django, Flask), Java(Spring Boot), JavaScript(Node.js), PHP, Ruby 등
• 프론트엔드 
  • 예: React, Vue.js, Angular는 모두 JavaScript 기반입니다.

4. 예시로 이해하기

예를 들어 쇼핑몰 웹사이트를 생각해봅시다.

• 프론트엔드
  • 사용자가 보는 화면: 상품 목록, 장바구니, 결제 버튼 등
  • 동작: "장바구니에 담기" 버튼 클릭 시 백엔드에 요청을 보내고 화면에 장바구니에 담긴 상품을 업데이트합니다.
• 백엔드
  • 서버에서 수행하는 작업:
    • 장바구니에 상품을 추가하는 API를 제공
    • 데이터베이스에 해당 상품 정보 저장
    • 사용자 인증 정보 확인

5. 주요 차이점 요약

구분 백엔드 프레임워크 프론트엔드 프레임워크

동작 환경	서버(Server)	클라이언트(브라우저, 앱)
역할	데이터 처리, API 제공, 비즈니스 로직	화면 구성, 사용자 상호작용, 동적 기능
언어	Python, Java, Node.js, Ruby 등	JavaScript
프레임워크	Django, Spring Boot, Express	React, Vue.js, Angular

마무리

프론트엔드와 백엔드 프레임워크는 서로 다른 역할을 하지만 긴밀하게 연결되어 하나의 제품을 만듭니다.

• 프론트엔드는 사용자와 직접 소통하는 역할을,
• 백엔드는 그 뒤에서 데이터를 처리하고 전달하는 역할을 합니다.

PM으로서 두 프레임워크의 차이점과 각 역할을 이해하면 개발팀의 이슈를 파악하고 기능 요구사항을 더 명확하게 정리할 수 있습니다. 😊