Karzin Lab

[jQuery] Window의 사이즈 변경 이벤트 함수 (resize)

컨텐츠의 각 size는 static으로 정의해줄수도 있지만, 모니터 화면의 비율에 따라서 Width나 Height값을 변경해주어 좀더 dynamic한 페이지를 만들어줄 수 있습니다.

모바일이나 PC에서 다르게 보이는것이 그 예인데요, 우리는 주로 고정된 화면에서만 사용을 함이 아니기 때문에!

오늘은 Window의 사이즈가 변경이되면 웹내부 컨텐츠들이 사이즈에 맞게 변경을 시켜주는 함수를 알아봅시다! (반응형 웹) 

$(window).resize()

$(window).resize() 함수는 매개변수로 이벤트를 발생할 function을 전달해줌으로써 윈도우의 사이즈가 resize될 때 마다 매개변수로 전달된 이벤트 function을 실행시켜줍니다.

$(window).resize(function() {
	console.log('resize!');
});

위의 함수를 사용하면, 다음과 같은 결과를 얻어낼 수 있습니다. (브라우저의 크기를 줄여보거나 키워보면 log가 찍힙니다.)

역시 정리시간은 재밌네요. 별거아닌거일수도 있지만 ㅋㅋ..

Reference

 - api.jquery.com/resize/

버전정보 (v1.0)

 - v1.0 2020.11.14 배포

* 본 게시글의 이미지에 들어간 글씨체는 네이버 나눔 글씨체인 나눔스퀘어 Bold를 사용했습니다.

* 본 게시글의 이미지는 전부 (이미지 내의 픽토그램 등) 직접 제작했음을 명시합니다.

* 저작권에 위반될 수 있는 컨텐츠(이미지, 동영상 등)나 게시글은 삭제되거나 수정될 수 있습니다.

* 문제의 여지가 될 수 있는 컨텐츠의 경우 댓글 달아 주시면 빠른 시일 내에 조치하도록 하겠습니다.

* Karzin은 항상 공부중입니다. 설명이 틀리거나 잘못된 부분이 있다면 의견내주시는대로 수정하도록 하겠습니다.

Karzin

abbeea@naver.com

[jQuery] $(document).ready() 와 $(window).on("load")

오늘도 어김없이 Project.다원 Ensemble 개발을 진행했지만.. Back단 작업하느라 딱히 보여줄만한게 없어서(눈으로 보이는 부분은 아니기 때문에..ㅠㅠ) 그냥 정리나 해볼까 해서 만들어봤습니다. (...)

우리는 jQuery를 사용하다보면 자주 $(document).ready()와 $(window).on("load") 함수를 이용해 front단에서 화면의 시작시 보여줌과 동시에 무언가의 작업을 실행시켜야하는 경우가 있습니다.

오늘은 자주사용하면서 잘 확인하지 않는 이 $(document).ready()와 $(window).on("load") 함수에 대해서 잠깐이나마 설명하는 시간을 갖도록 하겠습니다.

뭐, 생명주기라할것까진 아니고, 그냥 위 함수가 어떠한 순서로 웹사이트가 load되는지정도만 구경하도록 하시죠.

우선 $(document).ready()와 $(window).on("load") 함수가 어떤 역할을 하는지부터 짚고 넘어가시죠.

$(document).ready()

$(document).ready()의 경우 DOM(Document Object Model) 페이지가 JavaScript코드를 사용할 수 있을 때 실행이 됩니다. (참조)

* 잠시 보는 DOM이란?

DOM의 경우 Document Object Model로 한국어로 직역해보면 문서 객체 모델(...) 이며, 오늘 우리는 어려운 부분까지는 머리빠개지니까(??) 설명은 줄이고 그냥 쉽게 Front단에서 보여질 HTML이나 XML등의 문서를 객체로서 표현하여 가지고 있다고 생각을 하면 쉬울 것 같습니다.

이 DOM 덕분에 우리는 HTML을 JavaScript를 통해 요소나 속성등을 추가하고, 변경(삭제)를 할 수 있게됩니다.

$(document).ready() 코드

$(document).ready(function(){
	console.log("document ready!");
});

$(document).ready()함수의 매개변수로 실행시킬 function을 전달시킬 수 있습니다.

때문에 function을 위 코드와 같이 직접 선언을 하며 전달을 할 수 있고,

아래처럼 미리 다른곳에 만들어둔 function을 불러오는 방법도 사용할 수 있습니다.

$(document).ready(ready("document ready!"));

function ready(val) {
	console.log(val);
}

$(window).on("load")

$(window).on("load")의 경우에는 DOM을 포함한 모든 페이지가 준비가 되면 실행이 됩니다. (참조)

때문에 $(document).ready()보다 늦게 실행이 되는 모습을 보여줍니다.

$(window).on("load") 코드

$(window).on("load", function() {
	console.log("window load!");
});

$(window).on("load")함수는 위 $(document).ready()와는 조금 다른 모습을 띄고 있습니다.

예~~~~전 버전 jQuery에서는 $(window).load()와 같이 위 $(document).ready()와 거의 비슷한 형태를 띄고 있었으나, jQuery 버전(3.0 이상부터)이 올라가면서 .load()함수는 제거되었다고 합니다. (참조)

$(window).on("load") 또한 매개변수로 실행시킬 function을 넘겨줄 수 있습니다.

위와같이 선언과 동시에 전달을 하는 방법이 있고, 아래처럼 function을 불러오는 방법도 가능합니다.

$(window).on("load", function() {
	ready("window load!")
});

function ready(val) {
	console.log(val);
}

$(document).ready()와 $(window).on("load")의 실행 순서

위 코드를 직접 console에 찍어보면 아래와 같은 결과를 확인하실 수 있습니다.

위 설명에 적어놓은 것 처럼 DOM객체가 JavaScript를 실행할 수 있는 상태가 된다면 $(document).ready를, 모든 페이지에 대한 준비가 완료된다면 $(window).on("load")함수가 실행이 된다는걸 확인할 수 있습니다.

대략 이런느낌

음.. 내일부터는 또 한 주의 시작이네요.

코로나는 끝을 보이지 않고, 비도 많이와서 다들 지치실 것 같은데, 힘내시기 바랍니다.

모든분들 언제나 응원하고 있습니다!

Reference

- learn.jquery.com/using-jquery-core/document-ready/

- jquery.com/upgrade-guide/3.0/#breaking-change-load-unload-and-error-removed

버전정보 (v1.0)

 - v1.0 2020.08.03 배포

* 본 게시글의 이미지에 들어간 글씨체는 네이버 나눔 글씨체인 나눔스퀘어 Bold를 사용했습니다.

* 본 게시글의 이미지는 전부 (이미지 내의 픽토그램 등) 직접 제작했음을 명시합니다.

* 저작권에 위반될 수 있는 컨텐츠(이미지, 동영상 등)나 게시글은 삭제되거나 수정될 수 있습니다.

* 문제의 여지가 될 수 있는 컨텐츠의 경우 댓글 달아 주시면 빠른 시일 내에 조치하도록 하겠습니다.

* Karzin은 항상 공부중입니다. 설명이 틀리거나 잘못된 부분이 있다면 의견내주시는대로 수정하도록 하겠습니다.

Karzin

abbeea@naver.com

[JavaScript] 문자형을 숫자형으로 바꿔주기

 -> js파일은 맨 하단에 있습니다.

1. Number 함수를 사용한다.

var myData = '0';
var myNumber = Number(myData);

1-2. 아래의 함수를 참조한다. (필요에 의해 개인적으로 만들었음을 알려드립니다.)

function changeNumber(data) {
    console.log('input Data : ', data);
    if(!!data) {
        data = data*1;
    } else {
        if(data == '0') {
            data = 0;
        }
    }
    console.log('output Data : ', data);
    return data;
}

2. NaN을 0으로 처리 (필요에 의해 개인적으로 만들었음을 알려드립니다.)

function changeNumber_NaN(data) {
    console.log('input Data : ', data);
    if(!!data) {
        data = data*1;
    } else {
        if(data == '0') {
            data = 0;
        }
    }
    if(isNaN(data)) {
		data = 0;
	}
    console.log('output Data : ', data);
    return data;
}

3. 숫자만 숫자로, 나머진 그대로 return (필요에 의해 개인적으로 만들었음을 알려드립니다.)

function changeNumber_rest(data) {
    console.log('input Data : ', data);
    if(!!data) {
        if(!isNaN(data)) {
            data = data*1;
        }
    } else {
        if(data == '0') {
            data = 0;
        }
    }
    console.log('output Data : ', data);
    return data;
}

* 코드 중 버그 및 에러가 있는 경우 댓글로 알려주시면 수정하도록 하겠습니다.

* 댓글 하나하나가 작성자에겐 큰 힘이 됩니다. 감사합니다.