Intro Web Architecture

zenibako.lee
8 min readSep 27, 2019

--

BROWSER

대표적인 클라이언트.

클라이언트 = 터미널 역할을 수행하는 ㅓㅋㅁ퓨터.

사용자 입력을 주료 수행 / response를 화면에 표시

네트워크 기초

Application 계층에서 각각의 프로토콜이 사용하는 port 번호

라우팅(영어: routing)은 어떤 네트워크 안에서 통신 데이터를 보낼 최적의 경로를 선택하는 과정이다. 최적의 경로는 최단 거리가 될수도 있으며, 가장 빠른 시간에 전달하는 것으로 계산될수도 있다. 라우팅은 전화 통신망, 전자 정보 통신망(인터넷 같은) 그리고 교통망 등 여러 종류의 네트워크에서 사용된다.

그 중 한가지 방식으로 패킷스위칭이 있다.

인터넷에서 네트워크 계층의 기능을 제공하는 프로토콜은 IP며, IP 프로토콜 위에서 실행되는 전송 4계층 프로토콜은 서비스의 유형에 따라 두 종류로 구분한다. TCP는 연결형 서비스를 지원하는 프로토콜이고, UDP는 비연결형 서비스를 지원하는 프로토콜이다.

[네이버 지식백과] TCP (데이터 통신과 컴퓨터 네트워크, 2013. 9. 10., 박기현)

TCP는 통신할 컴퓨터끼리 서로 확인 메시지를 보내면서 데이터를 주고받음으로써 통신의 신뢰성을 높인다. 웹이나 메일, 파일 공유 등과 같이 데이터를 누락시키고 싶지 않은 서비스는 TCP를 사용하고 있다

그에 반해 데이터의 신뢰성은 제쳐두고 어쨌든 빨리 보내고 싶을 때는 ‘UDP(User Datagram Protocol)’를 사용한다 . UDP는 데이터를 보내면 그것으로 끝이므로 신뢰성은 없지만 확인 응답과 같은 절차를 생략할 수 있으므로 통신의 신속성을 높인다. VoIP(Voice over IP)나 시간 동기, 이름 해결 등과 같이 무엇보다 속도를 필요로 하는 서비스는 UDP를 사용하고 있다.

SERVER

서버는 이전에 정리해둔 걸로 대체한다.

p2p의 경우, 개별 컴퓨터가 서버/클라이언트의 역할을 모두 수행.

Messaging patterns

  1. request -response

http가 사용하는 메시징패턴. 동기적으로 작동. res도착까지 기다리거나 , timeout

2. publish-subscribe

수신자 지정없이 중앙에서 publish , 구독자에게 일괄 배포.

비동기 메시징. (메시지 브로커 or 이벤트 버스 중간에 필요)

3. push technology (Server push)

publish-subscribe 모델의 일종.

http/2에서 server push로 존재. websocket 프로토콜 이용.

Client는 Req의 결과로 서버로부터 받은 res를 참고해 기존의 자료를 업데이트, re-rendering해야 할 경우가 발생한다.

client-side 라이브러리와 프레임워크들은 이러한 경우를 대비해 components들을 항상 up-to-date로 유지하기 위한 메카니즘을 갖고 있다.

API

= Application Programming Interface.

HTTP req을 통해 서버와 상호작용하기 위한 사양.

HTTP

=HyperText Transfer Protocol

서버와 클라이언트가 주로 HTML 등의 문서를 통신할 때 사용하는 프로토콜

(HTML = HyperText Markup Language)

주로 TCP/UDP 80번 포트를 사용

이 때, 클라이언트에서 요청할 때 보내는 http request의 구조는 아래와 같다.

첫 째 줄은 start/status line이라고 한다.

HTTP의 특징

특정 상태를 담고있지 않음. (Stateless) — 이전요청,다음요청 기억 x 단발적

연결상태 유지 x (Connectionless)

Request-Response Cycle

HTTP 요청은 URI을 통해 할 수 있다

https://www.quora.com/Is-there-any-relation-between-URI-and-URL

URL

Uniform Resource Locator

출처 : codestates

리소스의 위치를 표현한다.

서버,도메인, endpoint까지의 경로를 포함한다.

www.google.com 이라는 주소로 접속을 하면,

DNS Server(name server)에 요청, 접속 ip를 받게된다.

이때, Resolver(해석기)가 DNS서버에 대한 액세스를 수행하고, 응답을 해석, 호스트에 대한 IP주소를 돌려준다.

실질적인 하드드라이브의 절대주소가 아닌, REST 방식을 사용하여 논리적 위치로 표현.

주소창을 통해 하는 요청은 전부 GET Request.

크롬 개발자도구 Network탭을 이용하면 여러가지 정보 조회가 가능하다.

HTTP request method 종류

GET: 조회

POST : 게시

PUT : UPDATE

DELETE

HTTP Response status code

1xx : hold on

200 성공 (2xx대는 성공)

403 권한문제 ( 4xx대는 실패)

404 not found

500 Internal Server Error (원인불명 서버에러)

그 외는 검색해서 확인

POSTMAN을 이용하여

REQUEST 내용 조작 및 요청 타입 설정 가능.

Ajax

자바스크립트와 XML을 비동기로 처리하기 위한 두문자어 (Acronym)

페이지가 로드된 이후 요청에 따라 비동기적으로 데이터를 로드/반영 하기 위함.

https://opentutorials.org/course/1375/6851

jQuery load() 메서드는 간단한 (하지만 매우 강력한) AJAX 함수입니다.

이 메서드는 다음과 같은 문법으로 사용합니다.

$(selector).load(url,data,callback)

selector는 변경시킬 HTML 엘리먼트를 정의합니다. 그리고 url 변수는 데이터를 가지고 있는 웹 주소를 나타냅니다.

{예제10–1}

서버에 데이터를 보내기만 할 것이라면 data 변수를 사용합니다.

수행이 완료된 후에 어떤 함수를 실행시키려면 callback 변수를 사용합니다

[출처] jQuery 강좌 10 — jQuery AJAX|작성자 기냥이

--

--

zenibako.lee
zenibako.lee

Written by zenibako.lee

backend engineer, JS, Node, AWS

No responses yet