Ajax 게시판과 뒤로 가기

ajax는 성능이 안 좋아서 쓰지 않지만, 프로젝트를 유지보수하다보면 고대 유물들이 많다.

내가 맡은 프로젝트는 그 중 하나였다... Ajax로 구현된 게시판이 있었는데, 뒤로 가기 시 페이지 유지와 검색 결과를 유지해달라는 요청사항이 있었다.

---

검색 결과 유지

일단 첫 번째 관문은 검색 결과 유지였다. 처음에는 ready function 안에 페이지를 로드하는 코드를 작성했다.

그런데 그렇게 했더니 input 안에 값이 있음에도 불구하고 ready 안에서 찍으면 없다고 나왔다.

이게 왜 문제인지 알려면 내가 맡은 프로젝트의 코드 구조를 알아야 한다. 간단하게 쓰겠다.

1. ready()
2. changePage(페이지로드함수)
3. ajax로 데이터 요청(검색 구분자로 select의 선택 값과 키워드로 input 안의 값을 전달)

그런데 ready에서는 select의 선택 값과 input의 값이 비어있었다. 그래서 검색결과가 유지되지 않았던 것이다.

그래서 break point 걸고 확인해봤더니 ready 함수가 끝나고 나서 input tag에 값이 채워지는 것을 확인할 수 있었다.

 

(이거때문에 컴퓨터 부술 뻔;;;;) 그래서 한참을 헤매다가
window의 load 함수가 실행된 후에는 input 안에 값이 들어있는 상태라는 것을 발견했다.
그 후 changePage 함수에 setTimeout을 걸었는데, 이걸로 검색 결과 유지는 깔끔하게 해결했다.

(아무래도 내 추측으로는 input과 select value를 바꿔주는 것이 rendering queue에 들어있고,
ready는 stack 영역에서 실행되어서 ready가 실행되는 동안에는 입력값이 비어있는 것 같다.
이 때 setTimeout을 사용하여 changePage 함수를 실행하면
changePage가 callback queue로 들어가게 되고,
rendering queue는 callback queue에 있는 함수보다 높은 우선순위를 가지기때문에
input과 select의 value가 바뀌고 나서, changePage가 callback queue에 의해 실행되는 것 같다.
-> callback과 rendering queue 알아보기)

 

$(window).on( "load", function() {
	setTimeout(changePage, 0);
});

---

페이지 유지

내가 맡은 프로젝트의 게시판에서는 page를 이동해도 url의 변화가 없기때문에 브라우저는 한 페이지로 인식했다.

즉, 1페이지 > 2페이지 > 홈 > 뒤로가기가 진행되면 나오는 페이지가 1페이지였다.

이에 나는 뒤로가기를 하면 사용자가 지나쳤던 페이지들이 나오게끔 하기 위해

page를 바꾸는 버튼을 클릭할 경우(하단의 숫자 버튼이나 다음페이지[>], 첫 페이지[<<] 버튼 등) hash를 바꾸게 했다.

그리고 페이지를 불러오는 함수에서 hash값을 읽어와서 읽어온 hash값의 페이지를 로드하도록 했다.

코드는 아마 별 의미 없을 거다. 페이지 로드하는 코드가 다 다르니까... 각자 이건 알아서 자기 프로젝트에 적용하자!!!

물론 hash를 어떻게 다루는지에 대해 써놓을 수 있겠지만, ... 솔직히 말하면 힘들다....

(글 쓰는 게 생각보다 쉽지가 않다.)

 

---

지금 생각해보면 검색결과 유지를 위해서 hash에 검색키워드와 검색구분자를 저장해놓는 것이 올바른 방법인 거 같다.
왜냐하면 유저가 검색 후 검색키워드나 검색구분자를 바꾸고 다른페이지로 넘어간 뒤 뒤로가기를 클릭할 시

보게 되는 것은 이전의 검색결과가 아니라 페이지로 넘어가기 전에 바꿔놓은 검색입력값들에 대한 검색결과이기때문이다.

하지만 저 프로젝트를 유지보수할 때는 그렇게까지 생각하진 못했다... 지금도 초보지만 저 때는 더 초보였기에...

아무튼 이 글을 읽는 분들은 취사선택하여 잘 해결하길 바란다~~