1. 코드스테이츠

---

Elements of Web Architecture

---

Browser

• html, js, css로 작성한 코드를 컴퓨터가 알 수 있게 한다.
• 브라우저는 아마도 가장 많이 사용하는 소프트웨어일 것

주요기능

• 사용자가 선택한 자원을 서버에 요청하고 브라우저에 표시하는 것.
  - 자원은 보통 HTML문서지만 PDF나 이미지 혹은 다른 형태일 수 있다.
  - 자원의 주소는 URI(Uniform Resource Identifier)에 의해 정해진다.
  
• 브라우저는 HTML과 CSS 명세에 따라 HTML파일을 해석해서 표시하는데 이 명세는 웹 표준화 기구인 W3C(World Wide Web Consortium)에서 정한다.
  - 과거에는 모든 브라우저가 이 명세를 따르지 않아 호환성 문제를 겪었다
  - 최근에는 대부분 브라우저가 표준 명세를 따른다.
  

브라우저 사용자 인터페이스

브라우저의 사용자 인터페이스는 표준 명세가 없음에도 수 년간 서로의 장점을 모방하며 현재에 이르게 되었다.

• URI를 입력할 수 있는 주소 표시줄
• 이전, 다음 버튼
• 북마크
• 새로 고침, 현재문서 로드를 중단하는 정지버튼
• 홈버튼

브라우저 기본구조

1. 사용자 인터페이스 :
   • 주소표시줄, 이전/다음 버튼, 북마크 메뉴등 요청한 페이지를 보여주는 창을 제외한 나머지 모든 부분
2. 브라우저 엔진 :
   • 사용자 인터페이스와 렌더링 엔진 사이의 동작을 제어
3. 렌더링 엔진 :
   • 요청한 콘텐츠를 표시.
   • 예 ) HTML을 요청하면 HTML과 CSS를 파싱하여 화면에 표시
4. 통신 :
   • HTTP 요청과 같은 네트워크 호출에 사용.
   • 통신은 플랫폼 독립적인 인터페이스이고 각 플랫폼 하부에서 실행된다.
5. UI 백엔드 :
   • 콤보 박스와 창 같은 기본적인 장치를 그림.
   • 플랫폼에서 명시하지 않은 일반적인 인터페이스로서, OS 사용자 인터페이스 체계 사용
6. 자바스크립트 해석기 :
   • 자바스크립트 코드를 해석하고 실행
7. 자료 저장소 :
   • 자료를 저장하는 계층.
   • 쿠키를 저장하는 것과 같이 모든 종류의 자원을 하드 디스크에 저장할 필요가 있다.
   • HTML5 명세에는 브라우저가 지원하는 '웹 데이터 베이스'가 정의 되어 있다

브라우저는 어떻게 동작하는가?

---

Server

• 자원을 serve하는 주체
  - 서비스를 제공(serve)하는 컴퓨터로, 다수의 클라이언트 컴퓨터의 요청을 처리하기 위해 존재한다.
• 클라이언트의 요청을 받으면 리소스를 바탕으로 응답한다.
• Web Server, File Server등
• 웹페이지 지원이나, 공유 데이터의 처리 및 저장 등의 비즈니스로직을 주로 수행

---

API

• 서버 자원을 잘 가져다 쓸 수 있게 만들어 놓은 Interface
• 프로그램과 또 다른 프로그램을 연결해주는 일종의 다리라고 볼 수 있다. / 혹은 메뉴판
• API는 프로그램들이 서로 상호작용하는 것을 도와주는 매개체

API 역할

1. API는 서버와 데이터베이스에 대한 출입구 역할을 한다.
2. API는 애플리케이션과 기기가 원활하게 통신할 수 있도록 한다.
3. API는 모든 접속을 표준화한다.

API유형

1. private API : 내부 API로 제 3자에게 노출되지 않는다.
2. public API : 개방형 API로, 모두에게 공개되며 누구나 제한없이 API를 사용할 수 있다.
3. partner API : 기업이 데이터 공유에 동의하는 특정인들만 사용한다.

---

HTTP

• HyperText Transfer Protocol
  - protocol : 규약, 규칙
•  W3 상에서 정보를 주고받을 수 있는 프로토콜로 주로 HTML문서를 주고받는 데에 쓰인다.
• 클라이언트와 서버가 통신할 때 사용
  - 통신을 할때는 규약을 지켜서 한다.
  

작동방식

• 항상 요청과 응답으로 이루어 진다.
• 메세지를 달라고 request하면 message를 response한다
• 없으면 없다고 응답한다.
  

• 요청을 무시한다면 오류가 난다.
  → 요청을 받은후 응답하지 않는다면, 오류발생
  

HTTP 상태코드 (HTTP response status codes)

• HTTP 응답 상태 코드는 특정 HTTP 요청이 성공적으로 완료되었는지 알려준다.

• 상태코드는 3자리 숫자로 만들어져 있으며 첫번째 자리는 1에서 5까지 제공된다.

No.	상태코드	설명
1	1XX (100–199)	Informational responses (정보) : 요청을 받았으며 프로세스를 계속 진행한다.
2	2XX (200–299)	Successful responses (성공) : 요청을 성공적으로 받았으며 인식했고 수용했다.
3	3XX (300–399)	Redirects (리다이렉션) : 요청 완료를 위해 추가 작업 조치가 필요하다.
4	4XX (400–499)	Client errors (클라이언트 오류) : 요청의 문법이 잘못되었거나 요청을 처리할 수 없다.
5	5XX (500–599)	Server errors (서버 오류) : 서버가 명백히 유효한 요청에 대해 충족을 실패했다.

→ 첫번째 자리가 4, 5인 경우 정상적인 상황이 아니라는 것을 나타내기 때문에 관리자가 즉시 알아야 하는 정보이다.

대표적인 코드

Status Code	Meaning
200	요청 성공
304	요청에 대한 응답이 수정되지 않는다(Cache)
403	컨텐츠에 접근할 권한이 없다
404	요청받은 리소스를 사용할 수 없다
500	서버가 처리할 수 없는 요청

• HTTP 상태 코드 정리
• HTTP 200 OK는? (+ HTTP 응답코드별 내용)

구성

	- 기본적으로 http요청은 헤더와 바디를 가진다     → 응답도 마찬가지로 헤더와 바디를 가진다. - 바디는 보통 비어있다. 하지만, 특정 데이터를 담아서 서버에게 요청을 보낼 수 있다.

속성

Stateless	Connectionless
http의 각 요청은 모두 독립적이다	한번의 요청에는 한번의 응답을 한다.
http 매 요청은 독립적이기 때문에 state라는 것이 없다.	응답이후 연결이 끊겨, 더이상 응답할 수 없다.

Method

• GET : 서버에 자원을 요청
  - 특정 리소스를 가져오도록 요청
• POST : 서버에 자원을 생성
  - 데이터를 서버로 제출하는 용도로 사용하며, 서버 상태의 변화를 일으킴
• PUT : 서버의 자원을 수정
  - POST와 비슷하나, 연속적인 요청시에도 같은 효과를 가져온다.
  - 기존 데이터를 교체하는 용도로 쓰일 수 있다.
• DELETE : 서버의 자원을 제거
  - 리소스의 삭제를 요청할 때 사용

GET방식 과 POST방식

예시로 보는 API와 HTTP차이

헷갈리는 나를 위한 한줄기의 빛과 같은 스타벅스 메뉴주문 예시.

API	Http(Protocol)
메뉴판	- 키오스크 - 배달 - 사이렌오더

• 프로토콜의 종류는 다양하다

  • [네트워크] 프로토콜 종류
  • 프로토콜의 종류

• 결론 :
  백엔드에서 서버를 만들고 거기에 클라이언트가 request하기 위해 설명서(API)를 쓰고, 그걸 연결하는 방법 중에 하나가 HTTP인것.

---

Ajax

• Asynchronous JavaScript and XML
• 비동기 자바스크립트와 XML (Asynchronous JavaScript And XML)을 말한다.
• Ajax의 큰 특징은 페이지 전체를 리프레쉬 하지 않고서도 수행되는 '비동기성'으로 사용자의 event가 있으면 페이지의 일부분만 업데이트 할 수 있다.
  - 페이지 깜빡임 없이 seamless하게 작동한다.
  → JS로 DOM만 바꾼다.
• 서버에 필요한 정보를 요청한다.
  - 서버와 자유롭게 통신하며 데이터를 받아온다.
  → XMLHttpRequest(XHR) 등장
• 단순한 web page가 아닌, 보다 어플리케이션 다운 web app의 등장

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(); // 요청 전송

XMLHttpRequest (using jQuery)

$.get('http://52.78.213.9:3000/messages', function(response) {
  // response: 서버로부터 온 응답
});

fetch API

• 보다 쓰기 쉬운 표준 API를 만들자!

fetch('http://52.78.213.9:3000/messages')
.then(function(response) {
  return response.json();
})
.then(function(json) {
  // json 형태로 전달받은 서버로부터의 응답
})

• 최신 기술이라고 fetch가 전부 좋은 것은 아니며, 여전히 XMLHttpRequest는 많이 쓰이는 기술이므로, fetch와 XMLHttpRequest의 차이점을 확인 후 사용하는 것이 좋다.

---

Fetch

• fetch는 서버자원을 가져오는 function이다.
• fetch API는 네트워크 통신을 포함한 리소스 취득을 위한 인터페이스가 정의되어 있다.
• XMLHttpRequest와 같은 비슷한 API가 존재하지만, 새로운 Fetch API는 좀더 강력하고 유연한 조작이 가능하다.

  fetch('http://example.com')
  .then(res => res.json())
  .then(data => {
    console.log(data);
  })
  .catch(err => {
    console.error(err);
  });

fetch외의 서버자원 가져오는 함수

• XMLHttpRequest

  function reqListener() {
    console.log(this.responseText);
  }
  
  var oReq = new XMLHttpRequest();
  oReq.addEventListener('load', reqListener);
  oReq.open('GET', 'http://www.example.org/example.txt');
  oReq.send();

• jQuery ajax

  $.ajax({
    url: 'http://example.com',
    method: 'GET',
    dataType: 'json'
  })
    .done(function(json) {
      console.log(json)
    })
    .fail(function(xhr, status, errorThrown) {
   
    })
    .always(function(xhr, status) {
      console.log('요청완료')
    });