[JS]웹 기초
우선 client와 server가 무엇인지를 알아야 한다.
처음에 client면 고객이니까 대충 프론트엔드, server는 서버니까 백엔드 겠지~ 라고 생각했다.
만약 서버한테 음식점 api를 요청했다치자.
그럼 서버에서는 그 응답을 받아서 api를 만들어야 한다.
근데 서버 쪽에서도 수많은 음식점 데이터를 가지곤 있지 않을 것이기에.. 결국 공공데이터에서 제공받아야 한다.
그럼 서버 쪽에서도 결국 공공데이터 홈페이지에가서 데이터를 요청하는 셈이잖아??
그럼 결국 백엔드도 client(고객)가 될 수 있는 것이다.
즉 , client와 server는 요청과 응답의 구조다 !
🚩 IP
한번쯤은 들어봤을 IP에 대해 보자!
IP란 Internet Protocol의 약자로 영화에서 '팀장님, IP 추적했습니다!'라는 대사를 들어본적 많을 것이다.
사설 IP는 프라이빗, 즉 내부 지역안에서 동일한 네트워크로 묶이는 IP를 뜻한다.
ex> 집에서 쓰는 공유기!!
공공 IP(=외부 IP)로는 어디에 위치해있는지 정확한 위치는 아니지만 근방 범위를 추적할 수 있다.
그래서 이때 내부 IP를 외부에서도 사용할 수 있도록 NAT를 통해 변환된다!
그럼 이제 데이터가 어떻게 통신되고 이동되는지 한번 살펴보자!
🚩 OSI , TCP/IP 계층
그럴려면 OSI 7 계층과 TCP/IP 4계층을 알아야한다.
패킷(packet)이라는 통신 단위에는 출발지&목적지 IP 주소가 들어있다.
그래서 client가 만약 '안녕'이라는 메시지를 보냈다면,
이 메시지라는 데이터에는 아직 출발지,목적지 Ip 주소가 포함되어있지 않다.
밑에서 부터 7계층까지 올라가는데, 이때 인터넷 계층에서 이 '안녕'이라는 데이터에 출발지&목적지 IP주소를 씌워준다.
이게 바로 캡슐화 라는 것이다. 마치 알약캡슐처럼 정보를 싹 씌워주는!
그럼 해당 목적지 주소로 데이터가 쓰-윽 이동을 하면 TCP/IP 계층에서 그 캡슐을 하나씩 벗겨서 정보를 확인하는 역캡슐화가 진행된다!
이렇게 응답을 받았으니 또 요청자한테 정보를 주려면 출발지와 목적지 주소를 바꿔주면 되는거지 !~
이 내용은 학교 수업에서도 늘 그냥 외워!라 해서 '물데네전세표응'이라고 외우기만 했는데
이렇게 통신이 이루어지는 것을 알게되니까.. 신기하다
하지만 IP의 한계도 있다.
1) 비연결성 : 무작정 전송
2) 비신뢰성 : 데이터 손실 우려, 패킷이 순서대로 안올 수도 있는 ..
3) 같은 IP를 가지고 통신하는 app이 2개이상일 경우 통신 불가..
그래서 이 한계를 개선해서 나타난 것이 TCP/UDP 이다!
🚩 IP
1) 연결지향 :3 way handshake
단골 면접 질문이기도 한 개념이다.
쉽게 설명해보면
1. 똑똑 처음에 방문을 한다. 거기 있니 ?
2. 어 있어.나 받을 준비 됐어
3. 준비됐다고?보낸다 ~
끝. 바로 이렇게 연결을 성립하기 위한 과정을 말한다!
그럼 4 way handshake란?
연결을 끊기 전 확인 절차라고 할 수 있다.
2) data 전달 보증
들었으면 끄덕끄덕 해주셈.
3) 순서 보장
🚩 UDP
TCP와 다르게 3 way handshake 과정을 안하므로 좀 더 빠르다.
즉, 연결을 설정하고 해제하는 과정이 존재하지 않은 비연결형 서비스이다.
네트워크 부하를 막지만, 그만큼 신뢰성을 보장 하지 않는다.
그래서 신뢰성보다는 연속성이 중요한 서비스 예를 들면 실시간 서비스(streaming)에 자주 사용된다!
🚩 DNS
:전화번호부. 즉, 도메인 네임을 IP 주소로 변환해준다.
🚩 URI(통합 자원 식별자)
웹 사이트를 들어가면 http://www.naver.com처럼 uri가 있는 걸 볼 수 있다.
살펴보면, 맨 앞에는 프로토콜 및 스키마가 써져있다.
이때 프로토콜은 통신규약이며,스키마는 리소스에 접근하는 데 사용할 프로토콜을 말한다.
웹에서는 http 또는 https를 사용한다!!
그럼 URL은 무엇인가?
URI는 식별자를 뜻하고 ,URL은 식별자 + 위치를 뜻한다.
URL은
https://www.abcde.com 처럼 https라는 프로토콜이 포함되어 있다.
이때 URI는 식별자만 있는 http://www.abcde.com를 가리킨다.
이때, 포트번호라는 개념을 알아야한다.
포트란 같은 IP에서 서비스를 구분 짓게 해준다.
위에서 IP는 '같은 IP를 가지고 통신하는 app이 2개 이상일 경우엔 한계가 있다'라고 언급했었다.
그래서 이를 해결하고자 포트가 등장!!
http: 80번
https: 443번
/ 알아두는 것이 좋음! /
프론트 작업을 하면 http://localhost:3000라는 url을 자주 볼 것이다.
이때 3000이라는 포트번호와 http라는 프로토콜이 사용되어있다.
근데, 이때 만약 프로토콜의 포트번호와 url :(콜론)뒤에 써있는 포트번호가 같을 경우 포트번호는 생략이 가능하다!
그래서 http://www.naver.com 같은경우 http가 80번이라 뒤에 생략되어 있는 것이다.
하지만 http://localhost:3000은 80번인 http와 3000번은 다르니 이렇게 기재해주는 것이다!
https://search.naver.com/search.naver?where=nexearch&sm=top_hty
이 URL을 보면, ? , = 와 & 기호가 보인다.
?뒤에는 쿼리문(질의문)이 오는데, 접근할 대상(서버)의 경로에 대한 상세 정보가 온다.
해당 value를 '='으로 나타내고 &으로 구분한다.
이때, query는 검색필터할때 가장 많이 쓰인다!
그래서 게시글을 구현할때도 id별로 수많은 글을 관리하듯이 url에 쿼리를 통해 필터링 과정이 이루어진다고 한다.
그럼 이제 HTTP에 대해 살펴보자.
HTTP란?
: HyperText Transfer Protocol
하이퍼텍스트 링크를 사용하여 웹 페이지를 로드하는 데 사용되는 프로토콜이다.
HTTP의 속성
1) 스테이스리스(Stateless) = 무상태 프로토콜
: server가 client의 상태를 보존하지 않는다.
그래서 추가 data 전송이 필요한데 .. 예시를 들자면!
A가 카페를 첫번째 방문해서 아아를 주문 했다...그 다음날, 또 방문해서 직원한테 '어제 먹었던거주세요~'라고 하지만,
직원은 이를 기억하질 못하는 상황과 비슷하다.
즉, HTTP 프로토콜은 각 요청이 독립적이며, 이전 요청의 정보를 기억하지 않으며,
서버는 각각의 요청이 처음부터 새롭게 시작된 것으로 간주한다!
장점으로는 무한한 서버 증설이 가능하지만, 매번 클라이언트가 데이터를 전송해야한다는 단점이 있다.
2) 비연결성 : 연결 끊기~
네트워크 탭에서 Protocol이라는 것을 클릭하면, 특정 자료들이 어떤 HTTP를 활용하고 있는지 확인 가능하다.
h2 같은 경우에는 HTTP2를 뜻한다!