JavaScript에서 AJAX를 통한 GET 요청 전송

이제 AJAX 요청을 통해 서버에 데이터를 전송하는 방법을 배워봅시다. 서버는 이 데이터로 어떤 작업을 수행하고 결과를 다시 우리에게 보내줄 것입니다.

우리의 테스트 서버는 주소 /handler/로 전송된 데이터를 처리할 것입니다:

button.addEventListener('click', function() {
	let promise = fetch('/handler/');
});

먼저 GET 요청을 보내 봅시다:

button.addEventListener('click', function() {
	let promise = fetch('/handler/?num=3');
});

서버 측에서 전송된 데이터를 받아봅시다:

export default {
	'/handler/': function({get}) {
		console.log(get.num); // 3을 출력합니다
	}
}

이 데이터로 무언가 작업을 하고 다시 돌려보내 봅시다:

export default {
	'/handler/': function({get}) {
		return get.num ** 2;
	}
}

클라이언트 측에서 결과를 받아 어딘가에 출력해 봅시다:

button.addEventListener('click', function() {
	fetch('/handler/?num=3').then(
		response => {
			return response.text();
		}
	).then(
		text => {
			console.log(text);
		}
	);
});

클라이언트에 div와 버튼이 있습니다. 버튼 클릭 시 서버에 두 숫자를 전송하세요. 서버가 전달된 숫자의 합을 찾도록 합니다. 결과를 div에 작성하세요.

서버에 배열이 주어져 있다고 가정합니다. 서버가 매개변수로 숫자가 전달될 것으로 기대하고, 해당 숫자에 해당하는 배열 요소를 반환하도록 합니다. 버튼을 클릭하면 서버에 특정 숫자를 전송하고, 서버의 응답을 단락에 출력하세요.