프론트엔드 개발자는 뭘 할까?

프롤로그

"아~ 그래서 컴퓨터.. 뭐 그런거 한다는거지?" 🤷
"어어 대충맞아.." 🤦‍♂️

정확히 딱 잘라 말하지 못한 나를 반성하며, 프론트엔드는 뭘 하고 뭘 잘 해야 할지 정리해 보겠다.
일에 익숙해질 때마다 이 글을 보며 내가 1인분은 잘 하고 있는지 회고하겠다.

프론트엔드 개발자란?

✅ 웹 페이지의 레이아웃, 디자인, 인터랙션 등 화면에 보이는 것을 다룸

✅ HTML, CSS, JavaScript 등의 언어와 라이브러리(예: React, Angular, Vue.js) 또는 프레임워크를 사용

✅ 프론트엔드 코드는 사용자의 브라우저에서 실행됨

✅ 백엔드에서 받은 데이터를 사용자에게 표시하고, 사용자의 입력을 백엔드로 전달

✅ 백엔드에서 받은 데이터를 사용자에게 표시하고, 사용자의 입력을 백엔드로 전달

프론트엔드 개발자가 하는 일

1. 정보를 화면에 "예쁘게" "잘" 보여주기

• HTML, CSS를 통해 서버에서 받은 데이터를 적재적소에 배치
• HTML, CSS로 디자인 만들기
• 재사용, 유지보수에 용이하도록 디자인을 컴포넌트화 하기
• 시맨틱, 접근성, 검색엔진 최적화 등 누구나 접근 가능하고 많은 사람들이 볼 수 있도록 하기

2. 화면에서 데이터 조작하기

• 사용자의 입력을 받아 다른 데이터로 변경 또는 화면을 전환하기
• 사용자의 이벤트 감지 및 분류
• 기존 데이터와 조립하여 원하는 데이터로 변경, 화면에 데이터 출력

3. 서버로 데이터 보내기 & 받은 데이터 다루기

• 사용자에게 받거나 조립한 데이터를 서버로 전송
  (API 활용)
• 서버에서 정의한 스키마에 맞게 내부적으로 타입 설정
• 서버로 보내기 전 데이터 검증, API에 맞게 데이터 구조 변경
• API 양식에 맞춰 URL, Method, Header, Params, Body 등을 만들어 전달
• 데이터 로딩, 중복 방지 등 중간 과정처리
  (아이디 중복확인 등 서버로 넘어가기 전 거름망으로 걸러주는 과정)
• 서버 응답에 따른 문제 원인 확인 및 문제 해결
  (이미지 로딩이 너무 느려요 등 디버깅&예외처리)

4. 개발환경 관리 및 배포

• 빌드 : 소스코드 및 프로그램 구성요소를 모아 실행할 수 있는 파일로 만듦
  (모바일 앱은 플레이스토어에 올리 수 있는 .apk 형태의 파일로 빌드 해야함)
• 배포 : 빌드가 끝난 파일을 사용자가 접근할 수 있는 환경에 전시
  (플레이스토어에 업로드하여 사용자들이 보고 다운로드 할 수 있도록 함)
  
  
  

그리고 백엔드

프론트엔드의 환상의 짝짝꿍 백엔드.
백엔드가 하는 일은 화면에 보이지 않는다.

✅ Python (Django), JavaScript (Node.js), Java (Spring) 등 다양한 언어와 프레임워크 사용

✅ 백엔드 코드는 서버에서 실행됨

✅ RDBMS(MySQL, PostgreSQL) 또는 NoSQL(MongoDB, Cassandra) 데이터베이스를 사용해 데이터를 저장, 관리