[면접 회고] part. Ajax / 비동기 처리

falsovsveritas·2025년 4월 2일

ajax 기술면접 면접회고 비동기

기술면접

목록 보기

9/10

Ajax를 지원하는 라이브러리 - jQuery
jQuery로 ajax를 보낼 때 delete 메서드 사용해본 적 있는지?
예전에는 callback 방식을 많이 사용했지만 최근에는 비동기 지원으로 인해 promise를 많이 사용하는데 예외처리할 때 사용하는 function - catch
promise는 체이닝방식인데 체이닝방식으로 안 쓰고 절차적으로 쓸 수 있는 프로미스를 wrapping해주는 키워드 - async, await
jQuery를 사용해서 특정 버튼을 눌렀을 때, API 서버로부터 데이터를 가져올 때, 호출함수가 async로 선언되어 있을 코드를 어떻게 작성해야 하는가? - Event에 대한 콜백에 async를 붙인다.

1. AJAX를 지원하는 라이브러리

1️⃣ jQuery

$.ajax(), $.get(), $.post() 등의 메서드 제공

예제:

$.ajax({
    url: '/api/data',
    method: 'GET',
    success: function(response) {
        console.log(response);
    },
    error: function(error) {
        console.error(error);
    }
});

2️⃣ Fetch API (Vanilla JavaScript, 최신 표준)

window.fetch() 메서드를 제공하며, 기본적으로 Promise 기반

예제:

fetch('/api/data')
    .then(response => response.json())
    .then(data => console.log(data))
    .catch(error => console.error(error));

3️⃣ Axios

Promise 기반의 HTTP 클라이언트

예제:

axios.get('/api/data')
    .then(response => console.log(response.data))
    .catch(error => console.error(error));

4️⃣ SuperAgent

간결한 API 제공, Node.js 및 브라우저에서 사용 가능

예제:

superagent.get('/api/data')
    .then(response => console.log(response.body))
    .catch(error => console.error(error));

5️⃣ XHR (XMLHttpRequest, 구식 방법)

오래된 방식이지만 일부 레거시 코드에서 사용됨

예제:

var xhr = new XMLHttpRequest();
xhr.open('GET', '/api/data', true);
xhr.onreadystatechange = function() {
    if (xhr.readyState === 4 && xhr.status === 200) {
        console.log(JSON.parse(xhr.responseText));
    }
};
xhr.send();

📌 비교 요약

라이브러리	특징	사용 방식
jQuery	간편한 AJAX 요청 지원	`$.ajax()`
Fetch API	최신 표준, 기본 제공	`fetch()`
Axios	JSON 변환 자동 처리, 직관적인 API	`axios.get()`
SuperAgent	체이닝 지원, 간결한 문법	`superagent.get()`
XHR	구식 방식, 직접 상태 관리 필요	`XMLHttpRequest()`

현재는 Fetch API 또는 Axios가 가장 널리 사용됨.

2. jQuery로 AJAX 요청 시 DELETE 메서드 사용 경험

DELETE 메서드는 jQuery의 $.ajax() 또는 $.ajaxSetup()을 사용하여 보낼 수 있다.

기본적인 `DELETE` 요청 예제

$.ajax({
    url: '/api/resource/1',  
    type: 'DELETE',  
    success: function(response) {
        console.log('삭제 성공:', response);
    },
    error: function(xhr, status, error) {
        console.error('삭제 실패:', error);
    }
});

$.ajaxSetup()을 사용한 설정 예제: 모든 AJAX 요청에 공통 헤더 추가

$.ajaxSetup({
    headers: {
        'Authorization': 'Bearer your-token'
    },
    error: function(xhr, status, error) {
        console.error('공통 에러 핸들링:', error);
    }
});

// 이후의 모든 AJAX 요청에 위 설정이 자동으로 적용됨
$.ajax({
    url: '/api/resource/1',
    type: 'DELETE',
    success: function(response) {
        console.log('삭제 성공:', response);
    }
});

설명:

$.ajaxSetup()을 사용하면, 모든 AJAX 요청에 공통적인 설정(예: 헤더, 에러 핸들링 등)을 적용할 수 있음.
위 코드에서는 Authorization 헤더를 모든 요청에 추가했고, 공통적인 error 핸들러도 설정했음.

jQuery에서 DELETE 메서드를 사용할 때는 $.ajax()를 사용해야 한다.
왜냐하면, $.get()과 $.post() 같은 헬퍼 함수는 HTTP GET과 POST 요청만 지원하고, DELETE 같은 다른 HTTP 메서드는 지원하지 않기 때문이다.

3. jQuery의 AJAX 헬퍼 함수

jQuery는 AJAX 요청을 쉽게 보낼 수 있도록 $.get(), $.post(), $.getJSON(), $.ajax() 등의 헬퍼 함수를 제공함.

1) `$.get(url, data, successCallback)`

GET 요청을 보낼 때 사용
예제:

$.get('/api/data', { id: 1 }, function(response) {
    console.log('데이터:', response);
});

2) `$.post(url, data, successCallback)`

POST 요청을 보낼 때 사용
예제:

$.post('/api/data', { name: 'John' }, function(response) {
    console.log('응답:', response);
});

3) `$.getJSON(url, successCallback)`

GET HTTP 요청을 사용하여 서버에서 JSON으로 인코딩된 데이터를 출력
예제:

$.getJSON('/api/data', function(response) {
    console.log('JSON 데이터:', response);
});

4) `$.ajax()`

$.get()와 $.post()는 GET과 POST 요청만 지원하지만, $.ajax()는 PUT, DELETE, PATCH 등의 요청도 가능함.

예제: PUT 요청 (리소스 수정)

$.ajax({
    url: '/api/resource/1',
    type: 'PUT',
    data: JSON.stringify({ name: 'New Name' }),
    contentType: 'application/json',
    success: function(response) {
        console.log('수정 성공:', response);
    },
    error: function(xhr, status, error) {
        console.error('수정 실패:', error);
    }
});

📌 `$.ajax()`와 헬퍼 함수 비교

메서드	HTTP 메서드 지원	설명
`$.get()`	`GET`	간단한 GET 요청을 보낼 때 사용
`$.post()`	`POST`	간단한 POST 요청을 보낼 때 사용
`$.getJSON()`	`GET`	JSON 데이터를 가져올 때 사용
`$.ajax()`	`GET`, `POST`, `PUT`, `DELETE`, `PATCH` 등	가장 유연한 방식, 모든 HTTP 요청 가능

결론:

$.get() / $.post() 같은 헬퍼 함수는 코드가 짧아질 수 있지만, DELETE나 PUT 같은 요청을 보낼 수 없음.
모든 HTTP 메서드를 지원하려면 $.ajax()를 사용하는 것이 좋음.
전역 설정이 필요하면 $.ajaxSetup()을 활용할 수 있음.

4. 비동기 처리 방식 변화 (callback → promise)

과거에는 jQuery AJAX 요청을 보낼 때 콜백(callback) 함수를 많이 사용했지만, 이후 Promise 객체가 도입되면서 .then(), .catch() 같은 체이닝 방식이 일반적으로 사용됨.

예제 (Promise 기반 jQuery AJAX 요청)

$.ajax({
    url: '/api/data',
    method: 'GET'
}).then(function(response) {
    console.log('데이터 받아옴:', response);
}).catch(function(error) {
    console.error('에러 발생:', error);
});

콜백 함수보다 코드 가독성이 좋아짐.
.catch()를 활용해 예외 처리를 할 수 있음.
.catch() 함수는 Promise 객체가 rejected 상태가 되었을 때 호출되며, 에러 정보를 인자로 전달받습니다.

5. async/await: Promise를 절차적으로 사용하기(체이닝 방식❌)

async/await 키워드는 Promise를 더욱 직관적이고 동기적인 코드처럼 사용할 수 있도록 해줍니다.
async 함수 내에서 await 키워드를 사용하면 Promise가 fulfilled 상태가 될 때까지 코드 실행을 일시 중지하고, 결과를 반환받을 수 있습니다.

예제 (async/await으로 wrapping):

async function deleteItem(itemId) {
  try {
    const response = await fetch(`/api/items/${itemId}`, {
      method: 'DELETE'
    });
    if (!response.ok) {
      throw new Error('삭제 실패');
    }
    const data = await response.json();
    console.log('삭제 성공:', data);
  } catch (error) {
    console.error('에러 발생:', error);
  }
}

이렇게 하면 .then().catch() 체이닝 없이도 try-catch 문을 통해 예외 처리를 할 수 있다.

6. Promise의 세 가지 상태

1️⃣ pending (대기 상태)

초기 상태.
아직 작업이 완료되지 않았으며, resolve 또는 reject가 호출되지 않음.

2️⃣ fulfilled (이행 상태)

비동기 작업이 성공적으로 완료되었으며, resolve()가 호출됨.
then() 블록에서 결과 값을 사용할 수 있음.

예제

const myPromise = new Promise((resolve, reject) => {
 setTimeout(() => {
     resolve("작업 성공!"); // Promise가 fulfilled 상태가 됨
 }, 1000);
});

myPromise.then(result => {
 console.log(result); // "작업 성공!" 출력
});

✅ resolve("작업 성공!")이 호출되면 myPromise는 fulfilled 상태가 되고, then() 블록이 실행됨.

3️⃣ rejected (거부 상태)

비동기 작업이 실패했으며, reject()가 호출됨.
catch() 블록에서 오류를 처리할 수 있음.

예제

const myPromise = new Promise((resolve, reject) => {
    setTimeout(() => {
        reject("작업 실패!"); // Promise가 rejected 상태가 됨
    }, 1000);
});

myPromise
    .then(result => {
        console.log(result); // 실행되지 않음
    })
    .catch(error => {
        console.error(error); // "작업 실패!" 출력
    });

✅ reject("작업 실패!")이 호출되면 myPromise는 rejected 상태가 되고, catch() 블록이 실행됨.

7. jQuery에서 특정 버튼 클릭 시 API 요청을 async로 실행하는 방법

jQuery의 click 이벤트 핸들러에서 async 함수를 선언하면 됨.

$('#myButton').click(async function() {
    try {
        let response = await $.ajax({
            url: '/api/data',
            method: 'GET'
        });
        console.log('데이터 가져오기 성공:', response);
    } catch (error) {
        console.error('에러 발생:', error);
    }
});

이렇게 하면 click 이벤트가 발생했을 때, await를 통해 비동기 API 호출을 수행하고, 예외 발생 시 catch에서 처리 가능.

8. Ajax 사용 시 주의사항

보안: Ajax 요청 시 민감한 정보가 노출되지 않도록 보안에 각별히 신경 써야 한다. 크로스 사이트 스크립팅(XSS)를 방지하기 위해 데이터 검증 및 HTTPS를 사용하고, 서버 측에서 적절한 인증 및 권한 부여를 수행해야 한다.
성능: Ajax 요청이 많아지면 서버 부하가 증가하고 성능 저하가 발생할 수 있있다. 필요한 데이터만 요청하고, 캐싱을 활용하여 불필요한 요청을 줄여 응답 크기를 최소화해야 한다.
에러 처리: Ajax 요청 시 발생할 수 있는 다양한 에러 상황을 고려하여 적절한 에러 처리 코드를 작성해야 한다. 사용자에게 친절한 에러 메시지를 보여주고, 필요한 경우 재시도 로직을 구현해야 한다.
브라우저 호환성: 일부 HTTP메서드(PUT, DELETE)는 구형 브라우저에서 지원되지 않을 수 있으므로 확인 필요

9. AJAX에 대한 추가적인 중요 개념

동기와 비동기
Ajax는 비동기적 작업을 수행할 수 있도록 지원합니다. 비동기 작업은 서버와 통신 중에도 사용자 인터페이스가 차단되지 않는 장점이 있습니다.
JSON 포맷
데이터는 일반적으로 JSON 형식으로 주고받습니다. JSON은 가독성이 높고 JavaScript와의 호환성이 좋아서 자주 사용됩니다.
Cross-Origin Resource Sharing (CORS)
Ajax로 데이터를 요청할 때, CORS 설정이 필요할 수 있습니다. 이는 보안상의 이유로 다른 도메인에서 데이터 요청을 제한하는 규칙입니다.

falsovsveritas

이전 포스트

[면접 회고] part. Apache/Tomcat

다음 포스트

[면접 회고] part. Ajax / 비동기 처리

기술면접

1. AJAX를 지원하는 라이브러리

1️⃣ jQuery

2️⃣ Fetch API (Vanilla JavaScript, 최신 표준)

3️⃣ Axios

4️⃣ SuperAgent

5️⃣ XHR (XMLHttpRequest, 구식 방법)

📌 비교 요약

2. jQuery로 AJAX 요청 시 DELETE 메서드 사용 경험

기본적인 `DELETE` 요청 예제

$.ajaxSetup()을 사용한 설정 예제: 모든 AJAX 요청에 공통 헤더 추가

3. jQuery의 AJAX 헬퍼 함수

1) `$.get(url, data, successCallback)`

2) `$.post(url, data, successCallback)`

3) `$.getJSON(url, successCallback)`

4) `$.ajax()`

📌 `$.ajax()`와 헬퍼 함수 비교

4. 비동기 처리 방식 변화 (callback → promise)

예제 (Promise 기반 jQuery AJAX 요청)

5. async/await: Promise를 절차적으로 사용하기(체이닝 방식❌)

예제 (async/await으로 wrapping):

6. Promise의 세 가지 상태

예제

예제

7. jQuery에서 특정 버튼 클릭 시 API 요청을 async로 실행하는 방법

8. Ajax 사용 시 주의사항

9. AJAX에 대한 추가적인 중요 개념

[면접 회고] part. Apache/Tomcat

[면접 회고] part. DB

0개의 댓글

[면접 회고] part. Ajax / 비동기 처리

기술면접

1. AJAX를 지원하는 라이브러리

1️⃣ jQuery

2️⃣ Fetch API (Vanilla JavaScript, 최신 표준)

3️⃣ Axios

4️⃣ SuperAgent

5️⃣ XHR (XMLHttpRequest, 구식 방법)

📌 비교 요약

2. jQuery로 AJAX 요청 시 DELETE 메서드 사용 경험

기본적인 DELETE 요청 예제

$.ajaxSetup()을 사용한 설정 예제: 모든 AJAX 요청에 공통 헤더 추가

3. jQuery의 AJAX 헬퍼 함수

1) $.get(url, data, successCallback)

2) $.post(url, data, successCallback)

3) $.getJSON(url, successCallback)

4) $.ajax()

📌 $.ajax()와 헬퍼 함수 비교

4. 비동기 처리 방식 변화 (callback → promise)

예제 (Promise 기반 jQuery AJAX 요청)

5. async/await: Promise를 절차적으로 사용하기(체이닝 방식❌)

예제 (async/await으로 wrapping):

6. Promise의 세 가지 상태

예제

예제

7. jQuery에서 특정 버튼 클릭 시 API 요청을 async로 실행하는 방법

8. Ajax 사용 시 주의사항

9. AJAX에 대한 추가적인 중요 개념

[면접 회고] part. Apache/Tomcat

[면접 회고] part. DB

0개의 댓글

기본적인 `DELETE` 요청 예제

1) `$.get(url, data, successCallback)`

2) `$.post(url, data, successCallback)`

3) `$.getJSON(url, successCallback)`

4) `$.ajax()`

📌 `$.ajax()`와 헬퍼 함수 비교