웹 프로그래밍의 구조
클라이언트 - 서버 구조
클라이언트 - 서버 구조
- 웹 서비스 제공을 위해서는 서버 컴퓨터와 서버에서 동작하는 프로그램이 필요.
[웹프로그래밍의 구조]
/client /server
front end back end
:HTML / CSS / JavaScript : 서블릿/JSP / Spring 프레임워크, 파이썬
Angular/ React / Vue
- 클라이언트 : 웹 서비스를 이용하는 사용자
- 서버 : 웹 서비스를 제공하기 위한 서비스 공급자
- 프론트엔드 : 클라이언트 중심의 프로그래밍 (HTML, CSS, 자바스크립트) 영역
- 백엔드 : 서버를 구성하며 서비스를 제공하기 위한
서버 쪽 프로그래밍 (웹 서버 소프트웨어, 웹 프레임워크, 데이터베이스) 영역
HTML(HyperText Markup Language)
- 웹 문서의 구조를 정의하고 콘텐츠를 표현하는 기본 마크업 언어
- 웹을 통해 콘텐츠를 제공하려면 HTML을 사용해야 함
- HTML은 태그라고 하는 간단한 표기법으로 표현하고자 하는 정보에 의미를 부여함
CSS ( Cascading Style Sheet )
- HTML 문서에 레이아웃과 디자인을 포함한 시각적 요소를 정의하기 위한 규격
- HTML은 콘텐츠의 내용과 구조 (레이아웃)를 정의하고
CSS 에서 콘텐츠의 위치, 정렬, 글자 크기, 여백, 배경 색상 등을 정의함
- 디자인을 적용할 HTML 요소를 셀렉터(Selector)로
지정하고 원하는 디자인 속성을 부여하는 방식
자바스크립트 (JavaScript)
- HTML 문서에서 동적으로 변하는 콘텐츠를 표현하기 위해 이벤트처리를
하거나 서버와 연결하여 데이터를 가지고 오는 등의 역할을 하는 프로그램 언어.
- HTML 문서에서 이벤트를 서버 연결 없이 동적으로 처리할 수 있는 기술임
: 즉 서버에 새로 접속하지 않고도 화면 정보가 변하는 기능을 함
- 대표적인 자바스크립트 라이브러리 (프레임워크)
: 앵귤러(Angular.js), 뷰(Vue.js), 리엑트(React.js) 등
백엔드 중심 개발과 프런트엔드 중심 개발
백엔드 중심 개발
- 전통적인 웹 개발 모델이며, 서버에서 모든 것을 담당하는 방식임
- 특히 자바 서블릿/ JSP는 가장 인기 있는 백엔드 개발 기술임
<백엔드 동작의 개요 >
웹 브라우저 > 1. 요청(URL) -> 서버 -> 2. 데이터 처리 / 화면 호출 - Servlet / Java -> DB
JSP / (HTML) + 데이터 --> 3. JSP에서 HTML과 데이터 결합
----4. 응답 (HTML) --> 웹 브라우저
백엔드 중심 개발의 장점
- 서비스 연동에 필요한 다양한 서버 환경에 대응할 수 있음
- 검색 엔진 최적화에 유리함
- 기술이 안정적이고 검증됨
- 기존에 개발된 시스템이 많고 레거시 시스템은 오랫동안 유지됨
백엔드 중심 개발의 단점
- 모바일 네트워크의 속도가 느리며 이용에 많은 비용을 지불해야 함
- 서버에 화면 갱신을 요청할 경우 모든 데이터가 다시 전송되어야 하므로
모바일 환경에는 부적합함
- REST API와 클라우드 인프라가 보편화되면서 기존의 대규모로 서버를 구축하는
모놀리식 아키텍처 방식보다는 소규모 서버를 연동하는 MSA 방식이 확산되고 있음
MSA(Micro Service Architecture)
프런트엔드 중심 개발의 장점
- 필요한 부분의 데이터만 갱신이 가능하기 때문에 서버로부터
매번 갱신된 전체 화면을 받아올 필요가 없음
- 실시간 데이터 갱신이 자유로움
- SPA(Single Page App), PWA(Progressive Web App) 등의 구현에 적용할 수 있음
- React.js, Vue.js 등 다양한 라이브러리/프레임워크를 사용할 수 있음
프런트엔드 중심 개발의 단점
- 프런트엔드 중심의 개발이라 하더라도 데이터 제공을 위한 서버는 필요함
- 데이터 제공 서버는 주로 REST API로 개발되기 때문에 백엔드 작업은 당연히 존재함
- 프런트 엔드 중심 개발을 하더라도 콘텐츠가 검색 엔진에 노출될 수 있도록
검색 엔진 최적화를 위해 SSR(Server Side Rendering)을 접목하기도 함
section04
새로운 웹 개발 트렌드
1. 자바 언어의 대안 등장
- 오라클과 구글의 자바 라이선스 문제가 오라클의 승리로 끝남
- 구글은 새로운 안드로이드 개발 언어로 젯브레인스에서 개발한 코틀린(Kotlin) 언어
를 추가하면서 안드로이드 개발 트렌드는 점점 코틀린 쪽으로 이전하고 있음
- 코틀린은 최신 프로그래밍 언어의 특징을 모두 가지는 모던 프로그래밍 언어
(Modern Programming Language)임
2. 백엔드 개발 및 운영 환경의 변화
- 스프링 프레임워크가 등장하게 됨
- 클라우드 기반의 서버 운영이 보편화되면서 전통적인 모놀리식 아키텍처 중심의 서
버 운영 전략이 소규모 분산 서비스 운영 방식인 MSA로 전환되기 시작함
- 프런트엔드 중심의 개발이 가속화되면서 서버 프로그램이 보다 간결한 형태로 전환
되고 Node.js, 파이썬을 이용한 서버 프로그램 개발이 늘어나고 있음
- 특히 REST API 형태의 개발이 주를 이루게 되면서 백엔드에서 화면을 다루어야 하는
경우는 점점 줄어들고 있음
- 구글의 파이어베이스(Firebase)를 비롯한 클라우드 기반의 서비스 인프라가 보편화
되어 필요한 데이터를 REST API 형태로 손쉽게 제공받을 수 있는 서버리스 환경도 보
편화되고 있음
3. 프런트엔드 중심 개발로의 이동
- 웹에서 모바일로 이동하면서 데이터를 서버에서 조합(바인딩Binding)한 다음 화면을
구성(렌더링Rendering)하는 서버 사이드 렌더링(SSR)은 방식에서 여러 문제가 부각되
기 시작함
－예시1) 모바일에서 인터넷을 사용하려면 데이터 요금을 부담해야 하고
유선에 비해 상대적으로 속도도 느림
－예시2) 인터넷 접속이 항상 보장되지 않으며, 실시간으로 데이터 갱신은 필요함
- 이러한 새로운 요구는 서버로부터 데이터만 수신하고 클라이언트(웹 브라우저)에서
데이터를 조합한 다음 화면을 구성하는 클라이언트 사이드 렌더링(CSR) 방식으로 개
발을 전환하게 되는 계기가 됨
4. 스프링 프레임워크
- 스프링 프레임워크(Spring Framework, 이하 스프링)는 상용화할 수 있는 수준의 대
규모 서비스를 누구라도 쉽게 개발할 수 있도록 해줌
- 자바 기반의 대표적인 백엔드 개발 프레임워크로 국내에서는 절대적인 위치에 있음
- 전자정부 프레임워크 역시 스프링 기반임
- 스프링을 쉽게 사용할 수 있게 하는 스프링 부트(Spring Boot)의 경우 JSP 사용에 제
약이 있음
front end ---> HTML, SCC, JavaScript
<clientside rendering>
back end ---> servlet/JSP , SpringFramework, python -- / Database /
<serverside rendering>
what is serverside rendering
Server-side rendering is the most common method
for displaying information onto the screen.
It works by converting HTML files in the server into
usable information for the browser.
Whenever you visit a website, your browser makes
a request to the server that contains the contents of the website.
Html (Hyper text markup language) // 텍스트 기반; 시공간의 이동..
Css (Cascading Style Sheet)
JavaScript // 동적인 작동을 담당함. (ECMA Script)
backend 중심 개발 / frontend 중심 개발
댓글