웹 아키텍처는 크게 클라이언트(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는 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 헤더를 사용하여 한 서버에서
실행 중인웹이 다른 서버의 자원에 접근할 수 있는 권한을 부여받게 하는 방법이다.
'Software Engineering' 카테고리의 다른 글
React(리액트) 기초 (0) | 2020.11.18 |
---|---|
Fetch API (0) | 2020.11.16 |
node.js module 사용법 (0) | 2020.11.14 |
동기(Synchronous), 비동기(Asynchronous) (0) | 2020.11.14 |
고차함수(Higher order function) in Javascript (0) | 2020.11.14 |