[HTTP/네트워크] 기초

Achievement Goals

• 클라이언트-서버 콘셉트를 이해할 수 있다.
  • 클라이언트-서버 아키텍처를 이해할 수 있다.
  • HTTP를 이용한 클라이언트-서버 통신을 이해할 수 있다.
  • API의 개념을 이해할 수 있다.
• 브라우저의 작동 원리를 이해할 수 있다.
  • 보이지 않는 곳의 통신을 이해할 수 있다.
    • URL과 URI의 차이를 이해할 수 있다.
    • IP 주소와 PORT에 대해 이해할 수 있다.
    • DNS와 IP 주소의 관계를 설명할 수 있다.
    • 크롬 브라우저의 에러 메시지를 통해 문제를 파악할 수 있다.
  • 보이는 곳의 통신을 이해할 수 있다.
    • AJAX의 개념을 이해할 수 있다.
    • SSR과 CSR의 차이를 이해할 수 있다.
    • CORS의 개념을 이해할 수 있다.
• HTTP messages의 구조를 설명할 수 있다.
  • HTTP의 동작 방식을 이해할 수 있다.
  • HTTP requests와 responses를 구분할 수 있다.
  • HTTP의 응답 메시지를 찾아볼 수 있다.
• Chrome Network Tab을 이해할 수 있다.
  • Chrome Network Tab 사용 방법을 익히고 사용할 수 있다.
• Self Guided Lessons (Advanced)
  • How the internet works
  • DNS

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

클라이언트-서버 아키텍쳐 (2tier-아키텍쳐): 리소스가 존재하는 곳/ 리소스를 사용하는 앱을 분리시키는 것!!

• 리소스를 사용하는 앱: 클라이언트
• 리소스를 제공하는 곳: 서버
  

3tier-아키텍쳐: 리소스를 사용하는 앱/ 리소스를 전달해주는 앱/ 리소스 저장공간

프론트엔드 & 백엔드

• 프로트엔드 : 클라이언트 앱 (사용자와 상호작용 중시)
• 백엔드: 서버 앱 (시스템설계/ 권한관리/ 서버 전달)

클라이언트 서버종류

• 클라이언트: 웹/ 앱
• 서버: 웹서버/ 파일서버/ 메일서버/ 데이터베이스 서버

HTTP를 이용한 클라이언트-서버 통신과 API

요청과 응답은 한쌍이다.: 클라이언트-서버 아키텍처에서는 서버 마음대로 클라이언트에 리소스를 전달하지 않습니다.

• 간혹 서버에서 일방적으로 클라이언트에 정보를 전달하는 경우 : 쿠기/ 팝업/ Warning 메세지

프로토콜 통신규약: 프로토콜은 통신규약이다. 클라이언트에서 올바른 요청을 해야 응답이 올수 있다.

• HTTP 프로토콜: 웹 애프리케이션 아키텍쳐에서 사용해서 클라이언트와 서버가 대화를 나눌수 있다.
  

프로토콜의 종류

OSI 7 Layers
1.물리
2. 데이터링크
3. 네트워크 계층

4. 전송 계층

5. 세션 계층
6. 표현 계층

7. 응용 계층

API(Application Programming Interface)

서버는 클라이언트에게 리소스를 잘 활용할 수 있도록 인터페이스(interface)를 제공해줘야 합니다. 이것을 API라고 합니다.

즉, API문서를 작성해야 클라이언트가 이를 활용할 수 있습니다.

ex) API서버가 제공하는 적절한 URL로 디자인해서,

보통 인터넷에 있는 데이터를 요청할 때에는 HTTP라는 프로토콜을 사용하며, 주소(URL, URI)를 통해 접근할 수 있게 됩니다.

HTTP API 디자인을 잘 하는 방법

• 리소스와 관련된 행동(CRUD; create/read/update/delete)
• ex) 사용자 관리 API
  

브라우저의 작동 원리 (보이지 않는 곳)

URL과 URI

• URL(Uniform Resource Locator)
  네트워크 상에서 웹페이지, 이미지, 동영상등의 파일이 위치한 정보를 나타냅니다.

• URL의 구분: scheme, hosts, url-path
  file://127.0.0.1/Users/username/Desktop/
http://www.google.com:80/search?q=JavaScript

• URI(Uniform Resource Identifier)
  일반적으로 URL의 기본 요소인 scheme, hosts, url-path에 더해 query, bookmark를 포함합니다. query는 웹 서버에 보내는 추가적인 질문입니다.

URI>URL
브라우저의 검색창을 클릭하면 나타나는 주소가 URI입니다. URI는 URL을 포함하는 상위개념입니다.

IP와 포트

네트워크 상에서 특정 PC를 나타내는 IP address(Internet Protocol address, IP 주소)와 그 주소에 진입할 수 있는 정해진 통로, PORT(포트)

• IP
  인터넷에 연결된 모든 PC는 IP 주소체계를 따라 네 덩이의 숫자로 구분됩니다.
  이렇게 네 덩이의 숫자로 구분된 IP 주소체계를 IPv4라고 합니다. IPv4는 Internet Protocol version 4의 줄임말로, IP 주소체계의 네 번째 버전을 뜻합니다.
  IPv4는 각 덩어리마다 0부터 255까지 나타낼 수 있습니다.
  

  • localhost, 127.0.0.1 : 현재 사용 중인 로컬 PC를 지칭합니다.
  • .0.0.0, 255.255.255.255 : broadcast address, 로컬 네트워크에 접속된 모든 장치와 소통하는 주소입니다.
    

• PORT
  로컬 PC의 IP 주소인 127.0.0.1 뒤에 :3000과 같은 숫자가 표현됩니다.
  이 숫자는 IP 주소가 가리키는 PC에 접속할 수 있는 통로(채널)을 의미합니다.
  

• 포트 번호

  • 22 : SSH
  • 80 : HTTP
  • 443: HTTPS
  • 더 많은 포트 번호 확인하기

이미 정해진 포트 번호라도, 필요에 따라 자유롭게 사용할 수 있습니다. 잘 알려진 포트의 경우 URI 등에 명시하지 않지만, 그 외의 잘 알려지지 않은 포트(:3000과 같은 임시 포트)는 반드시 포함해야 합니다.

도메인과 DNS

• 도메인 (naver.com/ google.com)

터미널에서 도메인 이름을 통해 IP 주소를 확인하는 명령어 nslookup으로 naver의 IP 주소를 확인이 가능

nslookup naver.com
서버:    UnKnown
Address:  10.128.128.128

권한 없는 응답:
이름:    naver.com
Addresses:  223.130.195.95
          223.130.195.200
          223.130.200.104
          223.130.200.107  // 이 4개의 주소로 네어비로 접속이 가능하다.

• DNS

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

크롬 브라우저 에러 읽기

chrome://network-errors/

출처 : 코드스테이츠