프론트엔드와 백엔드 차이 - 백엔드 개발자가 된 이유

📌 프론트엔드(Front-end)

 

🔸 웹 사이트 혹은 애플리케이션과 같이 구축한 서비스를 사용자가 이용하는 인터페이스(UI)를 만드는 과정을 의미. 즉, 사용자가 직접 보고 상호작용 할 수 있는 웹의 전반적인 시각적인 영역을 담당

• 여기서 말하는 상호작용을 구체적으로 해석하면, 사용자의 감정, 만족도, 인지, 행동 등을 포함하며 단순히 웹의 기능뿐만 아니라 사용자가 겪으면서 발생하는 모든 요소를 의미하고, 이를 UX(User Experience)라 한다.
  
  
• 이전에 강연을 들었던 오늘의집 FE CTO님의 강연에서도 사용자가 겪을 UX에 대해서 개발자는 늘 염두에 두고, 개발에 임해야된다고 강조하셨다. 배포된 웹사이트 혹은 제품의 경쟁력을 향상시키고, 단순히 보여지는 기능적인 UI를 뛰어 넘어서 사용자에게 감동을 주고 임팩트있는 디자인을 선보인다면, 내가 근본적으로 웹 개발자로서 꿈을 꾸게 된 계기인 사용자의 요구와 니즈를 정확히 파악해서 만족도를 높일 수 있는 효과를 누릴 수 있겠다. UX를 고려하여 개발하는 실직적인 이점으로는 사용자 테스트나 디버깅 과정에서 발생하는 문제를 줄일 수 있어서 개발 시간과 비용을 단축시키는데 도움이 될 수 있다.
  
  
  

🔸 요약

1. 사용자가 직접 보고, 상호작용하는 웹 전반적인 시각적인 영역을 담당해서 개발
2. 클라이언트 단에서 서버와 데이터를 주고받을 수 있도록 API를 연동, 백엔드와 연결을 통해 동적인 기능 구현 수행
3. 단순히 기능적인 UI를 넘어서 효율적인 개발과 사용자의 니즈를 만족시키기 위해 UX를 염두에 두고 개발

🔸 기술스택

• HTML : 웹 페이지의 구조 정의하는데 사용하는 마크업 언어(기본적인 뼈대 구성)
  
  
• CSS : 웹 페이지의 디자인과 레이아웃 담당
  
  
• JavaScript : 웹 페이지에 동적인 요소를 추가, 사용자와의 상호작용, 데이터 동적 처리 가능
  • 개인적으로 자바스크립트는 공부를 깊게 하면 할 수록 정말 어려웠던 것 같다...
  • 이전 회사에서 DB 서버의 데이터를 가져올 때 주로 AJAX 방식과 Fetch 방식으로 화면단에 데이터를 표출하였다.
  • 실시간으로 DB에 들어오는 데이터를 즉각 표출하기 위해서 다른 XMLHttpRequest(XHR) 방식과 Axios 방식도 사용해봤었는데, 클라이언트 요청을 추가적으로 중단하는 작업 등을 수행한다거나 비동기적인 코드를 직관적으로 사용할 수 있는 Fetch 이기에 해당 방식을 더 많이 사용해보았다.
  • 이 밖에도 비동기 처리 로직을 구현하면서 콜백 지옥에 빠진다거나, 호이스팅 개념과 스코프, 클로저로 인한 트러블도 많이 겪었었다.
• Sass : css로 정의한 코드들을 재사용한다는 이점과 모듈 단위로 사용할 수 있고, 부모-자식 상속성으로 유지보수하기 수월하게 간결한 코드로 생산 가능
  
  
• 반응형 웹 : 해당 개념은 이전 상단에 언급했다시피, UX의 일환으로 사용자에게 최적의 가독성을 위해 이용하는 기기(디바이스)의 디스플레이 크기와 해상도에 맞게 웹 페이지를 디자인하는 것, 대표적으로 미디어 쿼리
  
  
• 프레임워크 : 이 밖에도 컴포넌트 기반으로 재사용 가능한 UI를 활용하는 React, 타입스크립트 기반으로 MVC 패턴을 사용하는 Angular, 개발자 친화적으로 템플릿을 사용해서 쉽고 빠르게 제작할 수 있는 Vue 등이 있다.
  • 일반적으로 워낙 방대한 커뮤니티 생태계와 많은 레퍼런스 자료들이 상세히 나와있는 리액트가 현재까지 점유율이 제일 높다. Facebook에 의해서 개발되었기 때문에 다양한 라이브러리와 플러그인을 제공받을 수 있어서 대형 기업들 또한 신뢰성을 가지고 활용하는 측면이 있는 것 같다. 
    
    

---

📌 백엔드(Back-end)

 

🔸 웹 사이트 혹은 애플리케이션의 '눈에 보이지 않는 뒷단'을 의미. 프론트엔드와 달리 사용자는 직접 볼 수 없지만, 웹 서비스의 핵심 기능을 수행

• 데이터 관리 및 처리 측면 : 사용자 정보, 제품 정보, 주문 정보 등 모든 데이터를 저장, 관리, 처리. 데이터베이스(DB)를 사용하여 데이터를 체계적으로 관리하고, 필요에 따라 검색, 수정, 삭제 등의 작업을 수행
  
  
• 비즈니스 로직 구현 측면 : 로그인, 결제, 상품 검색 등 웹 서비스의 핵심 기능을 구현. 프로그래밍 언어를 사용하여 다양한 기능을 개발하고, 웹 서비스의 핵심 로직을 구현
  
  
• 서버 관리 및 운영 측면 : 웹 서비스가 안정적으로 작동하도록 서버를 관리 및 운영. 서버 성능을 모니터링하고, 보안 문제를 해결하며, 필요에 따라 서버를 확장 가능
  
  

---

 

1. 서버 로직 개발
   • API 개발 : 애플리케이션 혹은 시스템 - 서비스 간 상호작용을 가능하게 하는 것
     • 데이터 교환 및 기능을 요청할 수 있는 방법을 제공 => 한 시스템의 기능을 다른 시스템에서 사용 가능
     • Restful API
       • 인터넷 상 시스템 간의 상호작용을 설계하기 위한 아키텍처
       • HTTP URI 통해서 자원 명시, HTTP 메서드(POST, GET, PUT, DELETE) 통해서 CRUD 적용
       • Create(POST), Read(GET), Update(PUT), Delete(DELETE)
       • 장점 : REST API가 의도하는 바가 명시되어있기에 의도하는 바를 쉽게 파악 가능, HTTP 프로토콜 기반이므로 다양한 플랫폼과 언어에서 사용 가능, 각 API 호출이 독립적이기 때문에 서버 설계를 단순화 시킬 수 있음, HTTP 프로토콜의 캐싱 기능을 통해서 반복된 요청을 재요청하지 않아도 되기 때문에 네트워크 대역폭 사용을 줄여 성능 최적화 가능
       • 단점 :  HTTP 메서드(GET, POST, PUT, DELETE)가 제한적이기 때문에 복잡한 트랜잭션이나 쿼리를 수행하기 어려움, 클라이언트 단에서 요청하고자 하는 데이터가 많을 때 애플리케이션 성능에 영향을 줄 수 있음, HTTP를 사용하기 때문에 보안에 취약한 문제가 발생
         
         
2. 데이터베이스 관리
   • DB에서 데이터를 생성(Create), 읽기(Read), 갱신(Update), 삭제(Delete) 기능 개발
   • DB 성능을 향상시키기 위해 쿼리 튜닝 및 최적화, 인덱스 관리
   • 스키마 및 테이블, 컬럼 관리
     
     
3. 보안
   • 인증 및 권한 부여 : 사용자 인증과 권한을 관리해서 시스템 보안 유지(JWT)
   • 보안 취약점 관리 및 패스워드 암호화(Spring Security - Password Encoder)
4. 서버 관리 배포 
   • 서버 구성
   • CI / CD : 서비스 지속 제공 및 서버 배포
     • 소규모 및 개인으로 많이 하는 것은 Spring Boot 프로젝트에서 maven 이나 gradle로 jar 파일로 빌드한다음 해당 서버에서 cmd - jar 파일 위치 실행 혹은 PowerShell로 jar 파일 실행. 명령어는 cd 파일 위치 - java -jar 파일명.jar 을 입력해서 실행하지만, 개인적으로는 배치파일로 만들어서 서버 배포 및 서비스 시작 시간을 단축시켜 바로 실행하게끔 하는 편
     • 위 jar 파일로 서버 실행하는 것에 치명적인 단점은 물론, Spring 에서 지원해주는 Hot Swap 기능을 이용해서 서버를 닫지 않아도 되는 것이 있는데, 코드를 수정해서 재배포를 할 때, 서버를 끄고 다시 재실행하는 경우가 많았다. 이렇게 되면, 서버를 새로 재시작되었기 때문에 이전에 설정되었던 로직의 시작 분기 혹은 스케줄러가 재동작하는 문제를 겪었었다.
       
       
     • 일반적으로 기업에서는 자동화된 빌드 / 테스트/ 배포 과정을 지원하는 Jenkins(젠킨스)를 사용하는 것 같다.
       • 플러그인으로 확장 가능(버전관리, 빌드 도구, 배포 도구 등 많음)
       • 소스 코드의 변경 사항을 자동으로 감지하고, 빌드 및 테스트 작업을 수행한 후 빌드가 성공이 되면 자동 배포 가능
       • Git 등의 형상관리 시스템과 통합될 수 있어서 소스코드의 변경 사항을 쉽게 알 수 있고, 자동 실행 가능
         
         
5. 성능 최적화
   • 응답 시간 개선 : 보통 서비스하고 있는 클라이언트에서 데이터를 가시화하는 앞단의 자바스크립트 코드쪽 부분 혹은 데이터를 DB에서 호출하는 인터페이스 쿼리를 튜닝해서 응답 시간을 개선해보았었다. 개인적으로 DB 쿼리 성능 개선부분은 SQLD 자격증을 취득하고나서 더욱 재미를 붙이게 되었는데, 다른 한 편으로 들었던 생각은 그만큼 DB 스키마 설계를 정말 잘해야겠다고 생각이 들기도 하였다. 초기에 스키마, 테이블, 컬럼 및 전반적인 DB 설계 구조를 잘 그려야 데이터를 호출할 때, 추가적인 테이블 JOIN으로 연산을 부하시키지 않고 처리 속도를 단축시킬 수 있으며 인덱스 절로 WHERE 절에 많이 포함을 시켜서 조회하는 시간을 단축시킬 수 있는 경험을 통해 그 중요성을 자각하게 되었다.
     
     
     

🔸 기술스택

• Java(언어) : 객체지향 프로그래밍 언어, OOP 원칙 따름 => 코드 재사용성, 확장성 및 유지보수 용이
  
  • OS 운용체제 위 (JVM) - 자바가상머신 위에서 동작하기 때문에 독립적으로 다양한 플랫폼에서 작동 가능
  • 메모리 관리를 자동으로 해주는 이점이 있음(가비지 컬렉터), C++은 가비지 컬렉터가 내장되어 있지 않아서 개발자가 직접 메모리를 관리해줘야 한다. 이전 회사에서 드론 관련된 프로그래밍을 개발하시는 분의 말씀을 경청했었는데, 비록 메모리를 따로 신경써야하는 부분이 존재하지만, C++이 더욱 Low-Level에 가깝기 때문에 정밀한 시스템(임베디드 등) 및 하드웨어에 접근하고, 제어하는 부분에서 중요한 역할을 하는 장점이 있다.
  • 자체 내장되어있는 멀티스레딩 기능을 활용해서 하나의 프로그램 내에서 동시에 여러 작업 수행 가능
  • 방대한 표준 라이브러리를 제공해서 파입 입출력, GUI 개발 등 다양한 작업을 지원
• Python, C, C++, PHP, Ruby 등 다양한 프로그래밍 언어 사용 (웹 서비스의 특성과 개발자 선호에 따라 다름)
  
  
• PostgreSQL(DB) : 표준 SQL 지원하는 강력한 RDBMS
  • 이전 회사에서 가장 많이 사용한 DB - 지리공간 정보시스템(GIS)
  • 복잡한 쿼리, 외래 키, 트랜잭션, MVCC 등 여러 기능들을 지원
  • 개발자가 직접 사용자 정의 함수를 만들 수 있어서 유연성이 있음
  • 대규모 데이터셋을 가지고 효율적인 쿼리 수행을 도움
  • 명확한 SQL 표준이 있고, 지속적으로 새 표준 기능들을 추가하고 있음
• MySQL, MariaDB, MongoDB 등 다양한 데이터베이스들이 존재
  • 학부때 MySQL과 MariaDB로 프로젝트를 진행해보았었는데, 둘의 문법상 차이는 없고, 호환성이 거의 100% 호환된다. 최근에는 버전업을 진행하면서 일부 차이점이 존재하나, MySQL이 오라클에 인수되면서 그 안에 계셨던 개발자분들 일부가 MariaDB를 개발하였기 때문에 호환성을 유지하면서도 독립적인 발전을 이어가고 있는 것 같다.

 

---

 

📌 백엔드 개발자가 된 이유

입사 전

예전, 교육기관에서 프론트엔드 과정의 교육을 받았었다. 웹의 기초적인 지식부터 다양한 언어와 프레임워크, 형상관리인 Git 사용법 등을 다뤄보았고, 최종적으로 SNS 마켓의 팀프로젝트 결과물과 좋은 기회로 자바스크립트 언어에 대한 전자책 출판도 하게 되었다. 수료후 나온 결과물과 스스로의 실력을 객관화 하였을 때 많이 부족하다고 느껴 조금 더 취업 준비 기간을 길게 끌고갔다. 그 과정에서 정말 포기하고 싶은 순간들도 있었고, 개발 실력의 러닝 커브가 계단형이란걸 알고 있음에도 불구하고 더 나아질 기미와 정체되고 있다는 불안감에 사로잡혀있기도 하였다. 하지만, 내게 정말 운이 좋게도 현직 백엔드 개발자로 8년동안 계신 사촌누나분께서 정말 많은 조언과 아낌없는 응원을 받게 되었다. 덕분에 포트폴리오를 잘 작성해서 판교에 위치한 GIS를 기반으로 서비스하는 중소기업에 입사하게 되었다. 

 

입사 후

초기 입사 후의 개발 실무는 정말 냉혹했고, 힘들었다. 사수분은 존재했으나 스스로 문제들을 해결하여만 하였고, 퇴근 후에도 개인 데스크톱으로 끊임없이 개발 공부를 진행했다. 배워야 하는 것들은 산더미인데, 물리적인 시간이 부족하여 주말에도 시간을 할애하여 학습을 병행했다. 대부분의 회사에서의 개발 실무는 프론트엔드, 백엔드 나뉠 것 없이 모두 할 줄 알아야 한다. 그 포지션이 나뉘어지는 곳은 그만큼 실력과 여러 역량들이 뒷받침 되어야 갈 수 있는 곳들이었다. 입사 전 열정과 패기 가득한 에너지로 뭐든 부딪히면서 성장해야되겠다는 단단했던 포부가 이리저리 치이면서 내가 가고자 하는 이 길이 정말 맞는지에 대한 회의감도 들었었다. 하지만, 사촌누나께서는 내가 현재 들고 있는 생각들과 그 어려움은 개발자로 일하시는 모든 분들이 거쳐온 과정이라고 말씀하셨다. 그 말씀에 힘입어 악착같이 버티면서 이 모든 과정이 내게 큰 자산으로 돌아오는 소중한 시간이다라고 생각하며 사내 1인 1프로젝트를 진행했었었다. 약 1년 동안 공기관인 한국농어촌공사 내부 저수지 수위측위 시스템을 대쉬보드 형식으로 가시화할 수 있는 웹 페이지를 개발하였다. 실시간으로 들어오는 데이터를 DB에서 호출하여 숫자로 가시화하고, 실시간 차트 라이브러리를 통해 보여주며 수위 분석 페이지에서는 튜닝한 쿼리를 개선해가며 시간 / 일 / 주 / 월 / 년 단위로 조회할 수 있는 부분, 이벤트 로직을 개발하여 어느 지점에 도달하거나 문제 발생시 문자 API 연동을 통해 해당 번호로 문자알림 서비스까지 개발하고 퇴사를 하게 되었다. 

 

백엔드 개발자 포지션을 희망하는 이유

서비스를 제공하는 시스템의 핵심을 다루는 것에 매료되었다. 클라이언트 단에서 사용자에게 보여질 화면에 대해 직접적으로 상호작용할 수 있는 프론트엔드만의 매력도 분명 존재하지만, 둘 다 경험해 본 나로썬 데이터 처리, API 구축, 보안, 서버 관리 등 애플리케이션이 실제 어떻게 작동하는지 전반적인 흐름을 깊이 이해하면서 시스템의 핵심 로직과 데이터의 흐름에 더 관심을 갖게 되었다. 그리고, 기술적인 이슈와 데이터 처리 과정을 해결하고 트러블 슈팅 경험을 통해 얻어지는 보람이 도전의식과 더 큰 만족감으로 다가왔다. 조금 더 큰 성장을 위해 배움을 선택한 만큼 초심으로 돌아가 기본부터 착실히 내부공사를 잘 마친 뒤에 내가 궁극적으로 개발자가 된 이유인 개발로 가치가 확장되는 과정을 통해 사용자의 요구사항과 니즈를 정확히 파악해 더 큰 만족감을 드릴 수 있도록 성장지향형 개발자가 되도록 하겠다.