HTML Data attribute 에 대한 고찰

조사 배경

오늘 리뷰 중 html 스펙인 data attr 의 네이밍 룰에 대해
보통 data-kebab-case 를 사용하는데 제가 data-snake_case 로 작성하여 이야기가 나왔습니다.

본격적으로 논의하기 전에 사실 파악을 먼저 해 보았는데요.

조사

우선 기본적으로 data attribute 는 (https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/dataset) 공식문서를 따르고 있습니다.

문서에 따르면 특수문자는 dash (-), dot (.), colon (:), underscore (_) 를 쓸 수 있었고
data- 는 remove 되고, dash 후의 소문자는 대문자로 치환되고 있습니다. (ex:`data-like-this` > `likeThis`)
(https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/dataset#Name_conversion)

테스트

아래는 sandbox에서 직접 테스트해본 결과입니다.
(https://jsfiddle.net/L60k5nnz/2/)

{    camelcase:"camelCase"    kebabCase:"kebab-case"    pascalcase:"PascalCase"    snake_case:"snake_case" }

테스트 해본 결과에서 특이했던 점은

plainJS element.dataset 으로 조회할 때 사용할 수 있는 key 값 kebab-case > camelCase jQuery $(element).data('key') 으로 조회할 때 사용할 수 있는 key 값 kebab-case > kebab-case, camelCase

입니다.

생각 ...

이에 따르면 kebab-case 를 쓰는게 맞고 표준으로 보이지만...

저는 테스트를 해보면서 오히려 snake_case 도 괜찮을 것 같다는 생각이 들었습니다.
underscore(_)를 문자취급하기 때문에 변수명에 입력이 가능하고 HTTP 통신중에 변형도 없으며 dash(-) 처럼 javascript 엔진에 의해 변형되지도 않습니다.

"javascript 엔진에 의해 변형된다" 를 짚고 가자면

dash(-) 로 쓰게 될 경우 개발자마다 camelCase 를 쓸 수도있고 kebab-case 를 그대로 쓸 수도 있습니다.

이는 추후 코드를 봤을 때 case 가 혼재 되어있어 같은 data 를 지칭한다고 충분히 인식하기 어려운 상황이 발생할 수 있을 뿐더러 kebab-case 로 네이밍하지만, camelCase 로도 사용할 수 있다(?) 식으로 컨벤션도 애매해질 것으로 보입니다.

언어를 불문하고 strict 한 것을 추구하는 것으로 보이는 지금의 리디 개발센터 내 컨벤션 유행을 봤을 때 data attribute 의 네이밍에 underscore(_) 를 사용하여 data attr 에 한하여 strict 한 컨벤션을 가지고 가는 것도 나쁘지는 않을것 같네요.

또한 작지만 underscore(_)만의 특징이라면 I/O 시 dash(-) 와 다르게 변수명으로도 사용이 가능하기 때문에 HTML 과 동일한 네이밍으로 사용이 가능하다는 점이 있습니다(중요한 것 같진 않습니다 )

<div id="test" data-kebab-case='kebab-case' data-snake_case='snake_case'></div>

var testData = $('#test').data(); console.log(testData.kebabCase); // kebab-case testData.kebabCase = 'test'; console.log(testData.kebabCase); // test   console.log(testData.snake_case); // snake_case testData.snake_case = 'test'; console.log(testData.snake_case); // test

결론

이번 조사로 생각해 볼 수 있었던 것은 다음과 같습니다.

kebab-case 는 html 에서 kebab, javascript 에서는 camelCase 로 사용하여 각 언어간의 변수 Case 네이밍 컨벤션 을 지킬 수 있을 것입니다. 또한 snake_case 에 비해 심미성도 있는 것 같습니다.

snake_case 는 html 에서 snake, javascript 에서도 snake 로 언어 간 변수명이 변하지 않아 같은 데이터라는 인식에 도움을 줄 수 있을 것 같습니다.

결론은 data attribute 의 네이밍에 dash(-) 를 쓰는게 일반적이고 좋을 것 같긴 한데 ... 막상 써보니 underscore(_) 를 사용하여 얻을 수 있는 장점도 있었던 것 같습니다.