100424 TIL

비동기 

한작업이 끝나기 전에도 다른작업을 할수있음 

 

작업을 동시에 처리 할 수있는 방식

 

요청을 보내놓고 결과가 나오는동안 다른일을 함 

 

다른일도같이할수있다 .

 

동기 

한작업이 끝나야 다음 작업이 시작됨 

 

일을 순차적으로 실행함 .

 

한작업이 끝나기전에는 다른 작업을 시작할 수 없음 

 

끝날때까지 기다린다 .

 

for 문은 동기적으로 처리된다 .

---

promise 

 

비동기 작업의 완료 또는 실패를 처리 하기위해 사용 됨

 

콜백함수 에서 콜백 지옥이 생김

 

promise 가 없으면 유지보수가 어려워진다 . 코드의 흐름을 추적하기 힘들다 . 코드가 복잡해진다 . 

 

promise 는 3 가지 상태를 가진다 

 

pending  대기

아직 작업이 완료 되지 않은 상태 

 

작업이 진행중 , 결과를 기다리고있는 상태 .

 

const promise = new Promise((resolve, reject) => {
  // 여전히 작업이 진행 중인 상태
  console.log('작업 진행 중...');
});

 

 

 

 

 

fulfilled  이행 , 성공 

작업이 성공적으로 완료 되면 이상태가 됨 .성공적인 결과값을 반환 

비동기 작업이 성공 

 

const promise = new Promise((resolve, reject) => {
  resolve('작업 성공!');
});

promise.then((result) => {
  console.log(result);  // "작업 성공!" 출력
});

rejected 거부  실패 

작업이 실패했을 떄 이상태가 됨 ,오류가 발생하거나 요청이 제대로 처리되지 않았을 떄 . 

 

const promise = new Promise((resolve, reject) => {
  reject('작업 실패!');
});

promise.catch((error) => {
  console.log(error);  // "작업 실패!" 출력
});

 

비동기 작업 실패 !

 

 

promise 객체는 then , catch , finally 를 통해 이행 

 

 

 

async/await 

 

항상 함수 앞에 붙는다

 

함수를 반환한다 

 

 

 

 

 

---

axios 는 자바스크립트에서 http 요청을 쉽게 보낼  수 있게 해주는 라이브러리 이다 

get, post, put , delete 같은 요청을 간편하게 보낼 수 있음 .

 

 

주요기능 

비동기 요청  서버로 데이터를 요청 하고 응답 받을 때 까지 기다리기 

자동 json 변환  응답 데이터를 자동으로json 으로 변환 해줌 

요청 취소   요청을 보내는 중에 취소할수있음 

헤더설정 요청을 보낼때 추가적인 정보를 헤더에 포함시킬수있음 

에러처리 ; 서버로부터 에러가 나왔을때 이를 쉽게 처리할수있은 방법 을 제공 

---

 

 

get 요청 (데이터 가져오기) 예시 

import axios from 'axios';

axios.get('https://api.example.com/data')
  .then(response => {
    console.log(response.data); // 서버로부터 받은 데이터 출력
  })
  .catch(error => {
    console.error('Error fetching data:', error); // 에러 처리
  });

---

post 요청 데이터 보내기 

axios.post('https://api.example.com/data', {
  name: 'John',
  age: 30
})
  .then(response => {
    console.log(response.data); // 서버로부터 받은 응답 출력
  })
  .catch(error => {
    console.error('Error posting data:', error); // 에러 처리
  });

---

 

Axios 설치 

 

 

yarn add axios 

 

npm install axios 

 

env 파일 만들고 git ignore .env 에 추가 

 

 

리액트쿼리 

 

리액트쿼리설치 방법

 

 

npm i @tanstack/react-query