[TIL] Day 11 - 자바스크립트 리퀘스트 작업(API Data 사용하기)

🗓️ 수업 일자 : 2025.10.02

✨ 오늘의 수업 평가 :  [ GOOD ]  🔥🫠🔥 열정열정열정🔥🫠🔥

 

📝  오늘 배운 내용  
- 자바스크립트 Fetch + than / catch

- 자바스크립트 Fetch + async / await

- 자바스크립트 Axios (라이브러리)

 

---

 

시작하기 전에! 

0. 자바스크립트 리퀘스트, 리스폰스, Fetch

 - 리퀘스트 : 서버에 특정 명령어를 전달하는 작업, 데이터를 다루는 명령어를 전달하는데, 쓰고 / 읽고 / 수정하고 / 삭제하는 작업

 - 리스폰스 : 서버에서 명령어를 받으면 클라이언트에 전달하는 결과값, 작업이 성공하면 성공 메세지와 함께 데이터 정보가 확인되고, 실패할 경우 에러 메시지와 함께 문제 내용에 대해 전달함.

 - Fetch() : 자바스크립트 ES6에서 소개 된 문법, 해당 메서드를 사용하면 손쉽게 리퀘스트를 보낼 수 있음. Promise 기반이기 때문에 비동기로 작동. (리스폰스 결과는 Promise 객체로 전달됨, 따라서 데이터 변환 작업도 비동기로 진행 필요)

 - Fetch()문 세부 구조 

      url : 리퀘스트를 보낼 서버 url 입력

      method : 리퀘스트를 보낼 때 요청할 명령어 입력, POST / PUT / PATCH / DELETE 등이 있음

      headers : 리퀘스트 보낼 때 보내는 데이터의 타입, 인증 정보 등 서버가 작업 시 참고 해야 할 정보가 담겨 있음, 

      body : 리퀘스트를 보낼 때 작업에 사용할 실제 데이터가 담겨 있음,
                 주로 fetch()문 바깥에 실제 데이터를 객체로 저장한 뒤, JSON.stringify(객체명)으로 변환하여 발송함

      !참고사항! : 요청 명령어 중 Get은 { method , headers , body } 정보를 쓰지 않고 url만 적어서 요청함

[명령어 Get] 
fetch('url');

[명령어 POST, PUT, PATCH, DELETE]
fetch('url',{
    method : 'POST, PUT, PATCH, DELETE' 중 하나 작성,
    headers : {
         데이터 타입, 인증 정보등을 객체로 작성
    },
    body : JSON.stringify(데이터 객체명)
});

 

data 예시 이미지

 

 

1. 자바스크립트 Fetch + than / catch 

• 기본 구조 : fetch('API URL 주소').then((res)=>{...}).then((data)=>{...}).(추가작업).catch((...)=>{...})
• Fetch문을 사용하여 서버에 리퀘스트 작업을 진행
• 비동기로 작업하기 위하여 보통 .then((res)=>{...}).then((data)=>{...}) 으로 처리
  (Promise 객체이기 때문에, 순차로 처리 된 데이터를 다뤄야 하므로 한 개의 then으로 사용 불가)
• 에러 처리를 위해 .catch()문을 함께 사용 

[ fetch(GET) 사용 방법 ]

fetch('API URL 주소') 
    .then((res)=>{
    	// 전달 받은 데이터가 res에 저장됨
        // 데이터를 사용 가능하도록 .json()으로 변환
    	return res.json();
    }).then((data)=>{
    	// 변환한 데이터가 data라는 변수에 담기고,
        // 최종 전달
    	return data;
    }).catch((err)=>{
    	// 에러 처리를 위해 catch문 사용.
    	console.error(err)
    });
    
    
    
[ fetch(POST) 사용 방법 ]

const originData = {
    // 서버에서 등록 시 필요한 정보
    // 아래는 예시
    name : "kimday",
    country : "korea",
    images : "https://sample.jpg",
}

fetch('API URL 주소',{
    method : "POST",
    headers : {
        // 서버가 참고 할 정보 작성, 예시로 데이터 타입 입력
        'Content-Type': 'application/json', 
    },
    body : JSON.stringify(originData),
    }).then((res)=>{
    	// 전달 받은 데이터가 res에 저장됨
        // 데이터를 사용 가능하도록 .json()으로 변환
    	return res.json();
    }).then((data)=>{
    	// 변환한 데이터가 data라는 변수에 담기고,
        // 최종 전달
    	return data;
    }).catch((err)=>{
    	// 에러 처리를 위해 catch문 사용.
    	console.error(err)
    });

 

 

2. 자바스크립트 Fetch + async / await 

• async / await 문
  • 비동기로 작업하겠다는 선언으로 코드블럭 시작에 "async"를 사용
  • 비동기 함수 내부에서 비동기가 필요한 구문에 await을 사용하여 특정 구문만 비동기로 작업 할 수 있음.
  • 여러 개에 await이 사용되면 await 순서대로 처리 됨
  • await은 async 선언 된 코드블럭 안에서만 사용 가능!
• try / catch 문 : 원활한 동작과 에러 확인을 위해 해당 구문을 함께 사용 

[ fetch(GET) 사용 방법 ]

async function basicAPI(){
// 비동기 선언인 async를 맨 앞에 사용 

// 동작과 에러를 관리하기 위하여 try{}catch{}문 사용 
    try{
    	
        const res = await fetch('API URL 주소'); // await을 사용하여 서버에서 데이터 받아옴 
        const data = await res.json(); 
        // 앞서 Promise 객체로 받아오기 때문에 비동기 순서에 맞추기 위하여 
        // 데이터 변환도 await을 사용하여 진행함
        return data;
        
    }catch(err){
    	// 에러 처리를 위해 catch문 사용.
    	console.error(err)
    }
}  

basicAPI();
    
    
[ fetch(POST) 사용 방법 ]

async function createAPI(items){
// 비동기 선언인 async를 맨 앞에 사용 

// 동작과 에러를 관리하기 위하여 try{}catch{}문 사용 
    try{
    	
        const res = await fetch('API URL 주소',{
            method : "POST",
            headers : {
                // 서버가 참고 할 정보 작성, 예시로 데이터 타입 입력
                'Content-Type': 'application/json', 
            },
            body : JSON.stringify(items),
        };) // await을 사용하여 서버에서 데이터 받아옴 
        
        const data = await res.json(); 
        // 앞서 Promise 객체로 받아오기 때문에 비동기 순서에 맞추기 위하여 
        // 데이터 변환도 await을 사용하여 진행함
        return data;
        
    }catch(err){
    	// 에러 처리를 위해 catch문 사용.
    	console.error(err)
    }
}

const toy = {
    // 서버에서 등록 시 필요한 정보
    // 아래는 예시
    name : "alin",
    country : "america",
    price : 50000,
}

createAPI(toy);

 

 

3. 자바스크립트 Axios (라이브러리) 

- Axios : 리퀘스트 작업을 훨씬 더 간결하고, 쉽게 작업하기 위해서 만들어진 라이브러리 

- 사용법

1. Axios 라이브러리를 설치 후 불러옴
2. instance 객체를 만들어, 공용으로 사용할 정보(url, timeout)를 넣어둠
3. 클래스 또는 함수를 만들 때 async / await 을 사용하여 제작
4. 리퀘스트 작업 시 "instance.명령어" 조합으로 명령어 사용 

- 장점

• headers, body를 따로 작성하지 않아도 됨
• 받은 데이터는 자동으로 .json 변형 해줌 
• 쿼리 파라미터 사용 시, 객체만 작성하면 되서 사용이 쉬움 (자동 직렬화 지원)
• 에러가 났을 경우, fetch보다 직관적으로 표기 해 줌 (error.response / error.messege 등)

// 1. 라이브러리 불러오기 
import axios from 'axios';

// 2. instance 만들기
const instance = axios.create({
    baseURL: 'API URL 입력',
    timeout : 3000,
});

// 3. async와 await을 사용하여 함수/클래스 만들기
async getAxiosData(queryParams){

    try{
    	// 4. 위에서 정의한 instance와 객체로 받은 queryParams 데이터를 사용하여 
        // 서버에 query string 전달
        const res = await instance.get('url 추가 부분', {
            params : {
                page: queryParams.page,
                keyword : queryParams.keyword,
            }
        });

        return res.data;

    }catch(err){
        console.error(err);
    }
}

 

 

---

 

📃 내일은 뭘 배울까 🤔

- 추석이에요 :) 한주 쉬어요!