1. Fake API
![notion image](https://inblog.ai/_next/image?url=https%3A%2F%2Fwww.notion.so%2Fimage%2Fhttps%253A%252F%252Fprod-files-secure.s3.us-west-2.amazonaws.com%252F404a9fb6-ab9b-45cc-8074-ee63a3334890%252F55b18bb8-75a1-4201-af2d-ca26f619ae3a%252FUntitled.png%3Ftable%3Dblock%26id%3D9dd19b65-9ef6-4b67-96a9-3f3e730b2c38%26cache%3Dv2&w=3840&q=75)
위의 사이트의 /posts 를 선택한다.
![notion image](https://inblog.ai/_next/image?url=https%3A%2F%2Fwww.notion.so%2Fimage%2Fhttps%253A%252F%252Fprod-files-secure.s3.us-west-2.amazonaws.com%252F404a9fb6-ab9b-45cc-8074-ee63a3334890%252Fff6e673a-8e10-4341-a9ba-335780690432%252FUntitled.png%3Ftable%3Dblock%26id%3D81b6041d-ec25-4a5a-a9e1-8e34cd99b353%26cache%3Dv2&w=3840&q=75)
json 데이터를 확인할 수 있다.
2. fetch 통신하기
page/post.js
import React from 'react'; function Post(props) { async function download(){ let response = await fetch("https://jsonplaceholder.typicode.com/posts/3",{ method:"get" }); } return ( <div> </div> ); } export default Post;
fetch 는 통신을 위해 사용하는 자바스크립트의 함수이다. 통신은 시간이 오래 걸리는 작업이기 때문에 동기적으로 실행된다면 통신 단계에서 프로그램이 멈추게 된다. 따라서 fetch 는 비동기로 처리되어야 한다.
따라서 async 를 사용해 download 함수를 비동기 처리한다. await 는 download 함수를 잠시 정지 시킨 후 비동기로 다른 작업을 완료 한다. 그 후 프로미스를 확인해 통신이 완료가 되면 함수를 실행한다.
import React from 'react'; function Post(props) { const download = async () => { let response = await fetch("https://jsonplaceholder.typicode.com/posts/3", { method: "GET" }); let data = await response.json(); console.log(data); } return ( <div> <button onClick={download}>Download Post</button> </div> ); } export default Post;
버튼을 만들어 download 함수를 실행한다.
![notion image](https://inblog.ai/_next/image?url=https%3A%2F%2Fwww.notion.so%2Fimage%2Fhttps%253A%252F%252Fprod-files-secure.s3.us-west-2.amazonaws.com%252F404a9fb6-ab9b-45cc-8074-ee63a3334890%252Fbe839d3d-58b2-4fca-beb7-3fa6068aff7b%252F%2525EB%252585%2525B9%2525ED%252599%252594_2024_07_13_14_51_03_33.gif%3Ftable%3Dblock%26id%3D7974b612-9397-4f10-b1ff-caffea59b4e9%26cache%3Dv2&w=3840&q=75)
서버에서 json 데이터를 받아온다.
Share article