웹환경의 이해(Server와 Client/ Http / Frontend)

웹환경을 이해하기 위한 요소 

• 1.Server, Client의 관계
• 2.Http라는 약속을 통해,
• 3.서버 <-> 클라이언트간에 request와 response를 통해 대화를 한다.
• 4.웹환경 개발 1 : Frontend(Html, Css, Javascript로 구성된 웹페이지) 사용자는 이것을 웹 브라우저를 통해 본다.
• 5.웹환경 개발 2 : Backend(웹서버, 데이터베이스서버, 웹 프레임워크로 구성된) 사용자의 요청에 백엔드서버에서 웹 브라우저로 던저준다.

 

서버와 클라이언트

데스크탑, 모바일 등은 클라이언트에 속하고 <--> Internet <--> Server의 관계에 있다.

 

클라이언트에서 이 서버에 접속하기 위해서는 서버주소(url)을 통해서 접속하게 되는데, 이 url은 내부적으로 ip : port 형식으로 형변환이 된다.

 

서버라는 것은 특별한 서비스를 제공하는 컴퓨터이다

서버의 특별한 서비스의 종류에는 웹서버(80) / 데이터베이스서버(mysql:3306) DN서버(1023,53) / FTP서버(21) / ssh서버(22) / 메일서버(110,25,1,43)으로 각 정해진 port가 있다.

 

컴푸터에 웹서버를 구성해놓으면 외부에서 접근할 수 있게 Html코드르 던저준다.

 

HTTP

HyperText Transfer Tprotocol(HTTP) - 하이퍼 텍스트 트랜스퍼 프로토콜은 하나의 약속이다.

 

하나의 서버가 있고, 다양한 브라우저들이 요청(requese)을 보내는데 

각 브라우저마다 다른언어로 요청을 보낸다면 서버는 그 요청을 알아듣지 못할 것이다.

 

이러한 현상을 막기 위한 것이 바로 프로토콜(약속)이다.

 

우리가 인터넷을 사용한다는 것은, 규정된 약속, 표준 포로토콜을 지켜 웹서버에 요청한다는 것이다.

HTTP는 서버(웹)와 클라이언트(PC, 모바일 등의 웹 브라우저)의 대화하기 위한 약속인 것이다.

 

 

Request, Response

Request : 웹브라우저가 url등 주소를 통해서 서버로부터 요청하는 것이다. 이 request에는 GET과 POST가 있다.

 

GET방식 - url을 사용하여 서버에서 정보를 가저오는 방식(게시판보기)

위의 주소에서 php? 까지는 도메인이며 / bo_table은 변수 /=use 는 GET할 데이터를 요청한다.

 -위의 주소전체는 GET방식에서 Request를 의미한다.

 -북마크 기능은 GET방식이며 url Request를 저장하는 것 

 

POST방식 - 사용자로부터 정보를 받아 서버에 입력하거나 수정하는 방식(게시판 CRED)

                              위와 같은 form형식으로, 서버의 정보를 입력 또는 수정하는 post방식의 request

 

Response : 서버로부터의 응답으로서 클라이언트(웹브라우저)에 html코드 등을 넘겨준다.

 

웹환경 개발 - Frontent(HTML, CSS, Javascript)

사용자가 웹브라우저를 통해 서버에 request(get방식의 url/post 방식의 입력수정)를 할 때 편리하게 환경을 만들어주는 것

 

HTML(HyperText Markup Language) : 요청이 들어올 때 서버가 뿌러주는 html코드는 단순한 데이터로 생각하자.

CSS : 데이터(HTML)를 꾸며주는 것 

Javascript : 객체기반의 스크립트 프로그래밍 언어로 어떤 동작(클릭시 변화/ 팝업 등)을 만들어주며 동적인 요소들을 추가할 수 있다.

 

 

버튼을 클릭하게 되면 demo라는 엘리먼트를 가져와서 동작하게 된다. demo의 동작은 시간을 뿌려주는 Date()이다.

 

출처 : https://nittaku.tistory.com/154