[ Weekly Paper 03 ] 자바스크립트 모듈 / 서버통신 Fetch vs axios

 

 

위클리 페이퍼 주제 (2025.10.13 ~ 17)

✅ 자바스크립트에서 모듈을 사용하는 이유에 대해 설명해 주세요.

✅ Fetch API와 비교했을 때 axios를 사용하면 좋은 점을 설명해 주세요.

 

---

 

Q1 - 1. 모듈(Module)이란? 

모듈은 독립적인 코드 덩어리를 말하며, 일반적인 모듈화란 작업별로 각각의 파일을 생성 해 사용하는 것을 의미합니다.

 

자바스크립트에서 말하는 모듈 / 모듈화도 관련된 코드를 하나의 파일로 모아서 관리하는 것을 뜻합니다. ES6 작업하는 경우 모듈이 작성된 파일에서는 export를 사용해 모듈을 내보내고, 사용하는 파일에서는 import로 모듈을 불러옵니다. 

 

Q1 - Final . 자바스크립트에서 모듈을 사용하는 이유 

1. 코드 간 의존성 낮춤 : 기능별로 모듈화하여 작업을 할 경우, 각 모듈간의 의존성이 낮아져서 하나의 모듈이 잘못되거나 수정되어도 전체 시스템에 큰 문제가 없습니다.
2. 글로벌 네임스페이스의 오염문제 해결 : 모든 작업을 한 파일에 작성 할 경우 함수명 / 변수명 등 작업에 사용하는 네이밍이 복잡해지고, 서로 겹치지 않도록 규칙 또한 많아집니다. 하지만 모듈화 하여 사용하면 네이밍 영역이 보다 깨끗해지고 운영이 쉬워집니다.
3. 보안 강화(캡슐화) : 여러 사람이 함께 작업하는 프로젝트라고 할 지라도, 캡슐화를 통해 시스템의 구동에 중요한 특정 프로퍼티 혹은 메소드에 접근하지 못하도록 막을 수 있습니다.
4. 리팩토링이 쉬움 : 비슷한 기능을 제작 할 경우, 모듈을 복사하여 일부만 수정해 바로 적용이 가능합니다. 

 

 

---

Q2 - 1.  Fetch API 란?

Fetch API는 웹 브라우저 혹은 Nodejs 런타임 환경에서 제공하는 API로, fetch()메서드를 사용하여 네트워크 서버와 비동기적으로 통신할 수 있도록 해 줍니다. 개발자가 서버에게 리퀘스트(Request, 요청)를 보내거나, 또는 서버로부터 리스폰스(Response, 응답)를 받는 등의 외부 리소스를 손쉽게 가져오거나 데이터를 전송할 수 있도록 해주는 API 입니다. 전달 받는 데이터는 Promise 객체로 전달되기 때문에 .then().catch() 구문 혹은 async/await 문법과 함께 사용된다. 또한 res.json()을 사용하여 전달 받은 데이터를 사용하기 좋은 형식으로 변경 해야 합니다.

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

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

 

 

Q2 - 2. Axios 란?

Axios는 npm을 통해 다운로드 받아 사용할 수있는 네트워크 통신용 라이브러리로, instance 객체를 만들어 공용으로 사용할 정보를 넣어두고 작업 시 instance.명령어 조합으로 사용합니다.  

// 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);
    }
}

 

 

 

Q2 - Final . Fetch API와 비교했을 때 Axios를 사용하면 좋은 점 

1. 타임 아웃 설정 가능 : 네트워크 통신 도중 문제가 생겨 제대로 된 응답이 오지 않고 멈춰있는 경우, 프로그램에 과부하가 걸릴 수 있으나 Axios에서는 timeout 설정을 통해 최대 시간을 설정 가능합니다. 
2. HTTP 상태 코드와 에러 메세지 확인 용 : 문제가 생겼을 경우 Fetch API보다 좀 더 쉽게 에러를 확인 할 수 있습니다.
3. 개발자의 작업 편의성 : 리퀘스트를 보낼 때 Fetch API보다 간결하게 요청을 보낼 수 있으며, 응답 받은 데이터도 자동으로 변환하여 사용할 수 있도록 제공합니다.

과거에는 Axios에서 Cancel Token을 별도로 제공하여, 서버 응답 작업 중 User가 페이지를 빠져 나가거나 로그아웃등을 하면 서버 요청을 중단하도록(민감한 데이터가 빠져나가는 것을 막음) 할 수 있었으나 웹 브라우저에서 제공하는 AbortController API - .abort() 메서드를 통해 Fetch API / Axios 모두 서버 중단이 가능 해 졌습니다.

 

데이터 서버 이미지

---

 

다음 주에 또 만나요 🖐️