클라이언트-서버 구조
웹 서비스를 제공하기 위해서는 서버(Server) 컴퓨터와 서버에서 동작하는 여러 프로그램이 필요하다. 이때 서버에서 동작하는 프로그램 영역을 백엔드(Back-end)라고 한다.
서비스를 이용하는 쪽은 클라이언트(Client)라고 한다. 클라이언트는 스마트폰, 데스크톱이 될 수 있으며 자동차, TV, 냉장고 등에서도 인터넷과 웹 사용이 가능하기 때문에 이러한 기기까지도 클라이언트로 볼 수 있다. 클라이언트에서 웹 서비스를 이용하려면 웹 브라우저라고 하는 소프트웨어가 필요하며 클라이언트에서 동작하는 프로그램 영역을 프론트엔드(Front-end)라고 한다.
웹 프로그래밍의 구조
- 클라이언트 : 웹 서비스를 이용하는 사용자이다.
- 서버 : 웹 서비스를 제공하기 위한 서비스 공급자이다.
- 프런트엔드 : 클라이언트 중심의 프로그래밍(예 : HTML, CSS, JavaScript) 영역이다.
- 백엔드 : 서버를 구성하며 서비스를 제공하기 위한 서버 쪽 프로그래밍(예 : 웹 서버 소프트웨어, 웹 프레임워크, 데이터베이스) 영역이다.
HTML/CSS/JavaScript
HTML/CSS/JavaScript는 프론트엔드(클라이언트) 영역을 구성하는 핵심 프로그램 기술이다. 이러한 언어는 개별적으로 사용하지 않고, HTML을 중심으로 각각의 역할에 맞게 기능을 구현하고 서로 상호적용한다.
HTML
HTML(HyperText Markup Language)은 웹 문서의 구조를 정의하고 콘텐츠를 표현하는 기본 마크업 언어로 웹을 통해 콘텐츠를 제공하려면 HTML을 사용해야 한다. HTML은 태그라고 하는 간단한 표기법으로 표현하고자 하는 정보에 의미를 부여한다. 예를 들어 화면에 제목으로 사용할 텍스트는 <h1>~<h6> 태그를 사용하고, 이미지를 보여주기 위해서는 <img> 태그를 사용한다.
CSS
HTML 문서에 레이아웃과 디자인을 포함한 시각적 요소를 정의하기 위한 규격이다. HTML은 콘텐츠의 내용과 구조(레이아웃)를 정의하고 CSS(Cascading Style Sheet)에서 콘텐츠의 위치, 정렬, 글자 크기, 여백, 배경 색상 등을 정의한다. 따라서 디자인을 적용할 HTML 요소를 셀렉터(Selector)로 지정하고 원하는 디자인 속성을 부여하는 형식이다.
JavaScript
HTML 문서에서 동적으로 변하는 콘텐츠를 표현하기 위해 이벤트 처리를 하거나 서버와 연결하여 데이터를 가지고 오는 등의 역할을 하는 프로그램 언어다. HTML은 단순한 텍스트 파일이기 때문에 한번 작성된 내용은 수정하기 전까지는 항상 내용이 동일하다. 따라서 웹에서 새로운 뉴스, 날씨, 실시간 검색 순위, 상품 정보 등이 접속할 때마다 변하는 것은 일반적으로 서버에서 데이터베이스 연동, 처리 등의 백엔드 프로그램을 통해 구현된다.
그런데 JavaScript는 HTML 문서에서 이벤트(버튼 클릭 등)를 서버 연결 없이 동적으로 처리할 수 있는 기술이다. 즉 서버에 새로 접속하지 않고도 화면 정보가 변하는 기능을 한다. 앵귤러(Angular), 뷰(Vue), 리액트(React) 등은 프론트엔드 개발을 위한 대표적인 자바스크립트 프레임워크와 라이브러리이다.
자바스크립트(JavaScript)는 자바(Java)와 이름만 비슷할 뿐 전혀 다른 언어다.
백엔드 중심 개발과 프론트엔드 중심 개발
예전에는 웹 개발이 서버에서 이루어지는 백엔드 프로그래밍이 대부분이었으나, 점차 클라이언트 유형 중에서 스마트폰의 비중이 높아지고 REST API와 MSA(Micro Service Architecture)등의 새로운 서버 구현 기법이 확산되면서 소위 프론트엔드 중심의 개발이 인기를 끌고 있다.
백엔드 중심 개발
백엔드 중심 개발은 전통적인 웹 개발 모델이며, 서버에서 모든 것을 담당하는 방식이다. 자바 서블릿/JSP는 인기 있는 백엔드 개발 기술이다.
백엔드 중심 개발의 가장 큰 문제점은 모바일 네트워크의 속도가 느리며 이용에 많은 비용을 지불해야 한다는 것이다.
서버로부터 가져와야 하는 HTML은 데이터 이외에도 화면 구성에 필요한 각종 태그와 속성, CSS, 자바스크립트 코드, 이미지 등이 모두 포함된 것이다. 더불어 서버에 화면 갱신을 요청할 경우 모든 데이터가 다시 전송되어야 하므로 모바일 환경에는 부적합한 요인이다.
또한 REST API와 클라우드 인프라가 보편화되면서 기존의 대규모로 서버를 구축하는 모놀리식 아키텍쳐(Monolithic Architecture) 방식보다는 소규모 서버를 연동하는 MSA 방식이 확산되었고 전통적인 백엔드 개방 모델에도 많은 변화가 진행되고 있다.
백엔드 동작의 개요
- 클라이언트 요청은 URL 형태다.
- 서블릿과 자바 또는 Node.js 등을 통해 데이터베이스와 연동한다.
- JSP에서 HTML과 데이터를 조합하여 페이지를 구성한다.
- 클라이언트에 전달되는 응답은 HTML 형태다.
백엔드 중심 개발의 장점
- 서비스 연동에 필요한 다양한 서버 환경에 대응할 수 있다.
- 검색 엔진 최적화에 유리하다.
- 기술이 안정적이고 검증되었다.
- 기존에 개발된 시스템이 많고 레거시 시스템은 오랫동안 유지된다.
프론트엔드 중심 개발
프론트엔드 중심 개발은 클라이언트에서 HTML을 가지고 있거나 서버에서 HTML만 받아오고 서버로부터 화면 구성에 필요한 데이터만 자바스크립트로 받아와 데이터와 화면을 조합해 보여준다. 이러한 방식을 CSR(Client Side Rendering)이라고도 한다.
물론 프론트엔드 중심의 개발이라 하더라도 데이터 제공을 위한 서버는 필요하다. 데이터 제공 서버는 주로 REST API로 개발되기 때문에 백엔드 작업은 당연히 존재해야 한다. 또한 프론트엔드 중심 개발을 하더라도 콘텐츠가 검색 엔진에 노출될 수 있도록 검색 엔진 최적화를 위해 SSR(Server Side Rendering)을 접목하기도 한다.
프론트엔드 동작의 개요
- 클라이언트 요청은 URI 형태다.
- 자바 서블릿, JAX-RS, Node.js 등을 통해 데이터베이스와 연동한다.
- 클라이언트에 전달되는 응답은 JSON 형태다.
- 클라이언트는 전달 받은 JSON 데이터를 화면(HTML)과 조합(렌더링)한다.
엄밀히 말하면 URL과 URI는 다른 개념으로 URI가 URL보다 큰 개념이다. URL은 특정 파일 등의 위치를 의미하고, URI는 특정 화면이나 데이터를 가져오기 위한 서버 프로그램과 파라미터를 포함하는 개념이다.
프론트엔드 중심 개발의 장점
- 필요한 부분의 데이터만 갱신 가능하기 때문에 서버로부터 매번 갱신된 전체 화면을 받아올 필요가 없다.
- 실시간 데이터 갱신이 자유롭다.
- SPA(), PWA() 등의 구현에 적용할 수 있다.
- React.js, Vue.js 등 다양한 라이브러리/프레임워크를 사용할 수 있다.
SPA란 하나의 페이지에 여러 화면 구성요소를 모두 넣은 앱 개발 방식을 의미한다. 웹의 특성상 페이지 간 상태 유지 및 정보 교환이 어렵기 때문에 하나의 페이지로 만들어 문제를 해결하고자 하는 접근방법이다. 하지만 페이지 로딩에 시간이 많이 걸리고 모듈화가 어려우며 소스 관리가 힘든 문제점도 있다.
PWA는 네이티브앱과 같은 수준의 사용자 경험(ux)을 제공하는 웹앱을 말하는 것으로, 웹으로 구현되었으나, 일반 윈도나 스마트폰 앱처럼 사용할 수 있는 앱의 표준 기술을 말한다. 웹앱의 개발 경향 중 하나다.
'Programming > Web' 카테고리의 다른 글
[Web] 웹(요약) (0) | 2022.10.18 |
---|---|
[Web] 웹(웹 개발 트렌드) (0) | 2022.10.18 |
[Web] 웹(Network, TCP/IP, Internet, Protocol, Port, DNS) (0) | 2022.10.14 |
[HTML] [CSS] [Bootstrap] 웹 연습 (0) | 2022.09.22 |
동적 웹페이지 (0) | 2022.07.18 |