NodeJS - Ajax실제 작성예시 따라해보기

안녕하세요.

Hynn 입니다.

 

이번 포스팅에서는 Ajax를 실제로 작성은 어떠한 방법으로 하는지에 대한 포스팅을 작성해보겠습니다.

또한, Ajax 에서 많이 사용되는 Method 및 외장 Module 에 대해서도 한가지 다루어 볼 예정입니다.

 

=======

1. Ajax 기본 구성하기

2. Ajax Method - Fetch

3. Ajax Module - Axios

=======

 

1. Ajax 기본 구성하기

Ajax를 작성하기 위해서 먼저 NodeJS 로 Express Web 서버를 기초적으로 구성해보겠습니다.

이러한 구초구성 코드는 별도의 설명은 생략하도록 하겠습니다.

 

또한 이번 포스팅에서부터는, Front-end, Back-end 구성을 나누어 작성을 할 예정입니다.

따라서, 그에 맞는 Module 설정도 각각 나뉘어야 합니다.

 

먼저 Back 입니다.

const express = require("express")
const cors = require("cors")
const app = express()
const mysql = require("./models")

app.use(express.urlencoded({ extended: false }))
app.use(express.json())
app.use(cors())

app.get("/", (req, res, next) => {
    try {
        res.send("AJAX")
    } catch (e) {
        next(e)
    }
})

app.use((error, req, res, next) => {
    console.log(error.message)
    res.send(`${error}`)
})

app.listen(3000, () => {
    console.log(`server start`)
})

먼저 BackEnd 에서 사용된 모듈은 아래와 같습니다.

 

1. Express Module 
2. CORS
3. MySQL2 

각각의 역활은,  웹서버 구축, CORS 설정, DB연결을 위해 설정이 되어야 합니다.

이제 Front 입니다.

const express = require("express")
const nunjucks = require("nunjucks")
const app = express()

app.use(express.static("public"))
app.set("view engine", "html")
nunjucks.configure("views", {
    express: app,
})

app.get("/", (req, res, next) => {
    res.render("index.html")
})

app.listen("3005", () => {
    console.log(`server start`)
})

 

Front 는 말 그대로 실제 화면을 그려내야 합니다.

그래서 공통의 Express 외에는 Nunjucks 를 설치합니다.

그리고 그에 맞는 설정을 해주어야 합니다.

 

당연히, 포트는 달라야 합니다. 그러모르 3005번으로 설정합니다.

HTML 설정등은 건너 뛰겠습니다.

 

이제 Front 에서 정적 JavaScript 파일을 생성하고, HTML 과 파일을 연결합니다.

AJAX 기본 설정의 코드를 작성해보도록 하겠습니다.

const request = ({ method, path, body }) => {
    return new Promise((resolve, reject) => {
        const host = `http://localhost:3000`
        const xhr = new XMLHttpRequest()
        xhr.open(method, `${host}${path}`)
        xhr.setRequestHeader("Content-type", "application/json")
        xhr.send(JSON.stringify(body))

        xhr.onload = () => {
            if (xhr.readyState === 4 && xhr.status === 200) {
                // callback(JSON.parse(xhr.response))
                resolve(JSON.parse(xhr.response))
            } else {
                reject("hyunsign.tistory.com")
            }
        }
    })
}

 

먼저 여기서는 Request 라는 상수형 변수를 선언하여, method, path, body 를 각각 매개변수로 할당했습니다.

여기서 각각 method, path, body 는 아래의 역활을 담당합니다.

 

• Method : 요청 HTTP 의 method (ex.app.get, app.post ...)
• Path : 서버에서 요청된 리소스의 경로
• body : 요청의 본문

그리고 Promise 객체로의 반환을위해 return 값을 Promise 를 사용하여 resolve,reject 두개의 결과를 표시합니다. 이전 포스팅에서 프로미스 객체의 3개의 상태값에 대해서 설명드린 바가 있습니다.

그리고 애로우함수로 내부에 각각 2개의 지역변수를 선언합니다.

 

• host : 여기서는 Backend 서버가 됩니다. 즉 데이터를 가져오려면 Backend 서버와 통신을 해야합니다.
• xhr : Ajax 에서 이야기한 XMLHttpRequest 를 담습니다.

그리고 이러한 Ajax 코드에서는 아래의 4개의 단계가 순차적으로 작성이 되어야 합니다.

 

• xhr.open
• xhr.setRequestHeader
• xhr.send
• xhr.onload

먼저, "xhr.open" 을 통해, 메서드, 그리고 "Host" , "Path" 를 각각 설정합니다.

그리고 난 뒤 "Header" 를 하고, Content-Type 을 지정해야 합니다. 위에서는 "JSON" 형태로 지정했습니다.

 

참고가 될 수 있도록 각 Content-Type List 를 남겨두었습니다. 이외에도 다양한 타입이 존재하므로, 참고하시기 바랍니다.

실제 작성에서 이러한 컨텐츠 타입이 다를 경우, 올바른 동작이 되지 않으므로 내가 사용할 컨텐츠 타입이 어떠한 것인지 반드시 확인해야 합니다.

 

아래의 목록 외에도 다양한 타입이 존재합니다. 혹은 텍스트 같은 인코딩이 필요한 문자들일 경우 아래와 같이 작성도 가능할 수 있습니다.

xhr.setRequestHeader(`Content-type : text/plain; charset=utf8`)

 

종류	작성예시	설명
x-www-form-urlencoded	xhr.setRequestHeader ("Content-type", "x-www-urlencoded")	HTML 양식 데이터를 서버에 제출할때 사용됩니다.
json	xhr.setRequestHeader ("Content-type", "application/json")	요청,응답의 본문이 JSON 객체임을 나타냅니다.
text/plain	xhr.setRequestHeader ("Content-type", "text/plain")	본문이 일반 텍스트를 나타냅니다
text/html	xhr.setRequestHeader ("Content-type", "text/html")	본문이 HTML 인 경우를 나타냅니다
text/css	xhr.setRequestHeader ("Content-type", "text/css")	본문이 CSS임을 나타냅니다
image/jpeg	xhr.setRequestHeader ("Content-type", "image/jpeg")	본문이 JPEG 임을 나타냅니다.
image/png	xhr.setRequestHeader ("Content-type", "image/png")	본문이 PNG임을 나타냅니다.
pdf	xhr.setRequestHeader ("Content-type", "application/pdf")	본문이 PDF문서일 경우를 나타냅니다.
zip	xhr.setRequestHeader ("Content-type", "application/zip")	본문이 ZIP아카이브를 나타냅니다.

 

그리고 난 뒤에는 이제 요청본문이 xhr.send methos 에 의해 서버로 전송됩니다. 

즉 여기서는 JSON 객체를 String(문자)화 되어 서버로 전송됩니다.

 

그리고 난 뒤 마지막으로 xhr.onload 를 이용해 결과값을 나타내야 합니다. 

예제 코드에서는 IF 문을 통해, "xhr.readyState 와 "xhr.status" 의 두개의 조건이 만족할 경우 resolve, 그렇지 않을 경우 "reject" 의 결과물을 나타나도록 코드를 작성했습니다.

 

즉, 여기서 요청이 성공하면, 작성자가 원하는 결과물을, 실패할 경우 오류메시지를 나타나도록 설정이 된 것입니다.

 

2. Ajax Method - Fetch

 

Fetch 의 장점은 위의 XMLHttpRequest 메서드를 이용하면 보다 쉽게 구축이 가능합니다.

위의 예시코드에 비해서 비교적 적게 작성해서 동일한 효과를 낼 수 있습니다. 즉, 보다 간결하게 구문 작성이 가능하기도 합니다.

또한 XMLHttpRequest 는 open, setHeaderRequest, send, onload 라는 네개의 단계에 걸친 작성을 Fetch 는 하나로 묶어 쉽게 설정을 할 수 있습니다.

또한 이 역시 Promise 객체를 사용해서 작동하게 됩니다.

 

동일한 작업을 한번 해보도록 하겠습니다.

 

 const ajax = await request({method : "get", path:"/", body: null})
    const response = await fetch('http://localhost:3000', {
        method : "get",
        headers : {
            "content-type" : "application/json",
        },
        body : null,
    })
    const body = await response.json()

 

위의 구문에 비해서 보다 간결해진것이 보이시나요?

다만 Fetch 의 경우, 사용과정에서 Async/Await 사용을 하게 됩니다.

 

다만 위의 코드에서 본문, 즉 Body 를 null 로 설정한 것은, 본문 역시 JSON 형식으로 전달되기 때문입니다.

 

당연하게도, XMLHttpRequest 는 Promise Object 에 대한 이해가 이루어져야 합니다. 여기서 Fetch 의 경우, 추가적으로 Async/Await 의 대한 이해도 반드시 필요하게 됩니다.

 

작성자 역시도 계속 학습을 통해 익히고 있는 것이기도 합니다.

이에 대한 이해는 필수라 할 수 있습니다.

 

3. Ajax Module - Axios

Axios 는 위의 코드보다 더 간결합니다.

대신 이 Axios 는 별도의 Module 을 설치하거나, 스크립트를 추가해야 합니다.

스크립트와 설치의 경우 각각 아래의 명령어를 추가할 수 있습니다.

 

Axios 설치
npm install axios

Axios Script
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

Axios 를 이용해서 동일하게 예제 코드를 작성해보도록 하겠습니다.

const request = async () => {
  try {
    const response = await axios.get('http://localhost:3000/comments');
    console.log(response.data);
  } catch (error) {
    console.error(error);
  }
};

request();

 

최근에 Promise 객체를 사용하면서, 객체나, 단계별 결과를 확인하기 위해 Console.log 를 찍는 일이 잦아져, 그대로 예시를 작성해보았습니다.

axios 의 경우, 외부 모듈을 사용하는 만큼 더욱 더 간결하게 작성이 가능합니다.

 

위의 여러개의 코드가 한줄 수준으로 압축 된 것을 볼 수 있습니다.

물론, 위의 첫번째 코드의 흐름을 이해해야 잘 사용할 수 있고, 이러한 과정은 꼭 학습하시기를 권장합니다.

 

각각의 특징을 정리하면 아래와 같습니다.

 

	XMLHttpRequest	Fetch	Axios
특징	오래된 API  전문적인 JavaScript 개발자가 주로 사용	대부분의 최신 브라우저에서 지원함	JavaScript 에서 Http 요청을 보낼때 사용하는 라이브러리
장점	다른 두개보다 상세하게 작성가능 제어가 가능한 특징을 가지고 있음 요청과 응답의 대한 세부정보를 제어할 수 있음	1.간결한 구문 작성 2. Promise 객체를 기본사용하므로 비동기 작업에 용의 3. 현대적이고 표준화된 API	1. 간결한 작성 2. Promise 객체 사용으로 비동기 작업 용이 3. 요청과 응답 데이터를 JSON 으로 변환 4. 요청 취소 기능 포함 5. 추가설정옵션을 가진 커스텀 인스턴스를 생성 할 수 있음
단점	구문이 복잡하고, Promise 객체 사용시 별도로 작성을 해야 함	1. Http 작업을 위한 편의 Method 가 적음 2. 상황에 따라 필요기능이 제공되지 않을 수 있음	1. 복잡한 처리가 필요할 경우 사용에 적합하지 않고 비효울적인 사용이 될 수 있음 2. 요청과 응답데이터를 JSON 으로 자동으로 변환하기 때문에, 다른 컨텐츠 타입사용시 효율이 떨어짐

 

감사합니다.