[JS] 네트워크

네트워크 공부 목표

• 클라이언트 - 서버 개념 이해
  • 아키텍처
  • HTTP 서버통신 이해
  • API 개념 이해
• 브라우저 작동 원리
  • 보이지 않는 통신
    • URL URI 차이
    • IP/PORT 개념
    • DNS/IP 관계
  • 보이는 통신
    • AJSX 개념
    • SSR CSR 차이
    • CORS 개념

클라이언트-서버 아키텍처

클라이언트가 보는 어떤 UI는 인터넷이 필요하며, 그로인해 서버와 통신을 할 수 있다.

만약 서버가 없다면..?

1.0ver의 서비스를 이용하고 있었다면, 다음 신상정보가 들어오면 2.0ver으로 업데이트해야 사용자가 신상정보를 볼 수 있다. 또한, 결제 시스템을 위해서 은행서버와 연결을 위해 서버가 필요하며, 인터넷이 필요하다.

리소스?

커다란 시스템의 일부를 이루는 하드웨어, 소프트웨어, 데이터의 한 구성요소를 말한다. 예를 들어, 네트워크 리소스는 네트워크 상에서 활용 가능한 서버나, 프린터 등을 말한다.

2티어 아키텍처, 3티어 아키텍처

리소스가 존재하는 곳과 사용하는 앱으로 나누는것을 2티어 아키텍처라고 한다.
다른말로 클라이언트-서버 아키텍처라고 한다.

리소스를 사용하는 앱 : 클라이언트
리소스가 존재하는 곳 : 서버

예시를 카페로 생각하면 쉽다.
커피를 사기 위해 한 우리가 클라이언트 즉 손님이고, 음료 및 다양한 서비스를 제공하기 위한 곳이 서버이다.

서버는 기본적으로 메뉴판 등 상품의 가격을 요청이 아닌 일반적으로 제공한다.

클라이언트가 주문을 한다면 서버는 주문에 맞는 상품을 준다.
이것이 클라이언트와 서버의 통신이다. (요청 - 응답)

하지만 클라이언트가 업계 큰 손으로 티라미슈 케이크를 여기 앞 초등학교로 50개를 주문했다고 가정하자. 서버는 5개 정도의 케이크는 항상 준비해 두지만 나머지 45개의 케이크를 준비하지 못했다. 이를 위해 본사에 주문을해 45개의 케이크를 요청한다. 즉 엄청 큰 창고에서 상품을 가져온다. 이를 데이터베이스라고 생각하면 된다.

이렇게 클라이언트 - 서버 - 데이터베이스의 주고받은 통신이 3티어 아키텍처이다.

---

HTTP 클라이언트-서버통신 / API

HTTP 프로토콜 (통신 규약)

HTTP 즉 프로토콜은 클라이언트와 서버가 주고받는 언어라고 생각하면 편하다. 한국사람이 몽골에 가서 커피를 주문하면 각자 언어로 주문하면 주문이 되지 않는다. 하지만 공용어인 영어를 사용하면 서로 잘 알아 듣는다.
이 공용어가 바로 HTTP이다.

API

다시 카페의 예시를 들어서 생각해보자.
클라이언트가 주문을 할때, "알아서 하나 주세요" 라고 말했다. 주문받는 케셔가 센스가 있다고 한다면, 알아서 줄것이다. 왜냐하면 사람은 융통성이라는게 있기 때문이다. 하지만 주문받는게 컴퓨터라면 뭐라고 할까? >>> console.log("Error") 혹은 console.log("알아서 하나 주세요 is not defined")라고 할까?

아무튼 애러 메세지가 나올 것이다.

그래서 우리는 컴퓨터가 알아먹을 수 있도록 패턴을 만들어줘야 한다.
그게 바로 API다

이 패턴은 조금씩 다르지만, 설명을 위해 한번 써보자

www.naver.com // 메인 홈페이지
www.naver.com/login // 로그인 페이지
www.naver.com/search="삼성전자 주식" //삼성전자 주식 검색

이런식의 패턴으로 가진다.

다시말해 API는 어떠한 프로그램에서 데이터를 주고받기 위한 방법을 의미한다.
어떤 사이트에서 특정 데이터를 공유할 경우 어떤 방식으로 정보를 요청하는지, 어떤 데이터를 제공 받을 수 있는지에 대한 규격을 API라고 한다.

---

URL URI

URL에는 from이 있는데, scheme, hosts, port, url-path, query로 나누어 진다.

예시
https://www.google.com:80/search?q=JavaScript

기본적인 URL
scheme : https:// # 통신프로토콜
hosts : www.google.com # 도메인 IP, 웹페이지, 이미지 파일 위치 웹서버 등
port : :80 # 웹 서버에 접속하기 위한 통로
url-path : /search # 파일이 위치까지 경로, 이미지, 동영상 등

아래까지 추가하면 URI
query : q=JavaScript # 웹 서버에 전달하는 질문
bookmark : #AAAAA

IP/PROT

IP 주소란?

인터넷 프로토콜 주소로 특정 PC의 주소를 말한다. IP는 공인, 사설로 나뉘어 지고, 또한 고정, 유동 IP로 구분된다.

IPv4
32비트 방식으로 8비트 4자리로 .로 구분되어 구성되어 있다.
ex) 127.0.1.85
이런 식으로 구성되어 있다. 종류수는 2의 32제곱으로 약 43억개 정도 주소를 가진다. 하지만 이것 또한 다들 쓰고 있어서 고갈되고 있다. 이를 보안하기 위해 IPv6가 나온다.

IPv6
16비트씩 8자리로 :으로 구분되어 구성되어 있다.
ex) 2222:7AD1:1000:0000:0000:0000:1234:4321

PORT란?

http:localhost:3000 란 URI가 있다고 생각해보자
로컬 PC의 IP주소로 접근하여, 3000번째 통로를 통해 실행 중인 프로그램을 확인 할 수 있다. 하지만 이미 사용 중인 통로는 중복으로 사용할 수 없다.

---

도메인과 DNS

도메인이란?

웹 브라우저를 들어가면, IP주소를 대신하여 사용하는 주소가 있다. 예를 들어 네이버, 구글이라면 www.naver.com 혹은 www.google.com이다.

네이버의 IP주소를 확인해보자면

Server:        127.0.0.53
Address:    127.0.0.53#53

Non-authoritative answer:
Name:    naver.com
Address: 223.130.195.200
Name:    naver.com
Address: 125.209.222.141
Name:    naver.com
Address: 125.209.222.142
Name:    naver.com
Address: 223.130.195.95

223.130.195.200로 주소창에 입력하면 naver.com 으로 이동한다.

DNS란?

DNS는 Domain Name System의 줄임말로, 호스트의 도메인 이름을 IP주소로 변환하거나 반대의 경우를 수행할 수 있도록 개발된 데이터베이스 시스템이다.

223.130.195.200 >>>> naver.com
naver.com >>> 223.130.195.200 

크롬 브라우저 에러 읽기

chrome://network-errors/를 검색하면 확인 할 수 있다.

---

AJAX

Asynchronous JavaSCript and XML의 약자이다. 여기서 가장 중요한 단어는 Asynchronous이다. 사용자가 버튼을 클릭하거나, 요청을 해야만 웹 브라우저로 데이터를 가져오는 방식이 아닌, 화면의 일부분만 업데이트를 미리 한다.

XMLHttpRequest와 JavaScript, DOM을 합친 것

XMLHttpRequest와 fetch의 차이를 알고 사용하는 것이 좋다.

AJAX >>> CSR을 위해 사용

SSR와 CSR

SSR은 Server Side Rendering으로 웹브라우저에서 렌더링이 아닌 서버에서 렌더링을 합니다. 브라우저가 URI로 GET요청으로 서버에 메시지를 보내면, 서버는 서버의 웹 페이지가 브라우저로 도착하면 완전히 렌더링이 됩니다.

CSR은 Cliendt Side Rendering으로 SSR과 반대로 이루어 집니다. 브라우저의 요청이 서버로 가면 서버는 1차적으로 웹 페이지의 골격인 단일 페이지를 클라이언트에 보냅니다. 이때 웹페이지와 JS파일을 보냅니다. 클라이언트가 웹 페이지를 받으면 웹 페이지와 JS는 완전히 렌더링을 통해 페이지로 바뀝니다.

SSR과 CSR의 가장 큰 차이점은 렌더링 되는 위치이다. SSR은 서버에서 페이지를 렌더링을 하고, CSR은 브라우저 즉 클라이언트에서 페이지를 렌더링한다.