Multi Developer SuHo

Node js AJAX, Fetch, Axios, Form 태그의 요청과 차이 본문

Node.js 기록

Node js AJAX, Fetch, Axios, Form 태그의 요청과 차이

Dreaming Developer Student 2025. 3. 15. 20:40
SMALL

안녕하세요~~ 오늘은 AJXA, Fetch , Axios, Cors 가 각각 무엇이고, 언제 사용되는지 알아보겠습니다. 

📑목차
1. AJAX
1-1. AJAX란?
1-2. AJAX의 등장
1-3. AJAX 동작 원리
1-4. XMLHttpRequest 객체란?
1-5. open() 메서드란?
1-6. onreadystatechange 이벤트란?
1-7. readyState 속성이란?
1-8. status 속성이란?
1-9. responseText 속성이란?
1-10. XMLHttpRequest 객체로 요청 보내는 코드
2. Fetch 
2-1. Fetch란?
2-2. Fetch의 등장
2-3. Fetch의 특징
2-3. Fetch 문법 
3. Axios
3-1. Axios란?
3-2. Axios 문법
4. Form 태그의 요청과 차이


서론

먼저 본론으로 들어가기전에 AJAX, Fetch, Axios  이 중에서 들어보신 단어나, 키워드가 있을까요? Fetch는 API를 사용할 때 코드 로직에서 사용해보셨을 겁니다. AJAX와 Axios는 들어는 보셨을수 도 있지만 이를 활용해본 적은 없을 수 도 있어서 포스팅을 하는 이유입니다. 저도 AJAX와 Axios에 대한 이해가 부족한다 는점 양해부탁드립니다. 그럼 본문으로 넘어가겠습니다.


본론

1. AJAX( Asynchronous JavaScript and XML)

 

1-1. AJAX란?

웹 페이지를 새로고침 하지 않고도 서버와 데이터를 주고 받을 수 있는 기술, 즉 비동기적인 데이터 요청을 가능하게 하는 기술을 말합니다.


핵심 !
AJAX는 비동기적인 기술이다

1-2. AJAX의 탄생

 

초기의 웹 페이지에서는 모든 데이터를 한 번에 받아와야 했으며, 페이지를 새로고침하지 않고 데이터를 동적으로 화면에 표시하는 것이 불가능하였고,  사용자의 UI를 실시간으로 업데이트하는 데 어려움이 있었습니다.

이를 해결하기 위해, 페이지를 새로고침하지 않고 서버와 데이터를 주고받을 수 있는 기술이 개발되기 시작했으며, 그 결과, XMLHttpRequest 객체가 만들어졌고, 이를 기반으로 AJAX가 탄생했습니다. AJAX를 활용하면 웹 페이지를 다시 로드하지 않고도 서버와 비동기적으로 데이터를 주고받을 수 있게 되었습니다.

하지만 AJAX가 JavaScript에서 동작하다 보니, 비동기 처리 로직을 다루기 위해 상태 값이 필요하였고,  요청이 완료되면 상태 코드를 확인하고, 해당 코드에 맞는 동작을 수행해야 했습니다. 이를 위해 콜백 함수를 활용했지만, 콜백이 중첩되는 문제(콜백 지옥)가 발생하고, 코드의 가독성이 떨어지게 됩니다.

 

1-3. AJAX 동작원리


1. 먼저 웹 페이지에서 사용자에 의한 이벤트가 발생한다.

2. 이벤트 핸들러로 인한 자바스크립트가 호출이 된다.

3. 호출이 된 자바스크립트는 XMLHttpRequest 객체를 생성하여 서버에게 요청을 보낸다.

4. 클라이언트가 보낸 요청을 서버는 XMLHttpRequest 객체를 가지고 요청을 처리한다.

5. 서버는 요청을 처리한 데이터를 HTML, XML, JSON 형태의 데이터를 클라이언트에게  응답을 보낸다.
6. 클라이언트는 서버에서 응답 데이터를 받고, 필요한 데이터 부분만 처리하고 UI 변경 작업을 수행한다.

이 순서로 AJAX는 요청과 응답을 처리하게 됩니다.


1-4. XMLHttpRequest 객체란?

서버에 요청을 보내고, 그에 대한 응답을 받는 객체를 뜻합니다.

 

1-5. open( ) 메서드란?

요청을 초기화하는 메서드이면서 서버에 요청을 준비하는 메서드를 뜻합니다.
// open() : 요청을 준비하는 메서드
// open('요청 메서드', URL, 비동기 처리 여부)
xhr.open('GET', 'http://127.0.0.1:3000/board')

 

open 메서드는 3개의 매개변수를 받습니다.


1. 요청할 메서드 (GET, POST 등등)
2. 요청 보낼 경로(URL)
3. 비동기 처리 여부


중요한점

여기서 중요한점은 1번, 2번은 필수로 매개변수를 받아야합니다. 왜냐하면 요청 보낼 메서드와 경로가 있어야 서버에 요청을 보낼 수 있기 때문입니다. 


1-6. onreadystatechange 이벤트란?

서버와의 요청을 통해 상태 변화가 있을 때마다 호출되는 이벤트 


1-7. readyState 속성이란?

XMLHttpRequest  객체가  요청을 보내는 과정에서의 현재 상태를 나타내는 값


1-8. Status 속성이란?

XMLHttpRequest  객체에서 HTTP 응답 코드를 나타내는 값

 

1-9. responseText 속성이란?

XMLHttpRequest  객체에서 서버의 요청한 데이터를 문자열 형식으로 반환

 

1-10. send( ) 메서드란?

XMLHttpRequest  객체에서 받은 요청을 서버로 전송하는 메서드

 

참고

send( ) 메서드에 인자를 전달, 전달하지 않을 때의 GET 요청과 POST 요청으로 나뉩니다.
1. send( )  : GET 요청으로 서버에 전송
2. send(데이터)  : POST 요청처럼 HTTP 메서드는 보낼 때는 매개변수를 전달하여 서버에 전송합니다.


1-11. XMLHttpRequest 객체로 요청 보내는 코드

express 모듈 설치

$ npm i express



index.html 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="content">

    </div>
    <button onclick="submitHandler()">요청 보내가</button>
</body>
<script>
    const submitHandler = () => {
        // 버튼의 onclick으로 인한 이벤트 발생
        // 이벤트 핸들러로 인한 자바스크립트 호출
        // 자바스크립트는  XMLHttpRequest 객체 생성하여 서버에게 요청을 보낸다
        let xhr = new XMLHttpRequest();
        console.log("뭐가 찍히니?",xhr);

        // open() : 서버에 요청을 준비하는 메서드
        // open('요청 메서드', URL, 비동기 처리 여부)
        xhr.open('GET', '/');
    
        // 요청이 완료가 되면
        // 응답을 받는 상태가 되면 호출되는 이벤트
        xhr.onreadystatechange = () => {
            // 완료가 되었을 완료된 상태를 확인하고
            // xhr.readyState : xml객체의 상태가 완료상태 인지 확인하고
            // 완료 상태는 4번
            if((xhr.readyState === 4) && (xhr.status == 200)){
                // xhr.responseText :서버에서 요청한 본문의 데이터를 문자열 형식으로 반환
                // data 변수에 할당하는데 문자열 형식을 JSON.parse로 자바스크립트 객체로 변환
                const data =  JSON.parse(xhr.responseText);
                console.log(data);
                // data 안에는 [{title : "제목", content : "내용"}]
                // for 문으로 반복문으로 순회하면서 
                // 요소를 생성하고 각 요소의 innerHTML로 HTML 요소 추가
                for (let i = 0; i < data.length; i++) {
                    const span1 = document.createElement('span');
                    const span2 = document.createElement('span');
                    const span3 = document.createElement('span');
                    span1.append(span2,span3);
                    span2.innerHTML = data[i].title;
                    span3.innerHTML = data[i].content;
                    content.append(span1);
                }
            }
            // 응답이 완료되면 처리할 로직
        }
    
        // 서버에 실제로 요청하는데
        // send() 매개변수에 전달한 것이 없으니
        // GET 요청으로 서버에 전송
        xhr.send();
    }
</script>
</html>



server.js (서버 코드)

const express = require('express');
const fs = require('fs');

const app = express();

app.get('/', (req, res) => {
    res.send([{title : "제목", content : "내용"}]);
})

app.get('/page', (req, res) => {
    fs.readFile('./index.html', 'utf-8', (err, data) => {
        if(err)  return res.send(err);
        res.send(data);
    }) 
})
app.get('/page2', (req, res) => {
    fs.readFile('./index2.html', 'utf-8', (err, data) => {
        if(err)  return res.send(err);
        res.send(data);
    }) 
})

app.get('/page3', (req, res) => {
    fs.readFile('./index3.html', 'utf-8', (err, data) => {
        if(err)  return res.send(err);
        res.send(data);
    }) 
})


app.listen(3000, () => {
    console.log("서버 작동중...")
})



 





2. Fetch

2-1. Fetch란?

자바스크립트에서 제공되는 API로,  AJAX와 달리 Promise 기반으로 데이터를 비동기적으로 처리할 수 있습니다.

 


2-2. Fetch의 등장

 

XMLhttpRequest의 단점이 많았고, 이런 단점을 극복하기 위해 Promise 객체 기반의 비동기 처리를 사용하였습니다.  Ajax는 콜백 함수의 기반이 많았고, 코드의 하드 코딩이 발생하여 콜백 지옥이 발생할 가능성이 높은 코드를 작성할 수 밖에 없었습니다. 이런 문제점들을 보완한 것이 Fetch 의 등장으로 해결되었습니다.

2-3. Fetch의 특징


1. Fetch는 Promise의 기반으로 비동기적 처리가 가능하여 코드의 가독성이 증가

2. JSON 파싱의 메서드를 축약 처리가 가능

3. 코드의 내용을 작성할 때 이전보다 직관적인 코드를 작성할 수 있게 됨

4. 상태 코드를 제어해서 하드코딩하는 영역도 따로 처리할 필요가 없게 됨

5. Fetch는 기본적으로 GET 요청 방식 

 

2-4. Fetch 문법

fetch('http://127.0.0.1:3000/board').then((result) => {
     console.log(result);
     console.log(result.json());
     return result.json()
}).then((result) => {
    console.log(result);
})

async function myfh () {
    const response = await fetch("http://127.0.0.1:3000/board")
    // response  안에는 상태 코드의 내용도 포함되는 응답의 내용을 가지고 있는 객체
    const data = await response.json();
    return data;
}

async function myfh () {
    const response = await fetch("http://127.0.0.1:3000/create", {
        method : "POST",
        headers : {
            'Content-type' : "application/json"
        },
        // JSON 문자열로 변환해서 body 응답을 보냄
        body : JSON.stringify({title : "제목", content : "내용"})
    })
    // response  안에는 상태 코드의 내용도 포함되는 응답의 내용을 가지고 있는 객체
    const data = await response.json();
    return data;
}


index2.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
<script>
    async function myfn () {
        const response = await fetch("/")
        // response  안에는 상태 코드의 내용도 포함되는 응답의 내용을 가지고 있는 객체체
        const data = await response.json();
        return data;
    }
    
    myfn().then((result) => {
        console.log(result);
    })
</script>
</html>

 
server.js 코드에서 요청 객체로 클라이언트에게 데이터를 보냅니다. 

app.get('/', (req, res) => {
    res.send([{title : "제목", content : "내용"}]);
})



"/" 경로로 GET 요청으로  들어온 응답을 JSON 형태로 response.json() 을 통해 자바스크립트 객체로 반환

3.  Axios

3-1. Axios란?

Node 환경에서 HTTP 요청 쉽게 보낼 수 있도록 도와주는 라이브러리, axios 또한 Promise기반이므로  비동기처리가 가능하



3-2. Axios 문법

const response = axios.get('http://127.0.0.1:3000');
console.log(response.data);

const foo = async () => {
    const data = await axios.get('/');
    console.log(data);
}
foo();

const foo = async () => {
    // Post는 두 번째 매개변수로 객체나 배열 형태로 데이터를 body로 전달
    const data = await axios.post('/', {title : "제목", content : "내용"});
    console.log(data);
}
foo();



index3.html

 

코드를 보면 axios로 get 요청을 보내고 보낼 경로는 /page로 서버에 요청을 보냅니다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>
    
</body>
<script>
    const foo = async () => {
        const {data} = await axios.get('/page');
        console.log(data);
    }
    foo();
</script>
</html>





server.js 일부분 코드 
서버는 get 요청으로 들어온 경로에 대한 응답을 클라이언트에게 보내는데, fs.readFile에서 파일을 읽어오고, 클라이언트에게 전송합니다.

 

app.get('/page', (req, res) => {
    fs.readFile('./index.html', 'utf-8', (err, data) => {
        if(err)  return res.send(err);
        res.send(data);
    }) 
})

 


실행결과
서버에서 응답 받은 데이터를 브라우저가 최종적으로 UI에 표시합니다.



4.  Form 태그의 요청과 차이

 

form 태그는 브라우저가 요청 주체입니다. 사용자가 폼을 제출할 때, 브라우저가 GET 또는 POST 요청을 서버로 보냅니다. form 태그를 사용할 때는 서버의 URL로 자동으로 요청이 전송되는데 이 과정에서 브라우저가 요청을 직접 관리합니다.

하지만 Ajax, fetch, Axios는 요청 주체가 브라우저가 아닌 자바스크립트에서 제어하기 때문에 자바스크립트가 HTTP 요청을 생성하고 이를 서버에 보내는 방식으로 자바스크립트가 제어하게 됩니다.

 

> form 태그는 브라우저가 직접 요청을 처리하는 로직을 실행한다. 즉, 페이지의 새로고침이 기본 동작으로 페이지를 출력해준다.
> 새로고침이 되기 때문에 기존 페이지가 바뀌어서 새로운 페이지를 보여준다.
> axios 등등 이런 자바스크립트 로직에서 응답을 처리하는 경우는 요청 주체가 자바스크립트다. 위에 form은 요청 주체가 브라우저다.
> 내부적으로는 자바스크립트에서 브라우저의 기능의 기본 동작을 제어해서 http 요청을 만들어준다.
> 기본동작을 막았다는 것은 새로고침도 막고, 데이터의 응답의 내용도 브라우저에서 처리하지 않고 자바스크립트 로직에서 처리한다는 것.

 

 

 

결론

AJAX는 오래된 기술로, XMLHttpRequest 객체를 사용하여 요청을 보내고, 이를 보완하여 Promise 기반으로 동작하는 Fetch API 기술이 나오게 되면서 API를 가져와서 비동기적으로 처리할 수 있게 되었습니다. 하지만 코드로직이 복잡하고 JSON 형식을 자동으로 처리할 수 없어 불편함이 있었고, 이러한 문제점을 해결한 것이 Axios가 나타나게 된 배경입니다. 

 

LIST
저작자표시

'Node.js 기록' 카테고리의 다른 글

Node js ORM 시퀄라이즈란? (데이터베이스를 쉽게 제어할 수 있는 라이브러리 )  (0) 2025.03.24
Node js Cors(Cross-Origin Resource Sharing)란?  (0) 2025.03.15
Node js JWT 토큰(JSON Web Token)이란  (0) 2025.03.13
Node js Multer 모듈로 이미지 업로드  (0) 2025.03.13
Node js [GET 방식과 POST 방식, 요청 객체(Requset), 응답 객체(Response) ]  (0) 2025.03.10
'Node.js 기록' Related Articles more