백엔드와 프론트엔드 역할 차이 +

이건 그냥 단순 궁금증으로 시작 된다.
백엔드를 배우는 입장과 프론트엔드를 배우는 입장에서
이 둘의 명확한 역할의 차이가 있을 것이라고 생각이 되어 조사를 시작해본다.

내가 생각하는 둘의 역할차이

프론트엔드는 실사용자의 보이는 화면을 보기 좋게 꾸미는 역할이다.
백엔드는 실제로 눈에 보이지 않는 작업을 한다.

하지만 이벤트 또는 Firebase 등등 누가 이 둘의 역할 중 누가처리하는 지 잘모르겠다...
이벤트는 작동방식이니까.. 백엔드 인가?
Firbase 도 마찬가지로 DB를 다루니 백엔드 인가..?

아래는 조사해본 내용이다.

프론트엔드

프론트엔드의 역할은 JavaScript 나 onclick() 와 같은 메서드를 처리하는 것도 포함됩니다.
왜냐하면, 이건 사용자가 웹페이지를 사용할 때 발생하는 일이기 때문입니다.

1. 화면 구성 및 디자인 (UI 개발)
2. 사용자와의 상호작용 처리 (UX 개발)
3. 서버에서 데이터를 받아오면, 화면을 동적으로 업데이트
4. 화면 구성 요소 관리 (컴포넌트화)
5. 반응형 웹 및 접근성 처리
6. 성능 최적화

즉, 화면을 구성하고, 
사용자가 클릭하면 반응하고, 
서버와 데이터를 주고받고, 
빠르고 보기 좋게 만드는 것

백엔드

백엔드는 사용자가 보이지 않는 곳에서 데이터를 처리하고, 
서버 로직을 수행하며,
웹 애플리케이션이 정상적으로 작동하도록 뒷받침하는 부분입니다. ( 웹의 뇌와 심장이라는데.. )

1. 데이터 관리 및 저장
2. 서버 관리 및 API 제공
3. 인증 및 권한 관리
4. 비즈니스 로직 처리
5. 데이터 통신 및 연동
6. 파일 및 데이터 처리
7. 서버 보안 및 데이터 보호
8. 성능 최적화 및 관리
9. 로그 관리 및 모니터링

그렇다면 백엔드는 프론트엔드를 어디까지 알아야 하는가?

HTML과 CSS의 기본 구조

• 왜 필요한가?
  데이터가 어떻게 화면에 표시되는지 알아야 데이터를 적절하게 제공가능
• 알아야하는 부분?
  HTML 구조: div, p, table 같은 [*태그] 사용법
  CSS 적용 방식: 인라인, 내부 스타일, 외부 스타일시트

JavaScript의 기초

• 왜 필요한가?
  프론트엔드가 데이터를 어떻게 처리하고 어떤 이벤트에 반응하는지 이해할 수 있음.
• 알아야하는 부분?
  기본 문법: 변수, 조건문, 반복문
  AJAX와 Fetch API: 데이터를 비동기적으로 가져오는 방법
  이벤트 처리: 버튼 클릭 시 동작하는 JS 코드

API와 데이터 형식

• 왜 필요한가?
  프론트엔드와 백엔드가 데이터를 주고받는 규칙을 이해하기 위해서
• 알아야하는 부분?
  RESTful API 설계 원칙
  HTTP 메서드: GET, POST, PUT, DELETE
  JSON 데이터 형식

웹 기본 동작 원리

• 왜 필요한가?
  브라우저와 서버가 어떻게 통신하는지 이해해야 문제를 빨리 해결할 수 있음.
• 알아야하는 부분?
  HTTP 요청/응답 구조
  쿠키와 세션: 로그인 상태를 관리하는 방법
  CORS 문제: 다른 도메인 간에 데이터를 주고받을 때 발생하는 문제

프론트엔드 프레임워크 기본 이해 (React, Vue 등)

• 왜 필요한가?
  프론트엔드가 데이터를 어떻게 보여주는지 이해해야, 적절한 데이터 구조를 설계할 수 있음.
• 알아야하는 부분?
  컴포넌트 기반 구조
  상태 관리 (State)
  Props를 통한 데이터 전달

번외

백엔드 개발자는 프론트엔드를 깊게 파고들 필요는 없지만, 기본 원리와 구조를 이해하고 있어야 한다.
특히 데이터 주고받는 부분(API)과 프론트가 데이터를 어떻게 쓰는지 정도는 알아야 협업이 수월하다.
협업 능력이 중요한 만큼, 프론트엔드 개발자가 무슨 말을 하는지 이해할 정도로 알고 있는 게 좋다.