181205 - TIL

---

주제: 자바스크립트

강의: 자바스크립트 부트캠프

날짜: 2018.12.05

강의자: 김민태님

---

## 연산자 

후치연산자 

a = 10;

a++ +5;//15

새로운 연산자

spread(확산)

let 열대과일 = ['두리안', '파파야', '아보카도'];

let 맛있는과일 = ['사과', '배', '수박'];

let 과일 = [...맛있는과일, ...열대과일];

console.log(과일); // 두개의 배열을 하나로 만든다

로컬 - 리모트(원격)

let request = new XMLHttpRequest();

request.open('GET', '/api/books', true);//요청방식/요청주소/동기적,비동기적인것에 대한 true,false, 디폴트는 true,비동기 방식이다.

//api폴더밑에 books라는 자원을 나에게 줘!!

request.addEventListener('load', function() {//load 서버로부터 응답이 옴. 

if (request.status >= 200 && request.status < 400) { // 200~400 사이의 응답이 온다면 내 요청에 부합하는 결과가 왔다고 처리

let books = JSON.parse(request.responseText);

let bookList = document.querySelector('#book-list');

books.forEach(book => {

let li = document.createElement('li');

li.innerText = `${book.title} - ${book.writer}`;

bookList.appendChild(li);

});

} else { // 실패했을 때. 실패를 사용자에게 어떻게 보여주는지에 따라 더 복잡해질수 있다

alert('문제가 발생했습니다');

}

});

request.addEventListener('error', function() { //로컬에서 일어나는 에러가 여기서 처리된다.

alert('네트워크 연결을 확인해 주세요.');

});

request.send();

url - 자원(리소스)

restful - 자원을 가져오기, 생성, 삭제, 수정(get, post, delete, put)할 수 있는 일종의 메소드.

응답 - 성공(200), 실패, 

실패는 두가지로 나눌수 있다.  1. 서버가 응답을 왜 못주는지 이유를 알고 있는 실패(400오류) 2. 이유를 모르는 실패(500번대 오류)

숫자 응답을 response code 라고 한다.

200 - 응답성공

201 - post에 대한 성공

300 - 캐싱, 성공이지만 완벽한 성공은 아닌...

404 - not found

401, 403 - 자원을 가져올 자격요건이 안됨(권한)

이러한 응답코드는 restful 규약에 권고되어있다. 

동기적 코드

let request = new XMLHttpRequest();

request.open('GET', '/api/books', false);

request.send(); //응답을 받을때까지 ui가 멈춘다.

if (request.status >= 200 && request.status < 400) {

let books = JSON.parse(request.responseText);

let bookList = document.querySelector('#book-list');

books.forEach(book => {

let li = document.createElement('li');

li.innerText = `${book.title} - ${book.writer}`;

bookList.appendChild(li);

});

} else {

alert('문제가 발생했습니다');

}

비동기

$.get({

url: '/api/books',

success: function(resp) { //응답 객체로 받아서 사용. 

let books = resp;

let bookList = document.querySelector('#book-list');

books.forEach(book => {

let li = document.createElement('li');

li.innerText = `${book.title} - ${book.writer}`;

bookList.appendChild(li);

});

},

error: function() {

alert('문제가 발생했습니다');

}

});

fetch api - promise를 리턴한다. 비동기로 동작. 이벤트 방식이 아니다. 리턴받은 promise 객체의 then에 기술된함수 내용이 호출된다.

---

노트 요약

---

---

초보 퍼블리셔의 공부정리 블로그입니다.

내용에 오류가 있거나 수정사항이 있다면 꼭 댓글 부탁드립니다