1. 백엔드와 통신하는 세가지 방법

구분	설명	목적
API 생성 사이트 사용	외부에서 미리 만들어둔 mock API를 사용	간단한 실습용 환경
Nginx로 가짜 API 서버 만들기	Nginx가 정적 JSON 파일을 응답하게 설정	로컬에서 가짜 백엔드 흉내 내기
Express로 백엔드 직접 만들기	Node.js로 백엔드 서버 자체를 코드로 구현	실제 백엔드 기능 연습

Nginx로 가짜 API 서버 만들어 실습해보았다.

사전 준비 (nginx 설정)

server {
        listen 80;

        root /var/www/html;

        location / {
                try_files $uri $uri/ =404;

                # POST 요청을 처리하기 위해 추가
                error_page 405 =200 $uri;

                # 기본 CORS 헤더
                add_header 'Access-Control-Allow-Origin' '*';
                add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS, PUT, DELETE';
                add_header 'Access-Control-Allow-Headers' '*';

                # OPTIONS 프리플라이트 요청 처리
                if ($request_method = OPTIONS ) {
                        add_header 'Access-Control-Allow-Origin' '*';
                        add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS, PUT, DELETE';
                        add_header 'Access-Control-Allow-Headers' '*';
                        add_header 'Access-Control-Max-Age' 3600;
                        add_header 'Content-Length' 0;
                        add_header 'Content-Type' 'text/plain charset=UTF-8';
                        return 204;
                }
        }
}

---

2. AJAX (Asynchronous JavaScript and XML)

2.1 특징

• 가장 오래된 방식
• 브라우저 내장 객체인 XMLHttpRequest를 사용해 비동기 요청을 보냄
• 자바스크립트에서 비동기 통신을 처음 가능하게 만든 API
• 브라우저 내장 객체인 XMLHttpRequest 사용
• 콜백 기반 구조로 인해 여러 요청이 중첩되면 콜백 지옥(callback hell)이 발생할 수 있음
• 현재는 fetch, axios 등 더 직관적이고 현대적인 방식이 많이 사용됨

2.2 개념 정리

구성 요소	설명
JavaScript	동작을 제어하는 코드
DOM	데이터를 받아 HTML에 반영
XMLHttpRequest	비동기 요청을 보내는 핵심 API
(XML 또는 JSON)	서버와 데이터를 주고받는 데이터 포맷 (현재는 대부분 JSON 사용)
HTML / CSS	사용자에게 보여지는 UI 구성

2.3 예제: AJAX 요청과 응답 처리

아래는 XMLHttpRequest 객체를 사용해 HTTP GET 요청을 보내고, 응답으로 받은 JSON 데이터를 HTML 요소에 출력하는 코드다.

back.html

const getData = () => {
  	 // AJAX 요청을 위한 객체 생성
 	 let httpRequest = new XMLHttpRequest();

  	 httpRequest.onreadystatechange = () => {
       	 // 요청 상태가 '완료'이고 응답 코드가 200(성공)일 때만 실행
         if (httpRequest.readyState == XMLHttpRequest.DONE && httpRequest.status == 200) {
           
         // 응답 문자열을 JS 객체로 파싱
         let response = JSON.parse(httpRequest.responseText); 
           
         // 파싱된 JSON 안의 test 값을 화면에 표시
         document.getElementById("text").innerText = response.test;
         }
     }
	 
     // GET 방식으로 요청 준비
     httpRequest.open("GET", "http://192.168.32.170/abc.json"); 
  	 
  	 // 요청 전송
  	 httpRequest.send(); 
}

abc.json

{
  "test": "이건 테스트입니다!"
}

abc.json 은 실습/테스트용 가짜 데이터 파일이다.
실제 서비스에서는 DB에서 가져온 데이터를 백엔드가 JSON으로 응답한다.

출력 화면

readyState 값

값	의미
0	요청이 초기화되지 않음
1	open() 호출됨
2	send() 호출됨
3	데이터 수신 중
4	요청 완료, 응답 준비 완료

---

3. fetch

3.1 특징

• AJAX의 개선판이자, 표준 JavaScript API
• XMLHttpRequest보다 코드가 간결하고 직관적
• Promise 기반 비동기 처리 방식

3.2 Promise 란

Promise는 미래에 값이 준비되면 처리하겠다는 개념이다. 즉시 값을 반환하지 않고, 비동기 작업이 완료되었을 때 결과를 다룰 수 있다.

• 성공 시 → .then()을 통해 결과 처리
• 실패 시 → .catch()로 에러 처리

fetch("http://example.com/data.json")
  .then(response => response.json())    // 응답 처리, fetch의 호출이 성공했을 때의 동작
  .then(data => console.log(data))      // 데이터 처리, fetch의 호출이 성공했을 때의 동작
  .catch(error => console.error(error)); // 에러 처리

• fetch()는 즉시 결과를 반환하지 않고, Promise 객체를 반환한다.
• 데이터가 도착하면 .then() 내부 코드가 실행된다.
• 오류가 발생하면 .catch()가 실행된다.

3.3 예제: fetch 요청과 응답 처리

back.html

const fetchData01 = () => {
  	let url = "http://192.168.32.170/abc.json"; // 요청 대상 URL
  
  	let options = {
    	method: "GET", // HTTP 요청 방식
  	};
  	
  	// fetch() 함수로 비동기 HTTP 요청을 보냄. 반환값은 Promise 객체
	fetch(url, options) 
		.then((result) => result.text()) // 응답을 텍스트로 변환
		.then((data) => {
			let response = JSON.parse(data); // 텍스트를 JSON 객체로 파싱
			// 파싱된 JSON 객체의 test 속성 값을 HTML 요소에 출력
      		document.getElementById("text").innerText = response.test;
		});
};

abc.json

{
  "test": "이건 테스트입니다!"
}

출력 화면

---

4. fetch + await

4.1 특징

• fetch와 async/await를 조합해 동기 코드처럼 작성 가능
• .then() 체인 없이 깔끔한 구조
• try/catch로 예외 처리
• await는 Promise가 처리될 때까지 기다림

4.2 예제: async/await 요청으로 응답 처리

back.html

const fetchData02 = async () => {
    let url = "http://192.168.32.170/abc.json"; // 요청 대상 URL

    let options = {
      method: "GET", // HTTP 요청 방식
    };

    // fetch로 HTTP 요청을 보내고, 응답이 도착할 때까지 대기
    let response = await fetch(url, options);

    // 응답 본문을 JSON 형식으로 파싱
    let result = await response.json();

    // 파싱된 결과를 콘솔에 출력
    console.log(result);

    // 파싱된 JSON 객체의 test 속성 값을 HTML 요소에 출력
    document.getElementById("text").innerText = result.test;
};

abc.json

{
  "test": "이건 테스트입니다!"
}

출력 화면

---

5. axios

5.1 특징

• 가장 많이 사용하는 HTTP 클라이언트 라이브러리
• 내부적으로 Promise 기반
• fetch보다 기능이 더 많고 에러 처리도 쉬움
• JSON 자동 변환 (별도 파싱 불필요)
• 요청/응답 인터셉터, timeout 설정 등 다양한 부가 기능 제공
• 브라우저와 Node.js 모두에서 사용 가능

5.2 예제

back.html

// 비동기 함수 선언: axios를 사용하여 데이터를 가져옴
const getAxios = async () => {
  
  			// axios.get()을 사용해 GET 요청 보내고 응답을 기다림
            const response = await axios.get('http://192.168.32.170/abc.json');
  
  			// 응답 데이터 중 첫 번째 객체의 name 값을 HTML에 출력
  			// 응답 구조가 { results: [{ name: "..." }] } 형태라고 가정
            document.getElementById("text").innerText = response.data.results[0].test;
        }

abc_arr.json

{
  "results": [
    { "test": "이건 테스트입니다!" },
    { "test": "두 번째 테스트입니다!" },
    { "test": "세 번째 테스트입니다!" }
  ]
}

출력 화면

---