1.1. 개요 ¶
- 시간/기간
- 2014년 여름 방학 + α
- 2014년 7월 15일부터 시작
- 매주 화요일/금요일 오후 1 ~ 5시(끝나는 시간은 강사 재량)
- 2014년 여름 방학 + α
- 범위
- Web의 시작부터 끝까지 (켠김에 왕까지)
- 컴퓨터 통신(TCP/IP) 부터 Web Application까지
- Web의 시작부터 끝까지 (켠김에 왕까지)
- 대상
- 컴퓨터 공학부 학생 누구나 (사전 지식 없어도 됨)
- 컴퓨터 공학부 학생 누구나 (사전 지식 없어도 됨)
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.4.2. OSI계층 && HTML실습 - 7/15 ¶
- 추상화 // 참고 링크 : http://ko.wikipedia.org/wiki/추상화
- 대학 면접 단골 질문이죠.(이 방에서 이진법으로 표현할 수 있는 것은?? - 답 : 모두)
- 추상화란 전산학에서 추상화(抽象化)는 복잡한 자료, 모듈, 시스템 등으로부터 핵심적인 부분을 간추려 내는 것을 말한다.
- 즉, 게임을 만들 때 이건 어찌 코딩해야하노.... 이런 상황이 추상화가 안된다라는 거죠
- #을 7개를 찍어라!! => for(int i=0;i<7;i++) printf("#"); // #을 7개 찍어라는 걸 추상화하여 코딩한 거죠.
- #을 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의 핵심 프로토콜 중의 하나. 근거리 통신망이나 인트라넷, 인터넷에 연결된 컴퓨터에서 실행되는 프로그램 간에 정보 교환을 에러없이 할 수 있게 한다.
- IP가 살짝 물려있는 곳(IP를 3.5계층이라고하죠) 경로를 찾아주는 계층(그림생각나죠??)
- IP(Internet Protocol, 인터넷 프로토콜) // 참고 링크 : http://ko.wikipedia.org/wiki/인터넷_프로토콜
사용자간의 네트워크에서 패킷을 주고받는 데 사용하는 정보 위주의 규약이다. 사용자의 주소지정과 패킷 분할 및 조립 기능 담당함.
- 패킷 // 참고 링크 : http://ko.wikipedia.org/wiki/패킷
데이터의 형식화된 블록. 각 패킷은 프로토콜 계층들의 구현 내용을 담고 있음.
- 이더넷(Ethernet)이 여기. 물리계층에서 발생할 수 있는 오류와 흐름 제어
- 이더넷 // 참고 링크 : http://ko.wikipedia.org/wiki/이더넷
LAN을 위해 개발된 컴퓨터 네트워크 기술. 물리 계층에서 신호와 배선, 데이터 링크 계층에서 MAC 패킷과 프로토콜의 형식을 정의
- 눈에 보이는거(전기)무선인터넷도 포함되는데 안보인다 그러면....할말이...말그대로 물리적인 실제 장치
- TCP(Transmission Control Protocol, 전송 제어 프로토콜) // 참고 링크 : http://ko.wikipedia.org/wiki/전송_제어_프로토콜
- 모형
- HTML실습
- 누가 실습한 것 좀......
- 누가 실습한 것 좀......
- 할 말
- 해킹 - 공격의 예술 에서 OSI계층 설명이 있는데 그거 찾아서 읽어보세요 짱 쉬움(내 책 가져다가 놓음) - 김한성
- 해킹 - 공격의 예술 에서 OSI계층 설명이 있는데 그거 찾아서 읽어보세요 짱 쉬움(내 책 가져다가 놓음) - 김한성
1.4.3. 자바스크립트 - 7/18 ¶
- 스터디 폭파 직전 폭탄 해제 성공 - 1600마이크로부로 해제
- 뭘 하지?? 실습하자
- vi 정말 좋아요
- Vi Improved를 참고하여 사용해봅시다.
- Vi Improved를 참고하여 사용해봅시다.
- 어떤 실습이 좋을까?? HTML했으니 자바스크립트를 한다!(훗! 그래야 ZP답지)
- 자바스크립트
- 자료형은 var뿐
- 크롬에서 실습 / HTML에서 <script> </script> 사이에 자바스크립트 삽입!
- 서버사이드, 클라이언트사이드
- test.html파일을 만들어서 직접 열어서 수정 - 서버사이드에서 작업하는것
- 크롬에서 개발자모드 - 클라이언트사이드에서 작업하는것(서버에 저장이 안됨!!)
- 헷깔리지맙시다!
- test.html파일을 만들어서 직접 열어서 수정 - 서버사이드에서 작업하는것
- 자료형은 var뿐
- ctrl+CV 소개 // http://ctrlcv.kr/#!
- 자바스크립트에서 클립보드를 직접 컨트롤할 수 있다는 취지에서 소개
- 좋네 근데 아직 버그가 좀....
- 최대 7일간 유지
- 자바스크립트에서 클립보드를 직접 컨트롤할 수 있다는 취지에서 소개
- 여담.....
- 함수형언어??, 병렬화?? 아 이거 뭐야 무서워
- 함수형언어??, 병렬화?? 아 이거 뭐야 무서워
1.4.4. 라우터와 DNS - 7/22 ¶
수강생들의 상태가 매우 메롱함
- 패킷의 구조
출발지MAC | 목적지MAC |
출발지 IP | |
도착지 IP |
- 라우터 찾기(전지적 작가시점이 아닌 1인칭 주인공 시점으로 봅시다)
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 있으면 뜨겠지
- 일반적으로 네트워크는 IP로 구성
- 실습
- 지난 주 클라이언트 사이드에서 작업함
- 서버 사이드에서 작업하여 내용을 변경하여도 저장이 됨
- 간단한 구구단 작성
- 지난 주 클라이언트 사이드에서 작업함