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

웹 개발을 시작하면 가장 먼저 마주치는 개념이 바로 프론트엔드와 백엔드입니다. 이 글에서는 프론트 엔드와 백엔드가 어떻게 연결되는지 살펴보겠습니다.

Front-End (프론트 엔드)

프론트엔드 주요 기술

프론트엔드는 사용자가 직접 보고 상호작용하는 화면을 만드는 영역입니다. 웹 브라우저에서 동작하며, 레이아웃·스타일·동적 반응 등을 구현합니다.

❶ HTML - 뼈대

❷ CSS - 스타일

❸ Javascript - 동작

❹ JSP - 서버

프론트엔드와 벡엔드 연결방식

최근 프론트엔드 개발의 중심은 React와 Vue.js로 옮겨졌습니다. 이 프레임워크들은 복잡한 UI를 컴포넌트 단위로 나눠 관리하기 쉽게 해주고, 백엔드와 완전히 분리된 개발이 가능해집니다.

❶ 서버 사이드 렌더링 - JSP, Thymeleaf 같은 서버 템플릿 엔진을 사용하는 방식입니다. 백엔드 서버가 데이터를 조합해 완성된 HTML을 만들고, 그 결과를 브라우저에 전달합니다. 프론트엔드와 백엔드가 같은 서버에서 실행됩니다.

❷ REST API + 프론트엔드 프레임워크 - 현재 가장 많이 사용하는 현대적인 방식입니다. 백엔드는 JSON 형태의 데이터만 제공하는 REST API 서버 역할을 하고, 프론트엔드(React, Vue.js)가 이 데이터를 받아 화면을 직접 구성합니다.

Back-End (백 엔드)

Web Server (웹 서버)

웹서버는 HTTP 프로토콜을 기반으로 클라이언트(브라우저)의 요청을 받아 정적 콘텐츠를 제공하는 소프트웨어입니다. 정적 콘텐츠란 HTML 파일, 이미지, CSS, JavaScript 파일처럼 서버에 그대로 저장된 파일들을 말합니다.

Web Application Server (웹 애플리케이션 서버)

웹 애플리케이션 서버(WAS, Web Application Server)는 동적 콘텐츠 처리를 담당합니다. 사용자 요청에 따라 데이터베이스를 조회하고, 비즈니스 로직을 실행해 결과를 생성합니다.

일반적인 요청 흐름은 이렇습니다. 브라우저 → 웹서버(정적 처리) → WAS(동적 처리) → 데이터베이스 순서로 요청이 전달됩니다. WAS는 처리 결과를 다시 웹서버를 통해 브라우저에 전달합니다.

웹서버와 웹애플리케이션의 역할을 분리하면 정적 파일은 웹서버가 빠르게 처리하고, WAS는 핵심 비즈니스 로직에만 집중할 수 있어 서버 전체 효율이 높아집니다. 또한 웹서버가 외부 요청을 1차로 처리하므로 보안 측면에서도 유리합니다.

Web Framework (웹 프레임워크)

웹 애플리케이션을 개발하다 보면 반복적으로 구현해야 하는 것들이 있습니다. 세션 처리, 로그인/로그아웃, 권한 관리, 데이터베이스 연동, 예외 처리 등이 대표적입니다.

웹 프레임워크는 이런 공통 기능을 미리 구현해 제공하는 소프트웨어 도구입니다. 개발자는 반복 작업 대신 비즈니스 로직 구현에 집중할 수 있습니다.

웹 프레임워크는 애플리케이션 설계 도구로 로직과 구조를 정의하고 웹 애플리케이션 서버 (WAS) 는 프레임워크로 만든 애플리케이션이 실제로 동작하는 서버 환경을 제공합니다.