프론트엔드 개발일지 #25 - 걷기반 이론 복습

Spread operator (전개 연산자)

• 사용법
  점 세 개(...)를 작성해주면 된다

//1. 양 쪽 대괄호 [ ]를 제거 할 수 있다.
let a = [1, 2, 3]
console.log(...a) // 1 2 3

//2. 새로운 배열을 만들어 줄 수 있다.
let a = [1, 2, 3]
let b = [...a] // b는 새로운 배열

//3. 두 개의 배열을 합칠 수 있다.
let a = [1, 2, 3]
let b = [4, 5, 6]

let c = [...a, ...b] // [1, 2, 3, 4, 5, 6]
console.log(c)

왜 사용 할까 🤔❔

객체 타입의 특이한 복사 방식 때문이다.

//b에 a를 넣어주는데 a[0]=100해줘버리면 b[0]까지 바뀌어 버린다.
let a = [1, 2, 3]
let b = a

a[0] = 100 

console.log(a) // [100, 2, 3]
console.log(b) // [100, 2, 3]

//spread operator를 사용해주면?
let a = [1, 2, 3]
let b = [...a]

a[0] = 100;
console.log(a) // [100, 2, 3]
console.log(b) // [1, 2, 3]

객체에 적용한 예시를 좀 더 살펴보자

let a = { a: 1 , b: 2 }
console.log(...a) // { a: 1, b: 1 }
// Uncaught TypeError: Spread syntax requires 
// ...iterable[Symbol.iterator] to be a function
//    at <anonymous>:1:9
// (익명) @ VM2572:1
//a: 1, b: 2 라는 문법은 없기 때문

console.log({...a}) // 이렇게 작성해서 새로운 객체를 만들어줍니다.
// { a: 1 , b: 2 }

let a = { a: 1 , b: 2 }
let b = { ...a }

console.log(b) // { a: 1, b: 2 }

let a = { a: 1, b: 2 } 
let b = { c: 3, d: 4 }

let c = {...a, ...b}
console.log(c); // { a: 1, b: 2, c: 3, d: 4 }

let 첫번째 = { a: 1, b: 2 }
let 두번째 = { ...첫번째, a: 3 }
// { b: 2, a: 3 }
두번째.a

console.log(첫번째)
//key(키)가 겹치면 뒤의 키 & 값으로 대체됩니다.

이걸 실전으로 예시를 해보면 ,

const products = [
  {
    브랜드: "수아레",
    상품명: "케이블 카라 반팔 니트 - 6 Color",
    가격: 39900,
  },
  {
    브랜드: "커버낫",
    상품명: "에센셜 어쩌고",
    가격: 34300,
  },
];

const newProducts = products.map((product) => {
  return {
    브랜드: product.브랜드,
    상품명: product.상품명,
    가격: product.가격 * 0.8,
  };
});

console.log(newProducts);

//이걸 spread operator를 사용해서 바꿔보자
cosnt newProducts = product.map(product => {
  return {...product, 가격: product.가격 * 0.8};
});

Destructuring (구조 분해 할당)

배열, 객체 안의 데이터를 뽑아 쓰다.

1. 배열에 적용

//아래 배열에서 "강아지"는 dog라는 변수에, "고양이"는 cat이라는 변수에 넣으려면?
const 동물리스트 = ["강아지", "고양이"];

const dog = 동물리스트[0];
const cat = 동물리스트[1];

// 이걸 구조 분해 할당하면
const ["dog","cat"] = 동물리스트;

2. Object 적용

//아래 객체에서 "멋진셔츠"는 상품명이라는 변수에, 10000은 가격이라는 변수에 넣으려면?
const product = {
	상품명: "멋진셔츠",
	가격: 10000,
}

const 상품명 = product.상품명;
const 가격 = product.가격;

const { 가격, 상품명 } = product;

Promise

기억할 것: fetch는 Promise를 return 하는 함수이다.
fetch: 외부에서 데이터(정보)를 가져오는 함수

왜 사용 할까 🤔❔

• 코드는 원래 위에서 아래로 순서대로 실행이 된다. 그런데 위에 있는 코드가 완료되는데 너무 느리면 아래 코드들은 실행되지 못한다.
• 오래 걸릴 수 있는 코드는 비동기로 실행하여 다음 코드는 계속 진행되도록 만드는 것이 더 효율적이다.
• 대신 .then을 통해 오래 걸리는 작업이 끝나면 .then() 함수로 결과가 전달되게 만든 것입니다.

console.log("시작")
fetch("https://jsonplaceholder.typicode.com/todos/1")
  .then((response) => {
    return response.json();
  })
  .then((data) => {
    console.log(data); // 2. 얘는 나중에 출력됩니다. 
  });

console.log("fetch 끝났니?"); // 1. 얘가 먼저 출력되고

fetch 작성법
fetch(주소).then((파라미터이름) => {
return 파라미터이름.json();
}).then((필요한데이터) => {
// 데이터 사용
console.log(필요한데이터)
})

fetch 연습 문제

1. jsonplaceholder 웹사이트에서 게시물(posts) 100개를 가져오기

   **<문서>**

   

fetch("https://jsonplaceholder.typicode.com/posts")
	.then((response) => {
		return response.json();
	})
	.then((data) => {
		console.log(data)
	})

//연습1.  게시물 1개 가져오기 
fetch("https://jsonplaceholder.typicode.com/posts/1")
	.then((response) => {
		return response.json();
	})
	.then((data) => {
		console.log(data)
	})
//연습2.  댓글(comments) 500개 가져오기
fetch("https://jsonplaceholder.typicode.com/comments")
	.then((response) => {
		return response.json();
	})
	.then((data) => {
		console.log(data)
	})

options는 뭔데🤔❔

const options = {
  method: "GET",
  headers: {
    accept: "application/json",
    Authorization:
      "Bearer eyJhbGciOiJIUzI1NiJ9.eyJhdWQiOiJmOGE3YjI2ZmRmZmFiYmVjMjNhZWE0NjZkMzFkODM2NSIsIm5iZiI6MTcyOTU3OTAwMi43Nzc1MzgsInN1YiI6IjY0NzFhM2NmYTE5OWE2MDBmOTQxZjlhYyIsInNjb3BlcyI6WyJhcGlfcmVhZCJdLCJ2ZXJzaW9uIjoxfQ.H2-DM_YlyvlwTr4KI-xacY2oeCrSVxybY2tRcPFRhwU",
  },
};

fetch(
  "https://api.themoviedb.org/3/movie/upcoming?language=en-US&page=1",
  options
)
  .then((res) => res.json())
  .then((res) => console.log(res))
  .catch((err) => console.error(err));

백엔드 개발자가 추가적인 정보를 요청한 경우에 넣는다.

• method

1. GET: 조회
2. POST: 추가, 등록
3. PUT: 전체 수정
4. PATCH: 일부 수정
5. DELETE: 삭제

• 위 사진에서 method와 주소가 있습니다. 주로 백엔드 개발자는 method, 주소를 제공해준다.

• GET
  • method: GET
  • 주소: /posts
  • 의미: 게시물 여러 개(posts)를 조회(GET)한다
  • 하지만 GET 메소드는 생략하면 그냥 fetch가 알아서 GET

fetch("https://jsonplaceholder.typicode.com/posts", { method: "GET" })
// method 생략 가능

fetch("https://jsonplaceholder.typicode.com/posts")

>작성법
fetch의 두 번째 인자로 넣습니다.
fetch(주소, { method: "GET", headers: { ... } })
headers 
accept: "application/json": 서버에게 JSON 형식의 응답을 요청한다
Authorization: 인증 정보 넣는 곳 (없을 때도 있음)

+ POST
- 주소: **/posts**
    - 게시물들(/posts)에 데이터를 **추가(POST)**한다
    - POST 메소드는 **body**를 넣을 수 있음
    - **body**에 추가할 **데이터**를 넣는다.
    
    ```javascript
fetch('https://jsonplaceholder.typicode.com/posts', {
  method: 'POST',
  body: JSON.stringify({
    title: 'foo',
    body: 'bar',
    userId: 1,
  }),
  headers: {
    'Content-type': 'application/json; charset=UTF-8',
  },
})
  .then((response) => response.json())
  .then((json) => console.log(json));

• PUT

• 주소: /posts/1
  - id가 1인 게시물(/posts/1)을 수정(PUT)한다.
  - PUT 메소드는 body를 넣을 수 있음
  - body에 수정할 데이터를 넣는다.

  ```javascript

  fetch('https://jsonplaceholder.typicode.com/posts/1', {
  method: 'PUT',
  body: JSON.stringify({
  id: 1,
  title: 'foo',
  body: 'bar',
  userId: 1,
  }),
  headers: {
  'Content-type': 'application/json; charset=UTF-8',
  },
  })
  .then((response) => response.json())
  .then((json) => console.log(json));

+ PATCH
- 주소: **/posts/1**
    - id가 1인 게시물(/posts/1)을 **일부 수정(PATCH)**한다.
    - PATCH 메소드는 **body를 넣을 수 있음**
    - title만 수정
```javascript
fetch('https://jsonplaceholder.typicode.com/posts/1', {
  method: 'PATCH',
  body: JSON.stringify({
    title: 'foo',
  }),
  headers: {
    'Content-type': 'application/json; charset=UTF-8',
  },
})
  .then((response) => response.json())
  .then((json) => console.log(json));

• DELETE

• 주소: /posts/1
  - id가 1인 게시물(/posts/1)을 삭제(DELETE)한다.

  ```javascript

  fetch('https://jsonplaceholder.typicode.com/posts/1', {
  method: 'DELETE',
  });

=> 하지만 메서드는 약속일 뿐 !!!!!!!!!!