코딩일기

JavaScript Data-action(자바스크립트 데이터액션) 본문

Code/기타

JavaScript Data-action(자바스크립트 데이터액션)

daje 2020. 12. 3. 22:49
728x90
반응형

오늘은 Data-action에 대해 알아봅시다 

 

어느덧 HTML, CSS, vanilla JavaScript를 거의 다 배웠습니다! 

아직 미미한 부분은 있지만, 그런 부분은 과제나 챌린지를 통해 채워나갈 예정입니다. 

 

그런데 한가지 문제점이 생겼습니다.

CSS, JavaScript class tag가 너무 햇갈린다는 점..

또한, 어떤 class tag가 CSS, JavaScript 둘 다에 사용되었는지?

아니면 한 쪽에만 사용되었는지? 지워도 되는지? 

코드가 150줄이 넘어가면서 햇갈리기 시작합니다..

# 이 문제를 해결하기 위한 방법 

이 문제를 해결하기 위해 몇 년 전 JavaScript에서만 사용되는 .js- 태그를 사용했다고 합니다. 

<div class="explain   js-explain">

    Some content that can be collapsed or expanded.

</div>

위 예시처럼 explain은 CSS로 js-explain는 JavaScript로 사용하면 됩니다. 

그러나, 먼가... 이상하고 프로같은 느낌이 안나죠? 

프로는 아니여도 우리는 프로들이 사용하는 방법을 지향해야한다고 생각합니다. 

 

# 데이터 속성 사용( 위 문제를 해결할 수 있는 방법 )

JavaScript를 만든 분들께서 이러한 불편함을 해결하기 위해 

data-* (읽기)와 dataset이라는 걸 만들어 두셨다. 우리는 찾아서 이용만 하면 된다. 

 

"""

HTMLElement.dataset 읽기 전용 속성은 요소의 data-*에 대한 읽기와 쓰기 접근 방법을 HTML과 DOM 양측에 제공합니다. 반환하는 값은 DOMStringMap으로, 각 데이터 특성마다 하나의 항목을 가집니다. dataset 속성 자체는 읽기 전용이라는 점에 주의하세요. 모든 쓰기 작업은 dataset 안의, 데이터 특성을 나타내는 각각의 속성에 수행해야 합니다. 또한 HTML의 data-이름과, 이에 대응하는 DOM dataset['이름']의 이름은 서로 일치하지 않으나, 다음 규칙에 따라 유사함을 기억하세요.

  • HTML의 사용자 지정 특성 이름은 data-로 시작합니다. 또한 문자, 숫자, 대시(-), 점(.), 콜론(:), 언더스코어(_)만 사용할 수 있고, ASCII 대문자(A-Z)는 사용할 수 없습니다.
  • JavaScript의 사용자 지정 특성 이름은 HTML 이름을 카멜 표기법으로 변환한 형태로, 대시, 점 등을 모두 제거합니다.

mdn의 공식문서를 가져와서 설명 드렸는데 무슨 말인지 모르시겠죠? 그림으로 보면 훨씬 이해가 쉽습니다.

                                  <HTML>

data-*가 보이시죠? 원하는 곳에 이렇게 data-만 붙혀주시면 되요!

 

data-*가 붙어있는 녀석들을 dataset이라는 녀석들로 불러와서 값을 처리할 수 있죠? 좋죠?

이 접근 방식은 HTML, CSS 및 JavaScript를 별도로 유지하고 무슨 일이 일어나고 있는지 더 명확하게 나타내줍니다.

또한 누군가가 클래스 이름이 JavaScript에서 사용되는 것을 인식하지 못하는 경우 우발적 인 충돌을 방지하는 데 도움이됩니다.

 

 

<출처>

  -. developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes

728x90
반응형
저작자표시

'Code > 기타' 카테고리의 다른 글

Selenium Background Mode(Headless)  (0) 2020.12.17
Selenium path 환경변수 설정방법  (0) 2020.12.15
Python Study1  (0) 2020.12.04
JavaScript를 시작하며  (0) 2020.11.22
코딩을 시작하며  (0) 2020.11.09
'Code/기타' Related Articles more