상세 컨텐츠

본문 제목

102324 til

TIL

by wangmandoo1 2024. 10. 23. 20:04

본문

베이직반 11회차 

 

async await 

 

async await 는 비동기 작업을 처리할때 사용하는 자바스트립트 문법이다 

 

 

async 는 자동으로 promise 를 반환 한다 

 

함수안에 비동기 작업이 있을 때 사용 

 

 

await 는 promise 가 처리 될때까지 기다리게 도와준다 

 

await 는 async 함수 안에서만 사용이 가능하다 

 

예시 

 

async function fetchData() {
  const response = await fetch('https://api.example.com/data'); // 비동기 작업을 기다림
  const data = await response.json(); // 데이터를 기다림
  console.log(data);
}

 

 

fetch 함수는 데이터를 가져오는시간이 필요하다 

 

await 는 시간이 지나기 전까지 다른 작업을 하지 않게 도와준다 

 

async function ; returns a promise 

 

await : waits for the promise to reslove b4 continnuing. 


 

async 와 await 를 쓰면 좋은 점 

 

코드 가독성이 좋아진다 

 

try 와 catch 를 통해 에러 처리도 쉽게 할 수있다 

 

비동기 코드 작성이 직관적이다 

 

에러처리에 편하다 

 


 

 

json sever 

 

api 를 만들때 사용 하는 도구 

 

실제 서버를 만들지 않고 ,json 파일을 이용해서 가짜 api 를 테스트할 떄 도와줌 

 

프론트앤드 개발자가 백앤드 서버 없이도 데이터 테스트를 할수있게 도와줌

 

restful api 제공; json 형식의 파일을 기반으올 get , post , put delete 같은 crud 작업을 할 수있다 

 

실제 서버가 없어도 빠르게 api 를 대신해서 사용할수있다 

 

 

 

json sever 설치 방법 

 

npm install -g json-server

 

yarn add json-server

 

(프로젝트 폴더에 JSON Server가 설치된다

 

프로젝트에 필요한 의존성으로 추가할 수 있다)

 

데이터파일만들기 

 

db.json 이라는 파일 만들고 

 

데이터를 넣어준다 

 

{
  "posts": [
    { "id": 1, "title": "Hello World", "author": "User1" },
    { "id": 2, "title": "JSON Server", "author": "User2" }
  ]
}

 

json server 실행 방법 

 

json-server --watch db.json

 

이것을 치면 http://localhost:3000/posts에 접근할 수 있는 간단한 API 서버가 열린다 

 

 

전역설치를 월할때 

yarn global add json-server

'TIL' 카테고리의 다른 글

102524 til  (0) 2024.10.25
102424 TIL  (0) 2024.10.24
102224 til React Router: `useNavigate`와 `Link` 컴포넌트의 차이점  (2) 2024.10.22
102124 Til mbti 과제  (5) 2024.10.21
101824 til  (1) 2024.10.18

관련글 더보기