Web Architectures(웹 시스템의 구성)

웹 아키텍처는 크게 클라이언트(Client), 서버(Server), DB(Data base)로 이루어져 있다.

 

클라이언트 : 인터넷에 연결된 사용자의 디바이스, 또는 웹에 접근할 수 있는 소프트웨어

//Chrome, Internet Explorer, Safari 등

//유저와의 전반적인 상호작용을 담당한다.

서버 : 클라이언트의 리소스 요청을 받고, 해당 요청을 처리하는 역할을 한다.

DB : 리소스의 저장소

 

클라이언트와 서버의 상호관계 그림예제_출처 : 코드스테이츠

 

 

Browser

컴퓨터는 2진수만 이해할 수 있다.

브라우저 내부 엔진을 통하여 HTML, CSS, Javascript 등으로 작성된 코드를 내부 엔진으로

해독하여 유저가 쉽게 이해할 수 있는 형태의 콘텐츠로보여주는 역할을 한다.

 

API(Application Programming Interface)

API란 클라이언트가 서버의 자원을 가져다 쓸 수 있게 만들어놓은 Interface이다.

흔히 메뉴판으로 비유를 한다.

클라이언트가 메뉴판을 통하여 서버에 요청을 했을때, 서버는 메뉴에 맞게 DB에서 리소스를

꺼내온 다음 요청에 맞는응답을 한다.

 

HTTP(HyperText Transfer Protocol)

클라이언트와 서버가 통신할 때 사용되는 규약

요청과 응답의 형식으로 작동한다.

 

기본적으로 http의 요청은 헤더(header)와 바디(body)를 가지고 있다.

헤더:

어디서 보내는 요청인가?(origin)

콘텐츠 타입은 무엇인가?(content-type)

어떤 클라이언트를 이용하여 보냈는가?(user-agent)

body:

서버에 데이터를 보내기 위한 공간

HTTP 헤더와 바디

 

http는 stateless, connectionless의 속성을 가지고 있다.

//stateless : http의 각 요청은 모두 독립적이다.

//connectionless : 한 번의 요청을 했으면 한번의 응답을 한다.

//지속되지 않고, 응답을 하는 순간 요청은 종료된다.

 

Method
GET - 서버에 자원을 요청
POST - 서버에 자원을 생성
PUT - 서버의 자원을 수정
DELETE - 서버의 자원을 제거

 

AJAX(Asynchronous JavaScript and XML)

비동기적인 웹앱 제작을 위한 개발기법

서버와 통신하기 위해 XMLHttpRequest 객체를 사용한다.

//XML : URL으로부터 데이터를 받아올 수 있는 객체 서버와 상호작용을 하기 위해 사용된다.

//XML 데이터 이외에 모든 종류의 데이터를 받아올 수 있다.

//JSON, XML, HTML, text,...

Javascript와 DOM을 이용하여 페이지를 깜박이지 않고 동적으로 작동하게 한다.

Fetch API를 통해 AJAX요청을 보낼 수 있다.

 

특징

1. 페이지를 새로고침 하지 않아도 서버에 요청할 수 있다.

2. 서버로부터 데이터를 받고 작업을 수행한다.

 

AJAX 도입 전에는 <form> 태그를 이용하여 정적으로 페이지 랜더링을 했다

//동적 : 페이지 부분 랜더링

//정적 : 페이지 전체 재 랜더링

 

CORS

도메인 or 포트가 다른 서버의 자원을 요청하면 이슈가 발생한다.

가장 쉬운 해결방법은 서버와 클라이언트가 같은 도메인과 포트를 사용하면 된다.

//현실적으로 다방면의 도메인과 포트를 이용하기 때문이 어렵다.

이슈를 해결하기 위해 CORS라는 것을 도입하기 했다.

 

CORS는 Cross Origin Resource Sharing의 약자로 추가 HTTP 헤더를 사용하여 한 서버에서

실행 중인웹이 다른 서버의 자원에 접근할 수 있는 권한을 부여받게 하는 방법이다.