[TIL] JS 콜백, 비동기, Promise, fetch, 서버 세팅

✍ Today I Learned

• 콜백 함수(Callback function)란? 다른 함수에 인수로 전달되는 함수이다. 콜백 함수는 다른 함수가 완료된 이후에 실행된다. (이때 괄호는 사용하지 않는다.)
• 외부 리소스를 로드하는 함수를 생성하면 완전히 로드되기 전까지는 그 콘텐츠를 사용할 수 없다. 이럴 때 콜백 함수를 사용한다.
• Promise 객체란? 실행에 시간이 걸리는 코드와 결과를 기다려야 하는 코드를 연결해주는 객체이다. 데이터 통신에 사용된다.

let myPromise = new Promise(function(myResolve, myReject) {
// "Producing Code" (May take some time)

  myResolve(); // when successful
  myReject();  // when error
});

// "Consuming Code" (Must wait for a fulfilled Promise)
myPromise.then(
  function(value) { /* code if successful */ },
  function(error) { /* code if some error */ }
);

• Promise 객체는 state와 result 2가지 프로퍼티를 지원한다.

myPromise.state	myPromise.result
"pending"	undefined
"fulfilled"	a result value
"rejected"	an error object

• async - 함수가 Promise 객체를 반환하도록 한다.
• await - 함수가 Promise 객체를 기다리게 한다. (이전 라인 코드 실행이 완료될 때까지 다음 라인 실행을 기다리게 하는 기능)
• async로 시작하는 함수에만 await를 사용할 수 있다.
• JSON API를 테스트해볼 수 있는 가상 데이터 제공 사이트 (https://jsonplaceholder.typicode.com/)
• 외부에서 리소스를 받아오는 경우에는 반드시 예외처리를 해주어야 한다.
• fetch API란? async와 await을 기반으로 데이터 통신을 위해 제공되는 함수이다.
• fetch API 인터페이스를 사용하면 웹 브라우저가 웹 서버에 HTTP 요청을 할 수 있다.
• fetch의 첫 번째 파라미터는 url, 두 번째 파라미터는 header에 적용될 객체를 사용한다.
• fetch는 Promise를 리턴하고, then 메서드는 Promise 객체를 리턴하는 함수를 기다린다.
• 서버와 통신하는 데이터의 형태는 json, 타입은 string이다.
• 데이터 통신의 핵심 개념은 2가지이다.
  1. 어디로 가는지
  2. 어떤 데이터가 가는지
• 제공된 php 파일로 dothome에 서버를 구축하고, admin 페이지에서 데이터베이스 구조도 쌓아놓았다.
• 약속된 API로 화면단을 구성하여 서버와의 통신에 성공!
• 띄어쓰기 한 개로도 오류가 난다는 사실 잊지 말기..
• 선택된 select를 가져오려면 document.querySelector('#select_id option:checked').value;