API
어떠한 프로그램에서 제공하는 기능을 사용자가 활용할 수 있도록 만들어 둔 인터페이스
HTTP(Hyper Text Transfer Protocol)
서로 다른 서버 간에 문자 형식으로 데이터를 주고 받을 때 지켜야 하는 규약
❗️ HTTP Request Method
HTTP 요청은 각 요청마다 Method를 사용하며 그 역할이 모두 다릅니다.
GET : 서버의 데이터를 조회하는 Method ( HTTP message에 요청 바디를 담아줄 수 없다. )
POST : 서버에 데이터를 등록하는 Method
PUT : 서버의 리소스를 Request body에 담긴 내용으로 수정하는 Method
PATCH : 서버 내 리소스의 일부를 수정하는 Method
DELETE : 서버 내 리소스를 삭제하는 Method
OPTION : 서버에서 허용하는 Method의 목록을 알려주는 Method
동기, 비동기
1. 동기: 하나의 작업이 종료될 때까지 다음 동작은 기다리는 실행 방식
2. 비동기: 하나의 작업이 진행됨과 동시에 또 다른 작업도 함께 진행되는 것
멀티 스레드:
싱글 스레드:
Promise
new Promise()
/*대기(Pending) : 비동기 처리가 아직 완료되지 않은 상태
이행(Fulfilled) : 비동기 처리가 완료되어 결과값을 반환해준 상태
실패(Rejected) : 비동기 처리가 실패 혹은 오류가 발생한 상태*/then()
//fetch()이후 응답을 받아올 때까지 기다리도록 뒤에 then()을 사용해주면 됨
fetch(HTTP Request).then()
//then() 메서드는 fetch()뿐만 아니라 Promise 객체를 돌려주는 함수라면 언제든 사용할 수 있다
fetch(HTTP Request)
.then((res) => {
console.log(res)
})
catch()
//catch()를 이용해 분기를 나눠줄 수 있다
fetch(HTTP Request)
.then((res) => {
console.log(res)
})
.catch((err) => {
console.error(err)
})구조분해할당 (destructuring assignment)
구조화 되어 있는 배열, 객체와 같은 데이터를 분해하여 각각의 변수에 다시 할당하는 것
const arr = [ 1, 2, 3, 4, 5 ];
let one = arr[0];
let two = arr[1];
---------------------------------------------
const obj = {
name: "otter",
gender: "male"
}
let userName = obj.name;
let userGender = obj.gender;
//위의 방법은 관리할 데이터가 여러개인 경우, 각각의 데이터를 모두 변수로 선언해 주어야 하기 때문에 비효율적임.
//이런 경우 구조분해할당을 사용할 수 있다.배열 구조분해할당
const arr = [ 1, 2, 3, 4, 5 ];
let [ one, two ] = arr; **// 배열의 구조분해할당**객체 구조분해할당
const obj = {
name: "otter",
gender: "male"
}
let { name, gender } = obj값의 복사
구조분해할당을 사용하면 배열과 객체의 요소들을 하나하나 손쉽게 복사해줄 수 있다.
하지만 배열 자체를 복사하고 싶다면 스프레드 연산자를 사용하면 된다.
스프레드 연산자 (spread operator)
스프레드 연산자는 하나로 뭉쳐져 있는 값들의 집합을 전개해주는 연산자
const arr = [ 1, 2, 3, 4, 5 ];
console.log(...arr) // 1, 2, 3, 4, 5얕은 복사 (shallow copy)
스프레드 연산자로 복사가 완료된 것을 확인했지만, 중첩 객체는 제대로 복사가 되지 않는다 왜냐하면 스프레드 연산자를 사용해서 해준 복사가 얕은 복사이기 때문이다.
깊은 복사 (deep copy)
자바스크립트의 실행 환경은 call stack, callback queue 외에도 다양한 영역이 있는데, 그 중에서 heap이라는 영역이 있다.
참조 타입의 데이터는 heap이라는 임시 저장 메모리에 담기 된다
heap이라는 영역은 참조 타입 데이터와 같이 그 데이터의 크기가 유동적으로 변할 수 있다는 특징을 가지고 있다
스프레드 연산자를 사용해서 객체의 중괄호를 한번 벗겨냈을 때, 다른 property들은 모두 주소값의 연결이 끊어진채로 새로운 주소를 가진 데이터로 완전히 복사가 되었지만, 이때도 그 내부에 존재하는 favoriteFood 객체는 펼쳐지지 못했다.이러한 문제를 해결하기 위해
JSON.stringify()와 JSON.parse()를 사용할 수 있다. JSON.stringify()는 소괄호 안에 들어가는 값을 문자열로 변환해준다.
favoriteFood: {
first: "sushi",
second: "hamburger"
}
}
const copy = JSON.stringify(obj)
console.log(copy)
// {"name":"otter","gender":"male","favoriteFood":{"first":"sushi","second":"hamburger"}}
문자열로 변환이 된다면, copy에 담긴 값은 더이상 객체가 아니며 완전히 새로운 문자열이기 때문에 전혀 새로운 주소값을 가지게 된다
const deepCopy = JSON.parse(copy)
console.log(deepCopy)
{
name: "otter",
gender: "male",
favoriteFood: {
first: "sushi",
second: "hamburger"
}
}이후, JSON.parse()를 사용해서 JSON 데이터 포맷을 다시 객체 형태로 바꿔주면, 새로운 객체가 생성되며 deepCopy에 담기는 것이기 때문에 원본 객체와는 전혀 다른 주소값을 가진 객체가 생성되는 것.
rest parameter
rest parmeter는 함수의 매개변수(parameter)를 배열로 전달 받는 방식
이렇게 자바스크립트 5일차가 끝났다. 정말 많은 개념을 배우고 여러 기능을 구현해봤지만 여전히 어색하고 어렵다. 복습 또 복습!
-5일차 자바스크립트 끝-
