잡다한기술블로그

백엔드 개발자

• 백엔드 개발자는 IT 서비스에 필수적인 데이터들과 관련된 모든 프로그램을 관리하는 직군
  • 데이터를 저장하는 데이터베이스, 데이터를 처리하기 위한 API 서버, 파일들을 저장하는 스토리지 등

• 백엔드라는 영역은 실제로 굉장히 넓음
  • 작은 스타트업에서는 소수의 백엔드 개발자가 매니지드 서비스을 활용해서 백엔드 서버들의 환경을 구축함
  • 서비스의 규모가 커지면 방대한 양의 데이터와 데이터 요청을 다루기 위해서 많은 백엔드 개발자들이 필요해지며, 백엔드 개발자의 역할이 전문적으로 나뉘게 됨
• 백엔드 개발자는 다양한 역할을 하며 큰 회사일수록 그 안에서 전문 분야를 나눠서 맡음
  • API를 개발하는 API 개발자
  • 데이터베이스를 전문으로 맡는 DBA(데이터베이스 관리자)
  • 클라우드를 전문적으로 맡는 클라우드 엔지니어 등

API 개발

• API 서버는 클라이언트에게 요청을 받아 데이터베이스에서 적절한 데이터를 넘겨주는 역할

• 백엔드 개발자는 API 서버에서 클라이언트의 요청에 응답할 수 있도록 API를 개발함
  • 로그인, 회원가입, 상품 리스트 받기, 결제하기 등 IT 제품에서 사용하는 많은 기능들은  API 서버에서 나옴
• 서비스 규모가 커질 수록 API서버를 여럿 두어서 역할 별로 나누기도 함
  • 예를 들면 로그인, 회원가입 등 유저를 담당하는 API 서버와 결제를 담당하는 API 서버로 나눔
  • 이렇게 API 서버를 유형별로 잘개 쪼개서 관리하는 방식으로 마이크로 서비스라는 개념이 존재

데이터베이스 관리

• 데이터베이스에는 서비스에 필요한 모든 데이터들이 들어 있음
  • 당근마켓을 예로 들면 당근마켓 서비스는 유저, 상품, 결제 등의 데이터를 바탕으로 동작하게 됨
  • 이때 백엔드 개발자는 해당 데이터들을 개념적으로 구분해서 넣을 수 있는 테이블(공간)을 설계하게 하고 테이블 안에는 필드를 통해 데이터를 구분하게 됨

• 상품이라는 테이블을 만들 때는 이메일, 닉네임, 성별 등의 정보들을 저장할 수 있는 필드를 설계하며 이를 데이터 모델링 한다고도 함
  • 데이터베이스를 설계할 때 ER 다이어그램 을 이용해서 시각화를 할 수 있음
• 만약 나중에 상품의 할인 기능이 들어가게 된다면 백엔드 개발자는 할인 기능 관련 데이터도 들어갈 수 있도록 테이블에 새로운 필드를 추가해야 함
  • 서비스가 발전할수록 동시에 백엔드 개발자도 데이터베이스를 계속 수정하고 확장해 나가는 걸 의미
• 데이터베이스에 쌓이는 많은 데이터들은 API 서버를 통해서 이뤄짐
  • 유저의 회원가입, 상품 찜하기, 결제 등의 모든 데이터는 API 서버를 거쳐 데이터베이스에 쌓이게 됨
  • 이 때 API 서버에서 데이터베이스와 통신을 더 빠르고 쉽게 도와주는 ORM 이라는 것이 존재

서버 & 클라우드 관리

• 웹을 제공하기 위해서는 웹 서버가 필요하고, 데이터를 제공하기 위해선 데이터베이스 서버가 필요하며 클라이언트와 데이터 통신을 하기 위해선 API 서버 가 필요함
  • 이렇게 IT 서비스를 제공하기 위해선 결국 서버들을 관리해야 함
  • 요새는 서버를 쉽게 구축할 수 있는 클라우드를 대부분 사용

• 백엔드 개발자들은 클라우드를 이용해서 서버들을 구축함
  • 서버를 구축한다는 것은 컴퓨터에 클라이언트에게 정보를 줄 수 있는 서버 프로그램을 설치하는 것을 의미
  • 아무 것도 없는 컴퓨터에서 서버 프로그램을 설치하고 그 안에 개발된 코드를 실행시키는 것
• IT 서비스의 규모가 커지면 관리해야 하는 서버들이 늘어남
  • 수많은 클라이언트의 요청을 처리하는 API 서버를 돕기 위한 캐시 서버, 수많은 클라이언트 로그를 효율적으로 처리하기 위한 분산 처리 서버 등 목적에 맞는 서버들이 나오게 됨
  • 백엔드 개발자는 서버를 구축하는 것 뿐만 아니라 효율적으로 관리하기 위해 노력함

• 클라이언트가 많아질 수록 API 서버는 처리해야 하는 요청량이 점점 많아지게 되고 서버가 바빠지면서 응답하는 속도가 느려지게 되어 결국 유저에게 불편함을 주게 됨
  • 이를 방지하기 위해 백엔드 개발자는 로드밸런싱 방식을 적용해서 API 서버 환경을 개선할 수 있음(클라우드에서 쉽게 적용 가능)
• 백엔드 개발자는 서버를 효율적으로 관리하기 위해 노력함
  • 최소한의 비용으로 최대한의 효율을 내기 위함
  • 서버들을 효율적으로 잘 관리하기 위해서 백엔드 개발자들은 아키텍처 공부가 필요
  • 클라이언트 입장에서는 같은 데이터를 내려주는 건 변함이 없지만 아키텍처에 따라 응답 속도, 백엔드 개발자가 개발하는 속도 그리고 비용 등 많은 부분이 결정됨

Reference

https://www.inflearn.com/course/it-%EA%B0%9C%EB%B0%9C%EC%A7%80%EC%8B%9D#

https://www.grabbing.me/IT-A-to-Z-By-1e1fbc981b7c4c03ac44943085ac8304

프론트엔드 개발자

• 프론트엔드 개발자는 우리가 사용하는 웹 서비스를 개발
• 모든 웹은 HTML, CSS, Javascript 언어로 구성
  • HTML, CSS는 시각적으로 볼 수 있게 화면을 보여주는 역할(화면은 고정)
  • Javascript는 사용자들이 버튼을 클릭하거나 로그인, 결제하기 등의 동적인 기능을 사용하기 위한 역할
• 웹서버를 관리하는 건 보통 백엔드 개발자가 하지만 작은 기업같은 경우는 웹서버도 프론트엔드 개발자가 같이 관리

프로덕트 디자이너와 협업

• 프론트엔드 개발자는 보통 프로덕트 디자이너와 협업을 많이 하게 됨
  • 웹에 새로운 페이지를 만들거나, 페이지 디자인이 변경될 때 프로덕트 디자이너가 선행 작업을 함
  • 디자이너가 작업을 완료하면 프론트엔드 개발자는 이를 통해 간격, 색상, 크기 등의 수치를 확인하고 코드로 적용
• 대분의 IT 기업에서는 Zeplin , Figma 같은 협업용 UI 툴을 통해 프로덕트 디자이너와 프론트엔드 개발자가 협업하며, 프론트엔드 개발자는 UI 툴을 보면서 작업을 진행
  • Zeplin은 웹 디자인의 간격, 색상, 크기 등의 수치를 확인할 수 있으며, 코드로 바꿔주는 기능까지 제공

프론트엔드 개발자의 역할

• 실제로 웹 개발은 화면만 개발하면 되는 것이 아니며, 프론트엔드 개발자는 화면 작업과 더불어 웹에서 벌어지는 모든 일들을 도맡아 함
  
  • 사용자 관점과 다르게 소스 코드 관점에서는 페이지들이 코드로 연결되어 있기 때문
  • 예를 들어 로그인 기능은 로그인 페이지에서만 작업해야 하는게 아니라 다른 페이지들도 처리를 해야함
  • 즉, 프론트엔드 개발자가 화면을 HTML, CSS로 개발하는 것은 많은 태스크 중 하나
• 웹 퍼블리셔 직군의 경우 HTML, CSS 그리고 약간의 Javascript를 사용해서 화면 구성에 중점을 두고 작업을 하는 반면 프론트엔드 개발자는 화면 구성과 함께 웹의 전체적인 동작(로그인, url 처리 등)을 전부 관리

디자인 시스템 구축

• 서비스의 규모가 커지면 자연스럽게 화면이 많아지고, 화면이 디자인되어 나올 때 통일된 규칙이 있다면 더 빠르게 프로덕트 디자이너와 프론트엔드 개발자가 일할 수 있는데 이를 위해 나온게 디자인 시스템
  • 프로덕트 디자이너는 디자인 시스템에 자주 쓰이는 컴포넌트(버튼, 모달, 텍스트) 등의 간격, 크기 등을 종류별로 정리하여 페이지마다 새롭게 디자인을 하는 것이 아닌 디자인 시스템에 있는 것을 가져다 쓸 수 있음
  • 디자인 시스템에 맞게 프론트엔드 개발자는 재사용할 수 있는 컴포넌트를 미리 개발해두고, 디자인 시스템을 바탕으로 디자인이 나와도 손쉽게 개발된 코드를 사용함

웹 빌드 환경 관리

• 프론트엔드 개발자는 복잡한 웹 빌드 환경을 관리함
  • 프론트엔드 개발자들은 프레임워크를 많이 사용하며, 대표적인 프레임워크로 React, Vue, Angular가 있음
  • 프레임워크를 이용해서 짠 코드가 웹에 보여지기 전에 빌드 작업을 거치고, 나온 결과물을 웹서버에 올려서 브라우저로 전달
  • 빌드 과정을 거칠 때 Babel, Webpack 같은 특정 툴 사용
• 웹의 변화는 빠른 반면, 브라우저는 항상 통일되어 있고 결과적으로 똑같은 화면을 보여줘야 하기 때문에 빌드 환경이 복잡해질 수 밖에 없으며 프론트엔드 개발자는 이 복잡한 빌드환경 또한 관리해줘야 함

Reference

https://www.inflearn.com/course/it-%EA%B0%9C%EB%B0%9C%EC%A7%80%EC%8B%9D#

https://www.grabbing.me/IT-A-to-Z-By-1e1fbc981b7c4c03ac44943085ac8304