[SEB_FE_45] 2023.05.19 / HTTP, 네트워크 기초

Kay·2023년 5월 19일

[코드스테이츠] 프론트엔드 부트캠프 (SEB_FE_45)

목록 보기

23/29

웹어플리케이션 아키텍쳐

2티어 아키텍처

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

리소스를 제공하는 곳(서버)과 리소스를 사용하는 앱(클라이언트)을 분리시킨 것

3티어 아키텍처

기존 2티어 아키텍처에 데이터베이스가 추가된 형태

꼭 읽어봐야할 글

tistory - [Web] 웹 애플리케이션 아키텍처 개념 정리 및 구현, 기술
github - 신입 웹 개발자일 때 알았더라면 좋았을 기본 웹 아키텍처 개념

클라이언트 - 서버 통신

클라이언트와 서버가 서로 데이터를 주고받기 위해 HTTP라는 프로토콜을 사용

꼭 읽어봐야할 글

tistory - OSI 7 계층이란?, OSI 7 계층을 나눈 이유

API

API: Application Programming Interface
서버는 클라이언트에게 리소스를 잘 활용할 수 있도록 인터페이를 제공해야 함

Rest API

GET, POST, PUT(또는 PATCH), DELETE

꼭 읽어봐야할 글

aws docs - RESTful API란 무엇입니까?

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

URL과 URI

URL: Uniform Resource Locator

scheme, hosts, url-path로 구분할 수 있다.

scheme: 통신 방식(프로토콜) 지정
hosts: 웹 서버의 이름이나 도메인, IP
url-path: 웹서버에서 지정한 루트 디렉토리(/)부터 시작하여 웹 페이지, 이미지, 동영상 등이 위한 경로와 파일명

URI: Uniform Resource Identifier

URL의 기본 요소인 scheme, hosts, url-path에 더해 query, fragment를 포함

query: 웹 서버에 보내는 추가적인 질문
fragment: 일종의 북마크 기능을 수행하며 URL에 fragment(#)와 특정 HTML 요소의 id를 전달하면 해당 요소가 있는 곳으로 스크롤을 이동

URI는 URL을 포함하는 상위개념

꼭 읽어봐야할 글

tistory - 🌐 URL / URI / URN 차이점 - 한방 이해하기

IP Address와 포트

IP Address: Internet Protocol

IPv4는 Internet Protocol version 4의 줄임말
IPv4는 각 덩어리마다 0부터 255까지 나타낼 수 있습니다. 따라서 2^(32)인 약 43억 개의 IP 주소를 표현할 수 있음

역할이 지정된 포트

localhost, 127.0.0.1 : 현재 사용 중인 로컬 PC를 지칭합니다.
0.0.0.0, 255.255.255.255 : broadcast address, 로컬 네트워크에 접속된 모든 장치와 소통하는 주소입니다. 서버에서 접근 가능 IP 주소를 broadcast address로 지정하면, 모든 기기에서 서버에 접근할 수 있습니다.

IPv6의 등장
개인 PC의 보급으로 전 세계의 누구나 PC를 이용해 인터넷에 접속하고, 각종 서비스를 위해 서버를 생산하면서 IPv4로 할당할 수 있는 PC가 한계를 넘어서게 되었고, IPv6는 표기법을 달리 책정하여 2^(128)개의 IP 주소를 표현

Port

IP 주소가 가리키는 PC에 접속할 수 있는 통로(채널)를 의미
포트 번호는 0~ 65535까지 사용할 수 있으며, 그중에서 0 ~ 1024번까지의 포트 번호는 주요 통신을 위한 규약에 따라 이미 정해져 있음

22 : SSH
80 : HTTP
443: HTTPS

도메인과 DNS

도메인 Domain name

웹 브라우저를 통해 특정 사이트에 진입을 할 때, IP 주소를 대신하여 사용하는 주소

참고) nslookup: 터미널에서 도메인 이름을 통해 IP 주소를 확인하는 명령어

DNS

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

HTTP

HTTP Message

요청(Requests), 응답(Responses)의 구조

Stateless

HTTP의 큰 특징이며, HTTP로 클라이언트와 서버가 통신을 주고받는 과정에서, HTTP가 클라이언트나 서버의 상태를 확인하지 않는다는 의미
필요에 따라 다른 방법(쿠키-세션, API 등)을 통해 상태를 확인할 수 있다.

HTTP Request 세부 구조

Start Line

수행할 작업이나 방식: GET, POST, PUT(또는 PATCH), DELETE 표시
요청대상: 일반적으로 URL이나 URI, 요청 형식은 HTTP method 마다 다름
- origin 형식
  POST / HTTP 1.1
  GET /background.png HTTP/1.0
  HEAD /test.html?query=alibaba HTTP/1.1
  OPTIONS /anypage.html HTTP/1.0
- absolute 형식: 주로 GET 메서드이랑 사용
  GET http://developer.mozilla.org/en-US/docs/Web/HTTP/Messages HTTP/1.1
- authority 형식: 도메인 이름과 포트 번호로 이루어진 URL의 일부분, HTTP 터널을 구축하는 경우, CONNECT와 함께 사용
  CONNECT developer.mozilla.org:80 HTTP/1.1
- asterosl 형식: OPTIONS와 함께 별표(*) 하나로 서버 전체를 표현
  OPTIONS * HTTP/1.1

Headers

General headers : 메시지 전체에 적용되는 헤더로, body를 통해 전송되는 데이터와는 관련이 없는 헤더
Request headers : fetch를 통해 가져올 리소스나 클라이언트 자체에 대한 자세한 정보를 포함하는 헤더를 의미
- User-Agent, Accept-Type, Accept-Language
Representation headers : 이전에는 Entity headers로 불렀으며, body에 담긴 리소스의 정보(콘텐츠 길이, MIME 타입 등)를 포함하는 헤더

Body

요청의 본문은 HTTP messages 구조의 마지막에 위치
GET, HEAD, DELETE, OPTIONS처럼 서버에 리소스를 요청하는 경우에는 본문이 필요하지 않으며, POST나 PUT과 같은 일부 요청은 데이터를 업데이트하기 위해 사용

HTTP Responses

Start Line

현재 프로토콜의 버전(HTTP/1.1)
상태 코드 - 요청의 결과 (ex. 200, 302, 404 등)
상태 텍스트 - 상태 코드에 대한 설명
HTTP/1.1 404 Not Found

Headers

General headers : 메시지 전체에 적용되는 헤더로, body를 통해 전송되는 데이터와는 관련이 없는 헤더
Response headers : 위치 또는 서버 자체에 대한 정보(이름, 버전 등)와 같이 응답에 대한 부가적인 정보를 갖는 헤더로, Vary, Accept-Ranges와 같이 상태 줄에 넣기에는 공간이 부족했던 추가 정보를 제공
Representation headers : 이전에는 Entity headers로 불렀으며, body에 담긴 리소스의 정보(콘텐츠 길이, MIME 타입 등)를 포함하는 헤더

Body

201, 204와 같은 상태 코드를 가지는 응답에는 본문이 필요하지 않으며, status와 서버에서 내려주는 데이터를 포함함

꼭 읽어봐야할 글

HTTP 상태 코드 정리

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

AJAX: Asynchronous JavaScript And XMLHttpRequest

JavaScript, DOM, Fetch, XMLHttpRequest, HTML 등의 다양한 기술을 사용하는 웹 개발 기법
가장 큰 특징: 웹 페이지에 필요한 부분에 필요한 데이터만 비동기적으로 받아와 화면에 그려낼 수 있다는 것

AJAX의 두 가지 핵심 기술

JavaScript와 DOM, 그리고 Fetch

전통적인 웹 애플리케이션에서는 <form> 태그를 이용해 서버에 데이터를 전송하고 서버는 요청에 대한 응답으로 새로운 웹 페이지를 제공한다.
즉, 클라이언트에서 요청을 보내면 매번 새로운 페이지로 이동해야 한다는 것이다.

그러나 Fetch를 통해 페이지를 이동하지 않아도 서버로부터 필요한 데이터를 받아올 수 있다.
즉, 브라우저는 Fetch가 서버에 요청을 보내고 응답을 받을 때까지 모든 동작을 멈추는 것이 아니라 계속해서 페이지를 사용할 수 있게 하는 비동기적인 방식을 사용한다.

또한 JavaScript에서 DOM을 사용해 조작할 수 있기 때문에, Fetch를 통해 전체 페이지가 아닌 필요한 데이터만 가져와 DOM에 적용시켜 새로운 페이지로 이동하지 않고 기존 페이지에서 필요한 부분만 변경할 수 있다.

Fetch 이전 사용하던 XHR(XMLHttpRequest)

// XMLHttpRequest를 사용
var xhr = new XMLHttpRequest();
xhr.open('get', 'http://52.78.213.9:3000/messages');

xhr.onreadystatechange = function(){
	if(xhr.readyState !== 4) return;
	// readyState 4: 완료

	if(xhr.status === 200) {
        // status 200: 성공
		console.log(xhr.responseText); // 서버로부터 온 응답
	} else {
		console.log('에러: ' + xhr.status); // 요청 도중 에러 발생
	}
}

xhr.send(); // 요청 전송

AJAX의 장점

서버에서 HTML을 완성하여 보내주지 않아도 웹페이지를 만들 수 있다.
XHR이 표준화되면서부터 브라우저에 상관없이 AJAX를 사용할 수 있게 되었다.
AJAX를 사용하면 필요한 일부분만 렌더링하기 때문에 빠르고 더 많은 상호작용이 가능한 애플리케이션을 만들어 유저 중심 애플리케이션 개발이 가능하다.
더 작은 대역폭(네트워크 통신 한 번에 보낼 수 있는 데이터의 크기)
- 이전에는 서버로부터 완성된 HTML 파일을 받아와야 했기 때문에 한 번에 보내야 하는 데이터의 크기가 컸지만, AJAX에서는 필요한 데이터를 텍스트 형태(JSON, XML 등)로 보내면 되기 때문에 비교적 데이터의 크기가 작다.

AJAX의 단점

Search Engine Optimization(SEO)에 불리
뒤로가기 버튼 문제
- AJAX에서는 이전 상태를 기억하지 않기 때문에 뒤로가기 등의 기능을 구현하기 위해서는 별도로 History API를 사용

Kay

이전 포스트

[SEB_FE_45] 2023.05.17 / React 기초

다음 포스트

[SEB_FE_45] 2023.05.19 / HTTP, 네트워크 기초

[코드스테이츠] 프론트엔드 부트캠프 (SEB_FE_45)

웹어플리케이션 아키텍쳐

2티어 아키텍처

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

3티어 아키텍처

꼭 읽어봐야할 글

클라이언트 - 서버 통신

꼭 읽어봐야할 글

API

꼭 읽어봐야할 글

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

URL과 URI

URL: Uniform Resource Locator

URI: Uniform Resource Identifier

꼭 읽어봐야할 글

IP Address와 포트

IP Address: Internet Protocol

Port

도메인과 DNS

도메인 Domain name

DNS

HTTP

HTTP Message

Stateless

HTTP Request 세부 구조

Start Line

Headers

Body

HTTP Responses

Start Line

Headers

Body

꼭 읽어봐야할 글

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

AJAX: Asynchronous JavaScript And XMLHttpRequest

AJAX의 두 가지 핵심 기술

Fetch 이전 사용하던 XHR(XMLHttpRequest)

AJAX의 장점

AJAX의 단점

[SEB_FE_45] 2023.05.17 / React 기초

[SEB_FE_45] 2023.05.25 / 리액트 데이터 다루기

0개의 댓글