[JSP] 웹 프로그래밍의 구조

클라이언트-서버 구조

- 웹 서비스 제공을 위해서는 서버 컴퓨터와 서버에서 동작하는 프로그램이 필요함

- 클라이언트 : 웹 서비스를 이용하는 사용자 

- 서버 : 웹 서비스를 제공하기 위한 서비스 공급자 

- 프런트엔드 : 클라이언트 중심의 프로그래밍(HTML, CSS, 자바스크립트) 영역 

- 백엔드 : 서버를 구성하며 서비스를 제공하기 위한 서버 쪽 프로그래밍(웹 서버 소프트웨어, 웹 프레임워크, 데이터베이스) 영역

 

HTML(HyperText Markup Language)

- 웹 문서의 구조를 정의하고 콘텐츠를 표현하는 기본 마크업 언어

- 웹을 통해 콘텐츠를 제공하려면 HTML을 사용해야 함

- HTML은 태그라고 하는 간단한 표기법으로 표현하고자 하는 정보에 의미를 부여함

<h2>안녕하세요?</h2> <img src="img/hello.png">

 

CSS(Cascading Style Sheet) 

- HTML 문서에 레이아웃과 디자인을 포함한 시각적 요소를 정의하기 위한 규격 

- HTML은 콘텐츠의 내용과 구조(레이아웃)를 정의하고 CSS에서 콘텐츠의 위치, 정렬, 글자 크기, 여백, 배경 색상 등을 정의함
- 디자인을 적용할 HTML 요소를 셀렉터(Selector)로 지정하고 원하는 디자인 속성을 부여하는 형식

 

자바스크립트(JavaScript)

- HTML 문서에서 동적으로 변하는 콘텐츠를 표현하기 위해 이벤트 처리를 하거나 서버와 연결하여 데이터를 가지고 오는 등의 역할을 하는 프로그램 언어
- HTML 문서에서 이벤트를 서버 연결 없이 동적으로 처리할 수 있는 기술임 -> 즉 서버에 새로 접속하지 않고도 화면 정보가 변하는 기능을 함
- 대표적인 자바스크립트 라이브러리(프레임워크) -> 앵귤러(Angular.js), 뷰(Vue.js), 리액트(React.js) 등

 

 

백엔드 중심 개발

- 전통적인 웹 개발 모델이며, 서버에서 모든 것을 담당하는 방식임
- 특히 자바 서블릿/JSP는 가장 인기 있는 백엔드 개발 기술임

 

(1) 백엔드 중심 개발의 장점

- 서비스 연동에 필요한 다양한 서버 환경에 대응할 수 있음

- 검색 엔진 최적화에 유리함

- 기술이 안정적이고 검증됨

- 기존에 개발된 시스템이 많고 레거시 시스템은 오랫동안 유지됨

 

(2) 백엔드 중심 개발의 단점

- 모바일 네트워크의 속도가 느리며 이용에 많은 비용을 지불해야 함

- 서버에 화면 갱신을 요청할 경우 모든 데이터가 다시 전송되어야하므로 모바일 환경 에는 부적합함

- REST API와 클라우드 인프라가 보편화되면서 기존의 대규모로 서버를 구축하는 모놀리식 아키텍처 방식보다는 소규모 서버를 연동하는 MSA 방식이 확산되고 있음

 

프런트엔드 중심 개발 

- 클라이언트에서 HTML을 가지고 있거나 서버에서 HTML만 받아오고 서버로부터 화면 구성에 필요한 데이터만 자바스크립트로 받아와 데이터와 화면을 조합해 보여줌
- 이러한 방식을 CSR(Client Side Rendering)이라고도 함

 

(1) 프런트엔드 중심 개발의 장점

- 필요한 부분의 데이터만 갱신이 가능하기 때문에 서버로부터 매번 갱신된 전체 화면 을 받아올 필요가 없음

- 실시간 데이터 갱신이 자유로움

- SPA(Single Page App), PWA(Progressive Web App) 등의 구현에 적용할 수 있음

- React.js, Vue.js 등 다양한 라이브러리/프레임워크를 사용할 수 있음

 

(2) 프런트엔드 중심 개발의 단점

- 프런트엔드 중심의 개발이라 하더라도 데이터 제공을 위한 서버는 필요함

- 데이터 제공 서버는 주로 REST API로 개발되기 때문에 백엔드 작업은 당연히 존재함

- 프런트 엔드 중심 개발을 하더라도 콘텐츠가 검색 엔진에 노출될 수 있도록 검색 엔진 최적화를 위해 SSR(Server Side Rendering)을 접목하기도 함