Jquery 초보의 적응기

jquery 적응기

jquery를 업무에서 많이 쓰다보니 알게 된 사실 몇가지를 적고자 합니다.

웹 개발을 하다보면 생기는 일 중에 하나가 html에 data 값을 저장 해둘 일이 필요로 합니다.
그러다보니 서버에서 프론트로 데이터를 내려주는데 이 데이터는 사용자에게는 필요한 정보는 아니니 숨겨서 보여주는 것이죠.

data() 메소드

그래서 태그 안에 data를 숨겨두어야 합니다.
바로 아래처럼 말이죠.

<a href="" data-user-id="seungdols" >click</a>

jquery-data api를 보면 사용법이 주로 나와 있습니다. 그럼 이제 이 데이터를 쓰려면, HTML에 있는 값을 읽어 오거나, 다시 쓸 때 사용하는 게 data() 메소드 입니다.

data api 이쪽에서도 확인을 할 수 있죠. 여기서 중요한 사실 하나가 있습니다.

<div data-role="page" data-last-value="43" data-hidden="true" data-options='{"name":"John"}'></div>

위 코드에 ‘data-last-value’라고 해두고선 값을 43을 저장해두었습니다. 이 값을 가져올 때, 변수명을 CamelCase로 써도 무방하다는 점이 신기합니다.

$( "div" ).data( "role" ) === "page";
$( "div" ).data( "lastValue" ) === 43;
$( "div" ).data( "hidden" ) === true;
$( "div" ).data( "options" ).name === "John";

위 두번째 코드를 보시면, lastValue라고 써있는데도 정상적으로 동작합니다. 이는 jquery자체에서 변환을 해주는건데, 카멜케이스로 작성해도 data-last-vaule로 변환을 해줍니다. 물론 last-value로 써주어도 동작합니다.

원문 내용 발췌

The second statement of the code above correctly refers to the data-last-value attribute of the element. In case no data is stored with the passed key, jQuery searches among the attributes of the element, converting a camel-cased string into a dashed string and then prepending data- to the result. So, the string lastValue is converted to data-last-value.

그런이유로 코드 컨벤션에도 적용 되어야 하지 않을까 합니다. 어떻게 사용할지가 나중에 가독성에도 영향이 있기 때문이죠.

직접 jquery를 까보면야 이에 대한 코드가 있을 것 같습니다. 하지만, 이것은 좀 추후에 다시 해야 할 것 같습니다.

nth-child(n) selector

사실, 이 셀렉터를 처음 써보았는데, 생각해보니 제가 생각한 대로 동작하지 않더라구요.

저는 어떤 li의 첫번째, 두번째 자식을 가져오고 싶어서 0, 1 인덱스를 넣었습니다.

그런데, 0을 넣으니 해당 ul이 넘겨오더라구요. 아무래도 0은 그자체 base 셀렉터로 작동하는 것 같았습니다.

The :nth-child(n) pseudo-class is easily confused with :eq(n), even though the two can result in dramatically different matched elements. With :nth-child(n), all children are counted, regardless of what they are, and the specified element is selected only if it matches the selector attached to the pseudo-class. With :eq(n) only the selector attached to the pseudo-class is counted, not limited to children of any other element, and the (n+1)th one (n is 0-based) is selected.
출처 - nth-child()

즉, 1부터 시작해야 첫 번째 자식 요소를 반환해주는 걸로 보아 생각보다 가독성은 좋긴 하더라구요.

쓰다보니 제가 생각한대로 동작하지 않거나, 생각 외로 동작하는 부분이 많은 것을 보니 jquery의 코드가 점점 더 궁금해지긴 합니다.

조만간 jquery를 까보는 작업도 해야 할텐데, 그정도로 javascript를 잘 알고있는 편인지는 모르겠습니다.

​