[TIL]200923 Chatterbox Client

배열이 주어졌을 때, 이 중 3개의 숫자를 곱하여 나올 수 있는 최대값을 return하는 함수를 작성하세요.

예시

largestProductOfThree([2, 1, 3, 7]) === 42;

배열의 요소 중 가장 큰 값 3개를 곲하면 최대값이 나올 것이라고 생각이 들었고 Math.max메소드를 통해서 최대값을 구해서 풀어낼 수 있었다. sort()메소드를 통해서도 풀어낼 수 있을 것이라고 생각된다.

API? UI?

이번 스프린트는 API를 활용해서 UI를 만드는 스프린트이다
API는 뭐고 UI는 뭘까?
API는 Application Programiming Interface의 약자이고 UI User Interface의 약자다 그럼 두 단어에 공통적으로 들어가 있는 interface에 집중해보자 interface란 간단히 얘기하면 사물과 사물간의 의사소통이 가능하도록 만든 매개체라고 할 수 있다.
그렇다면 API는 프로그래밍 되어있는 애플리케이션과 의사소통 가능한 매개체라고 할 수 있고
UI는 유저와 의사소통 가능한 매개체라고 할 수 있다.

이번 스프린트를 통해서 위 그림을 이해하려고 한다.
브라우저,서버,API,HTTP,Ajax는 뭐고 어떤역할을 할까?

Browser 브라우저

web browser 또는 browser는 웹에서 페이지를 찾아서 보여주고, 사용자가 하이퍼링크를 통해 다른 페이지로 이동할 수 있도록 하는 프로그램이다.
웹 서버에서 이동하며(navigate) 쌍방향으로 통신하고 HTML 문서나 파일을 출력하는 그래픽 사용자 인터페이스(GUI) 기반의 응용 소프트웨어이다.

브라우저의 역할은 우리가 작성한 코드가 컴퓨터가 이해할 수 있도록 해주는 역할을 담당한다.
컴퓨터는 2진수만 알아듣는데 그럼에도 불구하고 우리가 html, css, js로 작성한 코드를 컴퓨터에서 볼 수 있는 이유는 브라우저 덕분이다. 우리가 html, css, js로 코드를 작성하면 브라우저는 내부의 V8엔진으로 코드를 해독해서 컴퓨터에 2진수로 넘겨준다 그리고 컴퓨터가 처리한 결과를 다시 브라우저에 보여주게 된다.

웹 브라우저는 서버에 요청을 하기 때문에 클라이언트라고 할 수 있다.

Server 서버

서버는 일반적으로 클라이언트라고 불리는 사용자에게 서비스를 제공하는 소프트웨어 또는 하드웨어이다. 하드웨어 서버는 네트워크의 공유 컴퓨터로서, 대개 강력하고 데이터 센터에 저장된다. 소프트웨어 서버(하드웨어 서버에서 자주 실행됨)는 클라이언트 프로그램에 서비스를 제공하는 프로그램 또는 사용자 클라이언트의 user interface을 말한다.

서비스는 일반적으로 지역 네트워크 또는 인터넷과 같은 광역 네트워크를 통해 제공된다. 클라이언트 프로그램과 서버 프로그램은 전통적으로 API을 사용하여 인코딩된 메시지를 프로토콜에 전달하여 연결한다

정리해보면 서버는 자원(resource) 제공(serve)하는 주체이다

API(Application Programming Interface)

API(Application Programming Interface)는 소프트웨어 프로그램(애플리케이션) 내부에 존재하는 기능 및 규칙의 집합이다. API는 Human User Interface와 달리 소프트웨어를 통해 상호작용할 수 있다. 즉, API는 API를 제공하는 애플리케이션과 서드파티 소프트웨어 및 하드웨어 등의 것들 사이의 간단한 계약(인터페이스)이라고도 볼 수 있다.

웹 개발에서 보통 API는 개발자가 앱을 통해 사용자의 웹 브라우저에서 상호작용할 수 있도록 하는 코드 기능들( e.g.methods, properties, 이벤트, URLs), 사용자의 컴퓨터 상에 있는 다른 소프트웨어 및 하드웨어, 또는 서드파티 웹사이트나 서비스의 집합을 의미한다.

서버에서는 클라이언트의 요청을 받아서 리소스를 조합해서 다시 클라이언트에 돌려주는 역할을 담당한다. 클라이언트가 서버의 구성이나 데이터베이스에 어떤 것이 들어있는지 모른다면 리소스를 활용할 수 없을 것이다. 그렇기 때문에 서버는 클라이언트에게 데이터베이스에 있는 리소스를 잘 활용할 수 있도록 어떤 인터페이스를 제공하는데 이것을 API라고 한다
클라이언트는 서버에서 API를 제공해줘야 데이터베이스 안에 있는 리소스를 이용할 수 있다.

API는 서버 자원을 잘 가져다 쓸 수 있게 만들어 놓은 interface라고 할 수 있다.(예: 메뉴판)

HTTP(Hypertext Transfer Protocol)

Hypertext Transfer Protocol
프로토콜이란? 규약, 규칙이다
클라이언트와 서버가 통신하기 위해서 HTTP라는 규약을 지켜서 통신을 한다

• 작동방식
  HTTP라는 프로토콜은 요청에 대한 응답을 하는 규칙을 가지고 있다.
• 구성
  HTTP요청은 헤더와 바디를 가진다
  Header는 어디서 보내는 요청인지(origin), 컨텐츠 타입은 무엇인가(content-type), 어떤 클라이언트를 이용해서 보냈는가(user-agent)등의 정보를 가지고 있다
  Body는 서버에 데이터를 보내기 위한 공간으로 활용한다
• 속성
  stateless(무상태성): http의 각 요청은 모두 독립적이다. 모든 http 요청은 독립적이므로 서버는 클라이언트의 상태를 기억하지 못한다(지속적인 state라는 것이 없다)
  connectionless(무연결설) : 한번의 요청에는 한번의 응답을 한다. 응답이 완료가 되면 클라이언트와 서버의 연결이 끊어진다
  

Ajax(Asynchronous JavaScript And XML)

HTML, CSS, JavaScript, DOM 조작, 와 XMLHttpRequest object를 활용한 프로그래밍 방식이다. AJAX는 전체 페이지가 다시 로드되지 않고 일부분만 업데이트하는 좀 더 복잡한 웹페이지를 만들 수 있게 해준다. 또한 AJAX를 사용하면 웹페이지 일부가 리로드 되는 동안에도 코드가 계속 실행되어 비동기식으로 작업할 수 있다.

Ajax는 요청과 돔조작을 합쳐놓은 것이다

초기에는 서버와 통신하기 위해서 XMLHttpRequest API를 활용했다.

//서버와 통신하기위해 XMLHttpRequest()라는 API를 활용했었다.
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(); // 요청 전송

그리고 조금 발전해서 jQuery를 이용하게 되었다.

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

그리고 제이쿼리보다 더 쓰기 쉬운 방법이 없을까? 라는 고민끝에 ferch API로 발전하게 되었다

fetch('http://52.78.213.9:3000/messages')
.then(function(response) {
//json형태의 데이터를 사용할 수 있는 자바스크립트 오브젝트 형태로 변경한다
  return response.json();
})
.then(function(json) {
  // json 형태로 전달받은 서버로부터의 응답
});

배운것을 정리해 봤지만 아직 나도 정확하게 알고있다고 자신할 수 없다 특히나 클라이언트와 서버의 통신은 더 심도있게 공부하고 이해해야 할 것으로 보인다.