jQuery를 사용할 때, DOM이 로드된 후 처리를 위해 아래와 같은 구문을 많이 사용해왔습니다.

1
2
3
4
5
6
7
8
9

$(function(){
    
});

// or

$(document).ready(function(){
    
});

이와 같은 동작을 jQuery 없이 사용 할 수 없을까 찾아 보았는데,

1
2
3

document.addEventListener('DOMContentLoaded', () => {

})

위와 같이 작성하면 됩니다.

DOMContentLoaded는 최초로 HTML 문서가 완전히 로드 및 파싱 되었을때 발생되므로,

모든 리소스(이미지, 스크립트, 스타일 시트 등)가 로드 된 후 발생하는 load 이벤트 보다는 먼저 호출됩니다.

그렇다면 왜 DOMContentLoaded 이벤트 리스너 대신 $(document).ready()를 사용했을까 알아 보았는데,

CAN-I-USE-DOMContentLoaded를 확인하였더니, IE8까지는 지원을 하지 않았습니다.

물론 jQuery가 아닌 대안들도 있었겠지만, 브라우저 호환성을 위해 jQuery를 써오던 입장에서는 간단하게 사용할 수 있던 방안이었으리라고 봅니다.

참고자료

• MDN-DOMContentLoaded
• CAN-I-USE-DOMContentLoaded

jQuery로 작성된 코드를 보는데, $("selectorA", "selectorB") 와 같은 코드가 있었습니다.

당연히 기존에 자주 접하던 $("selectorA, selectorB") 와 같은 코드인줄 알았으나, 예상과 다르게 동작하여 문서를 확인해 보았습니다.

jQuery 문서에 따르면, A DOM Element, Document, or jQuery to use as context 가 기재되어있다.

해당 영역에는 DOM element가 올 수 있는데 Selector Context를 확인해보면

selector context is implemented with the .find() method, so $( “span”, this ) is equivalent to $( this ).find( “span” ).

이와 같이 말하고 있습니다.

jQuery .find() vs. context selector 해당 링크에서 퍼포먼스 확인을 해보면
아래 이미지와 같이 context selector를 사용 하는 것 보다, 아주 조금이나마 더 빠릅니다.

DOM을 다룰때 jQuery를 사용하면 매우 편리합니다.

물론 크로스 브라우저 이슈로도 제이쿼리를 많이 사용합니다.

하지만 DOM을 핸들링하기 위해서만 jQuery를 쓴다면, 편리함은 챙기겠지만 낭비 아닐까싶습니다.

저는 위와 같은 생각으로,

주로 DOM 핸들링에는 jQuery 의존성을 줄이고자 순수 자바스크립트를 사용하려 노력하고 있습니다.

또한, document.querySelector와 document.querySelectorAll 를 이용한다면,

jQuery에서 사용하던 복잡한 DOM Selector도 쉽게 사용할 수 있습니다.

1
2
3
4
5
6

<select id="user" name="user[]" multiple="multiple">
    <option>선택</option>
    <option value="foo">Foo</option>
    <option value="bar">Bar</option>
    <option value="baz">Baz</option>
</select>

위와 같은 Multiple SelectBox에서 여러개가 선택되었을 경우 값을 어떻게 가져올까요?

jQuery를 사용하면 $("#user").val()으로 짧고 간결하게 가져올 수 있습니다.

선택된 값이 없을 경우 null이 리턴되고, 선택된 값이 있으면 배열 안에 value 값이 담깁니다.

그렇다면 순수 자바스크립트로는 어떻게 표현할까요?

1
2
3

Array.from(document.querySelector("#user").selectedOptions, (item)=> {
	return item.value;
});

document.querySelector("#user").selectedOptions를 사용하면 ID 값이 user인 DOM을 찾아 selected 된 옵션을 리턴하여줍니다.

해당 값에서 value 값만 뽑고싶다면 위와 같이 처리할 수 있습니다.

위와 같이 처리하면 jQuery를 사용할때와 다른점은 선택된 옵션이 없을 경우에는 []를 리턴하여 줍니다.

1
2

ERROR in './node_modules/knex/lib/dialects/mssql/index.js'
Module not found: Error : Can't resolve 'mssql/lib/base'

프로젝트에 웹팩을 도입하여 사용중, knex 라이브러리를 넣고 나서

웹팩으로 빌드시 해당 에러가 나와서 빌드에 실패 했습니다.