JavaScript server - client API 통신
AJAX는 "Asynchronous JavaScript and XML"의 약자로, 웹 페이지가 서버로부터 데이터를 비동기적으로 가져와서 웹 페이지를 부분적으로 업데이트할 수 있게 해주는 기술입니다. 이를 통해 페이지 전체를 새로고침하지 않고도 일부분만 업데이트할 수 있어 사용자의 편의성이 크게 향상되는 통신입니다. (*비동기 : 전체 페이지를 재로드하지 않고, 백그라운드에서 서버와 통신, 웹 개발에서 비동기 방식은 중요. 웹 페이지에서 서버로 데이터를 요청할 때, 비동기 방식을 사용하면 서버의 응답을 기다리는 동안 다른 작업(예: UI 업데이트)을 계속 진행 가능.)
XMLHttpRequest 객체: AJAX의 핵심. 이 객체를 통해 서버에 데이터를 요청하고 응답을 받습니다. fetch API나 다른 라이브러리(Axios 등)를 사용하여 AJAX 통신을 더 쉽게 구현할 수 있지만, 정글 입과과정에서 배운 통신방법이 ajax이기에, 프로젝트에 사용할 통신으로 ajax를 공부하였습니다.
*초기 ajax는 이름에서도 알 수 있듯, XML형식의 데이터만을 위한 통신이였으나, JSON형식의 데이터가 인기가 많아짐에 따라 JSON도 지원하게 되었습니다.
JSON이란?
JSON은 키와 값의 쌍으로 구성된 데이터 객체를 표현하는 표준 포맷입니다.
JavaScript에서 객체를 문자열로 쉽게 변환하거나, 문자열을 객체로 쉽게 변환할 수 있습니다.
JSON은 언어 독립적이므로 다양한 프로그래밍 언어에서 사용될 수 있습니다.
AJAX로 JSON 데이터 요청하기
웹 페이지에서 서버로 데이터를 요청할 때, XMLHttpRequest 객체나 Fetch API를 사용하여 JSON 형식의 데이터를 요청할 수 있습니다.
$.ajax({
type: 'GET', // HTTP 요청 방식 지정. 여기서는 'GET'을 사용.
url: 'https://api.example.com/data', // 요청할 서버의 URL을 지정.
dataType: 'json', // 응답 데이터의 타입을 지정. 여기서는 JSON 형식의 데이터를 받아온다고 명시.
// 요청이 성공적으로 완료되었을 때 호출되는 함수를 지정.
success: function(data) {
console.log(data); // 성공적으로 받아온 데이터를 콘솔에 출력.
},
// 요청이 실패했을 때 호출되는 함수를 지정.
error: function(jqXHR, textStatus, errorThrown) {
console.error('Error:', errorThrown); // 발생한 오류를 콘솔에 출력.
}
});
Ajax통신 보안 고려사항 - CORS
CORS(Cross-Origin Resource Sharing)는 웹 페이지의 요청이 발생한 출처와 다른 출처로 리소스를 요청할 때 안전하게 요청을 수행할 수 있도록 하는 메커니즘입니다.
웹 애플리케이션에서 AJAX를 사용하여 다른 도메인의 리소스에 접근하려고 할 때 CORS 문제가 발생할 수 있습니다.
문제 원인
웹 브라우저는 보안상의 이유로 "동일 출처 정책(Same-Origin Policy)"을 적용합니다. 이 정책에 따라, 웹 페이지는 자신과 동일한 출처에서만 리소스를 로드할 수 있습니다. 따라서, 다른 도메인에서 호스팅되는 API에 AJAX 요청을 보내려고 하면 브라우저가 이를 차단하게 됩니다.
CORS 문제 해결 방법
1. 서버 측에서 헤더 설정하기
서버에서 응답 헤더에 Access-Control-Allow-Origin을 설정하면 CORS 문제를 해결 가능.
위의 응답 헤더 설정은 모든 도메인에서의 요청을 허용. 보안을 위해 특정 도메인만 허용하려면 해당 도메인을 명시해야함.
Access-Control-Allow-Origin: https://yourdomain.com
2. 서버 프록시 사용하기
클라이언트가 직접 다른 도메인의 API를 호출하는 대신, 클라이언트는 자신의 서버에 요청을 보내고, 이 서버가 다른 도메인의 API를 호출한 후 결과를 클라이언트에 반환하는 방식.
이 프록시 서버는 클라이언트의 요청을 받아 타겟 서버로 전달하고, 타겟 서버의 응답을 다시 클라이언트에게 전달.
이 방식을 사용하면 클라이언트는 동일한 출처의 프록시 서버와만 통신하게 되므로 CORS 문제를 회피할 수 있음.
주의사항:
- 프록시 서버를 사용하면 추가적인 서버 부하나 지연 시간이 발생할 수 있음.
- 프록시 서버는 중요한 데이터나 인증 토큰을 전달하게 될 수 있으므로, 프록시 서버의 보안 설정에 주의해야 함.
