text/plain으로 파싱하여 모든 요소를 반환합니다. <script>, <style> 요소를 포함해 CSS를 사용해 숨겨진 요소도 함께 반환하며 요소의 원시 텍스트를 사용하므로 성능이 좋습니다.
innerText
text/plain으로 파싱하여 렌더링 후의 요소를 반환합니다. <script>, <style> 요소는 반환하지 않으며 숨겨진 요소도 반환하지 않습니다. 자식 노드를 모두 제거하고 하나의 텍스트로 반환되며 성능은 보통입니다.
innerHTML
text/html로 파싱하여 요소의 html, xml 전체를 반환합니다. html을 다루므로 보안 이슈 중 하나인 XSS(Cross Site Scripting)에 취약합니다. HTML5에서는 innerHTML에 삽입된 <script> 태그는 실행되지 않도록 변경되었지만 <img>등 다른 태그를 통해 접근하면 여전히 취약점이 남습니다. 따라서 innerHTML은 별도로 문제 방지를 위한 설정이 없다면 사용을 권장하지 않습니다.
구현도 중요하지만 상황에 맞고 적절한 방식을 통해 구현한 시스템에 문제가 생기지 않도록 사전에 방지하는 것이 더 중요한 것 같습니다. 적절한 방식을 선택하는 것은 결국 각 기능의 이해를 통해서야 비로소 가능한 부분이므로 필요할 때 정리를 해두면 도움이 될 것 같습니다.
템플릿 리터럴은 시작과 끝에 반드시 `(backtick)을 붙여야 하며, ‘(홑따옴표), “(쌍따옴표)와 반드시 구분해야 합니다.
const name = 'clint Eastwood';
const age = '92';
const city = 'San Francisco';
const occupation = 'director';
// 표현식
console.log('His name is '+name+ '\n' + 'and '+age+'.');
// 템플릿 리터럴
console.log(`He was born in ${city}
and he is a ${occupation}`);
템플릿 리터럴에서 ${ }를 사용하면 블록 내 변수 또는 함수에 접근이 가능하며, \n 등 이스케이프를 사용하지 않고도 입력한대로 출력할 수 있습니다.
커링을 사용하지 않아도 원하는 기능을 대부분 구현할 수 있지만 재사용성이나 가독성에 따른 생산성 향상을 위해 커링을 사용하면 좋은 효과를 기대할 수 있습니다. 커링을 직접 구현하지 않더라도 커링의 개념과 사용법에 대해 알아두면 다른 사람의 코드를 읽거나 로직을 이해하는데 큰 도움이 될 것이라 생각합니다.