Notice
Recent Posts
Recent Comments
Link
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | ||
6 | 7 | 8 | 9 | 10 | 11 | 12 |
13 | 14 | 15 | 16 | 17 | 18 | 19 |
20 | 21 | 22 | 23 | 24 | 25 | 26 |
27 | 28 | 29 | 30 |
Tags
- sort
- OSI 7계층
- kakao map api
- 자바스크립트
- next/Image
- react js
- Native select
- 백준
- 프론트엔드
- 배열
- javascript
- primitive type
- 코드스테이츠
- MUI
- 재귀함수
- 코드스테이츠 메인프로젝트
- 백준 nodeJS
- 자료구조
- nodejs
- 정규표현식
- 알고리즘
- JavaScript Deep Dive
- 페이지네이션
- input class
- 이벤트 루프
- Node js
- 유데미
- CSS
- 버블정렬
- 코딩테스트
Archives
- Today
- Total
신입 개발자에서 시니어 개발자가 되기까지
[section2] 네트워크(OSI7, DNS, HTTP) 본문
연휴동안 네트워크 강의를 들었는데 어떤 네트워크 지식이 프론트엔드 개발자에게 필요한지를 모르겠다. 그저 나중에 도움이 되겠지 하고서 다 들었는데, 그래서 포스팅 하기가 더 어려운 것 같다. 너무 과한 것 같아서 포스팅을 하지 않은 부분이 더 많은 것 같다.
OSI 7계층
OSI 7계층 | 식별자 | 데이터 단위 | 프로토콜 |
---|---|---|---|
애플리케이션 계층(Application) | stream | HTTP | |
프레젠테이션 계층(Presentation) | - | ||
세션 계층(Session) | SSL(socket) | ||
전송 계층(Transport) | Port 번호 | Segment | TCP,UDP |
네트워크 계층(Network) | IP 주소 | packet | IP |
데이터 링크(DataLink) | Mac 주소 | Frame | Ethernet |
물리 계층(Physical) | Frame | - |
식별자
1) L2 식별자 : Mac 주소(Physical address라고도 한다. LAN카드에 붙는다.). LAN카드를 식별한다. 명령 프롬프트에 ipconfig /all 입력하면 나오는 물리적 주소가 Mac 주소다. 48bit 주소체계
2) L3 식별자 : IP 주소(인터넷을 사용하는 컴퓨터, 즉 host에 붙는다). host에 대한 식별자다.
- 32bit 주소 체계. 8bit 단위로 끊어서 표시한다. 8bit는 0~255까지 숫자를 표현할 수 있음.
- 앞의 세 부분(24bit)은 Network ID, 마지막 한 부분(8bit)은 Host ID를 나타낸다. 전자는 서울시 강남구 역삼동, 후자는 번지수라고 생각하면 됨.
-localhost, 127.0.0.1은 현재 사용 중인 로컬 PC를 뜻한다.
- 0.0.0.0, 255.255.255.255 : broadcast address로 로컬 네트워크에 접속된 모든 장치와 소통하는 주소다.
3) L4 식별자 : Port번호.
- 여러 용도로 쓰이기 때문에, 업무별로 식별하는 것이 다르다. 인터페이스 식별자, service 식별자, process 식별자 등이 될 수 있음.
- 웹은 보통 port 80번을 사용한다.
- 포트번호에 따라 22 : SSH, 80 : HTTP, 443: HTTPS를 의미한다. 이러한 Well-known 포트는 생략 가능하다.
계층별 데이터 단위
1) L1~L2 : Frame
2) L3 : packet
- MTU(Maximum Trade Unit) : 1500 bytes, 보통 header가 20bytes, payload는 1480bytes
- 최대 크기는 MTU(Maximum Trade Unit), 1500bytes(1.4kb)
- Header와 payload로 나눠져 있으며 Header에서 가장 중요한 것은 source(출발지 주소) Destination(도착 주소)
- L2 Frame의 payload에 packet이 들어있고, packet의 payload에 Segment가 들어있는 encapsulation 형식이다.
3) L4 : Segment
- MSS(Maximum Segment Size) : 1460bytes
4) Socket 수준 : Stream(동영상 스트리밍 할 때 그 스트림)
- Stream이라는 데이터는 시작은 있지만 끝은 없는 데이터다. 끝을 프로세스 수준에서 정하기 때문에, OS입장에서 Stream은 크기를 알 수 없는 연속적으로 이어지는 큰 데이터다.
- Stream이 MSS, MTU보다 클 때 TCP에 Stream을 전달하면 이 Stream 데이터를 조각내서 Segmentation 을 하고 또 패킷에 담은 다음 인터넷에 유통시킨다.
패킷의 생성과 전달
1) Process에서 데이터 생성
2) Socket에 Data를 보낸다(send)
- socket : TCP / IP(커널 모드 프로토콜)를 추상화한 인터페이스다. process가 TCP / IP에 접근하도록 해준다. file의 일종이다.
3) Socket을 통해 TCP 에 데이터가 전달 됨. => TCP 에서 이 데이터를 segment로(L3에서는 packet이라 부름) 만든다. segment의 header에는 TCP, payload에는 데이터가 들어가 있게 됨.
4) Segment가 IP에 전달되고, 여기서 packet을 만든다.
5) packet이 Driver로 전달되고, 여기서 Frame을 만든다.(Frame의 payload에 패킷이 들어있음)
6) 랜카드를 통해 Frame이 전달된다.
7) L2 Access Switch를 거쳐 Route gateway에 전달되고, 여기서 Internet으로 전달된다.
TCP/IP 송수신 구조
- Transmission Control Protocol
- TCP는 연결을 먼저 한 다음(전화 걸기) 연결이 되면(전화를 받으면) 송수신이 이루어진다.
- PC와 서버가 데이터를 주고 받는 상황에 대해서 설명을 할건데 엄밀하게는 Process와 Process가 데이터를 주고 받는 것이다.
- 송수신 과정은 생략.
1) TCP 송수신에서 Network 장애
i. Loss : Segment 유실
- Network 에 문제가 있음.
ii. Retransmission : 피드백이 잘못 전달되어 segment 송신이 여러 번 보낸 경우 수신 측에서는 ACK를 여러 번 보낸다.
- Network 또는 End-point(Application? process?라고 이해하면 되려나) 상에 문제가 있음.
iii. out of order : Segment의 순서가 바뀐 경우.
- Network 문제
iv. Zero Window : Buffer의 공간이 모자란 경우(네트워크 속도를 프로세스가 따라가지 못함)
- End-point 단계(App 혹은 하드웨어)에서 문제가 있음.
도메인
- 웹 브라우저를 통해 특정 사이트에 접속할 때, IP 주소를 대신하여 사용하는 주소.
- ex) codestates.com / www.naver.com 등등
- 도메인 이름을 통해 IP 주소를 확인하는 명령어 : nslookup
DNS
- 분산 구조형 데이터베이스
- 트리 구조의 도메인 네임 체계
a. 주소창에 www.naver.com을 입력하면?
i. IP설정과 함께 설정되어 있는 DNS 주소 확인
ii. OS가 DNS 주소로 www.naver.com의 IP주소가 무엇인지질의를 보냄.
iii. 응답받은 IP주소로 접속.
iv. 한 번 이렇게 접속하면, IP주소를 DNS Cache에 저장한다.
v. 그 다음에 www.naver.com에 접속하면 DNS 서버에 요청을 보내지 않고 DNS Cache에 있는 주소로 접속한다.
DHCP
- Dynamic Host Configuration Protocol
- IT에서 Dynamic은 runtime의 의미다. 동적이다 혹은 작동중이라는 의미
- 제어판 인터넷 프로토콜 v4 속성에서 IP주소, 게이트웨이 주소, DNS 서버 주소를 자동 설정 했을 때, 이 주소들을 얻기 위하여 사용하는 서버다.
- 컴퓨터를 켰을 때 자신이 속한 네트워크에 Broadcast 트래픽을 보낸다. DHCP 서버를 찾으면 이 서버에서 IP주소 등등을 받아오는 것.
HTTP
- 클라이언트 - 서버 간 요청과 응답을 처리하기 위해 사용하는 프로토콜(규약)
1) HTTP Messages
- 클라이언트와 서버 사이에서 데이터가 교환되는 방식이며 다음 두 유형이 있다.
a. 요청(Requests)
b. 응답(Responses) - HTTP messages는 텍스트 정보로 구성되는데 개발자가 직접 작성할 필요는 없다. API에서 자동으로 완성한다.
c. 메시지의 구조
d. Stateless 특징i. start line : 요청이나 응답의 상태를 나타냄. 항상 첫 번째 줄에 위치하며 응답에서는 status line이라 부른다. ii. HTTP headers : 요청을 지정하거나, 메시지에 포함된 본문을 설명하는 헤더의 집합 iii. empty line : 헤더와 본문을 구분하는 빈 줄 iv. body : 요청, 응답과 관련된 데이터 또는 문서 v. start line과 HTTP headers를 묶어 헤드(head)라 하고 body는 payload라 한다.
- HTTP로 클라이언트와 서버가 통신을 주고받을 때 HTTP가 클라이언트나 서버의 상태를 확인하지는 않는다. '무상태성'이라는 특징을 가진다.
- 클라이언트와 서버 사이에서 데이터가 교환되는 방식이며 다음 두 유형이 있다.
2) HTTP Requests
a. start line
i. HTTP method
1) 수행할 작업(GET, PUT, POST 등)이나 방식(HEAD or OPTIONS)을 설명한다. GET method는 리소스를 받고, POST method는 데이터를 서버로 전송한다.
ii. 요청 형식
1) origin형식
- '?'와 쿼리문자열이 붙는 절대경로. GET,POST,HEAD,OPTIONS등의 method와 함께 사용.
2) absolute 형식
- 완전한 URL형식으로, 대부분 GET method와 사용
3) authority 형식
- 도메인 이름과 포트 번호로 이루어진 URL의 일부분.
4) asterisk 형식
- 별표(*)로 서버 전체를 표현
b. Headers
i. General headers : 메시지 전체에 적용되는 헤더, body와 관련 없다.
ii. Request headers : fetch를 통해 가져올 리소스나 클라이언트에 대한 자세한 정보를 포함하는 헤더.
iii. Representation headers : body에 담긴 리소스의 정보를 포함하는 헤더. Entity headers라고 불렸다.
c. Body
- 모든 요청에 body가 필요하지는 않다. HTTP messages 구조 마지막에 위치하고, GET, HEAD, DELETE, OPTIONS처럼 서버에 리소스를 요청하는 경우 본문이 필요하지 않다.
i. single-resource bodies(단일-리소스 본문) : 헤더 두 개(Content-Type, Content-Length)로 정의된 단일 파일
ii. Multiple-resource bodies(다중-리소스 본문) : 여러 파트로 구성되어 있고 각 파트마다 다른 정보를 지닌다. 보통 HTML form과 관련이 있다.
3) HTTP Responses
a. Status Line
- 다음 정보를 포함한다.
i. 현재 프로토콜의 버전(HTTP/1.1)
ii. 상태 코드 - 요청의 결과를 나타냄( ex. 200, 302, 404 등)
1) 200번대 : 성공
2) 300번대 : 이미 보낸 요청
3) 400번대 : 잘못된 주소? 뭐 암튼.. 실패했다는 의미
4) 500번대 : 서버 에러
iii. 상태 텍스트 - 상태 코드에 대한 설명
b. Headers
- 구조는 요청 헤더와 같다.
i. General headers
- request와 동일
ii. Response headers
- 위치 또는 서버 자체에 대한 정보(이름, 버전)와 같이 부가적인 정보를 갖는 header
iii. Representation headers
- 마찬가지로 이전에는 Entity headers로 불렸으며 body에 담긴 콘텐츠의 길이, MIME 타입 등을 포함한다.
c. Body
- 요청과 동일하지만 길이를 모르는 단일-리소스 본문은 Transfer-Encoding이 chunked로 설정되어있다.
'코드스테이츠 > section2' 카테고리의 다른 글
[코드스테이츠 section2] mini node server, SOP, CORS (0) | 2022.10.13 |
---|---|
[Section2] Rest API (0) | 2022.10.06 |
[section2] React State & Props (1) | 2022.10.04 |
[section2] SPA(Single Page Application) (0) | 2022.09.30 |
[section2] React intro (0) | 2022.09.30 |