프론트엔드에서는 백엔드에서의 처리 결과를 유저에게 알려줘야 합니다.
예를 들어, 유저 등록이라는 이벤트가 있다고 했을때, 시간이 걸린다고 하면 유저 입장에서는 현재 등록이 진행 중인지
아니면 어떤 문제가 발생해서 등록이 진행되고 있지 않은지를 모릅니다.
그래서 유저가 확인할 수 있도록 로딩 이벤트를 추가해야 합니다.
오늘은 Html과 Javascript를 이용하여 로딩을 표시하고 닫아주도록 만들어 보겠습니다.
자바스크립트와 html를 이용해서 버튼이 눌렸을 경우, 메세지를 표시해보겠습니다.
index.html↓↓↓↓↓
<!DOCTYPE html>
<html>
<head>
<script src="./main.js"></script>
<title>LOADING...</title>
</head>
<body>
<button onClick="loadingShow();">로딩 표시</button>
<button onClick="loadingHide();">로딩 숨기기</button>
</body>
</html>main.js↓↓↓↓↓
function loadingShow(){
alert("로딩을 표시합니다.");
}
function loadingHide(){
alert("로딩을 숨깁니다.");
}
다음과 같이 index.html. main.js를 실행시키면 버튼을 누를 경우, 다음과 같은 메세지가 표시됩니다.
위와 같이 메세지가 표시되었다면, 로딩을 만들 준비는 끝났습니다.
그렇다면 이제부터 로딩을 만들어보겠습니다!
- Bootstrap을 이용하여 로딩 표시!
https://getbootstrap.com/docs/4.4/components/spinners/
Spinners
Indicate the loading state of a component or page with Bootstrap spinners, built entirely with HTML, CSS, and no JavaScript.
getbootstrap.com
부트스트랩에는 Spinners라는 요소가 있는데요, 이를 활용해 로딩을 만들어보겠습니다.
아래의 Link태그를 복사하여 넣어주시면 됩니다!
아래의 Link태그는 부트스트랩의 디자인만을 이용하기 위한 link입니다.
부트스트랩JS를 이용하고 싶은 경우에는 부트스트랩 자바스크립트 SDN을 script태그에 넣어주시면 됩니다.
자신만의 로딩 버튼을 만들고 싶은 경우에는 CSS를 활용해 작성해주세요!
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
index.html body태그 사이에도 다음과 같이 html를 작성해줍니다.
<div class="spinner-border" role="status">
<span class="sr-only">Loading...</span>
</div>위와 같이 작성하고 보면, 로딩이 표시될까요?
표시는 됩니다.... 표시만 되네요!
해결해야 될 점이 몇가지 있습니다.
- 로딩을 화면 가운데에 위치하게 하기
- 버튼을 눌렀을 때만 로딩이 표시되게 하기
- 로딩이 표시될 때, 다른 버튼을 못누르게 하기
위의 문제점을 하나하나씩 파헤쳐보겠습니다.
- 로딩을 화면 가운데로
위에서 추가한 spinner-border에 loading이라는 클래스를 추가하겠습니다.
<div class="spinner-border loading" role="status">
<span class="sr-only">Loading...</span>
</div>loading이라는 클래스에는 다음과 같은 스타일을 적용하겠습니다.
.loading{
position: absolute;
top: 50%;
left: 50%;
z-index: 1;
width: 70px;
height: 70px;
}position은 absolute를 지정해서, 자유롭게 움직일 수 있게 합니다.
top, left를 각각 50%로 지정한 이유는 화면 가운데에 위치하게 하기 위해서 입니다.
top, left의 퍼센트를 바꾸면 화면 중간이 아닌 다른 곳에 위치하는 것을 보실 수 있습니다.
첫 번째 문제는 해결입니다!
- 버튼을 눌렀을 때 로딩 표시하기!
위에서 만들었던 "로딩 표시" 버튼이 눌릴 경우에만 2초간 로딩을 표시하고, 로딩을 닫아보겠습니다.
먼저, 위에서 만들었던 자바스크립트를 수정해줍니다.
function loadingShow(){
$(".loading").show();
setTimeout("loadingHide()", 2000);
}
function loadingHide(){
$(".loading").hide();
}loadingShow 함수에서는 먼저 loading을 표시하게 됩니다.
setTimeout은 타이머 함수인데요. 2000ms(2초)후에 loadingHide()를 실행시키게 됩니다.
loadingHide 함수에서는 jquery의 hide함수를 이용해 display:none;으로 바꾸게 되어 화면에서 사라집니다.
그렇다면 두 번째 문제도 해결이네요!
- 로딩이 표시될 때, 화면 무효화 시키기
로딩이 표시될 때 화면을 왜 무효화 시켜야 할까요? 바로 로딩중에 다른 처리가 실행 될 가능성이 있기 때문입니다.
비동기 처리라면 모를까 로딩이 표시되는 경우는 주로 표시나 등록, 갱신과 같은 경우이므로,
화면을 무효화 시켜야 합니다.
그렇다면, 로딩이 표시될 때는 화면을 무효화 시키고, 로딩이 사라지면 다시 클릭이 가능하도록 만들어보겠습니다.
한번 더 자바스크립트를 수정해 주겠습니다.
function loadingShow(){
var maskHeight = $(document).height();
var maskWidth = window.document.body.clientWidth;
var mask = "<div id = 'mask' style='position:absoulte; z-index:100; background-color:#000000; left:0; top:0;'></div>";
$('body').append(mask);
$("#mask").css({
'width' : maskWidth,
'height' : maskHeight,
'opacity' : '0.4'
})
$(".loading").show();
setTimeout("loadingHide()", 2000);
}
function loadingHide(){
$("#mask").remove();
$(".loading").hide();
}maskHeight, maskWidth는 전체 화면의 크기를 구하기 위해 사용하는 함수입니다.
mask라는 함수에 Div태그를 작성하고 있는데요, 이것은 화면을 무효화하는 것을 표시하기 위해 작성하고 있습니다.
그 후에, body태그 안에 작성한 Div태그를 넣고 있습니다.
mask의 CSS태그 중 Opacity는 투명도를 나타내는 style입니다.
그 후, loadingHide에서는 id가 mask인 객체를 지워서 화면을 클릭 할 수 있게 해줍니다.
이렇게 html과 자바스크립트를 이용하여 로딩을 구현해봤습니다!
도움이 되셨다면 공감과 구독 부탁드리겠습니다!
'Programming 💾' 카테고리의 다른 글
| 자바스크립트 infinity 알아보기! (0) | 2022.02.06 |
|---|---|
| 자바스크립트 타이머 함수 총정리!(setTimeout, setInterval...) (0) | 2022.02.06 |
| 자바스크립트 가변 인자 함수 arguments 사용하기! (6) | 2022.02.04 |
| [Web Server]IIS 서버 설치하고 확인하기 (2) | 2022.02.03 |
| 자바 String, StringBuffer, StringBuilder 알아보기! (4) | 2022.02.02 |
댓글