Original article: Here are the most popular ways to make an HTTP request in JavaScript

JavaScript는 서버 단의 자원으로부터 데이터를 전송받거나 전송할 수 있는 HTTP 요청을 만들 수 있는 훌륭한 모듈(modules)과 메서드(method)가 있습니다. 이 글에서는, JavaScript 내에서 잘 알려진 여러 HTTP 요청 방법을 살펴보려고 합니다.

Ajax

Ajax는 전통적인 방법으로 비동기(asynchronous) HTTP 요청을 보냅니다. HTTP POST를 통해 데이터를 보낼 수 있고, HTTP GET을 통해 데이터를 전송받을 수 있습니다. 한 번 살펴보고 GET 요청을 보내봅시다. 저는 무작위 데이터를 JSON 형태로 반환하는 JSONPlaceholder라는 개발자를 위한 무료 온라인 REST API를 사용하려고 합니다.

Ajax로 HTTP 호출을 보내기 위해서는 새로운 XMLHttpRequest() 메서드를 초기화하고, URL 엔드포인트(endpoint)와 HTTP 메서드(이 경우에는 GET이겠죠)를 지정해야 합니다. 마지막으로, open() 메서드를 사용해 HTTP 메서드와 URL 엔드포인트를 연결하고 send() 메서드로 요청을 실행합니다.

HTTP 응답(response)을 콘솔로 찍어볼 수 있는데, readystatechanged 이벤트가 발생했을 때 호출한 이벤트 핸들러를 포함한 XMLHttpRequest.onreadystatechange 속성을 사용해봅시다.

const Http = new XMLHttpRequest();

const url = 'https://jsonplaceholder.typicode.com/posts';

Http.open('GET', url);
Http.send();
Http.onreadystatechange = (e) => {
	console.log(Http.responseText);
};

브라우저 콘솔을 보면, 반환된 JSON 형식의 배열 데이터를 확인할 수 있습니다. 하지만, 어떻게 요청이 완료되었는지 알 수 있을까요? 다른 말로 하자면, Ajax를 통해 응답을 어떻게 처리할 수 있는 걸까요?

onreadystatechange 속성은 두 가지 메서드, readyState와 status로 우리가 보낸 요청의 상태를 확인하도록 해 줍니다.

// 역자 주 : 이하 일부 이미지와 함께 제공되는 코드는 원글에는 존재하지 않지만, 번역 과정에서 대체 텍스트를 제공할 목적으로 추가되었습니다.

const Http = new XHMLHttpRequest();
const url = 'https://jsonplaceholder.typicode.com/posts';

Http.open('GET', url);
Http.send();

Http.onreadystatechange = function () {
	if (this.readyState == 4 && this.status == 200) {
		console.log(Http.responseText);
	}
};

만일 readyState가 4와 동일하다면, 이는 요청이 완료되었다는 의미입니다. readyState 속성에는 총 다섯 가지 응답이 있습니다. 이곳에서 더 확인해보세요.

JavaScript로 직접 Ajax 호출을 하는 것 말고도, jQuery 메서드인 $.Ajax 같은 HTTP 호출을 만들어내는 강력한 메서드가 존재합니다. 이제부터 이에 대해 이야기해봅시다.

jQuery 메서드

jQuery는 HTTP 요청을 쉽게 다루게 해주는 다양한 메서드를 가지고 있습니다. 이 메서드를 사용하려면, jQuery 라이브러리를 프로젝트에 포함해야 합니다.

<script src='https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script>

$.ajax

jQuery Ajax는 HTTP 호출을 만들어내는 가장 쉬운 방법 중 하나입니다.

$(document).ready(function() {
	const Url = 'https://jsonplaceholder.typicode.com/posts';
	$('.btn').click(function() {
		$.ajax({
			url: Url,
			type: "GET",
			success: function(result) {
				console.log(result)
			},
			error:function(error) {
				console.log(`Error ${error})
			}
		})
	})
})

이 $.ajax 메서드는 많은 파라미터를 받는데, 이중 일부는 필수적이고 일부는 선택적으로 사용됩니다. 이 메서드는 전달받은 응답을 다룰 수 있도록 두 가지 콜백(callback) 옵션인 success와 error를 가집니다.

$.get 메서드

$.get 메서드는 GET 요청을 실행하기 위해 사용됩니다. 엔드포인트와 콜백 함수 이렇게 두 가지 파라미터를 받습니다.

const Url = 'https://jsonplaceholder.typicode.com/posts';

$('.btn').click(function () {
	$.get(Url, function (data, status) {
		console.log(`${data}`);
	});
});

$.post

$.post 메서드는 서버에 데이터를 보내는 또 다른 방법입니다. url, 전송하고 싶은 데이터, 콜백 함수 이렇게 세 가지 파라미터를 받습니다.

const Url = 'https://jsonplaceholder.typicode.com/posts';
const data = {
	name: 'said',
    id: 23,
};

$('.btn').click(function () {
    $.post(Url, data, function (data, status) {
	    console.log(`${data} and status is ${status}`);
	});
});

$.getJSON

$.getJSON 메서드는 오직 JSON 형식으로만 데이터를 반환합니다. url과 콜백 함수 두 가지 파라미터를 받습니다.

const Url = 'https://jsonplaceholder.typicode.com/posts';

$('.btn').click(function () {
    $.getJSON(Url, function (result) {
	    console.log(result);
    });
});

jQuery는 요청을 하거나 원격 서버에 데이터를 보내기 위해 이 모든 메서드를 가지고 있습니다. 하지만 아래 예제에서 보시는 것처럼 이 모든 메서드를 $.ajax 메서드 하나로 합쳐 보낼 수도 있습니다.

const Url = 'https://jsonplaceholder.typicode.com/posts';

$('.btn').click(function () {
	const data = { name: 'said', id: 23 };

    $.ajax({
        url: Url,
        type: 'GET', // 또는 POST
        // data: data, // 만일 POST 타입을 쓴다면
        // dataType: JSON 또는 HTML, XML, TXT, jsonp
        success: function (result) {
	        console.log(result);	
        },
        error: function (error) {
	        console.log(`Error ${error}`);
        },
	});
});

fetch

fetch는 비동기 요청을 보낼 수 있도록 해주는 새롭게 등장한 강력한 web API입니다. 사실 fetch는 제가 가장 좋아하는, HTTP 요청을 만들 수 있는 최고의 방법 중 하나입니다. 이는 ES6의 훌륭한 기능 중 하나인 "Promise"를 반환합니다. ES6가 익숙하지 않으시다면, 이 기사에서 더 읽어보실 수 있습니다. Promise는 더 영리한 방법으로 비동기 요청을 다룰 수 있게 해 줍니다. fetch가 기술적으로 어떻게 동작하는지 한 번 살펴봅시다.

const Url = 'https://jsonplaceholder.typicode.com/posts';

fetch(Url)
.then((data) => {return data.json()})
.then((res) => {console.log(res)})

fetch 함수는 엔드포인트 URL이라는 파라미터를 필수적으로 받습니다. 아래 예제에서 보시는 것처럼 여러 다른 선택 가능한 파라미터도 있습니다.

const Url = 'https://jsonplaceholder.typicode.com/posts';

const Data = {
    name: 'Said',
    id: 23,
};

// 선택적 파라미터

const othePram = {
    headers: {
	    'content-type': 'application/json, charset=UTF-8',
    },
    body: Data,
    method: 'POST',
};

fetch(Url, othePram)
.then((data) => {return data.json()})
.then((res) => {console.log(res)})
.catch((error) => console.log(error));

여기서 보시는 것처럼, fetch는 HTTP 요청을 만들기 위한 다양한 이점들이 있습니다. 이곳에서 더 많이 알아보세요. 추가적으로, fetch 안에서는 서버 단에 요청을 보내거나 요청을 받을 수 있는 axios 같은 다른 모듈이나 플러그인이 있습니다.

Axios

Axios는 HTTP 요청을 만들고, 다양한 좋은 기능까지 제공하는 오픈 소스 라이브러리입니다. 어떻게 동작하는지 한 번 확인해봅시다.

사용 방법

우선, Axios를 가지고 있어야겠죠. 프로젝트에 Axios를 포함하는 두 가지 방법이 있습니다.

제일 먼저 npm을 이용할 수 있습니다:

npm install axios --save

이후 이를 임포트(import)합니다.

import axios from 'axios'

두 번째로 CDN을 이용해 포함하는 방법입니다.

<script src='https://unpkg.com/axios/dist/axios.min.js'></script>

axios로 요청하기

Axios를 통해 여러분은 서버에 데이터를 받거나, 데이터를 보낼 수 있는 GET과 POST를 사용할 수 있습니다.

GET:

const Url = 'https://jsonplaceholder.typicode.com/posts';

axios
.get(Url)
.then((data) => console.log(data))
.catch((err) => console.log(err));

// 파라미터와 함께

const Url = 'https://jsonplaceholder.typicode.com/posts';
const params = {
    name: 'Said',
    id: 21,
};

axios.get(Url, params)
.then((data) => console.log(data))
.catch((err) => console.log(err));

axios는 하나의 필수 파라미터를 갖고, 두 번째로 선택 가능한 파라미터를 갖기도 합니다. 이 경우는 간단한 쿼리(query)로 데이터를 받습니다.

POST:

const Url = 'https://jsonplaceholder.typicode.com/posts';

const user = {
    name: 'Said',
    id: 21,
};
axios({
    method: 'post',
    url: Url,
    data: {
    user,
	},
})
.then((data) => console.log(data))
.catch((err) => console.log(err));

Axios는 "Promise"를 반환합니다. 이에 익숙하다면, 여러분은 promise가 여러 요청을 실행할 수 있다는 것도 아실 겁니다. 여러분은 axios를 통해 동일한 작업을 할 수 있고, 동시에 여러 요청을 실행할 수 있습니다.

function getUser() {
	const userUrl = 'https://jsonplaceholder.typicode.com/users';
	return axios.get(userUrl);
}

function getPost() {
    const postUrl = 'https://jsonplaceholder.typicode.com/posts';
    return axios.get(postUrl);
}

axios.all([getUser(), getPost()])
.then((users, posts) => {
    console.log(users);
    console.log(posts);
})
.catch((err) => console.log(err));

Axios는 여러 다른 메서드와 옵션을 지원합니다. 이곳에서 더 탐구해볼 수 있습니다.

Angular HttpClient

Angular는 Angular 앱에서 동작하는 자체 HTTP 모듈을 가지고 있습니다. RxJS 라이브러리를 사용해 비동기 요청을 처리하고 많은 옵션을 제공해 HTTP 요청을 수행하도록 합니다.

Angular HttpClient를 사용해 서버로 보낼 요청 호출하기

Angular HttpClient를 통해 요청을 발생시키려면, Angular 앱 내부에서 우리의 코드를 실행해야 합니다. 하나 만들어보았습니다. 만일 Angular에 익숙하지 않으시다면, 저의 20분 안에 첫 Angular 앱 만드는 방법을 확인해보세요.

제일 먼저 해야 할 일은 app.module.ts에서 HttpClientModule을 가져오는 것입니다.

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angluar/core';
// HttpModule
import { HttpClient } from '@angular/common/http';

import { AppComponent } from './app.component';

@NgModule({
	declaration: [
    	AppComponent
    ],
	imports: [
        BrowserModule,
        // HttpModule
		HttpClientModule,
	],
    providers: [],
    bootstrap: [AppComponent],
})

export class AppModule {}

그리고 요청을 처리할 서비스를 생성해야 합니다. Angular CLI를 통해서 쉽게 이 서비스를 만들 수 있습니다.

ng g service FetchdataService

이제 fetchdataServce.ts 서비스에서 HttpClient를 가져오고(import), 생성자(constructor) 안에 이를 주입(inject)합니다.

import { Injectable } from '@angular/core';
// HttpClient를 가져옵니다.
import { HttpClient } from '@angular/common/http';

@Injectable() {
export class FetchdataService {
    constructor(private http:HttpClient) {}
    
    getData(url: string) {
    	return this.http.get(url)
	}
}

그리고 app.component.ts에서 fetchdataService를 가져옵니다.

// 가져오기
import { FetchdataService } from './fetchdata.service';

마지막으로 서비스를 호출하고, 실행합니다.

app.component.ts:

@Component({
    selector: 'app-post',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css'],
    providers: [FetchdataService],
})

export class AppComponent implements OnInit {
    posts;
    Url = 'https://jsonplaceholder.typicode.com/posts';

    // HttpClient를 주입하기
    constructor(private srv: FetchdataService) {}

    getPosts(): void {
        this.srv.getData(this.Url)
        	.subscribe((data) => 	console.log(data));
	}

    ngOnInit() {
	    this.getPost();
    }
}

Stackblitz에서 데모 예제를 확인해볼 수 있습니다.

마치며

우리는 JavaScript에서 HTTP 호출 요청을 보내는 가장 알려진 여러 방법을 살펴보았습니다.

시간을 내주셔서 감사합니다. 이 글이 좋았다면, 좋아요를 눌러주시고, Twitter에도 만나러 와주세요.

그나저나, 저는 최근에 저의 모바일 애플리케이션 중 하나를 위해 훌륭한 소프트웨어 엔지니어 그룹과 일했습니다. 이 조직은 훌륭했고, 제품은 그 어떤 회사나 제가 함께 일했던 프리랜서들보다도 훨씬 빠르게 출시되었습니다. 솔직히 다른 프로젝트에도 이 그룹을 추천하고 싶다고 생각했습니다. 연락이 필요하시면 이메일을 주세요 - said@devsdata.com