⌛️
Job리스트 스크래핑 - 3
January 11, 2022
Job리스트 스크래핑 - 3
1. 로딩화면이 필요하다
검색어가 입력이 되면 최대로 검색되는 만큼 스크래핑을 한 다음 화면에 보여주게 되어 있다. 검색결과가 많은 경우 사용자의 입장에서는 멍하니 진행되고 있는 것 조차 모르는 채 기다려야만 했다. 이를 해결하기 위해 여러가지 방법이 떠올랐지만, 나는 우선 로딩화면을 보여주기로 결정했다. (한 번 구현 해보고 싶었다.) 우선 Loading.io에 가서 마음에 드는 무료 로딩 gif를 받았다.
2. 로딩화면 구현
kkamikoon님의 글을 보고 구현했습니다.
1️⃣ 브라우저 화면의 높이와 너비를 구한다.
2️⃣ 전체 화면을 음영처리 할 div 생성한다.
3️⃣ 로딩이미지를 담을 div, img 태그 생성한다.
4️⃣ body에 전체 음영처리 div, 로딩이미지 div를 추가한다.
5️⃣ 위치와 크기 등을 css로 꾸며주고 보여준다.
function LoadingWithMask() {
//화면의 높이와 너비를 구합니다.
const maskHeight = window.innerHeight;
const maskWidth = window.innerWidth;
//화면에 출력할 마스크를 설정해줍니다.
const mask = "<div id='mask'></div>";
let loadingImg = '';
loadingImg += "<div id='loadingImg'>";
loadingImg += "<img src='static/images/loading.gif'/>";
loadingImg += '</div>';
//화면에 레이어 추가
$('body').append(mask).append(loadingImg);
//마스크의 높이와 너비를 화면 것으로 만들어 전체 화면을 채웁니다.
$('#mask').css({
width: maskWidth,
height: maskHeight,
opacity: '0.3',
});
//마스크 표시
$('#mask').show();
//로딩중 이미지 표시
$('#loadingImg').show();
}
#mask {
position: absolute;
z-index: 9000;
background-color: gray;
display: none;
left: 0;
top: 0;
}
#loadingImg > img {
position: relative;
display: block;
margin: 0px auto;
}
3. 검색결과 페이지에서 뒤로가면..?
위와 같이 구현하여 로딩이 끝난 후 검색페이지로 넘어가는 것 처럼 보인다. 그런데 사용자들은 브라우저상에서 다양한 액션들을 한다. 나도 한 번 그냥 뒤로 가보았다. 그랬더니 전체가 회색 음영으로 덮인채 로딩이미지가 계속 돌고 있는 것을 볼 수 있었다. 캐시가 계속 남아 있는 것이다. 이번에는 공님의 도움으로 해결했다. 사용자가 뒤로가기
로 돌아온다면 로딩화면 관련 된 HTML 태그를 숨김 및 삭제를 하는 것이다.
// 결과 페이지에서 뒤로가기 할 경우
window.onpageshow = function (event) {
if (
event.persisted ||
(window.performance && window.performance.naviagation.type == TYPE_BACK_FORWARD)
) {
$('#mask, #loadingImg').hide();
$('#mask, #loadingImg').remove();
}
};
4. 결과물
총평
- 다른 개발자분들의 글로 문제를 해결 할 수 있었다.
- 지식의 공유 정말 좋다.
- 나도 다른이에게 도움되는 자가 되고 싶다.