Introduction

앞으로 인터넷프로그래밍에 대한 전반적인 흐름에 대해 배워보도록 하겠습니다. 

 

Technologies for Web apps development

• 웹 페이지 구조화: HyperText Markup Language(HTML)
• 웹 페이지 디자인: Cascading Style Sheets(CSS)
• 동적인 웹 페이지 생성: JavaScript & DOM
• 웹 서비스 활용: AJAX & JSON
• 웹 서비스 생성: Node.js & Express
• 데이터베이스활용: Structured Query Language(SQL)

Web Application

인터넷이 연결된 devices에서 작동한다.(portable)

• 클라이언트 측면: 우리 디바이스의 브라우저에서 작동
• 서버 측면: 클라이언트의 요청을 처리하고 응답한다. (검색, 주문, 로그인 등)

HTML(HyperText Markup Language)

웹 페이지의 구조(structure)와 내용(content)를 표현한다. html와 css(presentation)을 혼합해서 사용하는것은 좋지 않다. (it's better not to mix persentation with content)

 

CSS(Cascading Style Sheets)

웹 페이지의 디자인을 표현한다. (Specify presentation (or style, formatting) of Web page)

내용과 구조 즉, HTML로부터 스타일링을 분리한다.

html과 css를 link tag를 통해 분리시킨다.

JavaScript

웹 페이지의 동적인 생성을 지원한다. 

World Wide Web

사용자들이 웹 기반 application을 사용할 수 있도록 한다. 

 

WWW technologies:

1. HyperText Markup Language(HTML)
2. HyperText Transfer Protocol(HTTP)
3. URL(Uniform Resource Locator)

Web Pages

웹 페이지는 HTML document로 구성되어 있고, 이 HTML document는 보통 hyperlinks를 포함한다. 그것을 클릭하면 링크된 소스를 load한다. 

URL(Uniform Resource Locator)

웹에서 리소스에 대한 identifier로 사용자가 접근하려는 리소스로 브라우저를 안내하는 정보를 포함합니다.

예를들어, http:www.example.com/books/downloads.html 이라는 URL이 있다고 하자.

• http: 프로토콜 (HTTP)을 지정
• www.example.com: 서버 이름 (또는 호스트명 hostname)
  • DNS(Domain Name System) lookup - 호스트명을 IP(internet Protocol) 주소로 변환
  • www.naver.com -> [165.132.13.38]
  • DNS 서버스는 호스트명과 IP 주소간 매핑 테이블을 관리.
• /books/downloads.html: 리소스 위치(books)와 이름(download.html).
  • 보통 리소스의 위치는 보안상의 이유로 가상의 directory이다.(For securitys, location is typically a virtual directory)
  • Web server는 이 가상의 디렉토리를 실제 위치로 변환한다. (Web server translates virtual directory into real location)

HTTP Request

웹 브라우저(client)는 서버(server)에게 HTTP Request를 보낸다. 

• GET: 정보를 검색한다(gets(or retrieves) information), URL을 통해 즉, URL에 첨부해서 보낸다.
  • www.google.com/search?q=웹프로그래밍. 여기서 q: variable name, 웹프로그래밍: search item(value)
  • a name/value pair가 서버에 보내진다.
  • name/value pair가 하나 이상이면 & 로 구분
  • ?: query string을 URL의 나머지 부분으로부터 분리시킨다. 
  • get 방식은 전송가능한 data의 길이가 한정적이고 눈에 보이기 때문에 보안상의 위험 가능성 존재한다. 
• POST: 서버에 직접 보낸다 - posts (or sends) data to a server 즉, sends form data as part of HTTP message. URL에 정보를 담아서 보내는 것이 아니라 body에 담아서 보낸다. 
  • body에 담아서 보내기 때문에 보안상의 위험으로부터 안전할 수 있다. 

client -> server

HTTP Response

클라이언트(Web client)가 HTTP Request를 서버어게 보내면, 서버가 그 요청을 처리한 후 그 요청했던 content(body)를 보내준다. 그러면 최종적으로 Web Browser가 그 소스를 render(display)한다.

server -> client

Web Cache

웹 브라우저는 빠른 리로딩을 위해 최근에 보여진 웹페이지를 디스크에 저장한다.(Browsers often cache (save on disk) recently viewed Web pages for quick reloading)

하지만 웹브라우저는 포스트 방식의 요청을 캐시 하지 않는다.(Browsers typically do not cache post request)