AJAX는 클라이언트와 서버 간의 통신 기술로, XML 혹은 JSON 형태의 데이터를 요청하여 페이지 전체를 다시 불러오지 않고 화면의 일부분만 업데이트 할 수 있게 된다. 이런 AJAX를 사용하는 예시로 대표적인 것이 회원 가입 시 ID 중복 체크인데, AJAX를 사용하지 않으면 화면이 새로고침 되면서 입력했던 정보들이 다 날아가게 된다. AJAX를 사용하면 중복 체크를 확인하는 것을 비동기식으로 통신하면서 나머지 화면이 새로고침 되지 않게 됩니다.
동기식 처리와 비동기식 처리
동기식은 요청받은 순서대로 하나씩 처리하는데, 비동기식 처리를 활용하면 요청 순서와 상관없이 동시에 여러 일을 처리하게 됩니다. 이렇게 비동기식으로 처리를 진행하기 때문에 화면의 전체가 새로고침 되지 않아도 됩니다.
그림으로 보자면 위와 같습니다 예시와 함께 살펴보겠습니다.
게시물을 등록한 다음 댓글을 등록하면 서버에서는 데이터를 정상적으로 등록했다는 처리 결과를 보내주게 됩니다. 사용자는 본문 밑에 댓글창에 댓글을 입력한 다음 입력 창을 누를 텐데요. 등록에 성공하면 등록에 성공했음을 서버가 알려준다는 것이죠. 클라이언트는 결과를 받은 다음 화면을 표시하는데요. 새로 등록된 댓글들이 화면에 추가되어야 하겠죠. 이때 2가지 방법이 있는데, 화면을 새로고침하거나, 기존 화면에서 댓글만 추가해준다. 2가지가 있습니다. AJAX 는 기존 화면에서 댓글만 추가해줍니다.
예시 2번째는 채팅 프로그램인데요. 동기식은 순서대로 처리되기 때문에 누군가 입력을 하면 그 명령이 끝날 때 까지 다른 명령들이 실행되지 않습니다. 이런 문제를 해결할 수 있는 것이 비동기식 처리이고, AJAX 기술입니다.
사용자 아이디 중복 체크에 AJAX 활용하기
project8 을 복사해서 project10 을 생성합니다. 그 다음 settings.gradle 내부 내용을 project10 으로 수정해줍니다. DB에 있던 board 테이블을 삭제한 다음 프로젝트를 실행시켜줍니다.
아이디 중복 체크 기능을 아무나 접근할 수 있도록 시큐리티 설정을 SecurityConfig 파일에 추가해주겠습니다.
그 다음 컨트롤러에 아이디 중복체크 메소드를 추가해줍니다.
그 다음 회원가입 페이지에 중복체크 버튼을 추가해줍니다. 등록 버튼이 특이한데요. 입력 버튼 옆에 중복체크 버튼이 추가되었습니다. 우선 여기까지만 수정을 하고 회원 가입 페이지를 띄워보겠습니다.
회원 가입 페이지는 직접 주소를 입력해서 들어갑니다(아직 기능 구현 안했음). 위와 같은 화면을 볼 수 있습니다.
아이디 중복체크 이벤트 처리를 진행하겠습니다. 우선 head 태그 안에 jQuery 라이브러리가 선언되었는지 확인합니다.
코드가 상당히 긴데요. 코드가 복잡해서 코멘트를 많이 달아두었습니다. 코멘트를 같이 읽으면서 코드를 이해합시다.
위와 같이 처리한 다음 중복된 id 를 입력한 다음 중복체크 버튼을 누르면 위와 같이 "아이디가 중복되었습니다.." 라는 메시지가 출력되고 '등록' 버튼이 비활성화 상태를 유지하고 있는 것을 볼 수 있습니다.
