1. 웹환경의 이해 (server와 client/ http / Frontend)
웹환경을 이해하기 위한 요소
- server, client의 관계
- http라는 약속을 통해,
- 서버<->클라이언트간에 request와 reponse를 통해 대화를 한다.
- 웹환경 개발 1 : Frontend(html, css, javascript로 구성된 웹 페이지) 사용자는 이것을 웹브라우저를 통해 본다.
- 웹환경 개발 2 : Backend (웹서버, 데이터베이스서버, 웹 프레임워크로 구성) 사용자의 요청에 백엔드서버에서 데이터를 웹브라우저로 던져준다.
서버와 클라이언트
데스크탑, 모바일 등은 클라이언트에 속하고 <--> internet <--> server 의 관계에 있다.
클라이언트에서 이 서버에 접속하기 위해서는 서버주소(url)을 통해서 접속하게 되는데, 이 url은 내부적으로 ip : port 형식으로 변환이 된다.
예를 들어서, www.naver.com이라는 url은 내부적으로 192.168.0.1(ip-물리적 서버주소) : 80 (port-서버의 각 서비스에 접근경로)로 구성되어 있다.
서버라는 것은, 특별한 서비스를 제공하는 컴퓨터(PC)이다.
서버의 특별한 서비스의 종류에는 웹서버(80) / 데이터베이스서버(mysql:3306) / DNS서버(1023, 53) / FTP서버(21) / ssh서버(22)/ 메일서버(110,25,143)으로 각 정해진 port가 있다.
컴퓨터에 웹서버를 구성해놓으면, 외부에서 접근할 수 있게 html코드를 던져준다.
HTTP
HyperText Transfer TProtocol(HTTP) - 하이퍼 텍스트 트랜스퍼 프로토콜은 하나의 약속이다.
하나의 서버가 있고, 다양한 브라우저들이 요청(request)를 보내는데,
각 브라우저마다 다른언어로 요청을 보낸다면, 서버는 그 요청을 알아듣지 못할 것이다.
이러한 현상을 막기 위한 것이 바로 프로토콜(약속)이다.
우리가 인터넷을 사용한다는 것은, 규정된 약속, 표준, 프로토콜을 지켜 웹서버에 요청한다는 것이다.
HTTP는 서버(웹)와 클라이언트(PC,모바일 등의 웹브라우저)이 대화하기 위한 약속인 것이다.
Request, Response
Request : 웹브라우저가 url 등 주소를 통해서 서버로의 요청하는 것이다. 이 request에는 GET과 POST가 있다.
- GET방식 - url을 사용하여 서버에서 정보를 가져오는 방식(게시판 보기)
위의 주소에서 php?까지는 도메인이며 / bo_table은 변수 / = use는 GET할 데이터를 요청한다.
- 위의 주소전체는 GET방식에서 Request를 의미한다.
- 북마크 기능은 GET방식의 url request를 저장하는 것. - POST방식 - 사용자로부터 정보를 받아, 서버에 입력하거나 수정하는 방식(게시판 글쓰기)
위와 같은 form형식으로, 서버의 정보를 입력 또는 수정하는 POST방식의 request
Response : 서버로부터의 응답으로서, 클라이언트(웹브라우저)에 html코드 등을 넘겨준다.
웹환경 개발1 - Frontend(HTML, css, javascript)
사용자가 웹브라우저를 통해 서버에 request(get방식의 url/post방식의 입력수정)를 할 때, 편리하게 환경을 만들어주는 것
- HTML(HyperText Markup Language) : 요청이 올 때, 서버가 뿌려주는 html코드는, 단순한 데이터로 생각하자
- CSS : 데이터(html)를 꾸며주는 것
- JavaScript : 객체기반의 스크립트 프로그래밍언어로, 어떤 동작(클릭시 변화/팝업 등)을 만들어준다.
https://www.w3schools.com/js/tryit.asp?filename=tryjs_myfirst
로 들어가서, 자바스크립트 튜토리얼에서 버튼클릭의 구조를 살펴보자.
버튼을 누르는 동작을 하게 되면 demo라는 엘리먼트를 가져와서 동작하게 한다. 가져오는 demo의 동작은 시간을 뿌려주는 Date()다.
