23.06.22
1. 비동기 프로그래밍 입문
동기적(synchronous) 방식이란 ? 순차적으로 실행되는 코드 방식, 일반적으로 프로그래밍 세계에서 코드는 동기적으로 실행됨
그렇다면 비동기적(synchronous) 방식이란 ?
앞에서 코드가 끝났던 안끝났던 즉시 다음 코드로 넘어가는 방식
ex. setTimeout, addEventListner / 별도의 요청, 실행 대기, 보류 / 서버 통신과 관련한 로직
콜백지옥 : 콜백 함수를 익명 함수로 전달하는 과정이 반복되어 코드의 들여쓰기 수준이 헬 수준, 비동기적 작업 수행할 때 발생, 가독성 안좋고 수정도 어려움
=> 콜백지옥을 해결하기 위해 Promise 객체가 나옴
비동기 처리는 ‘promise = 약속’에 의해 움직이고 이와 관련된 사항들이 모두 promise 객체에 담겨있음
이때 담겨있는 중요한 상태정보
- 대기 (pending) : 요청 직후
- 이행 (fulfilled) : 전달 성공
- 거부 (rejected) : 전달 실패
axios.get()으로 api를 받아옴 .then()은 정상적으로 들어왔다는 걸 의미하고 여기 ()인자에는 콜백함수가 들어있는데 콜백함수는 응답 결과가 들어있음 .catch()은 오류가 났을 때를 의미하고 ()인자 안에 콜백함수에는 error 객체가 들어있음 .finally()는 정상이건 오류건 항상 실행되는 부분을 의미하고 ()인자 안에 콜백함수 부분이 항상 나옴
그렇다면 왜 비동기 프로그램이 필요할까 ?
비동기 프로그램을 동기적 프로그램으로 다뤄야할 때가 있어서 => 일의 순서가 중요하기 때문에 !
이것을 도와주는게 then-catch 와 async-await
2. REST API
REST API : ‘URI’를 통해 정보의 자원을(only 자원만을) ‘표현’하고, 자원의 행위는 ‘HTTP Method’로 명시
URI = 자원, 브라우저에 입력하는 주소 / HTTP Method(GET, POST, PUT, DELETE) = 행위 / 표현
URI는 명사, 소문자, 복수형, 하이픈- 사용 O
마지막에 슬래시/, 언더바_, 파일 확장자 사용 X
GET method를 이용하여 데이터를 가져올 때 아래 2가지를 많이 사용
- Path Variable (전체 데이터 또는 특정 하나의 데이터를 다룰 때 처럼, 리소스를 식별)
- Query Parameter (데이터를 정렬하거나 필터링)
Path Variable : /users # Fetch a list of users
Query Parameter : /users?occupation=programer # Fetch a list of programer user
3. JSON
JSON : JavaScript Object Notation
자바스크립트 객체 문법에 토대를 둔, 문자 기반의 데이터 교환 형식
그러나 차이점 중 하나는 작은 따옴표(‘ ‘) 불가, 끝 따옴표(””)만 허용
JSON에만 있는 메서드 !
- JSON.stringify(자바스크립트 객체) : JS object -> JSON => string화(= JSON 문자열) 시킨다
- JSON.parse() : JSON -> JS object => 네트워크 통신의 결과를 통해 받아온 JSON 문자열을 객체화 시킨다
JSON Placeholder : 가짜 서버
