WEB & Server 소개 및 개요

안녕하세요 BTC-진상팀입니다.

 

이번 Web & Server를 주제로 포스팅을 진행해 보려고 합니다.

웹이 무엇인지 그리고 웹은 어떡해 제작되고 서버를 통해서 어떤 상호작용을 해야 하는지

예제를 통해 전반적인 운영 방법에 대해서 포스팅하려고 합니다.

 

 

WEB에 관하여 자세히 살펴보겠습니다.

1. WEB의 정의와 특징 이해하기

2. WEB의 구성 이해하기

3. WEB Server 맛보기

---

1. WEB의 정의와 특징 이해하기

Web이란

Web은 한마디로 월드 와이드 웹(World Wide Web) 즉 인터넷에 연결된 사용자들이 서로의 정보를 공유할 수 있는 공간을 의미합니다.

 

Web의 특징

Web은 인터넷 브라우저에서 그림, 텍스트, 음성 및 소리, 영상과 같은 정보를 하이퍼텍스트 방식으로 제공합니다.

"하이퍼텍스트(hypertext)"는 Web브라우 저상에서의 문서 내부에 다른 문서로 연결하거나 참조를 넣어서 Web상의 여러 문서와 연결하여 참조하는 기술을 의미합니다. 이때 문서에서 다른 문서로 연결하는 것을 "하이퍼링크(hyperlink)"라고 부릅니다.

---

2. WEB의 구성 이해하기

Web의 구성

Web이 완성되려면 아래와 같은 구성이 필요합니다.

 

 

1. HTML

HTML : Hyper Text Markup Language

구조를 설계할 때 사용되는 언어로 hyper link 시스템을 가지고 있으며 웹 제작에 있어 텍스트 및 구조를 담당합니다.

HyperText란 웹 페이지에서 다른 페이지로 이동할 수 있도록 하는 것입니다.

HTML에 CSS와 JavaScript 미적용

위 이미지와 같이 텍스트와 구성으로만 HTML을 작성했을 때 위 이미지처럼 Web 페이지가 구성됩니다.

위 이미지의 예제를 예쁘게 꾸미려면 어떻게 해야 할까요?

 

2. CSS

CSS : Cascading Style Sheets
HTML. XHTML과 같은 문서의 스타일을 디자인하거나 꾸밀 때 사용하는 스타일 시트입니다.

HTML에서 제작한 문서를 토대로 배경색, 구조(위치 및 사이즈), 글꼴, 디자인 설정을 담당합니다.

 

3. JavaScript

JavaScript는 Web 페이지를 생동감을 불어넣기 위해 만들어진 언어입니다.

HTML과 CSS 만으로 Web을 구성하면 매우 정적으로 표현됩니다. 하지만 JavaScript를 적용하게 되면 HTML/CSS 페이지를 동적으로 생동감 있는 Web 페이지로 재탄생할 수 있습니다.

HTML에 CSS와 JavaScript 적용

 

HTML 문서를 CSS와 JavaScript를 적용하면 위 이미지와 같이 Web 페이지가 완성됩니다.

---

위 내용까지는 Fornt-End의 내용이었습니다. 한마디로 사용자가 눈으로 직접 볼 수 있는 영역을 의미하는 기술 내용이었습니다. 

하지만 Fornt-End만으로는 웹을 사용할 수 없습니다. 사용자의 요청을 딜리버리 하거나 정보를 저장하거나 전달하기 위해서는 Back-End가 필요합니다.

 

4. Back-End

Back-End는 Front-End 즉 HTML/CSS/JavaScript로 구성한 Web애플리케이션을 사용자가 보지 못하는 영역에서
Server나 DB를 관리하는 기술입니다.

Back-End는 Front-End에 있는 사용자들이 하고자 하는 행동들을 처리하는 것입니다.

예를 들면 회원가입을 하고 가입하기 버튼을 누르면 Back-End 언어가 DB와 상호작용을 하고 정보 저장을 하게 됩니다. 그리고 로그인 시에는 저장된 데이터를 대입하고 로그인을 성사시키게 됩니다.

 

5. Back-End 언어

대표적인 Back-End 언어

 

대표적으로 JavaSpring이 있습니다 Java 기반으로 만들어진 Back-End 언어입니다.

그리고 WordPress 템플릿의 대표적인 PHP도 Back-End 언어입니다.

 

최고 인기 있는 언어는 Web Front-End 언어인 JavaScript 언어를 Back-End로 사용하게끔 나온 Node.JS입니다.
언어 하나만으로 Front-End와 Back-End를 동시에 구축이 가능해 한층 더 쉽게 Web을 구성할 수 있습니다.

 

위 언어 외에도 수많은 Back-End 언어가 있습니다.

---

3. WEB Server 맛보기

Server와 database를 하기 전에 왜 Web을 알아야 할까요? Web은 데이터를 처리하거나 주고받을 수 있는 쉬운 예제? 가 될 수 있습니다. 하지만 다양하고 각기 다른 데이터를 가공하고 저장하고 처리해야 하며 중요한 정보가 많이 담겨 있을 수도 있습니다.

 

그 외에도 Application, Big data, IoT 등과 같은 데이터를 처리할 수도 있습니다.

 

Web과 Server

Front-End인 HTML/CSS/Javascript와 Back-End 언어를 통해서 Web을 구축을 완료하면 구축된 Web을 운영하기 위해서 Web 페이지를 Server 위에 올려야 합니다.

 

흔히 Server는 각자 사정에 맞게 구축하게 되는데 주로 Linux와 Windows Server를 사용하여 Server을 구축하게 됩니다.

 

 

 

계속해서 Web과 Server에 대한 내용과 상호작용 예제를 꾸준하게 포스팅할 예정이니 기다려 주세요!