검색창 입력 데이터에 따른 처리방법 분리
본문
그누보드/영카트 상단의 검색창에 일반적인 텍스트가 포함될 경우에는 그냥 DB내 데이터를 검색하는 (원래 있는 기본 기능)을 사용하고 URL이 포함되었을 경우에는 API 서버를 통해 DB를 새로 생성한후에 API 측에서 다시 원 사이트의 생성된 DB의 페이지로 redirect 하도록 개발하였습니다.
로컬환경에서는 문제가 없이 작동하였지만, 실 서버로 올리니 문제가 발생하더군요.
우선 클라이언트 JS에서 감지하는 코드를 간단하게 작성하였습니다.
[shop.tatil.html.php]
function search_submit(f) {
if (f.q.value.length < 2) {
alert("검색어는 두글자 이상 입력하십시오");
f.q.select();
f.q.focus();
return false;
}
// HTTP 링크 감지 코드
if (f.q.value.startsWith('http')) {
// location.href="https://External-API URL/search/"+f.q.value;
location.href="http://127.0.0.1:3000/search/"+f.q.value;
return false;
}
return true;
}
제가 짐작하는 문제점은 http를 감지하고 지정된 API주소로 이동하고 API서버에서 DB 작업을 처리하고, redirect 주소를 넘기기 이전에 아래에 있는 return false; 코드를 실행해버리면서 '자료가 없습니다' 하는 alert 창이 뜹니다.
하지만 새로고침해보면 DB에는 그 alert 창이 뜨는 동안 DB가 저장이 되었으니, 나오구요. 이게 DB 처리 속도에 따라 그냥 상품 창으로 넘어갈때도 있고, 이런식으로 alert 창이 뜨는 경우도 있는데 아무래도 실서버에는 delay가 있다보니 이런 경우가 좀더 많은것 같더라구요.
이런 경우에는 어떻게 처리하는것이 좋을까요?
API 서버는 Node.js와 Express.js로 작성되어있습니다.
답변 1
submit 를 할때 위 코드를 실행시키려면
ajax 로 호출후 결과값을 return 받았을때 submit 시키는 형태로 처리하셔야 될거 같습니다.
redirect 를 location 하시지 말고
ajax 로 호출해서 거기서 처리하고 result 값을 받은뒤에 나머지 작업을 처리하는 형태로 해보세요
아 어떤 의미인지 알겠습니다. 한번 구현해보도록 하겠습니다 ! 감사합니다!
