1. 서론

웹 페이지에서 흔히 볼 수 있는 아아디 중복 검사와 같은 처리는 보통 페이지 내에서 새로고침이 일어나면 안되는 경우가 많다.

예를 들어 회원가입 단계에서 사용자가 실컷 회원정보를 다 입력해놓고 등록을 눌렀는데 아이디 중복검사를 하지 않았다고 해보자. 당연히 사용자는 아이디 중복검사 버튼을 누를 것이고, 만약 이 때 새로고침이 일어난다면 화면 내의 정보는 다 날아가버리고 말 것이다. 또한, 사용자는 매우 키보드 샷건을 치고 싶어질 것이다.

때문에 보통 아이디 중복검사와 같은 기능은 중복검사 버튼을 눌렀을 때, Ajax를 통해 비동기식 처리를 하여 새로고침이 일어나지 않고도 서버단과 통신을 하여 리턴값을 가지고 중복 여부를 판별한다. 혹은 조그마한 팝업창을 띄워서 거기서 아이디 중복검사를 마치고 팝업창에서 부모창으로 어떤 특정값을 넘기거나 하는 식으로 진행된다.

다른 예로는 한 페이지 내에서 어떠한 데이터를 지웠을 때, 새로고침 없이 해당 데이터를 삭제한 화면을 보여주고 싶을 때가 있다. (데이터 삭제 뿐만 아니라 추가도 마찬가지다.) 이럴 때는 보통 Ajax를 이용하여 데이터 처리 프로세스를 호출하여 실제 DB 상의 데이터를 삭제해줌과 동시에 Ajax 리턴값을 받아 제대로 삭제 되었다면 스크립트를 이용하여 삭제한 데이터의 HTML 소스를 화면상에서 remove 해준다.

2. 본론

그런데 Ajax로 하자니 크게 어려운 건 아닌데 귀찮고(?) 화면 새로고침은 없어야하는데 이런 상황에서 쓰일 수 있는게 있다. 바로 iframe이다.

사실 요새는 iframe 사용을 지양하는 분위기로 알고 있어서 시기적절(?) 하지 않은 감이 있지만 뭐… 그냥 나같이 막 웹에 입문한 초보자나 Ajax 처리가 귀찮은 사람들은 iframe을 이용하여 간단하게 처리를 해줄 수가 있다.

위 소스를 보도록 하자. 간단하게 4개의 데이터를 보여주고 있는데 각각 삭제 버튼이 달려있다. 각 버튼마다는 데이터 고유값이 value로 들어가있다. 스크립트를 살펴보면 삭제하겠냐는 메시지를 띄워주고 확인을 누르면 삭제가 진행되도록 하였다.

간단하게 설명을 하자면, 먼저 데이터 프로세스를 처리할 url을 지정해주고 해당 url을 가진 a태그를 생성해준다.(createElement)

그리고 그 a태그의 target을 HTML 소스 쪽 맨 밑에 있는 hiddenForm이라는 이름을 가진 iframe으로 잡아준다.

그 후 appendChild를 통해 a태그를 삽입해주고 a.click()을 통해 실행해준다. 그러면 동적으로 생성된 a태그가 클릭이 되고 클릭 동작은 target으로 잡힌 hiddenForm 안에서 실행이 되는 것이다. iframe와 부모창은 완전 다른 페이지이기 때문에 iframe에서 링크 이동이 있더라도 부모창은 별다른 영향이 없다.

아무튼 데이터 프로세스가 다 돌고 나선 동적으로 생성했던 a태그를 다시 삭제해주고(removeChild) 최종적으로 화면상의 데이터 HTML 소스를 삭제해준다.(remove())

3. 결론

좀 옛날 방식이기도 하고 iframe을 사용하기 때문에 별로 좋지 않은 구조를 가진 페이지가 될 수도 있지만 그래도 깔끔하게 새로고침 없이 어떠한 프로세스를 실행할 수 있다는 점에서 괜찮은 방법인 듯 하다. 그냥 이런 방법도 있다는 정도만 알아두면 좋을 것 같다.