Askyweb

Ask-Why Web

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

개요

• 시간/기간
  • 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
출발지 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 있으면 뜨겠지

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

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

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/%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주소를 할당)

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

1. 1. 나 새로 왔다고 브로드캐스트
   2. 브로드캐스트한 것을 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. 1. Process - request/process 다른 프로세스로 넘김(php, Apatch)

• • • 장점 : 안정적(Process는 상호 독립적) / 단점 : 속도가 느림(OS를 거쳐서 하므로), 메모리사용량 높음

1. 1. thread - thread/process 메모리 공유 다른 스레드로 넘김(JSP)

• • • 장점 : 속도가 빠름, 메모리사용량 낮음 / 단점 : 불안전(프로세스가 죽으면 모든 스레드 죽음)

1. 1. Event Driven - (node J.S, nginx)

• • • non-block방식. 안정적이고 빠름.

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

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. 1. Consistency(모든 사람이 같은 정보를 보고 있음 - 일관성)
   2. Availability(성공이든 실패든 어떤 상황이든 반응해야함)
   3. Partition tolerance(분산형 DB에서 다른게 죽어도 일부로 동작가능해야함) -보통 포기

  => 하나를 포기해야함 

• • 종류별 필요 요소

1. 1. 관계형 - P를 포기(mySQL)
   2. Document - C를 포기(oracle) // 여러개로 나누는 것(스케일 out)

• • 어떤 atribute들이냐가 스키마(schema)
  • primary Key(고유값-ID같은거 대표적으로 학번같은걸 primary key로 설정)

• sqlite3로 실습
  • 정말 영어친화적인 언어(select * from test where name.....)

Playframework - 8/12

• 복습 1시간 // 처음부터 공부해봅시다. 개념 확립이 필수

• Ajax(거의 자바 스크립트)
  • 스트립트 -> 브라우저(클라이언트)에서 구현 => 웹브라우저마다 다름!!(IE를 제외하고 크롬, 파폭 등은 서로 맞춤)
  • form method = "post"

   Maintenance script (talk)
   Maintenance script (talk)
                 => 한줄띄면... 뭔지 알겠지??
   data = "asdf" => WAS로 해석

• • 실습은 php로 하지 않겠다. -> http://likelink.co.kr/5866 (php의 안좋은점)
  • 실습 : https://playframework.com/
  • activator - 설치 및 환경변수 설정 => 설치 엄청 오래걸림

Session, cookie - 8/19

• cookie
  • 도메인은 뒤에서부터 자른다. www.naver.com (com > naver > www / com이 제일 큼)

• 로그인 과정
  • || <-2> 쿠키 ||

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

• • || <-2> 세션(보안이 쿠키보다 좋음||

client	server

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/%EC%9D%BC%EA%B8%89_%EA%B0%9D%EC%B2%B4

클로저 일반적인 언어는 블록기반 스코핑 int a = 0;

{ int a = 1; }

자바는 함수기반 스코핑 var a=0; function(){ var a=1; // 위의 a와 다른것 }

자바 스크립트에서 new -> 바인딩과 같다(빈 객체를 생성해서 해당 객체를 연결해준다.) this -> .call로 바뀔수있다. 자바에서 하나의 class를 의미하지만 자바 스크립트에서는 바뀔수있다.(duck typing) (나는 this를 모르는걸 알고있다)

개인 프로젝트

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