WEB 개발 입문, WEB 구조 가볍게 이해해보기

아래 그림과 같이 웹 브라우저 (WEB Browser), HTML, CSS, JavaScript, Apache, DataBase ... 등등 많이는 들어보셨을거라 생각하는데요, 각각 무엇을 뜻하고 어떻게 조화를 이루어서 동작이 되는지 알아보도록 하겠습니다.

일반 사용자는 WEB Browser 를 통해서 서버와 통신을 할 수 있으며, 다양한 정보를 가지고 있는 서버와의 통신을 통해서 일반 사용자는 방대한 양의 정보, 콘텐츠 들을 서비스 받게 됩니다. 현재 보시고 있는 웹 싸이트 또한 서버로 부터 데이터를 받아와서 웹 브라우저가 보기좋게 그려주고 있는 상태 입니다.

 

그렇다면 현재 보여지고 있는 웹 사이트가 실제 코드로는 어떻게 되어 있는지 한 번 살펴보겠습니다. 현재 보고있는 웹 싸이트의 빈공간에 마우스 우 클릭 후, "페이지 소스 보기" 를 클릭합니다.

HTML 살펴보기

"<html" 을 시작으로 수 많은 글자들을 볼 수 있는데요, 이런 수 많은 글자들의 언어를 HTML 이라고 칭하고, 이 언어를 보기좋게 그려주는 역할을 웹브라우저(랜더링 엔진)가 해주고 있습니다. 사실 HTML 하나의 파일로 우리가 자주보고있는 세련된 웹페이를 만들어내기란 어려운 부분이 있는데요, 이를 CSS, JavaScript, JQuery 등으로 해결할 수 있습니다.

---

웹 개발에 관심을 가지기 시작한 이후 많이 들어봤을 만한 단어를 위주로 조금 더 자세히 들여다 보겠습니다.

 

🔎 WEB Browser 란?

브라우저의 종류로는 Chrome, IE, Edge, Firefox 등이 있는데요, 웹 브라우저는 "웹 페이지, 이미지, 비디오" 등의 콘텐츠를 서버와 통신을 통해서 사용자에게 표현해주는 소프트웨어입니다. 다시말해서, 서버로부터 웹 페이지 즉, HTML 코드를 받아 사용자가 볼 수 있도록 시각화시켜주고, 사용자의 요청에 따라 서버와 통신을 통해서 다양한 콘텐츠들을 표현해주는 역할을 합니다.

 

🔎 HTML 이란?

사전적 정의 먼저 알아볼까요? "Hyper-Text Markup Language" 의 약어로, HyperText 기능을 가진 문서를 만드는 언어입니다. HyperText 기능이란 웹 페이지에서 다른 페이지로 이동할 수 있도록 하는 것을 뜻하며, Link 시스템을 가지고 있다 라고도 표현할 수 있습니다. HTML 파일은 ".html" 확장자를 가지고 단순 텍스트 구조로 되어 있는 프로그래밍 언어로, 이를 WEB Browser 가 읽고 해독해서 랜더링 작업을 통해 현재 보고있는 웹 페이지를 그려주고있습니다.

 

🔎 CSS 란?

CSS 란, "Cascading Style Sheets" 의 약자로, HTML 문서를 더욱 더 이쁘게 꾸며주는 스타일 시트 언어입니다. HTML 문서로 뼈대구조를 작업하고, CSS 로 옷을 입혀준다라고 생각하시면됩니다. HTML 에서 구성된 각 컨트롤에 부여된 Class 이름 또는 ID 값을 통해서 보기좋게 꾸며주는 역할을 합니다.

 

🔎 JavaScript 란?

JavaScript 는 웹 페이지에 생동감을 불어넣기 위해 만들어진 프로그래밍 언어로,  웹 페이지를 보고 있는 일반 사용자와 대화식 웹페이지를 구성할 수 있도록 만들기 위한 프로그래밍 언어입니다. 예를들어, ID 와 PW 를 입력하고 로그인 버튼을 누르면 서버와의 통신을 통해 사용자데이터를 제공해주는 식의 동작을 가능하도록 해주는 역할을 하고 있습니다.

 

🔎 JQuery 란?

JavaScript 언어로 구성된 라이브러리입니다. JQuery 를 활용해서 보다 쉽게 웹 화면의 UI를 제어할 수 있도록 구성되어 있습니다.

 

🔎 Ajax 란?

Ajax 또한 Java Script 언어로 구성된 라이브러리로, 서버와에 데이터 통신을 처리할 수 있도록 지원해주는 역할을 합니다.

 

🔎 WEB Server 란?

HTTP 와 같은 프로토콜을 통해서 전달 받은 Client 의 요청에 HTML 과 같은 웹 페이지 또는 Image, mp3 등의 데이터를 응답하는 소프트웨어를 뜻하며, 이 소프트웨어는 호스팅하고 있는 서버에서 웹페이지의 컴포넌트 파일들에 어떻게 접근하는지를 관리하고 처리해주는 역할을 합니다.

 

🔎 WAS (WEB Application Server) 란?

정적인 웹 페이지 요청에 있어서는 WEB Server 의 기능만으로 충분하지만, 동적(Dynamic)으로 클라이언트의 요청을 처리하고자 할 때는 WAS 역할이 필요하게됩니다. WAS 는 Web Server 와 Data Base 중간에 위치해 Client 요청에 대해 다양한 서비스를 제공하는 역할을 합니다. 예를들어 특정 데이터를 얻고자 할때, 그 데이터에 권한이 있는지 검증을 하고, 그 사용자에 대한 데이터를 DataBase 로 부터 꺼내와 제공해주는 일련의 서비스 로직을 수행하는 역할을 하고있습니다.

---

Client 와 Server 간의 통신

다음은 Client 요청에 따른 서버와의 통신 프로세스를 살펴보겠습니다. 크게 2개의 분류로 나누어 볼 수 있는데요, "정적인 웹 페이지 요청" 과 "동적인 웹페이지 요청" 두 가지의 경우로 나누어 볼 수 있습니다.

1. 정적인 웹페이지 요청

💻 ① : 일반 사용자가 정적인 페이지 요청 ("http://www.naver.com")

💻 ② : 정적 페이지 (html) 로드 

💻 ③ : 일반 사용자에게 응답

2. 동적인 웹페이지 요청

💻 ① : 일반 사용자가 동적인 웹페이지 요청 ("http://www.naver.com?id=john&pw=1234")

💻 ② : 웹 서버는  WAS의 Web Container 로 동적 웹페이지 요청

💻 ③ : 각 요청에 맵핑 되는 Logic 에 따라 데이터를 처리 후, 웹 페이지 생성

💻 ④ : 생성 된 웹 페이지를 웹 서버에게 응답

💻 ⑤ : 일반 사용자에게 응답

---

Spring Framework 에서의 동작

다음은 Spring Framework 처리구조의 대한 그림입니다. 이를 통해서 WAS 개발에 대한 시야를 확장시켜보겠습니다.

💻 ① - ② : Client 는 웹 사이트에 보여지는 View 를 통해 서버로 정보를 요청합니다.

💻 ③ : "DispatcherServlet" 은 해당 요청과 맵핑 되는 컨트롤러가 있는지 "HandlerMapping" 을 통해 검색합니다.

💻 ④ : 맵핑 되어 있는 Controller 에게 해당 요청을 전달합니다.

💻 ⑤ : Controller 는 전달 받은 요청을 처리하기 위한 Service (Business Logic) 에게 요청 데이터(DTO)를 전달합니다.

💻 ⑥ : Service Logic에서는 DB 에 접근(DAO)하여 요청을 처리하고, 처리된 데이터(DTO) 를 Controller 에게 전달합니다.

💻 ⑦ : 처리 된 결과를 "DispatcherServlet" 에게 회신 합니다.

💻 ⑧ : 처리 된 데이터를 표현할 View 를 "ViewResolver" 를 통해 검색합니다.

💻 ⑨ : 처리 된 데이터를 검색 된 View 로 전달합니다.

💻 ⑩ : 처리결과가 포함 된 View 를 "DispatcherServlet" 에게 전달합니다.

💻 ⑪ : 결과 화면을 Client 에게 보여줍니다.

---

예제 : 웹페이지

다음 예제로 작성된 웹 페이지와 Spring WEB Server 를 참고해서 실제로 어떻게 개발이 이루어지는지 살펴보겠습니다.

오늘 설명을 위해서 제작한 샘플 웹페이지입니다. 왼쪽은 HTML (+ JavaScript, CSS, Ajax 등) 웹페이지고, 오른쪽은 Spring Framework 를 활용해서 제작한 WAS 입니다. 웹페이지를 통해 사용자로부터 데이터를 입력받고 서버와의 통신을 통해 데이터를 저장하고, 불러오고 하는 간단한 예제입니다.

 

이제 하나하나 뜯어서 어떻게 개발이 되는지 알아보겠습니다.

---

1. HTML + CSS

일반 사용자에게 보여지는 웹페이지는 HTML 로 이루어져있고, CSS 로 옷을 입힌다고 생각할 수 있습니다. 왼쪽의 HTML 코드로 일반 글자 또는 버튼 등의 기본 뼈대를 만들어내고, Class 또는 ID 값을 식별자로 오른쪽 CSS 파일을 통해 꾸미고 싶은 UI Control 에 디자인을 적용하게 됩니다.

여러 개발자분들이 CSS 디자인 파일을 Open Source 로 공유를 많이 해주고 계시기 때문에, 처음 개발에 입문하시는 분이라면 세련된 디자인을 만들어내는 것에 두려움을 가지실 필요가 없습니다. 구글 검색으로도 다양하게 디자인된 코드를 복사 붙여넣기로 손쉽게 가져와 적용할 수 있습니다.

 

대표적인 예로 "BootStrap" 이 있습니다. 구글 검색을 통해 손쉽게 접근할 수 있는 곳인데요, 다양한 UI Design 을 제공해주고 있고 해당 홈페이지에 방문하시면 아주 손쉽게 세련된 UI 를 그려낼 수 있습니다.

 

---

2. JavaScript (JQuery, AJax)

Java Script 를 통해서 디자인한 여러 UI Control 을 제어할 수 있게됩니다. 예를들면, 버튼이 눌렸을 때 Text Box 에 입력된 내용을 기반으로 서버와 통신을 통해서 다양한 서비스 및 데이터를 제공받을 수 있도록 프로그래밍이 가능해집니다.

위의 예시는 "Button" 을 클릭하면, 특정 서버에 데이터를 요청하고 응답받은 데이터를 텍스트박스에 표현해주는 기능입니다.

 

이렇게 HTML 과 CSS 로 세련된 웹 페이지를 그려내고, 각 UI Control 을 Java Script 로 특정 동작을 할 수 있도록 프로그래밍할 수 있으며, 이러한 일련의 과정을 통해 우리가 지금 보고 있는 웹 페이지를 개발해 낼 수 있게됩니다.

 

위에서 작성한 예제코드입니다.

GitHub - John-Cho/DailyNote: First WEB Project - "Daily Note"