textContent vs innerHtml
innerHTML는 이름 그대로 HTML을 반환합니다. 간혹 innerHTML을 사용해 요소의 텍스트를 가져오거나 쓰는 경우가 있지만, HTML로 분석할 필요가 없다는 점에서 textContent의 성능이 더 좋습니다.
textContent vs innerText
innerText는 불필요한 공백을 제거하고 텍스트로 반환하지만 textContent는 모든 텍스트를 그대로 가져오는 차이점이 있습니다. (공백요소)- textContent는 노드의 모든 요소를 반환합니다. 그에 비해
innerText는 스타일링을 고려하며, "숨겨진(display:none)" 요소의 텍스트는 반환하지 않습니다. - 또한,
innerText의 CSS 고려로 인해, innerText 값을 읽으면 최신 계산값을 반영하기 위해 리플로우가 발생합니다. (리플로우 계산은 비싸므로 가능하면 피해야 합니다) - Internet Explorer 기준,
innerText를 수정하면 요소의 모든 자식 노드를 제거하고, 모든 자손 텍스트 노드를 영구히 파괴합니다. 이로 인해, 해당 텍스트 노드를 이후에 다른 노드는 물론 같은 노드에 삽입하는 것도 불가능합니다.
Number() vs parseInt()
- 둘다 문자열을 숫자타입으로 반환
- Number의 경우는 문자열이 숫자가 아닐경우
NaN반환하지만, parseInt 는 숫자로만 시작하는 문자열이라면 숫자가 끝나는 부분까지 숫자로 변환해준다
const num = Number('1000원') // num에 NaN 저장;const num = parseInt('1000원'); // num에 1000이 저장
const num = parseInt('가격:1000원'); // num에 NaN이 저장리뷰
- Bare Minimum Requirements 랑 advanced 까지는 문제 없이 가능
- Nightmare 가 되면서 조금 복잡해졌고, 레퍼런스와는 구조는 다르지만 테스트를 모두 통과한거에 대해 기뻤다
- 코드를 더 깔끔하게 정리하는 법을 점점 익혀나가면 좋을 것 같다
FE