HTTP/네트워크 기초

dice0314·2023년 5월 24일
네트워크서버
0

서버 아키텍처

클라이언트-서버(2-Tier) 아키텍처

  • 2가지 구성 : 클라이언트, 서버

1. 클라이언트

  • 사용자가 애플리케이션을 실행하고 서버로부터 정보를 요청하는 디바이스 또는 소프트웨어.

2. 서버

  • 클라이언트의 요청을 처리하고 해당 요청에 대한 응답을 클라이언트에게 제공한다.

3-Tier 아키텍처

  • 3가지 구성 : 클라이언트, 서버, 데이터베이스
  • 2-Tier아키텍처와 달리 데이터베이스라는 리소스를 저장하는 공간이 따로 존재한다.
  • 서버는 데이터베이스에서 리소스를 꺼내 클라이언트에 전달하는 역할만 담당한다.



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

  • HTTP는 웹에서 클라이언트와 서버 간의 데이터 통신을 위해 사용되는 프로토콜이다.
  • 클라이언트가 서버로 요청을 보내고 서버가 해당 요청에 대한 응답을 반환할때 사용된다.

HTTP 메서드

  • 클라이언트는 HTTP 요청 메시지를 생성하여 서버에 보낼때 사용되는 메서드
  • 요청 대상 URL, 헤더 등과 함께 사용된다.
요청메소드
조회(READ)GET
추가(CREATE)POST
갱신(UPDATE)PUT(전체 교체)
PATCH(일부 수정)
삭제(DELETE)DELETE

PUT VS PATCH 멱등성 차이

  • PUT은 반복 실행하면 초기화하고 새로운 걸로 채운다.(멱등성이 있다.)
  • PATCH는 반복 실행하면 기존데이터가 계속해서 바뀐다.(멱등성이 없다.)

👉 회원가입은 PUT, 회원정보수정은 PATCH



API(Application Programming Interface)

  • 소프트웨어 애플리케이션 간 상호 작용을 위한 인터페이스를 제공하는 도구나 규칙
  • 서로 다른 애플리케이션(컴퓨터)을 통합하기 위한 사용설명서(메뉴얼)라고 생각하면 된다.

URL & URI

URL(Uniform Resource Locator)

  • 리소스가 위치한 특정한 위치를 가리킨다다.
  • URL은 해당 페이지에 접근하기 위해 필요한 프로토콜(scheme)과 도메인 이름 또는 IP 주소(hosts), 경로(url-path) 등의 정보를 포함한다.

ex) http://www.google.com:80/search

URI(Uniform Resource Identifier)

  • URI는 프로토콜(scheme)과 도메인 이름 또는 IP 주소(hosts), 경로(url-path) 등의 정보에 더해 query, fragment를 포함한다.
  • URI은 URL을 포함하는 상위 집합이며, URI는 URL을 비롯하여 URN(Uniform Resource Name) 등 다른 식별 방식을 포함한다.

ex) http://www.google.com:80/search?q=JavaScript

💡 모든 URL은 URI이지만, 모든 URI가 URL은 아니다.

scheme - 통신 프로토콜
http://, https:// 등
hosts - 파일이 위치한 웹 서버, 도메인 또는 IP
127.0.0.1, www.google.com 등
port - 웹 서버에 접속하기 위한 통로
:80, :443, :3000 등
url-path - 웹 서버의 루트 디렉토리로부터 파일이 위치까지의 경로
/search, /Users/username/Desktop 등
query - 웹 서버에 전달하는 추가 질문
?q=JavaScript 등



IP 주소와 PORT

IP 주소(Internet Protocol Address)

  • 네트워크에서 각 장치를 식별하기 위해 사용되는 고유한 숫자
  • IPv4와 IPv6 두가지의 종류가 있다.
  • IPv4는 '127.0.0.1'과 같은 형태를 가지며 각 숫자는 0부터 255까지 나타낼 수 있다.
  • IPv6는 2^(128)개의 주소를 나타낼 수 있으며 IPv4가 나타낼 수 있는 최대 주소가 넘어간 문제를 해결한다.

PORT

  • 컴퓨터 내에서 프로세스가 통신을 수신하는데 사용되는 번호
  • PC에 접속할 수 있는 채널을 의미한다.
  • 포트 번호는 0부터 65535까지의 범위에서 할당될 수 있다.
  • 만약 3000번이 사용중이라면 3000번은 사용하지 못한다.
  • 주요 포트 번호 22 : SSH 80 : HTTP 443: HTTPS
    포트번호



DNS(Domain Name System)

  • 도메인 이름을 해당하는 IP 주소로 변환하는 역할을 한다.(반대의 경우도 가능)
  • 사용자가 도메인 이름을 입력하면 해당 도메인 이름에 대한 IP 주소를 찾아주는 역할을 한다.
  • 예를 들어 www.google.co.kr을 입력하면 DNS는 해당 주소의 IP를 찾아 웹 서버로 요청 전달한다.

HTTP의 작동방식

  1. 클라이언트가 서버에 요청을 보낸다.(웹 브라우저에서 URL을 입력)

  2. 클라이언트의 요청 메시지(HTTP Messages)가 서버에 전송된다.

  3. 서버는 클라이언트의 요청을 받고 처리한다.

  4. 서버는 요청에 대한 응답을 생성. (상태 코드, 응답 헤더, 응답 본문 등)

  5. 서버의 응답 메시지가 클라이언트로 전송되고 클라이언트는 응답을 처리한다.

HTTP Messages

  • 클라이언트와 서버 간의 통신에서 사용되는 데이터 구조
  • HTTP Messages는 요청(Request) 메시지와 응답(Response) 메시지로 나눌 수 있다.

요청(Requests)

Start line(Request Line)

  • 첫번째 줄에 작성되며, 차례대로 수행할 작업, 요청 대상 URL, 사용된 HTTP 버전을 나타낸다.

1. 수행할 작업

  • GET, PUT, POST 등이나 방식(HEAD or OPTIONS)을 설명하는 HTTP method를 나타낸다.

2. 요청 대상

  • URL이나 URI, 프로토콜, 포트, 도메인의 절대 경로 등을 나타낸다.
  • 요청 형식은 HTTP method 마다 다르며, origin 형식, absolute 형식, authority 형식, asterisk 형식 등이 있다.

3. HTTP 버전

  • HTTP 버전에 따라 HTTP message의 구조가 달라지므로 HTTP 버전을 입력한다.
  • 헤더 필드들의 집합으로, 요청에 대한 메타 정보를 포함하며, 크게 3가지로 나눌 수 있다.

1. General headers

  • 메시지 전체에 적용되는 헤더

2. Request headers

  • fetch를 통해 가져올 리소스나 클라이언트 자체에 대한 자세한 정보를 포함하는 헤더

3. Representation headers(Entity headers)

  • body에 담긴 리소스의 정보를 포함하는 헤더

Body

요청과 함께 전송되는 데이터를 포함하며, 선택적으로 사용된다.



응답(Responses)

Status Line

  • 첫번째 줄에 작성되며, 현재 프로토콜의 버전, 상태 코드(요청 결과), 상태 메시지를 나타낸다.

상태 코드

  • 1xx: 정보성 응답 (Informational responses)
  • 2xx: 성공적인 응답 (Successful responses)
  • 3xx: 리다이렉션 (Redirection messages)
  • 4xx: 클라이언트 오류 (Client error responses)
  • 5xx: 서버 오류 (Server error responses)

Header

헤더 필드들의 집합으로, 응답에 대한 메타 정보를 포함하며, 크게 3가지로 나눌 수 있다.

General headers

  • 메시지 전체에 적용되는 헤더로

Response headers

  • 위치 또는 서버 자체에 대한 정보(이름, 버전 등)와 같이 응답에 대한 부가적인 정보를 갖는 헤더

Representation headers(Entity headers)

  • body에 담긴 리소스의 정보를 포함하는 헤더

Body

  • 응답으로 전송되는 데이터
  • 선택적으로 사용한다.

AJAX( Asynchronous JavaScript And XMLHttpRequest)

  • 웹 애플리케이션에서 비동기적으로 서버와 데이터를 교환하기 위한 개발 기법
  • 페이지 전체를 다시 로드하지 않고도 서버와 데이터를 주고받을 수 있다.
  • 검색창에 문자를 입력하면 연관검색어가 나오는 경우를 예시로 볼 수 있다.
  • Fetch를 이용하여 페이지를 이동하지 않아도 서버로부터 필요한 데이터를 받아올 수 있다.
  • JavaScript에서 DOM을 사용해 조작할 수 있기 때문에, Fetch를 통해 새로운 페이지로 이동하지 않고 기존 페이지에서 필요한 부분만 변경이 가능하다.
  • 사용자가 웹 애플리케이션을 사용하는 동안 백엔드 서버 또는 다른 외부 서비스와의 데이터 교환이 가능하다.(보이지 않는 통신)

AJAX 장점

  • 서버에 HTML을 완성하여 보내주지 않아도 웹페이지를 만들 수 있다.
  • 표준화된 방법
  • 유저 중심 애플리케이션 개발
  • 더 작은 대역폭

AJAX 단점

  • Search Engine Optimization(SEO)에 불리
  • 뒤로가기 버튼 문제



SSR & CSR

SSR(Server-Side Rendering)

  • 서버에서 초기 HTML을 생성하여 클라이언트에게 전달하는 방식

  • 서버에서 페이지를 렌더링하고 데이터를 채워서 전송한다.

  • 검색 엔진 최적화(SEO)에 유리하며, 초기 로딩 속도가 빠르다.

  • 하지만, 서버 자원이 많이 소모될 수 있고, 사용자 경험이 초기 로딩 시간에 제한될 수 있다.

CSR(Client-Side Rendering)

  • 초기에 비어있는 HTML 페이지를 전송한 후, 클라이언트에서 페이지를 렌더링하는 방식
  • 클라이언트는 초기 HTML을 받은 후, JavaScript를 사용하여 서버에서 데이터를 요청하고 페이지를 렌더링한다.

SSR은 초기 로딩 속도와 SEO를 중요시하는 경우에 유용
CSR은 빠른 동적 렌더링과 더 좋은 사용자 경험을 중요시하는 경우에 유용.

profile
dice0314
정리노트
이전 포스트

React State & Props

다음 포스트

REST API

0개의 댓글

관련 채용 정보