05-2. Ajax, Axios

Ajax

Ajax는 웹 페이지가 서버와 통신할 때 사용하는 기술로, 사용자가 웹 페이지를 이용하면서 서버와 데이터를 주고받을 수 있게 해줍니다. Ajax는 Asynchronous JavaScript and XML의 약자입니다. 여기서 중요한 점은 Ajax가 비동기 통신을 가능하게 해준다는 것입니다.

동기 통신과 비동기 통신의 차이

1. 동기 통신:
   • 웹 페이지에서 서버에 요청(request)을 보내면, 브라우저는 서버의 응답(response)을 받을 때까지 기다립니다.
   • 이 동안 사용자는 웹 페이지에서 아무런 동작도 할 수 없습니다.
   • 예를 들어, 링크를 클릭하거나 버튼을 누르면 서버에 요청을 보내는데, 서버에서 응답이 올 때까지 웹 페이지가 멈추게 됩니다.
   • 응답이 오면 화면 전체가 새로 고쳐집니다. 즉, 페이지가 한 번 깜빡이고 나서 다시 표시되죠.
   단점: 서버 응답을 기다리면서 화면 전체가 갱신되기 때문에 사용자는 불편함을 느낄 수 있습니다. 서버의 응답이 느리면 웹 페이지가 멈춘 것처럼 보이기도 하고, 모든 내용을 다시 받아오기 때문에 느릴 수 있습니다.
2. 비동기 통신(Ajax):
   • Ajax를 사용하면 서버에 요청을 보내도 응답을 기다리지 않고, 사용자는 계속해서 웹 페이지를 이용할 수 있습니다.
   • 서버에서 응답이 오면 그 데이터로 화면의 일부만 업데이트할 수 있습니다. 예를 들어, 게시판에서 새로운 글 목록만 바꾸고 나머지 페이지는 그대로 유지할 수 있습니다.
   • 이런 방식 덕분에 웹 페이지가 더 빠르고 유연하게 동작합니다.
   장점: 비동기 통신을 사용하면 화면 전체를 다시 불러오지 않아도 필요한 부분만 업데이트할 수 있어, 웹 페이지가 훨씬 더 매끄럽고 빠르게 작동합니다. 서버 응답을 기다리는 동안에도 웹 페이지를 계속 사용할 수 있어, 사용자가 더 좋은 경험을 할 수 있습니다.

예시로 생각해보면

• 동기 통신: 쇼핑몰에서 버튼을 누르면 서버에 요청을 보내는데, 이 동안에는 화면이 멈추고, 서버에서 응답이 오면 전체 페이지가 새로고침됩니다.
• 비동기 통신(Ajax): 쇼핑몰에서 물건을 장바구니에 담을 때, 화면이 새로고침되지 않고 장바구니에 물건이 추가됩니다. 사용자는 페이지를 계속 사용할 수 있습니다.

Ajax의 주요 기능

• 서버와 데이터를 주고받으면서도 화면의 일부분만 변경할 수 있습니다. 예를 들어, 뉴스 페이지에서 새 기사를 가져오거나, SNS에서 새 댓글만 불러오는 식으로 화면 전체가 아니라 필요한 부분만 바꾸는 것이 가능합니다.
• 웹 페이지는 서버 응답을 기다리지 않기 때문에, 사용자는 응답이 올 때까지도 웹 페이지를 계속 이용할 수 있습니다.

결론적으로, Ajax는 웹 페이지가 서버와 더 빠르고 효율적으로 소통할 수 있게 도와주는 기술로, 사용자가 페이지를 더 부드럽고 편리하게 이용할 수 있게 합니다.

 

브라우저에서 서버와 통신할 때, 기본적으로 동기 통신이 이루어지지만, Ajax 덕분에 비동기 통신이 가능해집니다. 비동기 통신은 브라우저가 서버와 통신하면서도 웹 페이지를 계속 사용할 수 있도록 해주는데, 이는 브라우저 내부의 Ajax 엔진 덕분입니다.

 

---

XMLHttpRequest

Ajax 통신을 할 때는 XMLHttpRequest 객체를 사용해 서버에 요청을 보내고, 결과를 받아옵니다.

XMLHttpRequest 통신 과정

1. XMLHttpRequest 객체 생성:
   • 서버와 통신하려면 먼저 XMLHttpRequest 객체를 만들어야 합니다.
2. 요청 준비:
   • open() 메서드를 사용해 서버에 보낼 요청을 초기화합니다.
   • 이때, 요청 방식(예: GET, POST), 요청할 서버의 URL, 그리고 비동기 통신 여부(true가 비동기, false가 동기)를 설정합니다.
3. 요청 전송:
   • 서버에 요청을 보내려면 send() 메서드를 호출합니다. 이 메서드가 실행되면 서버에 요청이 전송됩니다.
4. 결과 처리:
   • 요청에 대한 응답이 오면, 브라우저는 여러 가지 이벤트 콜백 함수를 통해 결과를 처리합니다.

 

XMLHttpRequest 주요 메서드

• open(method, url, async): 서버 요청을 초기화하는 메서드입니다. 여기서 method는 GET, POST 같은 HTTP 요청 방식을, url은 요청할 주소를, async는 비동기 여부(true가 비동기)를 설정합니다.
• send(): 서버에 요청을 실제로 전송하는 메서드입니다.
• setRequestHeader(): 서버 요청 시 추가적인 헤더 정보를 설정할 수 있습니다.
• abort(): 요청을 취소하는 메서드입니다.

XMLHttpRequest 주요 이벤트

• loadstart: 요청에 대한 응답을 받기 시작했을 때 발생합니다.
• progress: 응답을 받는 중에 주기적으로 발생합니다.
• load: 요청이 성공적으로 완료되었을 때 발생합니다.
• abort: 요청이 취소되었을 때 발생합니다.
• error: 요청에 에러가 발생한 경우 발생합니다.
• loadend: 요청이 완료되면, 성공 여부와 관계없이 발생합니다.
• readystatechange: readyState 값이 변경될 때마다 발생하는 이벤트로, 요청의 진행 상황을 알 수 있습니다.

readyState 프로퍼티

**readyState**는 요청의 상태를 나타내는 속성으로, 다음과 같은 값들을 가집니다:

• 0: UNSET: 요청이 초기화되지 않은 상태
• 1: OPENED: open() 메서드로 요청이 초기화된 상태, 아직 요청은 보내지지 않았습니다.
• 2: HEADERS_RECEIVED: 서버에서 응답의 헤더를 받은 상태
• 3: LOADING: 응답 데이터를 수신 중인 상태
• 4: DONE: 요청이 완료된 상태 (이때 응답 데이터를 사용할 수 있습니다)

응답 결과 확인

• status: 서버에서 반환한 HTTP 상태 코드입니다. 예를 들어 200은 성공, 404는 페이지를 찾을 수 없음 등을 의미합니다.
• statusText: 상태 코드의 의미를 나타내는 문자열입니다. 예: OK, Not Found.
• responseText: 서버에서 반환한 응답 데이터를 문자열로 제공합니다.
• responseType: 응답 데이터의 타입을 설정합니다.

서버 요청의 전체 흐름

1. XMLHttpRequest 객체를 생성합니다.
2. open() 메서드를 사용해 요청을 초기화하고, 서버로 보낼 데이터를 설정합니다.
3. send() 메서드로 서버에 요청을 보냅니다.
4. 서버로부터 응답이 오면, 다양한 이벤트(예: load, error, readystatechange 등)를 통해 응답 데이터를 처리합니다.

이 과정을 통해 브라우저와 서버는 데이터를 주고받으며, 비동기 통신 덕분에 사용자 경험이 향상됩니다.

 

---

 

CORS

CORS(Cross-Origin Resource Sharing)는 서로 다른 출처(origin) 간의 요청을 허용할지 여부를 결정하는 보안 정책입니다. Ajax로 서버에 요청을 보낼 때, 그 서버의 출처가 HTML 문서가 로드된 출처와 다르면 보안상 응답을 받을 수 없습니다. 예를 들어, 웹 페이지가 **http://example.com**에서 열렸을 때, **http://anotherdomain.com**의 서버에 요청을 보내면 CORS 정책에 의해 차단될 수 있습니다.

이를 해결하려면 서버 측에서 CORS 헤더를 설정해줘야 합니다. 즉, 서버는 응답 시에 어떤 출처에서의 요청을 허용할지 명시하는 헤더를 포함해야 합니다.

주요 CORS 설정

1. Access-Control-Allow-Origin:
   • 이 헤더는 어떤 출처에서의 요청을 허락할지 지정합니다.
   • 예를 들어, **"*"**로 설정하면 모든 출처에서의 요청을 허용하겠다는 의미입니다.
   • 특정 출처만 허용하고 싶다면, 예를 들어 **http://example.com**처럼 허락할 출처의 URL을 명시하면 됩니다.
2. Access-Control-Allow-Headers:
   • 이 헤더는 어떤 요청 헤더가 있을 때만 요청을 허용할지 설정합니다.
   • 예를 들어, **"X-Requested-With"**로 설정하면 Ajax 요청에 한해서 허용하겠다는 의미가 됩니다.
3. Access-Control-Allow-Methods:
   • 이 헤더는 특정 HTTP 요청 메서드(예: GET, POST, PUT, DELETE)만 허용하도록 설정할 수 있습니다.

서버가 이러한 헤더를 응답에 포함시키면, 브라우저는 CORS 규칙을 따르면서도 해당 서버로부터 응답을 받을 수 있게 됩니다.

---

Axios

Axios는 자바스크립트로 서버와 통신할 때 사용하는 Ajax 라이브러리 중 하나입니다. 다른 라이브러리들과 비교해도 자주 사용되며, 특히 Promise를 기반으로 하고 요청 및 응답을 처리하는 데 많은 기능을 제공합니다.

Axios의 주요 특징:

• 브라우저에서 XMLHttpRequest를 사용하여 요청을 처리하고, Node.js에서는 HTTP 요청을 처리합니다.
• Promise API를 지원하므로 비동기 요청을 쉽게 처리할 수 있습니다.
• Interceptor 기능을 통해 요청이나 응답을 가로채고 수정할 수 있습니다.
• 요청 및 응답 데이터 자동 변환을 지원하여, 데이터를 쉽게 처리할 수 있습니다.

서버 요청 방법:

Axios를 사용하여 서버에 요청을 보내는 기본적인 방법은 axios() 함수를 사용하는 것입니다. 이 함수의 매개변수로 서버 요청에 필요한 정보를 config로 설정해 전달합니다.

HTTP 메서드 함수:

다양한 HTTP 메서드에 맞게 편리한 함수를 제공합니다.

• axios.get(url[, config]): GET 요청
• axios.post(url[, data[, config]]): POST 요청
• axios.put(url[, data[, config]]): PUT 요청
• axios.delete(url[, config]): DELETE 요청

config 설정:

axios() 함수에서 서버 요청에 필요한 여러 가지 정보를 설정할 수 있습니다. 대표적인 config 설정 정보는 다음과 같습니다:

• url: 요청을 보낼 서버의 URL
• method: 사용할 HTTP 메서드(GET, POST 등)
• baseURL: 기본 URL 설정. URL이 없을 경우 공통 URL 앞에 추가됩니다.
• data: POST, PUT 등의 요청에서 전송할 데이터
• timeout: 요청의 제한 시간을 설정
• params: URL 파라미터 설정

공통 config 설정:

반복적으로 사용하는 설정을 매번 입력하는 것이 번거로울 수 있는데, 이를 간단하게 처리하기 위해 axios.defaults 또는 custom axios 객체를 사용할 수 있습니다.

1. axios.defaults 설정:

한 번 설정한 config 정보는 axios.defaults에 추가하면, 이후 모든 요청에 동일한 config가 적용됩니다.

2. custom axios 객체 생성:

커스텀 axios 객체를 생성하여 공통 정보를 설정할 수도 있습니다. 이때 axios.create() 함수를 사용하여 새로운 axios 인스턴스를 만듭니다.

데이터 변환 (transformRequest, transformResponse):

• transformRequest: 요청 데이터를 보내기 전에 조작할 수 있습니다. 주로 POST, PUT 요청에서 사용되며, 전송할 데이터를 수정하거나 헤더 정보를 추가할 때 사용됩니다.
• transformResponse: 서버에서 받은 응답 데이터를 변환할 수 있습니다.

이 기능을 통해 서버와의 데이터 송수신 과정에서 원하는 대로 데이터를 가공하거나 검증할 수 있습니다.