☆KDT 2024-05-10★axios

import axios from "axios"

export const API_SERVER_HOST = 'http/localhost:8080'

const prefix = `${API_SERVER_HOST}/api/todo`//백틱을 사용하여 변수를 문자열로 합침 => 템플릿 리터럴

export const getOne = async (tno) => {

    const res = await axios.get(`${prefix}/${tno}`)

    return res.data

}

 

 

1) axios는 HTTP 요청을 보내는 라이브러리로, 요청을 보낸 후 응답을 Promise로 반환합니다.

2) res는 axios를 사용하여 HTTP 요청을 보낸 후 반환되는 Promise의 결과입니다. 즉, res는 axios 요청의 응답 객체(response object)를 나타냅니다.

3) res.data는 res 응답 객체의 데이터 부분을 참조하는 프로퍼티입니다. axios 라이브러리는 서버의 응답을 객체 형태로 제공합니다.

4) 응답 객체에는 요청의 상태 코드(status), 헤더(headers), 그리고 데이터(data) 등의 프로퍼티가 포함되어 있습니다.

5) res.data는 응답 객체에서 서버로부터 받은 응답 데이터의 본문을 참조합니다. 이는 서버가 반환한 JSON 데이터나 XML 데이터, 혹은 다른 형식의 데이터를 나타냅니다.

6) res.data를 사용하여 서버로부터 받은 데이터에 직접 접근하고, 해당 데이터를 활용할 수 있습니다.

예를 들어, getOne 함수에서 res.data는 서버에서 반환한 특정 Todo 항목의 JSON 데이터가 될 수 있습니다. 이 데이터는 함수에서 사용하거나 반환하는 등의 작업에 활용됩니다.

 

---

프로퍼티 (Properties)

프로퍼티는 객체(Object)에서 사용되는 키-값 쌍의 데이터를 나타냅니다. 객체의 데이터 멤버를 의미하며, 객체의 특정 속성에 접근하거나 수정할 수 있습니다.

 

예를 들어, res.data에서 res는 응답 객체(response object)이고, data는 그 객체의 프로퍼티입니다. 이는 응답 데이터에 접근하는 방법입니다.

---

프라미스 (Promises)

 

프라미스(Promise)는 비동기(Asynchronous) 작업의 완료 또는 실패를 나타내는 JavaScript의 객체입니다.

 

프라미스는 주로 비동기 작업을 처리할 때 사용되며, 작업의 완료 상태를 기다리거나 작업의 결과를 처리하기 위해 사용됩니다.

 

프라미스는 then() 메서드로 작업의 성공 상태를, catch() 메서드로 실패 상태를 처리합니다.

---

Async와 Await

async와 await는 JavaScript에서 비동기 코드를 동기 코드처럼 작성할 수 있게 해주는 구문입니다. 코드에서 어떻게 동작하는지 설명합니다:

async 함수:

함수 앞에 async 키워드를 붙이면 해당 함수는 비동기 함수가 됩니다.

비동기 함수는 프라미스를 반환하며, 함수 내에서 비동기 작업을 수행할 수 있습니다.

await 표현식:

await는 async 함수 내에서만 사용할 수 있습니다.

await는 프라미스를 기다리는 역할을 합니다.

프라미스가 완료되면 await 표현식은 그 프라미스의 결과를 반환합니다.

await를 사용하면 비동기 작업이 완료될 때까지 함수 실행을 일시 중지하고, 작업이 완료되면 결과를 반환합니다.

 

---

코드 예제에서 async와 await의 과정:

 

getOne 함수 정의:

 

export const getOne = async (tno) =>: async 키워드를 사용하여 getOne 함수가 비동기 함수로 정의됩니다.

 

이 함수는 tno라는 매개변수를 받아 Todo 항목을 가져오는 작업을 수행합니다.

 

HTTP 요청:

 

const res = await axios.get(${prefix}/${tno}): axios.get는 프라미스를 반환합니다.

 

await를 사용하면 axios.get 요청이 완료될 때까지 기다립니다.

 

요청이 완료되면 res 변수에 axios.get의 결과(응답 객체)가 저장됩니다.

 

결과 반환:

 

return res.data: res 응답 객체의 data 프로퍼티를 반환합니다.

 

이는 서버가 반환한 응답 데이터를 의미합니다.

getOne 함수는 async 키워드와 await 표현식을 사용하여 비동기 작업을 수행하고, HTTP 요청 결과를 res.data에서 추출하여 반환합니다. await는 작업이 완료될 때까지 기다리는 기능을 제공하여 비동기 코드를 동기 코드처럼 읽기 쉽게 만들어줍니다.

 

---

axios.get()의 동작

axios.get(url)는 axios 라이브러리의 메서드로, 지정된 url로 HTTP GET 요청을 보냅니다.
axios.get()는 비동기 함수로 동작하며, 요청을 보내고 프라미스를 반환합니다.
이 프라미스는 요청이 완료되면 해결되어 응답 객체를 반환하거나, 요청이 실패하면 거절되어 오류를 반환합니다.

await와 axios.get()의 조합

await axios.get(url)를 사용할 때, await는 axios.get(url)가 반환한 프라미스가 완료될 때까지 대기합니다.
즉, await는 axios.get(url)에서 반환된 프라미스가 해결될 때까지 대기하며, 이 기간 동안 axios.get()는 네트워크 요청을 보내고 응답을 기다립니다.
axios.get(url)에서 반환된 프라미스가 해결되면, await는 프라미스의 결과를 반환합니다.
이 결과는 axios.get()가 요청을 보낸 후 서버로부터 받은 응답 객체이며, res 변수에 할당됩니다.

따라서 await axios.get()는 axios.get()가 프라미스를 반환하는 동시에 요청을 보내고, await는 이 프라미스가 완료될 때까지 대기합니다. 프라미스가 해결되면 await는 프라미스의 결과를 반환하여 후속 코드를 실행합니다.

---

여유가 되신다면 제 GitHub에 오셔서 좋은 코드들을 구경해주세요!

 

https://github.com/gimpo5975?tab=repositories

gimpo5975 - Overview