Ajax통신을 사용하는 2가지 이유 ex) 회원가입, 좋아요, 댓글..

스프링(Spring)에서 Ajax 통신을 사용하는 주요 이유는

1. 비동기 데이터 처리를 통해 즉각적으로 변화된 데이터를 받을 수 있다는 점
2. 요청에 대한 응답을 html이 아닌 Data(JSON)으로 받기 위함입니다!

자세하게 아래에서 설명하도록 하겠습니다.

 

1. 요청에 대한 응답을 Data(Json)으로 응답을 받기 위함

웹에서 회원가입을 수행하고 응답을 보통은 main화면에 다시 리턴을 해주게 됩니다.

메인화면 -> 회원가입 -> 메인화면

 

과 같이 html파일을 응답해주게 되는 것이 기본 로직이었습니다.

그러나 웹에서 데이터를 Java코드로 응답해줄 경우, 이해하기 못합니다.

반대로 앱에서는 데이터를 Java코드로 응답해줄 경우, 이해할 수 있습니다.

그래서 웹에서는 html를 리턴하는 서버, 앱에서는 Data를 리턴하는 서버 총 2가지로 서버를 만들어야 했기 때문에

 

이 둘을 통일하기위하여 Data를 리턴하는 서버를 만들어준 것입니다!

이렇게 Data를 리턴해주는 서버를 만들어주게 되면, 웹에서는 앱에서든 웹에서는 Data를 받아서 이해할 수 있습니다.

그리고 웹에서는 data를 받고, 다시 request로 main페이지를 보여달라는 요청을 보내면 html로 요청을 다시 받을 수 있습니다.

 

그리고 이를 회원가입, 좋아요, 댓글 같은 기능에 적용할 때의 구체적인 이유는 다음과 같습니다.

2. 비동기 데이터 처리

만약, 동시에 작업을 처리해야하는데 하나의 작업이 끝날동안 멈춰있어야한다면 어떻게 해야할까요?

그렇게 되면 사용자 경험이 매우 나빠지게되겠죠.👎🏼

➡️그래서 나온 것이 비동기 데이터 처리입니다!

비동기처리는 일의 순서에 상관없이, 다른 작업이 수행되는 동안 다른 일을 동시에 수행하는 것을 말해요.

+동기적 실행은 순차적으로 실행되며 하나의 작업이 끝날때까지 기다리는 것을 뜻합니다.

 

회원가입 예시: 회원가입 폼을 제출할 때 전체 페이지를 새로 고침하지 않고, 백그라운드에서 서버로 데이터를 전송하고 응답을 받을 수 있습니다. 이렇게 하면 사용자에게 페이지 리로드 없이 즉각적인 피드백을 제공할 수 있습니다.

• 빠른 응답: 서버로부터 비동기적으로 데이터를 받아 처리하므로, 페이지 전체를 리로드할 필요 없이 빠르게 응답을 받을 수 있습니다.
• 부분 업데이트: 페이지의 일부분만 업데이트 할 수 있어 효율적입니다.

회원가입 예시: 사용자가 회원가입 폼을 작성한 후 제출 버튼을 누르면, Ajax를 통해 서버에 데이터를 전송하고 서버는 JSON 형식으로 성공 또는 실패 메시지를 반환합니다. 이를 통해 사용자는 페이지 새로 고침 없이 가입 여부를 알 수 있습니다.

 

좋아요 기능 예시: 게시글이나 댓글에 '좋아요' 버튼을 클릭할 때, 전체 페이지를 새로 고침하지 않고 좋아요 상태를 변경할 수 있습니다. 이는 사용자 경험을 크게 향상시킵니다.

• 즉각적인 피드백: 사용자 액션(좋아요 클릭)에 대해 즉각적인 피드백을 제공하여 사용자가 보다 직관적으로 인터페이스를 사용할 수 있게 합니다.
• 상태 유지: 전체 페이지 리로드가 필요 없으므로, 사용자 인터랙션에 대한 상태를 유지할 수 있습니다.

좋아요 기능 예시: 사용자가 '좋아요' 버튼을 클릭하면, Ajax 요청을 통해 서버에 해당 좋아요 데이터를 업데이트하고, 서버는 현재 좋아요 수를 반환합니다. 페이지는 새로 고침 없이 좋아요 수를 즉시 업데이트하여 사용자에게 즉각적인 피드백을 제공합니다.

 

댓글 기능 예시: 사용자가 댓글을 작성하고 제출하면, Ajax를 통해 서버에 댓글 데이터를 전송하고 새로운 댓글을 페이지에 추가합니다. 전체 페이지를 새로 고침하지 않으므로 사용자 경험이 더 부드럽습니다.

요약

스프링에서 Ajax 통신을 사용하는 이유는 비동기 데이터 처리와 JSON으로 응답하기 위함이며, 이는 다음과 같은 방식으로 나타납니다:

• 회원가입: 페이지 리로드 없이 서버와 통신하여 실시간으로 가입 결과를 사용자에게 제공.
• 좋아요: 즉각적인 피드백과 상태 유지를 통해 사용자 경험을 개선.
• 댓글: 전체 페이지 새로 고침 없이 새로운 댓글을 실시간으로 추가하여 인터페이스를 보다 동적으로 만듦.

이러한 이유로 Ajax는 웹 애플리케이션의 성능과 사용자 만족도를 높이는 데 중요한 역할을 합니다.