프론트엔드 백엔드 차이 완벽 정리: 웹서버부터 프레임워크 개념까지 한 번에!

웹 개발 분야의 핵심축인 백엔드를 구성하는 웹서버, 웹 애플리케이션 서버(WAS), 그리고 웹 프레임워크의 개별적 특징과 차이점을 알아보고, 이들이 프론트엔드와 어떤 방식으로 데이터를 주고받는지 쉽게 풀어 설명해 드리겠습니다.

 

 

 

 

프론트엔드 (Front-End)

 

*대표적인 프론트엔드 개발 기술

프론트엔드는 사용자가 웹사이트에 접속했을 때 눈으로 보고 상호작용하는 UI 영역입니다. 과거에는 HTML, CSS, JavaScript 및 JSP 방식을 주력으로 사용했으나, 최근 기술 트렌드는 React나 Vue.js 같은 JS 프레임워크를 활용해 프론트엔드와 백엔드의 영역을 명확히 분리하여 개발하는 추세입니다.

 

*프론트엔드와 백엔드의 데이터 연동 방식

1. 서버 측 렌더링 방식 (JSP, Thymeleaf 등) 클라이언트와 백엔드가 한 서버 내에서 작동하며, 백엔드가 완결된 HTML 문서를 직접 생성하여 사용자 브라우저로 전송합니다.

 

2. REST API 기반 연동 방식 (React, Vue.js) 백엔드는 순수한 데이터(JSON 규격)만 통신하고, 프론트엔드는 전달받은 데이터를 해석하여 자체적으로 사용자 화면을 렌더링합니다.

 

 

 

 

백엔드 (웹서버, 웹애플리케이션, 웹프레임워크)

 

*웹서버(Web Server)와 웹 애플리케이션 서버(WAS)의 구별

웹서버(Web Server) – HTTP 통신 규약을 이용하여 사용자로부터 전송된 요청을 처리해 단순 파일, 이미지 등 정적 리소스를 제공하는 프로그램입니다. 대표적으로 Apache, Nginx 등이 대표적입니다.

 

웹 애플리케이션 서버(WAS) – 사용자가 웹 브라우저를 거쳐 요청을 보내면, 웹서버는 데이터베이스 연동이나 로직 처리가 필요한 동적 콘텐츠 요청을 WAS로 넘깁니다. WAS는 요청된 로직을 연산 후 결과물을 다시 반환해 줍니다.

WAS 내부에는 웹서버로서의 정적 처리 기능도 포함되어 있지만, 서버 부하 분산과 시스템 효율성을 위해 보통 역할을 전담 분리합니다. 자바(Java) 기반 환경에서는 Tomcat이 널리 쓰입니다.

 

관련 세부 정보는 하단 링크를 참조하시기 바랍니다.

 

*웹 애플리케이션과 웹 프레임워크 비교

웹 프레임워크 – 하나의 서비스 시스템을 만들기 위해서는 사용자 인증, 세션 유지, DB 조회 등 반복적이고 기초적인 시스템 구축이 필수적입니다. 이러한 기본 공통 도구 모음을 표준화하여 미리 제공하는 뼈대가 바로 웹 프레임워크입니다. Spring Framework나 Bootstrap 등이 대표적인 사례입니다.

 

웹 프레임워크는 프로그램 작동의 소프트웨어 로직과 구조를 담당하며, WAS는 이 애플리케이션 프로그램이 가동될 구동 환경(실행 런타임)을 제공하는 구도를 가집니다. 요약하자면, 프레임워크로 서비스를 설계 및 제작하고 WAS 위에 이를 올려 구동함으로써 최종 사용자들에게 서비스를 서비스하게 됩니다.

 

*스프링 부트(Spring Boot)의 개념

스프링 부트는 단복잡한 자바 웹 애플리케이션 빌드 과정을 혁신적으로 줄여주는 프레임워크 환경입니다. 기본적인 프레임워크 기능 외에도 톰캣(Tomcat)과 같은 웹 애플리케이션 서버가 자율적으로 탑재되어 있어 초기 복잡한 환경 설정 없이도 즉시 개발을 시작할 수 있습니다.

 

보다 구체적인 설명은 링크를 눌러 확인해 보실 수 있습니다.

 

*스프링 부트의 기본 아키텍처와 빌드 툴

관련 내용을 파악하면 전체적인 서비스의 구동 흐름 및 메커니즘을 보다 명확히 다질 수 있습니다.

 

이 게시물이 얼마나 유용했습니까?

평점 0 / 5. 참여 0

첫번째 평가를 남겨주세요!

Leave a Comment

광고 차단 알림

광고 클릭 제한을 초과하여 광고가 차단되었습니다.

단시간에 반복적인 광고 클릭은 시스템에 의해 감지되며, IP가 수집되어 사이트 관리자가 확인 가능합니다.