[JavaScript] BackTick(`) 과 document객체 쓸때 꿀팁

BackTick?

 

억음 부호(抑音符號, `, 프랑스어: accent grave 악상 그라브[*], 영어: grave accent 그레이브 액센트[*])는 발음 구별 기호의 하나로, 프랑스어, 포르투갈어 등에서 사용한다. Qwerty 자판에서 Tab 키 위의 키[1]를 이용하여 바로 입력할 수 있다.(위키백과)

JS에서 BackTick( ` ) 기호의 활용인데...

var a = 1;

var b = "hello";

var c = "world";

var str = `${a}${b}${c} 이것은 핼로월드`;

 

이렇게 변수들을 (`  `) 여기 안에 ${} 달러 중괄호로 쓸 수 있단 건데... 음... 나는 이거를 브라우저의 개발자 도구에서 유용하게 쓰일 거 같다.

이런식으로 ㅋㅋ

원하는 요소의 값을 js변수를 통해 바꾸고 싶을 때 콘솔 창에서 실험(?)용으로ㅋㅋ...

그리고 개발 툴에서는 Eclipse에서 시도 안 해봤는데 일단 브라우저에 적용이 안되더라..

근데 또 VisualStudio Code 에서는 적용되더라..

그래서인지 에디터 툴에서 사용 필요성을 느끼진 못했다..ㅋ

아님 뭐 로그 찍을때? console.log(`이게 에러 : ${error}`); 

이렇게 쓰면 될듯

 

document 객체 쓸 때 꿀팁

다음으로  document객체에 대해 선데 이건 좀 많이 유용할 것 같다.

javascript에서 태그의 id,name,class 등을 이용해 DOM요소를 찾을 때

• Id : document.getElementsById('OOO');
• class : document.getElementsByClassName('OOO');
• name : document.getElementsByName('OOO');

이런 식으로 찾잔슴? 그니까 id냐 class냐 name이냐에 따라서 메서드를 다르게 적어줬는데

document.querySelector라는 게 있다.

이걸 이용하면

• Id : document.querySelector("#OOO");
• class : document.querySelector(".OOO");
• name : document.querySelector('[name="OOOO"]');

이렇게 Jquery선택자를 통해서 DOM요소를 찾을 수 있다는 것!

하나의 메서드로 찾을수 있다는 게 좋지 않은가 싶어서.. 내 머가리 속에서 기억하려고 기록한다.