개발자입니다
[비트캠프] 15일차(3주차5일) - 네트워킹, HTTP 요청/응답 본문
폴더 복사 붙여넣기
Networking의 두가지 방식
Networking은 두 가지로 나뉜다.
- Connection-Oriented(연결지향 - 연결 후 통신) → TCP : 데이터 전송 신뢰성. HTTP 1,2
예) 전화
상호간에 연결되었을때 데이터를 보낸다. - Connectionless(비연결 - 연결없이 데이터 전송) → UDP : 데이터 전송 신뢰성X. 별도의 처리 필요. HTTP 3
예) 편지, 방송
편지는 특정 IP까지 데이터를 보낸다.
방송은 Network IP까지만 데이터를 보낸다.
TCP
TCP : Transmission Control Protocol 전송제어프로토콜, 두 개의 호스트를 연결하고 데이터 스트림을 교환하게 해주는 중요한 네트워크 프로토콜이다. TCP는 데이터와 패킷이 보내진 순서대로 전달하는 것을 보장해준다. FTP, telnet, SMTP, HTTP 등
패킷(Packet) : 인터넷 내에서 데이터를 보내기 위한 경로배정(라우팅)을 효율적으로 하기 위해서 데이터를 여러 개의 조각들로 나누어 전송하는데 이 조각을 패킷이라고 한다.
UDP
UDP : User Datagram Protocol 사용자 데이터그램 프로토콜, 연결을 설정하지 않고 단순히 전송 방식이다. 서비스 신뢰성이 낮고, 데이터그램 도착 순서가 바뀌거나, 중복되거나, 누락되기도 한다. 스트리밍, VoIP, 배틀넷 등
데이터그램 : 패킷 교환 네트워크와 관련된 기본 전송 단위이다. IP 계층의 가변길이 패킷이다. 패킷 교환에서 비연결형 서비스를 이용해 패킷을 독립적으로 전송하는 것을 데이터그램 방식이라 한다.
ping : 해당 IP가 살았는지 신호를 보내 응답을 받는 명령
timeout : 설정한 시간 내에 신호가 오지 않으면 죽었다고 간주하는 시간
'http3 udp' 검색 참고 : https://evan-moon.github.io/2019/10/08/what-is-http3/
Connection-Oriented의 두 가지 방식
Connection-Oriented는 다시 두 가지로 나뉜다.
- Stateful : 한 번 연결한 후 연결을 끊을 때까지 여러번 통신. 적은 수의 client에 대응한다. 동시에 대응하려면 server를 여러개 두면 된다. 이를 멀티 thread라 한다.
예) ssh(telnet + secure), ftp, 채팅, 구글미트
- Stateless : 한 번 연결에 한 번 통신. 매 번 연결. 많은 수의 client에 대응할 수 있다.
예) HTTP
HTTP 요청 / 응답
Web Browser가 Web Server로 요청을 보낼때 다음과 같이 보낸다.
요청
각 명령줄을 request line이라 한다. method, URI, protocol/version 이 있다.
header(요청에 대한 보충 정보)
① 요청 헤더
② 공통 헤더
③ 엔티티 헤더
post 메서드일 때 보내는 데이터 : Message-body
URI (Uniform Resource Identifier)
- URL (Uniform Resource Locator) 예) http://서버:포트/O/O
- URN (Uniform Resource Name) 예) O : O : O
URI가 오면 URL, URN 모두 올 수 있다.
응답
응답시 맨 윗줄은 status line이라 한다. protocol/version, 상태 코드 값, 상태에 대한 설명 이 있다.
header(응답에 대한 부연 설명)
① 응답 헤더
② 공통 헤더
③ 엔티티 헤더
<!DOCTYPE HTML> 의 내용을 Message-body라 한다.
'http specification' 검색 참고 후 request 클릭 : https://www.w3.org/Protocols/rfc2616/rfc2616-sec5.html#sec5
웹 서버 개발자는 내용 자세히 알아야함. 웹 백엔드 개발자는 들어봤다 정도만 알면 됨
실제 질문 : 400번대 에러 알고있는 것 3개 이상 적으시오
Proxy 서버
Proxy는 client와 server 중간에서 통신을 중재한다.
client는 proxy server로 요청 하고 proxy server는 server로 요청을 전달한다.
server는 proxy server로 응답 하고 proxy server는 client로 응답한다.
cache(임시 저장소)에서는
- 응답 데이터를 보관한다. 이유는 같은 자원을 요청할 때 보관된 데이터를 즉시 전달하기 위함이다. 네트워크 오버헤드를 줄여 응답 속도를 개선한다.
- 모니터링을 해서 요청/응답 내용을 감시하여 보안을 강화한다. HTTP 통신을 살펴볼 수 있다.
GET vs POST
'charles proxy' 검색 다운로드 후 설치 : https://www.charlesproxy.com/latest-release/download.do
exam01.html
GET 요청 방법
1) 주소창에 직접 URL 입력
2) 링크 클릭: 요청
3) form에서 요청(method 속성 설정하지 않음: 기본 값이 "get") 요청
4) form에서 요청(method 속성의 값을 "get"으로 설정) 요청
POST 요청 방법
1) form에서 요청(method 속성의 값을 "post"로 설정) 요청
POST 요청시 Content-Type 이 GET에 없던게 생긴다.
exam02.html
맨 첫 줄(status line) GET /html/form/exam02?name=aaa&age=20 HTTP/1.1 를 자세히 분석하면 다음과 같다.
주소끝에 #id 적으면 해당 id가 바로 보이게 이동한다.
GET 요청
data를 URL에 붙여서 보낸다.
path(자원의 주소)?파라미터명=파라미터값&(파라미터 구분자) 을 Query String(서버에 보내는 데이터) 라고 한다.
- 한계
① 바이너리 데이터를 보낼 수 없다. 하지만 binary 데이터를 텍스트로 인코딩 하면 가능하다. binary 데이터를 Base64로 인코딩하면 text 데이터로 변환 가능하다. 예) image
구글 이미지에서 미리보기 상태에서 이미지 주소 복사하면 주소 자체에 이미지 데이터가 들어간다.
브라우저는 비트맵만 출력할 수 있다. jpg, gir, png 등은 압축을 풀어서 비트맵으로 만들어서 출력한다.
② URI 크기의 제한 때문에 대용량 데이터는 보낼 수 없다.
③ URL은 브라우저 캐시에 보관되기 때문에 보안이 안된다.
POST 요청
message-body 부분에 데이터를 보낸다.
Content length, Content Type 이 반드시 존재한다.
- 특징
① binary 데이터 전송 가능
② URL에 노출 안됨. URL에 데이터를 포함해야 하는 경우에 적합하지 않다. 예) 검색 URL, 게시글 조회 URL
③ 여러 개의 파일 첨부 가능
④ 용량 제한 없음
GET, POST 모두 name="" 지정해야 서버로 데이터 전송 가능하다.
text vs binary
① text
일반 텍스트 편집기로 편집 가능한 포맷. 예) .txt, .rtf, .html, .css, .js, .xml, .json, .properties, .java, .py, ...
text editor로 편집 후에도 유효
예시) {\rtf1\ansi\ansicpg949\deff0\
② binary
byte 단위로 포맷 예) .jpg, .gif, .mp3, .mp4, .doc, ...
일반 텍스트로 편집 불가. 전용 App. 사용
text editor로 편집시 포맷 깨져서 유효하지 않음
예시) !1AQa"q2걨?#B
0100 0001 → 숫자로 보면 65, 문자로 보면 A
저장할 때 의도와 읽을 때 의도가 같아야 한다.
ODF(Open Document Format) : binary 형식이 아닌 text 형식으로 저장하여 editor로 편집 가능. 예) docx, pptx, xlsx
ECMA (European Computer Manufacturers Association)에서 주장하여 docx등의 포맷을 MS에서 제작하도록 만듦
exam-11.html
type="file" 사용시 form에 enctype="multipart/form-data" 를 입력해야 파일 전송 가능하다. 입력하지 않으면 주소 창에 ?name=aaa&age=33&photo=img.jpg 처럼 photo=img.jpg 로 값이 붙는다.
파일에 여러개 선택하려면 multiple 옵션 추가하면 된다.
<form action="/html/form/exam11" method="post" enctype="multipart/form-data">
이름: <input type="text" name="name"><br>
나이: <input type="number" name="age"><br>
사진: <input type="file" name="photo"><br>
<button>요청</button>
</form>charles로 보면 Contents가 다음과 같이 나온다.
POST /html/form/exam11 HTTP/1.1
Host: 192.168.0.23:8080
Content-Length: 3950
Cache-Control: max-age=0
Upgrade-Insecure-Requests: 1
Origin: http://192.168.0.23:8080
Content-Type: multipart/form-data; boundary=----WebKitFormBoundaryPdToBBn7j4mdDf8X
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/99.0.4844.82 Safari/537.36
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/avif,image/webp,image/apng,*/*;q=0.8,application/signed-exchange;v=b3;q=0.9
Referer: http://192.168.0.23:8080/html/form/exam-11.html
Accept-Encoding: gzip, deflate
Accept-Language: ko-KR,ko;q=0.9,en-US;q=0.8,en;q=0.7
Connection: keep-alive
------WebKitFormBoundaryPdToBBn7j4mdDf8X
Content-Disposition: form-data; name="name"
aaa
------WebKitFormBoundaryPdToBBn7j4mdDf8X
Content-Disposition: form-data; name="age"
20
------WebKitFormBoundaryPdToBBn7j4mdDf8X
Content-Disposition: form-data; name="photo"; filename="photo1.jpg"
Content-Type: image/jpeg
......
------WebKitFormBoundaryPdToBBn7j4mdDf8X--
조언
*네카라쿠배 급 아니면 문제를 스스로 찾아서 해결해야 한다.
*프로젝트 할때 HTML, 특히 CSS, Javascript가 발목 잡을 것이다.
*네이버 프론트엔드, 백엔드 질문 : http method 방식 아는대로 기술하시오. GET, HEAD, POST, PUT, DELETE → RestAPI에서 주로 사용하는 기술
과제
깃헙 개인 페이지 md 대신 HTML로 배치해보기
'네이버클라우드 AIaaS 개발자 양성과정 1기 > HTML & CSS' 카테고리의 다른 글
| [비트캠프] 18일차(4주차3일) - CSS(border, padding, margin, display, visibility, float, position) (0) | 2022.11.30 |
|---|---|
| [비트캠프] 17일차(4주차2일) - CSS(테두리, font, background) (0) | 2022.11.29 |
| [비트캠프] 16일차(4주차1일) - CSS(selector, 상속, specificity), HTML(input) (0) | 2022.11.28 |
| [비트캠프] 14일차(3주차4일) - 숫자/문자/색상 2진수 변환, HTML 태그 종류 (0) | 2022.11.24 |
| [비트캠프] 13일차(3주차3일) - HTML 개요, Data와 메모리, 2·10·16진수 (0) | 2022.11.23 |
