Ask-Why Web ¶

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

1. Ask-Why Web

1.1. 개요

1.2. References

1.3. 참여자

1.4. 기록

1.4.1. Start Up Meeting
1.4.2. OSI계층 && HTML실습 - 7/15
1.4.3. 자바스크립트 - 7/18
1.4.4. 라우터와 DNS - 7/22
1.4.5. TCP와 HTTP - 7/25
1.4.6. HTTP Option - 8/1
1.4.7. nginx 8/4
1.4.8. DB - 8/8
1.4.9. Playframework - 8/12
1.4.10. Session, cookie - 8/19
1.4.11. 11/11

1.5. 개인 프로젝트

1.1. 개요 ¶

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

1.2. 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/

1.3. 참여자 ¶

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

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

1.4. 기록 ¶

1.4.1. Start Up Meeting ¶

이름 정하기
- askyweb
- 켠김에 웹까지
- 스파이더맨
- 스웹
- ~~안생겨요 웹~~
시간 정하기
목표 정하기

1.4.2. OSI계층 && HTML실습 - 7/15 ¶

추상화 // 참고 링크 : http://ko.wikipedia.org/wiki/추상화
- 대학 면접 단골 질문이죠.(이 방에서 이진법으로 표현할 수 있는 것은?? - 답 : 모두)
- 추상화란 전산학에서 추상화(抽象化)는 복잡한 자료, 모듈, 시스템 등으로부터 핵심적인 부분을 간추려 내는 것을 말한다.
- 즉, 게임을 만들 때 이건 어찌 코딩해야하노.... 이런 상황이 추상화가 안된다라는 거죠
  - #을 7개를 찍어라!! => for(int i=0;i<7;i++) printf("#"); // #을 7개 찍어라는 걸 추상화하여 코딩한 거죠.
OSI(Open Systems Interconnection Reference Model) 7계층 // 참고 링크 : http://ko.wikipedia.org/wiki/OSI_모형
- 모형
  .7. 응용 계층(Application layer)
  - ~~응용합시다~~ 간단히 프로그램이 돌아가는 계층??
  
  .6. 표현 계층(Presentation layer)
  - ~~표현합시다~~ 코드간의 번역(인코딩, 암호화같은거)
  
  .5. 세션 계층(Session layer)
  - ~~통신상태가 불량합니다~~ 통신하는 유저들을 동기화하고 상태를 점검
  
  .4. 전송 계층(Transport layer)
  - TCP가 제일 유명 ~~여기가 거기여~~ 가장 끝에 있는 사용자끼리 신뢰성있는 데이터를 송수신할 수 있게함
  - TCP(Transmission Control Protocol, 전송 제어 프로토콜) // 참고 링크 : http://ko.wikipedia.org/wiki/전송_제어_프로토콜
    IP의 핵심 프로토콜 중의 하나. 근거리 통신망이나 인트라넷, 인터넷에 연결된 컴퓨터에서 실행되는 프로그램 간에 정보 교환을 에러없이 할 수 있게 한다.
  .3. 네트워크 계층(Network layer)
  - IP가 살짝 물려있는 곳(IP를 3.5계층이라고하죠) 경로를 찾아주는 계층(그림생각나죠??)
  - IP(Internet Protocol, 인터넷 프로토콜) // 참고 링크 : http://ko.wikipedia.org/wiki/인터넷_프로토콜
    사용자간의 네트워크에서 패킷을 주고받는 데 사용하는 정보 위주의 규약이다. 사용자의 주소지정과 패킷 분할 및 조립 기능 담당함.
  - 패킷 // 참고 링크 : http://ko.wikipedia.org/wiki/패킷
    데이터의 형식화된 블록. 각 패킷은 프로토콜 계층들의 구현 내용을 담고 있음.
  .2. 데이터 링크 계층(Data link layer)
  - 이더넷(Ethernet)이 여기. 물리계층에서 발생할 수 있는 오류와 흐름 제어
  - 이더넷 // 참고 링크 : http://ko.wikipedia.org/wiki/이더넷
    LAN을 위해 개발된 컴퓨터 네트워크 기술. 물리 계층에서 신호와 배선, 데이터 링크 계층에서 MAC 패킷과 프로토콜의 형식을 정의
  .1. 물리 계층(Physical layer)
  - 눈에 보이는거(전기) ~~무선인터넷도 포함되는데 안보인다 그러면....할말이...~~ 말그대로 물리적인 실제 장치
HTML실습
- 누가 실습한 것 좀......
할 말
- 해킹 - 공격의 예술 에서 OSI계층 설명이 있는데 그거 찾아서 읽어보세요 짱 쉬움(내 책 가져다가 놓음) - 김한성

1.4.3. 자바스크립트 - 7/18 ¶

스터디 폭파 직전 폭탄 해제 성공 - 1600마이크로부로 해제
뭘 하지?? 실습하자
vi 정말 좋아요
- Vi Improved를 참고하여 사용해봅시다.
어떤 실습이 좋을까?? HTML했으니 자바스크립트를 한다!(훗! 그래야 ZP답지)
자바스크립트
- 자료형은 var뿐
- 크롬에서 실습 / HTML에서 <script> </script> 사이에 자바스크립트 삽입!
- 서버사이드, 클라이언트사이드
  - test.html파일을 만들어서 직접 열어서 수정 - 서버사이드에서 작업하는것
  - 크롬에서 개발자모드 - 클라이언트사이드에서 작업하는것(서버에 저장이 안됨!!)
  - 헷깔리지맙시다!

ctrl+CV 소개 // http://ctrlcv.kr/#!
- 자바스크립트에서 클립보드를 직접 컨트롤할 수 있다는 취지에서 소개
- 좋네 근데 아직 버그가 좀....
- 최대 7일간 유지
여담.....
- 함수형언어??, 병렬화?? 아 이거 뭐야 무서워

1.4.4. 라우터와 DNS - 7/22 ¶

~~수강생들의 상태가 매우 메롱함~~
패킷의 구조

출발지MAC	목적지MAC
출발지 IP
도착지 IP

라우터 찾기(전지적 작가시점이 아닌 1인칭 주인공 시점으로 봅시다)

(1/A)에서 (4/D) 찾아가기(패킷으로 나타내보자) 과정 : (1/A) -> (2/B) -> (3/F) -> (4/D)

A	B		B	F		F	D
1		->	1		->	1
4			4			4
라우터를 찾아갈때 패킷에서 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 있으면 뜨겠지
실습
- 지난 주 클라이언트 사이드에서 작업함
- 서버 사이드에서 작업하여 내용을 변경하여도 저장이 됨
- 간단한 구구단 작성

1.4.5. TCP와 HTTP - 7/25 ¶

TCP // 참고 링크 : http://ko.wikipedia.org/wiki/전송_제어_프로토콜
- 정의 : 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
  
  출발지IP
  
  목적지IP
  
  포트번호 43000
  
  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_상태_코드

1.4.6. 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 : 마지막 수정날짜 - 확인하여 매번 접속하지 않고 수정날짜가 최근일 경우 헤더만 보내어 속도를 증대시킴

client	----->	server
	if-modified(내가 알고있는 날짜)
	<-----
	last-modified(서버에서 최근 수정 날짜) - client에서 알고 있는 날짜를 이 날짜로 수정 이후 접속부터는 날짜가 같은 경우 헤더만 받음

accept : ~~한 형식에 맞춰서 보내달라(image, text....)
content-type : accept에 대응하는것(image/jpg, text/html)

전체적인 HTTP의 구조

web browser	<->	web server	HTTP를 해석하는 프로그램
	HTTP		어떻게 보내지?? TCP를 쓴다
	<->
	TCP		라우터 어떻게 찾지?? IP를 쓴다
	<->
	IP		이건 아는데 물리적으로 어떻게??
	<->
	Ethernet		여기랑 밑에가 알아서 하겠지
	<->
	to 커널링

DHCP(Dynamic Host Configuration Protocol) // http://ko.wikipedia.org/wiki/동적_호스트_설정_통신_규약

TCP/IP 통신을 실행하기 위해 필요한 설정 정보를 자동적으로 할당, 관리하기 위한 통신 규약.

IP Address

gateway address

DNS Address

NetMask

=> DHCP가 자동적으로 해줌(즉, DHCP서버가 IP주소를 할당)

자신의 IP를 어떻게 할당받는가??

나 새로 왔다고 브로드캐스트

브로드캐스트한 것을 DHCP서버가 보고 새로운 IP, gateway, DNS, NetMask를 할당
=> 공유기에 DHCP가 포함됨
※DHCP서버가 다른 gateway에 있는 경우??

gateway	---	gateway
l		l
새로접속		DHCP
gateway에서 MAC Address를 전송을 못함 => 따라서 원래는 안됨
그러나 우회해서 프로토콜을 감싸서 IP패킷에 보낼 수 있음

IP가 부족현상 발생!! -> 전세계기기가 40억개쯤됨 IPv4(4byte)의 범위를 넘음(2^32)
- 해결책
  - IPv6 -> 128byte(그러나 모든 라우터가 IPv6를 알 수 없음 - 구형)
  - 사설, 공인IP -> 공인IP - 유일한IP(외부, 내부에서 인식) / 사설IP 공통적인IP(192.168.xxx.xxx-내부에서만 인식)
공유기 역할
- 내부 -> 외부 -> 내부
  
  도착지/출발지 도착지/출발지 도착지/출발지
  
  외부망/내부망 외부망/외부망 외부망/외부망
URL구성
- http://naver.com/location(프로토콜/도메인네임/로케이션)

지금까지 한 실습의 문제점
- 큰 파일을 받는 동안 다른사람이 접속이 안됨(병렬화가 안됨!!)
- 해결책
  1. Process - request/process 다른 프로세스로 넘김(php, Apatch)
    - 장점 : 안정적(Process는 상호 독립적) / 단점 : 속도가 느림(OS를 거쳐서 하므로), 메모리사용량 높음
  2. thread - thread/process 메모리 공유 다른 스레드로 넘김(JSP)
    - 장점 : 속도가 빠름, 메모리사용량 낮음 / 단점 : 불안전(프로세스가 죽으면 모든 스레드 죽음)
  3. Event Driven - (node J.S, nginx)
    - non-block방식. 안정적이고 빠름.

1.4.7. 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라고 부른다.
- Proxy 방식은 중간에서 아파치 등을 이용하고 (여기서 ssl등을 할 수 있음) 특정 포트 (여기서 다른 기능 구현)로 넘겨주는 방식 (?)
  - 내부 네트워크를 통해 중간자랑 특정 포트랑 다른 컴퓨터로 연결을 시켜서 사용 할 수도 있다.

1.4.8. DB - 8/8 ¶

DB란 뭔가?
- 역할 : 저장, 관리, 유지보수, 찾기
- 파일과 다른 점 : 파일은 파일마다 모든 걸 매번 구현해야함
- 즉, DB(DataBase)란 DBMS(데이타 베이스 관리 시스템)

DB종류
- 관계형(mySQL)
  - raw = entity(투플) / column = atribute(도메인)
  - 중복되는 자료를 최적화하기 위해서 자료간의 관계를 두어 중복을 최소화하여 데이터량을 줄임
  - ex) 이름/회사/주소
    
    김/삼성/서울
    이/삼성/서울
    => 회사와 주소에 관계를 두어(회사가 삼성이면 주소는 서울)
    김/삼성
    이/삼성 으로 축약함
- Document기반(NoSQL-mongoDB)
  - entity를 중요시함
  - 중복되는건 객체로 표현
  - ex) 김/회사{삼성, 서울}
    
    이/회사{삼성, 서울}
  - Key value를 선택적으로 사용가능
- Key value(hadoop)
  - 잘 사용안함 => 테이블이나 Document로 표현함
  - Key value가 필수이다.
  - 하나의 Key value에 데이터를 담음
  - ex) Key value {이름/회사/주소}
    
    1{김/삼성/서울}
    2{이/삼성/서울}
CAP theorem
- DB가 가져야할 요소
  1. Consistency(모든 사람이 같은 정보를 보고 있음 - 일관성)
  2. Availability(성공이든 실패든 어떤 상황이든 반응해야함)
  3. Partition tolerance(분산형 DB에서 다른게 죽어도 일부로 동작가능해야함) -보통 포기
    => 하나를 포기해야함
- 종류별 필요 요소
  1. 관계형 - P를 포기(mySQL)
  2. Document - C를 포기(oracle) // 여러개로 나누는 것(스케일 out)
- 어떤 atribute들이냐가 스키마(schema)
- primary Key(고유값-ID같은거 대표적으로 학번같은걸 primary key로 설정)
sqlite3로 실습
- 정말 영어친화적인 언어(select * from test where name.....)

1.4.9. Playframework - 8/12 ¶

복습 1시간 // 처음부터 공부해봅시다. 개념 확립이 필수
Ajax(거의 자바 스크립트)
- 스트립트 -> 브라우저(클라이언트)에서 구현 => 웹브라우저마다 다름!!(IE를 제외하고 크롬, 파폭 등은 서로 맞춤)
- form method = "post"
  ~~~
  ~~~
  
  => 한줄띄면... 뭔지 알겠지??
- 실습은 php로 하지 않겠다. -> http://likelink.co.kr/5866 (php의 안좋은점)
- 실습 : https://playframework.com/
- activator - 설치 및 환경변수 설정 => 설치 엄청 오래걸림

1.4.10. Session, cookie - 8/19 ¶

cookie
- 도메인은 뒤에서부터 자른다. www.naver.com (com > naver > www / com이 제일 큼)
로그인 과정
- <-2> 쿠키
  
  client server
  
  <-2> id, pass, post -> 맞는지확인
  
  <-2> <- set cookie : id = bluemir
  
  <-2> cookie : bluemir -> 브라우저가 보냄 - 조작이 가능함
- <-2> 세션(보안이 쿠키보다 좋음
  
  client server
  
  <-2>
  
  <-2>
  
  <-2>

1.4.11. 11/11 ¶

복습1시간 // 다들 처음부터 공부해봅시다

폼을 보내기

Ajax(거의 자바스크립트)

스크립트 -> 브라우저(클라이언트)에서 구현 => 웹브라우저마다 다름!!(그러나 크롬, 파폭 등은 맞춤, IE는 제외)

form method = "post"
~~
~~
~~

data="asdf" => WAS로 해석

php로 하지 않겠다 -> http://likelink.co.kr/5866 (php의 안좋은점)

실습 : https://playframework.com/

activator - 설치 및 환경변수 설정
=> 설치 엄청 오래 걸림

쿠키
도메인은 뒤에서부터 자른다

로그인 과정
쿠키
client server

id, pass, post 맞는지 확인

set cookie : id = bluemir

cookie : bluemir(브라우저가 보냄-조작이 가능함)

보안강화
세션
client server

id, pass, post

key값 생성하여 key값을 넘김

key값만 주고 받음(client가 변경 X) (XSS - 로그인 중에 계속 접속중)

해결방법 => 동일IP 확인, PW다시입력

session cookie
server client
key값을 서버에서 관리 보안이 안좋음

사용처

로그인 방문자 수

SSL(공개키) - 비대칭키(양쪽이 다른 키를 사용) <-> 대칭키(양쪽이 같은 키를 사용)

https가 http보다 보안이 좋음

공개키, 비밀키
공개키로 암호화 -> 비밀키만 품
비밀키로 암호화 -> 공개키만 품

공개키를 누가 보증하느냐??

최상위의 공개키(root)를 브라우저마다 고정
->root의 비밀키로 root의 자식들을 보안함

공개키(root) - 비밀키


\|

naver daum -------| => 이걸 품

개인 개인
=> 공개키를 은행에 가져가면 공인 인증서

https는 비쌈

로그인할때만 https를 쓰고 평소엔 http로 사용

www.naver.com

|--------> 여기만 설정

www.news.naver.com 공유가 됨

JAVAScript를 왜 쓸까??(ECMAScript- 언어적 / Do)

동적인 동작을 하기위해서(어떤걸 움직인다 하면 그런 요청이 엄청많이 요구되어서 서버에 과부하가일어남)

일반적인 JAVAScript란??

JAVAScript - 언어(문법적인것)

DOM - 구현??(client side 작업 - 뭔가 움직이거나 하는것)

class가 없다. 그러나 proto type으로 객체지향적인 프로그래밍가능함

proto type - Java superClass와 비슷하지만 다른점은 교체가 가능함

일급 객체가 가능하다 // 참고 링크 : http://ko.wikipedia.org/wiki/일급_객체

클로저

일반적인 언어는 블록기반 스코핑

int a = 0;
{

int a = 1;

}

자바는 함수기반 스코핑

var a=0;
function(){

var a=1; // 위의 a와 다른것

}

자바 스크립트에서 new -> 바인딩과 같다(빈 객체를 생성해서 해당 객체를 연결해준다.)

this -> .call로 바뀔수있다. 자바에서 하나의 class를 의미하지만 자바 스크립트에서는 바뀔수있다.(duck typing)
(나는 this를 모르는걸 알고있다)

1.5. 개인 프로젝트 ¶

주제 : wrdly 열화판
언어 : go
플랫폼 : martini

출발지MAC	목적지MAC
출발지IP
목적지IP
포트번호	43000
GET / index.html HTTP / 1.0

내부 ->	외부 ->	내부
도착지/출발지	도착지/출발지	도착지/출발지
외부망/내부망	외부망/외부망	외부망/외부망

<-2> 쿠키
client	server
<-2> id, pass, post -> 맞는지확인
<-2> <- set cookie : id = bluemir
<-2> cookie : bluemir -> 브라우저가 보냄 - 조작이 가능함

<-2> 세션(보안이 쿠키보다 좋음
client	server
<-2>
<-2>
<-2>

askyweb