콜백함수:메서드나 함수 내부에 담기는 또다른 함수(주로 화살표함수를 사용했음)
API란??
=>> 어떤 프로그램에서 제공하는 기능을 사용자가 활용할 수 있게 만들어 놓은 인터페이스
식당(사이트 )방문-->주문가능한 메뉴확인(API명세서즉, API doc)--->주문(필요한데이터 요청)--->요청한 데이터 전달--->사용자가 전달받음(응답)
API메서드:
서버에 요청 보낼경우 사용하는 메서드
GET요청:우리가 get네서드를 사용해 보낸요청서버에서 데이터 받을때 사용. 요청 바디에 담을 수 없음
POST:데이터 등록. 요청바디 존재
PUT:서버내 데이터 수정. 바디 담김
PETCH:데이터 일부 수정
DELETE:에이터 삭제
OPTIONS:서버가 허용하는 메서드 확인하기위한 메서드
동기: 서버에 요청을 보냈을때을 때 응답을 받아야 그 다음동작을 수행할 수 있는것.그 다음 작업은 응답이 될때까지 대기
비동기: 점원에게 주문--->주문한 음식은 만들어지고, 점원은 새로운 주문받음--->그 와중에도 주문한것들 만들어짐
==>서버에 요청을 보냈을때 응답여부와 관계없이 다음
동작을 수행.A작업시작과동시에B작업도 시작하고 그와중에 A의 결과가 나오면A는 그 값대로 출력.
자바스크립트는 동기적으로 동작.
비동기 처리도 가능
stack,queue
자료구조.:컴퓨터의 데이터를 효율적으로 관리하기위해 만들어 놓은 데이터 관리 체계
stack: 나중에 들어온 데이터가 먼저실행=>last in first out
queue: 먼저 들어온 데이터가 먼저 실행 =>first in last out=====>들어온 순서대로 자료처리
call stack:함수의 실행 순서가 담기는 공간.
callback queue : first in first out.call stack이 비워지면 콜백 큐에있던 함수가 call stack으로 들어감. ==> 받아왔던 값을 가지고 있다가 콜스텍이 모두 비워지게 되면 그 값을 보여줌.
Promise===>fetch 요청이 비동기 함수이기에 받아오지 못해 응답받지 못했지만 언젠가는 돌려주겠다고 약속.
3가지 상태:fulfilled: 요청이 성공한 상태
pending: 요청에대한 응답을 기다림
rejected:요청이 실패한 상태
구조분해할당: 구조화 되어있는 배열, 객체와 같은 데이터를 destructuring(분해하여)하여각각의 변수에 담는 것.
==>구조분해할당 방식으로 적기.
선언키워드 [변수명(=식별자), , , ... ] = 구조분해 할당하고싶은 배열혹은 객체.
대괄호 사용시에는 배열만.
대괄호 안쪽의 문자가 각각의 변수명의 역할을 하여 배열의 객체가 순서에 의해 각각 문자에 담김.
let arr = [1, 2]
let [one , two] = arr
console.log(one,two) = = >1 2수 5
대괄호 사용해 구조분해할당하는것==>순회가 가능한 값만 가능. 배열(순서가 중요함)만 가능. 객체는 불가
객체
=====>객체의구조분해할당
let { ,.... } = 할당하고자하는 객체명
배열구조분해시에는 앞의 문자로 첫번째요소가, 뒤의 구조분해 할당에는 두번째요소가 들어오기에 순서가 중요하나
객체의 구조분해 할당은 현재 구조분해 할당하고있는 객체의 키를 중괄호 안에 적어 각각의 키가 변수로 동작하게되고 그 값들이 연결되어 동작.
실제 구조분해 하고자한 객체의 키를 넣어야 구조분해할당이 이루어짐
또는 원하는 이름으로 할당할 수도 있는데 실제 존재하는 키 뒤에 콜론하고 새로운 변수명을 붙이면 됨.
const obj = {name: "otter",gender:'male'}
let {name:새로운 변수명,gender:새로운 변수명} = obj
==>각각의 데이터를 변수로 한줄로 담아주기 위해서 사용하며, 데이터를 복사해 오는 것이기에 원본에는 영향없음
spread연산자:...는 값의 집합을 전개해주는 연산자
let arr = [ 1,2,3,4,5]
console.log(...arr)===>1,2,3,4,5한꺼풀 벗겨주는 연산자.문자열에도 사용가능
let st = "Hello"
console.log(...str)==>"H""e""l""l""o"이렇게 문자 하나하나가 펼쳐져서 출력됨
객체에 스프레드 연산자 사용하는 방법:새로운 변수에 할당하듯 사용그리고 새로운 객체에 담기(중괄호로 감싸기)스프레드 연산자로 인해 중괄호가 벗겨진 값이 나올텐데 그것을 다시 한번 중괄호로 감싸주기 위함.참조 타입의 복사라면 초기주소부터 쭉 같이 복사가 되어 둘중 하나의 값만 바뀌어도 둘다에 영향을 미칠 것인데, 이것을 이용하면 값을 복사할때 원본타입에 영향을 주지 않음. 그러나 완전한 복사가 아니라 얕은 복사 라고 함.
얕은 복사:주소값까지만 복사.깊은복사: 실제 데이터까지 복사
참조타입의 복사:실제 참조타입의 데이터가 저장되는 공간을 힙(heap) 이라는 임시저장메모리 라고 함.유동적으로 크기가 변하는 값들이 담겨있음.배열, 객체...따라서 원하는데로 조작이 가능했다.const키워드로 선언된 obj안에 안에담긴 주소값은 변환되지 않았다. 힙 메모리의 값만 변화시킨것이다.const키워드로 선언하면 재할당, 재선언 안됨.따라서 배열,객체 선언시에는 const키워드 사용할 것.
스프레드 연산자를 통해 복사==> 얕은 복사let arr = [1,2,3,4,5]let secArr = [6,7,8]let copy = [...arr,...secArr]스프레드 연산자 사용했기에 원본 배열과는 연결이 끊어져 있는 상태console.log(copy)===>[1,2,3,4,5,6,7,8]
깊은복사:const copy =JSON.stringify(깊은복사 해주고 싶은 객체명 혹은 배열명)해서 복사 ==>문자열 형태로 변환되어 주소값이 사라짐.다시 아래parse을 이용하면 새로운 주소값을 가지게됨const deepCopy = JSON.parse(copy)
rest 파라미터:필요업는 데이터만 걸러서 필요한 데이터만 새로운 변수에 담아(...reset) 객체로 사용하고 싶을 떄 사용, 혹은 반대일 경우에 사용가능.: const { 실제존재키, , ,...rest} = 복사하고자하는 객체나 배열명
rest파라미터라고 해서 ...rest 이부분이 반드시 rest일 필요는 없음. 변수명과 같은 역할 하기에 반드시 rest이라고 적을 필요는 없음
