1207 JavaScript 심화: 서버와 통신하기 (AJAX, Fetch, JSON)
✅ 1. AJAX란 무엇인가? (Asynchronous JavaScript and XML)
- AJAX는 페이지 전체를 새로고침하지 않고도, 백그라운드에서 서버와 데이터를 주고받아 웹 페이지의 일부만 동적으로 업데이트하는 기술을 의미합니다.
- 핵심 아이디어: 사용자의 인터랙션에 반응하여 필요한 데이터만 서버에 요청하고, 그 결과를 받아 현재 페이지에 즉시 반영함으로써 부드럽고 빠른 사용자 경험(UX)을 제공합니다.
- XML?: 이름에는 XML이 포함되어 있지만, 현대 웹에서는 XML보다 훨씬 가볍고 JavaScript와 친화적인 JSON 형식을 주로 사용하여 데이터를 교환합니다.
✅ 2. Fetch API: 현대적인 서버 통신 방법
- 과거에는
XMLHttpRequest라는 복잡한 객체를 사용했지만, 이제는 Fetch API라는 더 간편하고 강력한 표준 기능이 내장되어 있습니다. - Fetch API는 네트워크 요청을 보내고 응답을 받는 과정을 Promise 기반으로 처리하여,
async/await와 함께 사용할 때 비동기 코드를 매우 깔끔하게 작성할 수 있습니다.
➕ 2-1. 데이터 조회 (GET 요청)
-
fetch()함수는 요청을 보낸 후, HTTP 응답을 나타내는Response객체로 이행되는Promise를 반환합니다.fetch('https://api.example.com/users') .then(response => { if (!response.ok) { // HTTP 상태 코드가 200-299가 아닌 경우 throw new Error('Network response was not ok'); } return response.json(); // 응답 본문을 JSON으로 파싱 }) .then(data => { console.log(data); // 최종적으로 파싱된 데이터 }) .catch(error => { console.error('Fetch error:', error); });
➕ 2-2. 데이터 생성/수정 (POST, PUT 요청)
-
fetch()의 두 번째 인자로options객체를 전달하여, HTTP 메서드, 헤더, 본문(body) 등을 설정할 수 있습니다.const newUser = { name: 'Alice', job: 'Developer' }; fetch('https://api.example.com/users', { method: 'POST', // HTTP 메서드 지정 headers: { 'Content-Type': 'application/json' // 보내는 데이터가 JSON 형식임을 명시 }, body: JSON.stringify(newUser) // JavaScript 객체를 JSON 문자열로 변환하여 전송 }) .then(response => response.json()) .then(data => console.log('User created:', data)) .catch(error => console.error('Error:', error));
✅ 3. JSON (JavaScript Object Notation)
-
JSON은 서버와 클라이언트 간에 데이터를 교환하기 위해 사용되는 경량의 텍스트 기반 데이터 형식입니다. JavaScript의 객체 리터럴 문법과 매우 유사하여, JavaScript 환경에서 다루기 매우 쉽습니다.
-
핵심 규칙:
- 데이터는
key: value쌍으로 이루어집니다. - 키(key)는 반드시 큰따옴표(
"")로 감싸야 합니다.
- 데이터는
➕ JavaScript와 JSON 변환
- JavaScript는 JSON을 다루기 위한 내장 객체
JSON을 제공합니다.
-
JSON.stringify(object):- JavaScript 객체를 JSON 문자열로 변환합니다.
- 서버로 데이터를 보낼 때(요청 body) 사용합니다.
-
JSON.parse(string):- JSON 문자열을 JavaScript 객체로 변환합니다.
- 서버로부터 데이터를 받았을 때(응답 body) 사용합니다. (
response.json()메서드가 이 과정을 자동으로 처리해줍니다.)
✅ 4. async/await를 이용한 실전 예제
async/await문법을 사용하면 Promise 기반의fetch코드를 동기 코드처럼 더 읽기 쉽게 작성할 수 있습니다.
// 서버로부터 사용자 목록을 가져와 화면에 표시하는 함수
async function displayUsers() {
const userListElement = document.getElementById('user-list');
try {
// 1. API 요청을 보내고 응답을 기다림
const response = await fetch('https://jsonplaceholder.typicode.com/users');
// 2. HTTP 에러 처리
if (!response.ok) {
throw new Error(`HTTP error! status: ${response.status}`);
}
// 3. 응답 본문을 JSON으로 파싱하고 결과를 기다림
const users = await response.json();
// 4. 받아온 데이터로 DOM 조작
users.forEach(user => {
const li = document.createElement('li');
li.textContent = `${user.name} (${user.email})`;
userListElement.appendChild(li);
});
} catch (error) {
// 5. 네트워크 에러나 파싱 에러 처리
userListElement.textContent = 'Failed to load users.';
console.error(error);
}
}
// 함수 실행
displayUsers();📌 요약
- AJAX는 페이지 새로고침 없이 서버와 통신하여 UI를 동적으로 업데이트하는 기술입니다.
- Fetch API는 Promise 기반으로 동작하는 현대적인 네트워크 요청 표준이며,
async/await와 함께 사용하면 비동기 코드를 매우 간결하게 작성할 수 있습니다. - JSON은 서버와 클라이언트 간에 데이터를 주고받는 표준 형식입니다. 데이터를 보낼 때는
JSON.stringify()를, 받을 때는response.json()(내부적으로JSON.parse()수행)을 사용합니다. fetch사용 시,response.ok를 확인하여 HTTP 에러를 처리하고,try...catch구문으로 네트워크 에러를 처리하는 것이 중요합니다.
