Web - 비동기 처리) Ajax

WEB

비동기 처리와 웹 개발의 기본

웹 개발에서 비동기 처리(Asynchronous Processing)는 사용자가 웹 애플리케이션과 상호작용할 때 중요한 역할을 함.

비동기 처리를 통해 페이지가 새로 고쳐지지 않고도 서버와 데이터를 주고받을 수 있으며, 사용자 경험을 매끄럽게 할 수 있음

비동기 처리의 개념

비동기 처리란, 서버에 요청을 보내고 응답을 기다리는 동안 다른 작업을 계속 수행할 수 있는 기술임.

예를 들어, 사용자가 데이터베이스에 이미 존재하는 아이디를 입력했을 때, 해당 아이디가 유효한지 확인하기 위해 서버에 요청을 보내야 할 수 있고, 이 과정에서 화면이 깜빡이거나 새로고침되는 것을 방지하는 것이 비동기 처리의 핵심임

 

전통적인 처리 방식

전통적인 웹 애플리케이션에서는 서버 요청 후 응답을 기다리는 동안 페이지가 새로고쳐지거나 화면이 깜빡이는 현상이 발생할 수 있음

 

EX)

1. V(View): 사용자 인터페이스(UI) 부분으로, 사용자가 입력을 할 때 화면이 변하지 않아야 함.
2. C(Controller): 입력된 정보를 바탕으로 DB(Database)와 상호작용하여 결과를 가져와야 함.
3. M(Model): DB에서 데이터를 가져오는 부분.

서버와의 통신이 동기적이라면, 화면이 새로 고쳐지거나 깜빡일 수 있음. 이는 사용자 경험을 저해할 수 있음.

 

비동기 처리 방식

비동기 처리 기술을 사용하면 화면이 새로 고쳐지거나 깜빡이지 않고도 서버와 통신할 수 있음.

 

EX)

1. V(View): 사용자가 입력한 정보를 비동기적으로 서버에 요청함.
2. C(Controller): 서버에서 DB의 정보를 요청하고, 응답을 비동기적으로 받아서 화면에 업데이트함.
3. M(Model): DB에서 데이터를 가져오고 비동기적으로 결과를 반환함.

비동기 처리의 장점:

• 화면 깜빡임 없이
• 새로 고침 없이
• 요청 없이
• URL 변경 없이

비동기 처리 구현 방법

비동기 처리를 구현하기 위해 JavaScript에서 $.ajax() 메서드를 사용할 수 있. jQuery는 이러한 AJAX 요청을 간편하게 처리할 수 있는 메서드를 제공함

$.ajax({
    type: "요청 방식",          // GET, POST, PUT, DELETE 등
    url: "요청할 URL",         // 요청을 보낼 서버의 URL
    dataType: "서버에서 응답해오는 데이터의 형식", // 서버가 반환할 데이터 형식 (예: JSON)
    success: function(response) {
        // 요청이 성공했을 때 실행할 함수
    },
    error: function(xhr, status, error) {
        // 요청이 실패했을 때 실행할 함수
    }
});

 

JSON 데이터 형식

JSON(JavaScript Object Notation)은 데이터 전송 형식으로 매우 일반적이며,

JavaScript 객체와 유사한 형식을 가지고 있음.

JSON은 가독성이 좋고 가볍기 때문에 XML보다 선호됨

 

EX)

[
    {"title": "기사제목", "content": "기사내용", "writer": "기자 이름"},
    {"title": "기사제목", "content": "기사내용", "writer": "기자 이름"},
    {"title": "기사제목", "content": "기사내용", "writer": "기자 이름"}
]

 

XML에서 JSON으로의 전환

과거에는 XML을 사용하여 데이터를 주고받았지만, XML은 가독성이 떨어지고 무겁기 때문에 JSON으로의 전환이 이루어졌음.

JSON은 현재 React와 같은 최신 프론트엔드 프레임워크에서 데이터를 주고받는 표준 형식임

프론트엔드 프레임워크

프론트엔드 프레임워크는 웹 애플리케이션의 사용자 인터페이스를 구축하는 데 사용됨. React는 현재 업계에서 가장 인기 있는 프론트엔드 프레임워크 중 하나임

• React: JavaScript 라이브러리로, 컴포넌트 기반의 UI를 구축하는 데 강력,
  React는 프론트엔드 개발의 표준이 될 가능성이 큼
• Vue.js: 간단하고 유연한 프레임워크로, 배우기 쉬운 프레임워크임
• Node.js: JavaScript 런타임으로 서버 사이드에서 JavaScript를 실행하는 데 사용됨

프론트엔드 프레임워크의 선택은 개발자의 필요와 프로젝트의 요구사항에 따라 다를 수 있지만

React는 프론트엔드의 Spring과 같은 존재로 자리잡을 가능성이 큼 

결론

비동기 처리는 웹 애플리케이션의 성능과 사용자 경험을 향상시키는 핵심 기술임.

$.ajax()와 같은 기술을 통해 비동기 처리를 구현할 수 있으며, JSON과 같은 데이터 형식은 데이터 전송에 있어 효율적이고 가독성 높은 방법