2-1) 웹시프 정리

• ★단답형 HTML (HyperText Markup Language)
  • 하이퍼 텍스트 : 문서 간 연결이 있는 언어
  • 웹용 마크업 언어
• ★단답형 URL (Uniform Resource Locator)
  • 다른 말로 rest(주소)
  • 웹의 리소스를 식별하는데 사용됨
  • 주소로 자원에 접근함
• ★ 단답형 HTTP (HyperText Transfer Protocol)
  • HTML 문서를 주고받을 수 있게 하는 약속
  • 클라이언트가 요청하면 받아서 응답
  • 웹 서버에서 문서를 가져올 수 있는 프로토콜

• ★단답형 넷스케이프
  • 한때는 인기있었지만, 인터넷 익스플로러에 패배
• ★단답형 W3C
  • 웹의 표준 프로토콜과 가이드라인을 개발하는 국제 컨소시엄

• URL
  • 주소의 경로 + 자원 : rest full (같은 의미)
• ★★단답형 프록시 서버 기능 4가지
  • 수많은 컴퓨터가 HTTP를 중계함
  • 캐싱 : 클라이언트가 자주 사용하는 정보를 프록시에 복사
  • 필터링 : 바이러스 백신 검사
  • 로드 밸런싱 : 여러 서버가 서로 다른 요청을 처리할 수 있도록 허용
  • 인증 : 다른 리소스에 대한 액세스를 제어

• HTML
  • 웹페이지를 기술하기 위한 마크업 언어
  • 텍스트에 태그를 붙여서 기술

• ★★★서술형 웹 앱과 네이티브 앱
  • 웹 앱과 네이티브 앱의 차이점을 서술하시오.
  • 네이티브 앱 : 전통적인 개발 방법 (안드로이드와 ios 구분)
  • 웹 앱 : 웹과 앱 모두 접근 가능, 웹 뷰를 통해 모바일에 최적화된 화면으로 보여주는 앱 또는 웹

  

  ans : 웹 앱은 URL 접속 방식으로 동작하고 별도의 다운로드 없이 브라우저만 있으면 접속이 가능하다. 또한 하나의 버전으로 모든 플랫폼에서 사용이 가능하고, 업데이트를 서버 코드만 바꾸면 사용자에게 자동으로 반영된다. 서버에서 정보들을 받아와야 하므로 오프라인에서 사용이 거의 불가능하고, 일반적으로 느리게 작동한다.

★★★서술형 서버 :

• 비연결 (UDP)
  • 데이터의 흐름이 일방적임
  • 데이터가 유실될 수 있음
  • 스트리밍 서비스, IOT에 사용
  • 데이터 : 먼저 들어온 데이터부터 처리 (queue)

  

• 연결 지향(TCP)
  • 클라이언트와 서버 간의 지속적인 연결
  • 신뢰성 있는 프로토콜이라 부름
  • TCP로 스트리밍을 하면 서버가 터짐
  • 한 서버에서 여러 포트를 열어 데이터를 받음
  • 한 Child 서버에서 보통 한 기능을 사용

  

  ans: UDP는 비연결 서버를 의미하며 데이터의 흐름이 한 방향으로 일정하다. 또한 중간에 데이터가 유실 될 수 있다. 데이터는 먼저 들어온 순서대로 처리하는 queue와 같은 방식이다. UDP는 데이터가 유실되도 영향이 많지 않은 스트리밍이나 IOT에서 사용할 수 있다.

  TCP는 클라이언트와 서버가 지속적으로 연결하는 방식을 말하며, 한 서버에서 여러개의 포트를 열어 데이터를 받아온다. 보통 하나의 포트에서는 한 가지 기능을 사용하고 있다.

• 운영체제에서 지원하는 통신 인터페이스의 이름은? : 소켓
  • 소켓 인터페이스는 application 레이어와 OS 사이의 연결을 맡는다.
• SOCK_STREAM : TCP
• SOCK_DGRAM : UDP

• ★ UDP에서 서버 클라이언트 동작 방식

• 클라이언트
  1. start
  2. socket(…) == UDP 소켓 생성
  3. sendto(…) == 서버의 포트로 요청 보냄
  4. recvfrom(…) == 서버가 응답을 보낼 때까지 block으로 대기
  5. Unblock == 서버에서 패킷이 도착하면 recvfrom 호출 반환
  6. close(…) == 소켓을 닫고 종료
  7. stop

• 서버
  1. start
  2. socket(…) == UDP 소켓 생성
  3. bind(…) == 서버의 포트와 소켓을 연결(binding)하여 sendto를 받을 준비를 함
  4. 반복 루프
     1. recvfrom(…) == 클라이언트의 요청을 받을 때까지 block으로 대기
     2. Unblock == 패킷이 도착하면 recvfrom 호출 반환
     3. HandleRequest == 요청 메세지 처리
     4. sendto(…) == 데이터를 요청을 보낸 클라이언트 주소로 전송
     5. 다시 recvfrom으로 돌아가 다음 요청 대기

• ★ URL 구조

http, https domain(IP) 8080, 443 resource

• ★ Method
  • 민감하지않은 정보는 get으로 URL에 보냄
  • 민감한 정보는 post로 body에 URL에서 볼 수 없게 숨김

피피티 status code 외우기

• get 방식 : 헤더와 바디
  • 서버로부터 리소스를 조회할 때 사용

• post 방식
  • 서버에 데이터를 전송하여 리소스 갱신, 처리

• Method
  • GET == 클라이언트에서 서버에 문서 요청
  • HEAD == 문서 정보(헤더) 요청
  • POST == 클라이언트에서 서버로 정보 전송
  • PUT == 서버에서 클라이언트로 문서 전송
  • TRACE == 들어온 요청 반사
  • CONNECT == 예약된 메서드
  • OPTION == 사용 가능한 메서드 조회
• Status
  • 100 Continue == 초기 요청 받음, 계속 요청 가능
  • 101 Switching == 프로토콜 전환 서버가 수행 중
  • ★ 200 OK == 요청이 성공적으로 처리됨
  • 201 Created == 새로운 URL이 생성됨
  • 202 Accepted == 요청을 수락했으나, 나중에 처리될 수 있음
  • 204 No Content == 응답 본문에 보낼 데이터가 없음
  • 301 Multiple Choices == 요청한 URL이 둘 이상의 리소스를 가리킴
  • 302 Moved Permanently == 요청한 URL이 더 이상 사용되지 않음
  • 304 Moved Temporarily == 요청한 URL이 일시적으로 사용되지 않음
  • ★ 400 Bad Request == 요청 문법 오류
  • 401 Unauthorized == 요청 거부됨
  • ★ 403 Forbidden == 서버가 요청을 이해했으나 접근 금지됨
  • ★ 404 Not Found == URL에서 요청한 문서를 찾을 수 없음
  • 405 Method Not Allowed == URL에서 요청한 HTTP 메서드를 지원하지 않음
  • 406 Not Acceptable == 요청한 리소스 형식을 서버가 수용할 수 없음
  • ★ 500 Internal Server Error == 서버 내부 오류 발생
  • 501 Not Implemented == 서버가 요청된 기능을 지원하지 않음
  • 503 Service Unavailable == 서비스 일시적 사용 불가능

• 소켓 순서도 (윗페이지에 있을거임)
• 메모리는 데이터를 역순으로 저장함
  • 네트워크 통신할 때 바꿔서 내보냄
  • 호스트에서 네트워크 : hton(l,s)
  • 네트워크에서 호스트 : ntoh(l,s)
• sockaddr_in
  • 포트와 주소를 하나로 묶어놓은 구조체
  • sa_family_t : 패밀리 주소
  • in_port_t : 포트
  • in_addr : ip주소
  복사

  c

  	struct sockaddr_in {
  		sa_family_t sin_family; // address family
  		in_port_t sin_port;     // port number
  		struct in_addr sin_addr;// IPv4 address
  	}
• ★단답형 getaddrinfo
  • 호스트 이름만 알고 있을 때, 이를 주소 정보로 변환하는 함수
  복사

  c

  int getaddrinfo (const char *host, const char *service, 
  	const struct addrinfo *hint, struct addrinfo **res);

• ★단답형 getnameinfo
  • sockaddr 구조체(IP + 포트) 를 알고 있을 때, 이를 호스트 이름으로 변환하는 함수
  복사

  c

  int getnameinfo (const struct sockaddr *addr, socklen_t alen,
  	 char *host, socklen_t hostlen, char *service, socklen_t servlen,
  	 unsigned int flags);

• bind : 클라이언트, 서버에 ip를 부여하는 함수
• connect : 소켓이 지정한 서버랑 연결하는 함수
• send : tcp ip 전송 함수
• send to : udp 전송 함수

• ★서술형 tcp, udp 함수 차이점 서술하시오.
• TCP 서버는 socket, bind, listen, accept순서로 호출하여 send를 통해 전송하고

  UDP 서버는 socket, bind 순서로 호출한 뒤 send to를 통해 데이터를 전송한다.

  TCP 클라이언트는 socket, connect 순서로 소켓을 생성하고 서버에 연결하는 반면

  UDP 클라이언트는 socket, bind, recvfrom으로 소켓을 생성하고 데이터를 수신한다.

  TCP는 여러 클라이언트 연결을 대기 (listen) 하다가 하나씩 accept 하지만 UDP는 연결 없이 송수신 한다.

• ★단답형 fork
  • 각 프로세스는 FD 번호별로 fd flags와 ptr 이렇게 2가지 정보를 관리하는 테이블을 가지고 있음
  • fork를 호출하면 부모의 FD 테이블 항목이 그대로 복사되어 자식 프로세스로 넘어감
  • 자식의 FD 번호는 부모와 동일한 파일 테이블 엔트리를 가리킴
  • 파일 테이블 엔트리 하나는 한 번 열린 파일에 대한 공유 상태를 담고 있음
  • 파일 테이블의 v-node ptr은 실제 디스크의 메타데이터를 가진 v-node 구조체를 가리키는 포인터
  • 이러한 구조 덕분에, 부모 프로세스가 파일을 열고 쓰기 시작한 뒤 바로 자식 프로세스가 같은 파일 디스크립터로 이어서 사용 가능

• ★단답형 exec functions
  • child 프로세스에서 실행할 수 있는 명령어 (e : environment, p : path)
    • execl : list
    • execv : vector
    • execle : list environment
    • execve : vector environment
    • execlp : list path
    • execvp : vector path

• Buffering
  • 버퍼링이란 짧은 시간에 반복해서 읽고 쓰면 터질 수 있으므로 버퍼에 작은 단위의 데이터를 모았다가 한 번에 읽고 쓰는 기법
  • ★단답형 버퍼링의 3가지 유형
    1. Fully Buffered (완전 버퍼링)
       • 버퍼가 가득 차면 데이터 전송
    2. Line Buffered (행 단위 버퍼링)
       • 한 문장씩 전송
    3. Unbuffered(버퍼링 없음)
       • 버퍼링 없이 계속 전송

• Reading a Stream
  • int getc(FILE *fp)
    • 스트림 fp 에서 다음 한 문자를 읽어 int 로 변환
    • 매크로로 구현되어 빠르게 동작함
  • int fgetc(FILE *fp)
    • getc()와 기능이 동일하나 반드시 함수로 구현
    • fgetc는 반드시 함수로 제공됨
  • int getchar(void)
    • getc(stdin)과 정확히 동일
    • 표준 입력으로부터 한 문자 읽기
  • int ungetc(int c, FILE *fp)
    • 버퍼에 문자를 다시 뱉음
  • int putc(int c, FILE *fp)
    • 문자 하나 입력

지렁이키우기

euc-kr : 영어와 한글을 2바이트를 이용하여 나타내는 방식

utf-8 : 영어는 1바이트, 한국어는 3바이트로 표현한다

<meta charset="utf-8">

특수 문자 : < 와 > 같은 기호를 화면에 표시하기 위해 필요함

img 태그 사용

<img src="dog.jpg" width = "300" height="230" alt "No iamge>

이미지 처리 방법

target 속성

예제

<!DOCTYPE html>
<html>
<body>

	<a herf="http://www.google.com" target="_self">
	google.com 방문1</a>
  <br />
  <a href="http://www.google.com" target="_blank">
  google.com 방문2</a>

</body>
</html>

방문 1은 현재 윈도우에 새로운 페이지를 실행하고,
방문 2는 새 탭에 새로운 페이지를 실행한다.

시맨틱 웹

시맨틱 요소

로그인 페이지

<!DOCTYPE html>
<html>
<head>    <meta charset="UTF-8">    </head>
<body>
<form method="get" action="">
  아이디: &nbsp;  <input type="text" size= "15" value=""><br>
  비밀번호:<input type="password" size= "15" value=""><br>
  <input type="submit" value="Submit">
</form> 
</body>
</html>

필요 : input 에 type, size, value
매서드 : get, action ""

GET : URL 주소의 ? 뒤에 파라미터를 붙여 데이터를 전송

POST : 데이터를 Request 헤더에 포함시켜 전송

파일 업로드

<form enctype="multipart/form-data">
    <input type="file" accept="image/jpg,image/gif">
</form>

숫자 입력

<body>
  <h2>신입부원들을 환영합니다. </h2>
  이름: <input type="text"><br>
  신발사이즈(230-290, 10단위) <input type="number" min="230" max="290" step="10" value="260" name="shoesize"> <br>
  테니스 스킬(1부터10) <input type="range" min="1" max="10" value="1"><br>
  <input type="submit">
  <input type="reset">

</body>
</html>

정규식

수량 한정자

이메일 검사
/^[a-zA-Z0-9.!#$%&’*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/
전화번호 검사
[0-9]{3}-[0-9]{4}-[0-9]{4}

외부 스타일 시트

스타일을 외부 파일에 저장하는 것

<link type="text/css" rel="stylesheet" herf="mystyle.css">

다중 스타일 시트

하나의 요소에 대해 외부, 내부, 인라인 스타일이 서로 다르게 지정하고 있다면?

다음과 같은 우선순위를 가짐

폰트 지정

body {
	font-family:"Times New Roman", Times, serif;
}

박스 모델의 속성

컨텐츠, 패딩, 보더, 마진으로 둘러싸여 있음

둥근 보더

border-radius를 사용하여 둥근 경계선을 만들 수 있다.

<!DOCTYPE html><html><head>
    <style>
        #target1 {
            width: 100px;
            height: 50px;
            background-color: yellow;
        }
        #target2 {
            width: 100px;
            height: 50px;
            background-color: lightgreen;
        }
    </style>
</head>
<body>
    <p id="target1">이것은 p요소입니다. </p>
    <div id="target2">이것은 div요소입니다.</div>
</body></html>

마진 설정하기

박스 크기 계산 (중요)

예제

<!DOCTYPE html>
<html>
<head>
    <style>
        div.test {
            background-color: yellow;
            width: 200px;
            padding: 10px;
            border: 5px solid red;
            margin: 20px;
        }
    </style>
</head>
<body>
    <div class="test">이것은 div 요소로서 전체 폭은 270픽셀이다.</div>
</body>
</html>

배경 설정

블록 요소 : 한 줄을 전부 차지

인라인 요소 : 한 줄 안에 여러 개

위치 설정 방법

float 속성