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

백엔드 중에서 웹서버와 웹애플리케이션, 웹프레임워크 각각의 역할에 대해 차이점을 설명하고 프론트엔드와 어떠한 방식으로 통신하는지 쉽게 설명드리겠습니다.

 

 

목차

 

 

프론트엔드 (Front-End)

 

*주요 프로트엔드 기술

프론트엔드는 사용자가 직접 보는 화면을 구성하는 부분입니다. 예전에는 HTML, CSS, JavaScript, JSP를 많이 사용했지만 요즘에는 React, Vue,js 같은 자바스크립트 프레임워크를 사용해 프론트엔드와 백엔드를 분리합니다. 

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

1. 서버 사이드 렌더링 (JSP, Thymeleaf 등) - 프론트엔드와 벡엔드가 같은 서버에서 실행되면 백엔드가 HTML를 만들어 클라이언트에 보내줍니다.

 

2. REST API + 프론트엔드 프레임워크 (React, Vue.js) - 백엔드는 데이터를 JSON 형태로만 제공하고 프로트엔드는 API를 통해 데이터를 받아 화면을 구성하게 됩니다.

 

 

반응형

 

 

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

 

*웹서버와 웹애플리케이션

웹서버 - HTTP 프로토콜 기반으로 클라이언트로부터 받은 요청에 정적 콘텐츠를 제공하는 소프트웨어입니다. 가장 많이 사용하는 웹서버는 Apache, NginX 등이 있어요.

 

웹 애플리케이션 서버(WAS) - 클라이언트는 웹 브라우저를 통해 웹 서버에 접속합니다. 웹 서버는 클라이언트로부터 받은 동적 컨텐츠에 대한 요청을 웹 애플리케이션 서버에 전달하고 WAS는 처리한 후 결과를 다시 클라이언트에 전달합니다.

WAS는 웹서버의 기능도 포함하기 때문에 웹서버의 기능을 제공할 수는 있지만 역할을 나눔으로써 효율적으로 처리할 수 있게 됩니다. 자바로 개발한다면 주로 Tomcat(톰캣)을 사용합니다.

 

웹 서버와 웹 애플리케이션의 차이 설명은 링크에서 자세히 보실 수 있습니다.

 

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

웹프레임워크 - 웹 프로그램을 만들기 위해서는 세션 처리, 로그인/로그아웃 처리, 권한, 데이터베이스 처리 등 구현해야할 기능들이 셀 수 없이 많습니다. 이런 기능들이 이미 구현되어 있는 것이 바로 웹 프레임워크입니다. Spring(스프링), 부트스트랩 등이 웹프레임워크입니다.

 

웹프레임워크는 애플리케이션의 로직과 구조를 정의하고 웹 애플리케이션 서버(WAS)는 그 로직을 실행하는 환경을 제공합니다. 다시 말해 웹 프레임워크를 통해 애플리케이션을 개발하고 웹 애플리케이션 서버(WAS)를 통해서 애플리케이션을 서버에 배포해 사용자들이 웹브라우저를 통해 접근할 수 있게 해줍니다. 

 

*스프링부트

스프링 부트는 이렇게 웹 애플리케이션을 쉽고 빠르게 만들 수 있도록 도와주는 자바 웹 프레임워크입니다. 스프링 부트에는 웹 프로그램을 개발하는 데 필요한 도구와 기능이 준비되어 있습니다. 예를 들어 스프링 부트에는 톰캣 웹 애플리케이션 서버가 내장되어 있고 설정도 자동 저장됩니다.

 

스프링과 스프링 부트 소개는 링크에서 더 알아보실 수 있어요.

 

*스프링부트 프로젝트 구조와 빌드도구

스프링부트 디렉토리구조를 통해 어떤 식으로 동작하는지 개념을 잡을 수 있습니다.

 

관련포스트

웹프레임워크 | Vue.js 프론트엔트 프레임워크 소개

웹프레임워크 | Nuxt.js 프레임워크 개념과 구조

웹프레임워크 | 부트스트랩 소개와 시작하기

웹사이트 풀스택 개발자. 무엇을 개발하나?