= Ask-Why Web =
컴퓨터 통신에서 부터 웹까지 이것 없이는 살아갈수 없는 현대인의 필수품, 웹을 처음부터 알차게 배워나가 봅시다. 

[[TableOfContents]]

== 개요 ==
 * 시간/기간
  * 2014년 여름 방학 + α
  * 2014년 7월 15일부터 시작
  * 매주 화요일/금요일 오후 1 ~ 5시(끝나는 시간은 강사 재량)
 * 범위
  * Web의 시작부터 끝까지 (켠김에 왕까지)
  * 컴퓨터 통신(TCP/IP) 부터 Web Application까지
 * 대상
  * 컴퓨터 공학부 학생 누구나 (사전 지식 없어도 됨)

== References ==

 * Mozilla Developer Network(MDN) - https://developer.mozilla.org/ko/
 * W3Schools - http://www.w3schools.com/

 * HTML5 draft - http://www.w3.org/TR/html5/
 * HTML4.01 Spec - http://www.w3.org/TR/html401/
 * HTTP 1.1 Spec - http://tools.ietf.org/html/rfc2616
 * HTTP 2.0 draft - http://http2.github.io/
 * TCP Spec - http://www.ietf.org/rfc/rfc793.txt
 * CSS 2.1 Spec - http://www.w3.org/TR/CSS2/

== 참여자 ==
'''참여할 사람의 이름을 적어주세요'''

 * [bluemir]
 * [이원준]
 * [최다인]
 * [이지수]
 * [김정민]
 * [김한성]
 * [유재범]
 * [박희정]
 * [김성원]
 * [원준연]--쿨타임 돌고 있음--
 * [장혁재] (드랍인 & 아웃 할 것 같습니다)

== 기록 ==
=== Start Up Meeting ===
 * 이름 정하기 
  * askyweb
  * 켠김에 웹까지
  * 스파이더맨
  * ~~스웹~~
  * ~~안생겨요 웹~~
 * 시간 정하기
 * 목표 정하기
=== OSI계층 && HTML실습 - 7/15 ===
 * 추상화              // 참고 링크 : http://ko.wikipedia.org/wiki/%EC%B6%94%EC%83%81%ED%99%94
  * 대학 면접 단골 질문이죠.(이 방에서 이진법으로 표현할 수 있는 것은?? - 답 : 모두)  
  * 추상화란 전산학에서 추상화(抽象化)는 복잡한 자료, 모듈, 시스템 등으로부터 핵심적인 부분을 간추려 내는 것을 말한다.
  * 즉, 게임을 만들 때 이건 어찌 코딩해야하노.... 이런 상황이 추상화가 안된다라는 거죠
   * #을 7개를 찍어라!! => for(int i=0;i<7;i++) printf("#");      //   #을 7개 찍어라는 걸 추상화하여 코딩한 거죠.

 * OSI(Open Systems Interconnection Reference Model) 7계층     // 참고 링크 : http://ko.wikipedia.org/wiki/OSI_%EB%AA%A8%ED%98%95
  * 모형
   .7. 응용 계층(Application layer)
   - ~~응용합시다~~ 간단히 프로그램이 돌아가는 계층??

   .6. 표현 계층(Presentation layer)
   - ~~표현합시다~~ 코드간의 번역(인코딩, 암호화같은거)

   .5. 세션 계층(Session layer)
   - ~~통신상태가 불량합니다~~ 통신하는 유저들을 동기화하고 상태를 점검

   .4. 전송 계층(Transport layer)
   - TCP가 제일 유명 ~~여기가 거기여~~ 가장 끝에 있는 사용자끼리 신뢰성있는 데이터를 송수신할 수 있게함
    * TCP(Transmission Control Protocol, 전송 제어 프로토콜) // 참고 링크 : http://ko.wikipedia.org/wiki/%EC%A0%84%EC%86%A1_%EC%A0%9C%EC%96%B4_%ED%94%84%EB%A1%9C%ED%86%A0%EC%BD%9C
      IP의 핵심 프로토콜 중의 하나. 근거리 통신망이나 인트라넷, 인터넷에 연결된 컴퓨터에서 실행되는 프로그램 간에 정보 교환을 에러없이 할 수 있게 한다.

   .3. 네트워크 계층(Network layer)
   - IP가 살짝 물려있는 곳(IP를 3.5계층이라고하죠) 경로를 찾아주는 계층(그림생각나죠??)
    * IP(Internet Protocol, 인터넷 프로토콜) // 참고 링크 : http://ko.wikipedia.org/wiki/%EC%9D%B8%ED%84%B0%EB%84%B7_%ED%94%84%EB%A1%9C%ED%86%A0%EC%BD%9C
      사용자간의 네트워크에서 패킷을 주고받는 데 사용하는 정보 위주의 규약이다. 사용자의 주소지정과 패킷 분할 및 조립 기능 담당함.
    * 패킷 // 참고 링크 : http://ko.wikipedia.org/wiki/%ED%8C%A8%ED%82%B7
      데이터의 형식화된 블록. 각 패킷은 프로토콜 계층들의 구현 내용을 담고 있음.

   .2. 데이터 링크 계층(Data link layer)
   - 이더넷(Ethernet)이 여기. 물리계층에서 발생할 수 있는 오류와 흐름 제어 
    * 이더넷 // 참고 링크 : http://ko.wikipedia.org/wiki/%EC%9D%B4%EB%8D%94%EB%84%B7
      LAN을 위해 개발된 컴퓨터 네트워크 기술. 물리 계층에서 신호와 배선, 데이터 링크 계층에서 MAC 패킷과 프로토콜의 형식을 정의

   .1. 물리 계층(Physical layer)
   - 눈에 보이는거(전기) ~~무선인터넷도 포함되는데 안보인다 그러면....할말이...~~ 말그대로 물리적인 실제 장치
   
   
 * HTML실습
  * 누가 실습한 것 좀......

 * 할 말
  * 해킹 - 공격의 예술 에서 OSI계층 설명이 있는데 그거 찾아서 읽어보세요 짱 쉬움(내 책 가져다가 놓음) - [김한성]

=== 자바스크립트 - 7/18 ===
 * 스터디 폭파 직전 폭탄 해제 성공 - 1600마이크로부로 해제

 * 뭘 하지?? 실습하자

 * vi 정말 좋아요
  * [Vi Improved]를 참고하여 사용해봅시다.

 * 어떤 실습이 좋을까?? HTML했으니 자바스크립트를 한다!(훗! 그래야 ZP답지)

 * 자바스크립트
  * 자료형은 var뿐
  * 크롬에서 실습 / HTML에서 <script> </script> 사이에 자바스크립트 삽입!
  * 서버사이드, 클라이언트사이드
   * test.html파일을 만들어서 직접 열어서 수정 - 서버사이드에서 작업하는것
   * 크롬에서 개발자모드 - 클라이언트사이드에서 작업하는것(서버에 저장이 안됨!!)
   * 헷깔리지맙시다!
 
 * ctrl+CV 소개 // http://ctrlcv.kr/#!
  * 자바스크립트에서 클립보드를 직접 컨트롤할 수 있다는 취지에서 소개
  * 좋네 근데 아직 버그가 좀....
  * 최대 7일간 유지

 * 여담..... 
  * 함수형언어??, 병렬화?? 아 이거 뭐야 무서워

=== 라우터와 DNS - 7/22 ===
 * ~~수강생들의 상태가 매우 메롱함~~
 
 * 패킷의 구조
|| 출발지MAC || 목적지MAC ||
||<-2> 출발지 IP ||
||<-2> 도착지 IP ||

 * 라우터 찾기(전지적 작가시점이 아닌 1인칭 주인공 시점으로 봅시다)
(1/A)에서 (4/D) 찾아가기(패킷으로 나타내보자) 과정 : (1/A) -> (2/B) -> (3/F) -> (4/D)                                                 
|| A || B ||    || B || F ||    || F || D ||     
||<-2> 1  || -> ||<-2> 1  || -> ||<-2> 1  ||     
||<-2> 4  ||    ||<-2> 4  ||    ||<-2> 4  ||                                               
||<-8> 라우터를 찾아갈때 패킷에서 IP는 바뀌지 않고 MAC주소만 바뀜 라우터는 프로토콜에 의해 주변 라우터에게 물어봄 라우터를 거칠때마다 TTL--(Time to Live) (초기값은 랜덤이지만 운영체제마다 특정값이 있음) ||

 * DNS(Domain Name System)
  * 일반적으로 네트워크는 IP로 구성
  * naver.com / google.com은 뭔가요?? => Domain Name!!!
  * 일반인이 알아보거나 기억하기 쉽게 숫자가 아닌 텍스트로 IP를 대체함(즉, IP를 입력해도 접속가능)
  * 사용자가 도메인을 검색 => DNS서버에 물어봄 => DNS서버가 찾아서 IP에 연결 => 접속
  * 내가 아는 DNS서버에 없네?? => while(1) 다른 DNS서버에 물어봄 => 없으면 404 Not Founded 있으면 뜨겠지

 * 실습
  * 지난 주 클라이언트 사이드에서 작업함
  * 서버 사이드에서 작업하여 내용을 변경하여도 저장이 됨
  * 간단한 구구단 작성

=== TCP와 HTTP - 7/25 ===
 * TCP // 참고 링크 : http://ko.wikipedia.org/wiki/%EC%A0%84%EC%86%A1_%EC%A0%9C%EC%96%B4_%ED%94%84%EB%A1%9C%ED%86%A0%EC%BD%9C

  * 정의 : IP의 핵심 프로토콜 중의 하나. 근거리 통신망이나 인트라넷, 인터넷에 연결된 컴퓨터에서 실행되는 프로그램 간에 정보 교환을 에러없이 할 수 있게 한다.

  * TCP포트(0~1023) // 참고 링크 : https://en.wikipedia.org/wiki/TCP_and_UDP_port
   * TCP포트는 인터넷 프로토콜 스위트의 전송 계층 프로토콜 중 TCP나 UDP 등의 프로토콜이 사용하는 가상의 논리적 통신 연결단이다. 각 포트는 번호로 구별되며 이 번호를 포트 번호라고 한다. 포트 번호는 IP 주소와 함께 쓰여 해당하는 프로토콜에 의해 사용된다.
   * 주로 사용하는 포트
    20 & 21: File Transfer Protocol (FTP)
    22: Secure Shell (SSH)
    23: Telnet remote login service
    25: Simple Mail Transfer Protocol (SMTP)
    53: Domain Name System (DNS) service
    80: Hypertext Transfer Protocol (HTTP) used in the World Wide Web
    110: Post Office Protocol (POP3)
    119: Network News Transfer Protocol (NNTP)
    143: Internet Message Access Protocol (IMAP)
    161: Simple Network Management Protocol (SNMP)
    194: Internet Relay Chat (IRC)
    443: HTTP Secure (HTTPS)
    465: SMTP Secure (SMTPS)

  * 패킷구조(조금 더 확장)
    || 출발지MAC || 목적지MAC ||
    ||<-2> 출발지IP ||
    ||<-2> 목적지IP ||
    || 포트번호 || 43000 || 
    ||<-2> GET / index.html HTTP / 1.0 ||
   -> 43000의 의미는 어떤 프로그램이 보낸 패킷을 구별하기 위한 일련번호같은 것

 * HTTP(hyperText Transfer Protocol)
  * www상에서 정보를 주고 받을 수 있는 프로토콜이다. TCP를 사용하며, 80번포트를 사용
  
  * history : HTTP -> SGML -> XML

  * 특징
   * 아스키 기반 프로토콜
    * 엔터 -> \r\n
    * 각 옵션 구분 -> 엔터
    * 헤더, 바디 구분 요청 끝 -> 엔터두번(즉, 빈줄)
   * 요청을 하면 다시 받는다
   * 상태를 저장안한다.(status less)
   * 메소드 : CRUD(Create, Read, Update, Delete)
    * 요청 : GET(read), POST(Create), PUT(Update), Delete(Delete)
    * 응답(HTTP status code) : 200(OK), 301,304(리다이렉션), 401,403,404(클라이언트 에러), 500(서버 에러) // 참고 링크 : http://ko.wikipedia.org/wiki/HTTP_%EC%83%81%ED%83%9C_%EC%BD%94%EB%93%9C

=== HTTP Option - 8/1 ===
 * HTTP Option
  * Key : Value  / ex) host : ctrl.cv

 * Option 종류
  * Host(가상hosting을 생각해봅시다)
   * 머신을 나눠서 쓰는 소규모의 서버??(큰 서버를 쪼개서 나눠 쓴다고 생각합니다.)
   * IP가 같아도 내부 host가 다르면 다른 웹페이지로 접속함
    * xxx.xxx.xxx.160 -> intra.zeropage.org / ctrl.cv  => 따라서 없으면 안되는 옵션임!! 
  * Server : 서버 정보
  * last-modifie : 마지막 수정날짜 - 확인하여 매번 접속하지 않고 수정날짜가 최근일 경우 헤더만 보내어 속도를 증대시킴
   * ||<|4> client || -----> ||<|4> server ||
     || if-modified(내가 알고있는 날짜)||
     || <----- ||
     || last-modified(서버에서 최근 수정 날짜) <br> - client에서 알고 있는 날짜를 이 날짜로 수정 <br> 이후 접속부터는 날짜가 같은 경우 헤더만 받음||
  * accept : ~~한 형식에 맞춰서 보내달라(image, text....)
  * content-type : accept에 대응하는것(image/jpg, text/html)

 * 전체적인 HTTP의 구조
  || web browser || <-> || web server || HTTP를 해석하는 프로그램 ||
  ||             ||HTTP ||            || 어떻게 보내지?? TCP를 쓴다 ||
  ||             || <-> ||            || ||
  ||             || TCP ||            || 라우터 어떻게 찾지?? IP를 쓴다 ||
  ||             || <-> ||            || ||
  ||             || IP  ||            || 이건 아는데 물리적으로 어떻게?? ||
  ||             || <-> ||            || ||
  ||             || Ethernet ||       || 여기랑 밑에가 알아서 하겠지||
  ||             || <-> ||            || ||
  ||             || to 커널링 ||      || ||
  ==> OSI계층!!!
  ※HTTP라고 꼭 웹브라우저에서만 동작하는게 아님!!
  ex) curl naver.com -> 소스그대로 보내줌

 * DHCP(Dynamic Host Configuration Protocol) // http://ko.wikipedia.org/wiki/%EB%8F%99%EC%A0%81_%ED%98%B8%EC%8A%A4%ED%8A%B8_%EC%84%A4%EC%A0%95_%ED%86%B5%EC%8B%A0_%EA%B7%9C%EC%95%BD
  * TCP/IP 통신을 실행하기 위해 필요한 설정 정보를 자동적으로 할당, 관리하기 위한 통신 규약.
  * || IP Address ||
    || gateway address ||
    || DNS Address ||
    || NetMask ||
    || => DHCP가 자동적으로 해줌(즉, DHCP서버가 IP주소를 할당) ||

=== nginx 8/4 ===
 * 참가자 수가 적음
 * 2시 거의 다 돼서 시작

 * nginx 설치
   * intra.zeropage.org로 설치하고, 안에 파일 넣어서 브라우저에서 불러와 봤음.

 * WAS
   * 정적인(static) 파일은 nginx로 실습해 본 것처럼 서버에서 보내줄 수 있다.
   * 동적(dynamic)인 것들 (ex) 로그인 상태에 따라 다른 것을 보내줌) WAS에서 해준다.
   * WAS에서 해주는 것도 특정 파일을 내려주는 것 뿐이지만, 그 과정을 동적으로 하는것 (?)
   * location을 웹 서버에서는 단순히 '파일'로 생각했지만, WAS에서는 하나의 추상적인 '가상의 위치'로 인식하는 것.
   * 하나의 완벽한 HTML이 아니라 조각들을 동적으로 구성해서 만들 수 있음 (조각조차 없을수도 있음!)
   * WAS가 조립, 해석을 통해 HTML 파일을 만들어서 보내는 것.
   * WAS 또한 여러 언어로 만들 수 있음

   * 처음 WAS는 특정 주소에 대해 돌아가는(웹 서버와 통신하는) '단순한 프로그램'이였다.
   * 웹서버와 WAS가 통신하기 위한 프로토콜로 CGI(common gateway interface)를 만들었음
   * CGI프로그램을 만드는건 파싱 과정때문에 짜기 어려움. 주로 컴파일 언어로 했기 때문에(수정이 어렵다!), 스크립트를 해석하는 인터프리터 언어로 CGI프로그램은 만듬. 이게 바로 PHP.
   * CGI를 사용하면 같은 프로세스가 반복적으로 생성,제거 됨. 그 프로세스를 한번만 메모리에 올리게 함. (UNIX socket을 이용함) 이걸 Fast CGI라고 부른다.
   * Froxy 방식은 중간에서 아파치 등을 이용하고 (여기서 ssl등을 할 수 있음) 특정 포트 (여기서 다른 기능 구현)로 넘겨주는 방식 (?)
     * 내부 네트워크를 통해 중간자랑 특정 포트랑 다른 컴퓨터로 연결을 시켜서 사용 할 수도 있다.