My Dev Blog

Ajax 통신 시 로딩바를 구현하는 방법은 여러 많은 블로그에서 확인할 수 있다.

여기서는 submit이나 location.href와 같은 페이지 이동 시 로딩바를 구현하는 방법에 대해 알아보자

1. 로딩바 gif 파일 다운로드

2. 프로젝트 이미지 폴더 안에 로딩바 gif 파일 넣기 (ex : img src='/images/loadingbar.gif')

3. script 태그 안 submit or location.href 전에 로딩바와 로딩 시 보여줄 배경 추가 후 보여주기

<script type="text/javascript">

	function save() {
		var backHeight = $(document).height(); // 로딩 시 보여줄 배경 높이
	   	var backWidth = window.document.body.clientWidth; // 로딩 시 보여줄 배경 너비
	   	var backGroundCover = "<div id='back'></div>";
	   	var loadingBarImage = "";
	   	loadingBarImage += "<div id='loadingBar'>";
		loadingBarImage += "     <img src='/images/loadingbar.gif' width='100' height='100'/>"; // 로딩바 이미지
		loadingBarImage += "</div>";
		$('body').append(backGroundCover).append(loadingBarImage);
		$('#back').css({ 'width':backWidth, 'height':backHeight, 'opacity':'0.3' });
		$('#back').show();
		$('#loadingBar').show();
		
		// 1. submit
		$('#saveForm').attr('method', 'POST');
		$('#saveForm').attr('action', '/save');
		$('#saveForm').submit();
		
		// 2. location.href
		var url = '/save'; 
		location.href = url;
	}
    
</script>

4. style 태그 안 코드 추가

<style type="text/css">

	#back {
		position:absolute;
		z-index:100;
		background-color:#000000;
		display:none;
		left:0;
		top:0;
	}
    
	#loadingBar { 
		position:absolute;
		left:50%;
		top:40%;
		display:none;
		z-index:200;
	}
    
</style>

Ajax 통신 시 complete 시점에서 아래 코드가 필요하지만 submit or location.href의 경우 페이지 이동에 의해

로딩바와 로딩 시 보여준 배경이 자동으로 숨김 및 제거된다.

$('#back, #loadingBar').hide();
$('#back, #loadingBar').remove();

function solution(name) {
    var answer = 0;
    var changeCnt = 0;
    let moveCnt = name.length - 1; // max 값은 name길이 -1

    for (var i = 0; i < name.length; i++) {
        let asciiValue = name.charCodeAt(i); // A 65 Z 90
        
        if (asciiValue < 78) {
            changeCnt += (asciiValue - 65); // A -> B 방향으로 변경하는 게 빠른 경우 // B일 경우 1
        } else {
            changeCnt += (91 - asciiValue); // Z일 경우 1이 나와야 함
        }

        let nextIndex = i + 1; // 다음 문자 확인을 위한 인덱스

        while (nextIndex < name.length && name.charCodeAt(nextIndex) == 65) { // nextIndex는 name.length - 1보다 크지 않을 때까지 연속해서 A가 나오는지 확인이 필요하다.
            nextIndex += 1;
        }

        // nextIndex는 A 다음의 문자 인덱스를 가리키게 된다.

        moveCnt = Math.min(moveCnt, (i * 2) + name.length - nextIndex); // 이동 거리 최소 카운트로 갱신
    }
    
    answer = moveCnt + changeCnt;

    return answer;
}

alert(solution("JEROEN")); // 56

/* <var>
변수 중복 선언 가능하여, 예기치 못한 값을 반환할 수 있다.
함수 레벨 스코프로 인해 함수 외부에서 선언한 변수는 모두 전역 변수로 된다.
변수 선언문 이전에 변수를 참조하면 언제나 undefined를 반환한다. */

/* <let>
let 키워드로는 변수 중복 선언이 불가하지만, 재할당은 가능하다. */

/* <const>
const가 let과 다른 점이 있다면, 반드시 선언과 초기화를 동시에 진행되어야 한다. */

프로그래머스 조이스틱 문제 풀이 JavaScript