외곈 World 👽🌏

리액트만 하다보니 자바스크립트 지식이 모두 증발해버린 느낌....

메서드명들을 죄다 까먹어버린 것 같다. 급하게 투두 리스트를 만들어보며 기억해내보기로 했다.

DOM을 조작하기 위한 다양한 메서드 중 어떤 것을 선택해야 할 지 고민이 되었다.

매번 까먹어서 매번 고민하고 매번 검색하고!!! 지겨워... 이번엔 정리해놔야지.

텍스트 콘텐츠를 다루기:  innerText,textContent

📚 innerText

• 요소의 렌더링된 텍스트만 다루기 때문에 스타일이 적용된 후의 텍스트만 가져온다.
• display: none이나 visibility: hidden으로 숨겨진 요소의 텍스트도 textContent로는 접근할 수 있지만, innerText는 숨겨진 요소의 텍스트를 무시한다.
• textContent보다 렌더링 결과에 의존하므로 복잡한 구조에서는 조금 더 까다로울 수 있다.
• innerText는 DOM의 스타일을 계산하므로 textContent보다 약간 느릴 수 있지만, 일반적인 상황에서는 큰 차이가 없다.

📚 textContent

•  요소의 텍스트 내용을 추가하거나 가져온다. HTML 태그는 텍스트로 처리되며, 태그가 렌더링되지 않는다.
• 따라서 태그 없이 순수한 텍스트만 다룰 때 적합하다.
• 성능 측면에서 매우 빠르며, DOM을 다시 렌더링하지 않고 텍스트만 업데이트 하기 때문에 오버헤드가 거의 없다.
• 텍스트만 다루기 때문에 HTML 구조를 고려할 필요가 없어 유지 보수가 쉽다.

HTML 요소를 추가하거나 삽입: innerHTML, appendChild, insertAdjacentHTML

📚 innerHTML 

• 요소 내부의 HTML이나 XML 마크업을 가져오거나 설정한다.
• HTML 마크업을 포함한 문자열을 쉽게 삽입할 수 있다. 속도가 빠르다.
• 대량의 데이터를 처리할 때 성능 저하가 발생할 수 있으며,  크로스 사이트 스크립팅(XSS) 공격에 취약하다.
  • 내용을 변경하지 않고 추가적으로 HTML을 삽입하고자 할 때는 insertAdjacentHTML() 메서드를 사용하는 것이 더 적합하다.
    ..Why🧐?
    innerHTML은 요소의 모든 내용을 다시 렌더링하기 때문에 성능 저하가 발생할 수 있고, 기존의 자식 요소가 손상될 수 있다. 반면, insertAdjacentHTML()은 기존의 DOM 구조를 유지하면서 새로운 HTML을 효율적으로 삽입할 수 있어 성능과 안정성 면에서 유리하다.

📚  insertAdjacentHTML() 

• element.insertAdjacentHTML(position, text)
• 기존 요소를 유지한 채로 지정된 위치(position)에 HTML 문자열을 파싱하여 요소로 삽입한다.
• insertAdjacentHTML은 요소를 다시 파싱하지 않으므로 해당 요소 안의 기존 자식 요소를 손상시키지 않는다.
• HTML을 한 번에 추가하므로 성능이 빠를 수 있지만 보안 문제(XSS: Cross-site scripting)로 인해 외부 입력을 삽입할 때는 주의해야 한다.

const el = document.getElementById('el')
el.insertAdjacentHTML('beforebegin', '<span>Before Begin</span>');// el 이전에 삽입
el.insertAdjacentHTML('afterbegin', '<span>After Begin</span>'); // el의 첫 번째 자식 이전에 삽입
el.insertAdjacentHTML('beforeend', '<span>Before End</span>'); // el의 마지막 자식 이후에 삽입 
el.insertAdjacentHTML('afterend', '<span>After End</span>'); // el 이후에 삽입

<span> --A-- </span>
<span>Before Begin</span> 
<span id="el"> 
	<span>After Begin</span> 
    <span> --B-- </span>
    --C-- 
    <span> --D-- </span> 
    <span>Before End</span> 
 </span> 
 <span>After End</span> 
 <span> --E-- </span>

📚 appendChild()

• 새로 생성된 요소를 기존 DOM의 자식으로 추가한다.
• 코드가 명확하고 직관적이기 때문에 유지 보수와 가독성이 뛰어나다.
• 여러 요소를 한 번에 추가하는 경우 약간의 성능 오버헤드가 있지만, 일반적으로 성능이 양호하다.

✨ 결론

innerText vs textContent

innerText는 렌더링된 텍스트만 다루기 때문에 스타일에 의존적이다. 또한 숨겨진 요소의 텍스트는 무시되므로, 순수한 텍스트 처리에서는 textContent를 사용하는 것이 더욱 빠르고 단순하다. DOM 구조를 다시 렌더링하지 않고 순수 텍스트를 추가하거나 수정할 수 있기 때문에, 성능 오버헤드가 거의 없다. 

innerHTML vs insertAdjacentHTML vs appendChild

innerHTML은 기존의 모든 내용을 덮어쓰기 때문에, 성능이 저하될 수 있다. insertAdjacentHTML은 기존 요소를 유지하면서 새로운 HTML을 추가하므로 더 나은 성능을 제공한다. (자식요소의 파싱과정이 생략되어 더 빠르고 성능⬆)

하지만 insertAdjacentHTML과 innerHTML은 XSS 공격에 취약하기 때문에 가능하다면 appendChild를 사용하는 것이 더 안전하다고 판단하였다. 성능 면에서도 일반적인 사용에서는 충분하다고 생각된다.

🧐 참고
https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/innerText
https://developer.mozilla.org/en-US/docs/Web/API/Node/textContent

https://developer.mozilla.org/ko/docs/Web/API/Element/innerHTML

https://developer.mozilla.org/ko/docs/Web/API/Element/insertAdjacentHTML

https://developer.mozilla.org/en-US/docs/Web/API/Node/appendChild

# 요약

• 단순히 무언가를 반복하면서 작업을 수행할 때 ➡ forEach (원본 배열 변경되지 않음 / 새로운 배열 반환하지 않음)
• 원본 배열을 변경하지 않고 변형된 데이터를 따로 사용할 필요가 있을 때 ➡ map (원본 배열 변경되지 않음 / 새로운 배열 반환)

✅ forEach

• 배열의 각 요소에 대해 특정 작업을 수행할 때 사용한다.

const numbers = [1, 2, 3];
numbers.forEach(num => {
  console.log(num * 2); // 2, 4, 6 출력
});
console.log(numbers); // [1, 2, 3] 원본 배열은 그대로!

• forEach는 배열의 요소들을 순회하면서 각 요소를 2배로 계산해서 출력하지만, 새로운 배열을 반환하지 않는다.
  (원본 배열은 변경되지 않음)
• 원본 배열을 유지하면서, 단순히 반복 작업을 수행할 때 사용(데이터를 화면에 출력하거나, 로그 찍을 경우 사용됨)

✅ map

• 배열의 각 요소에 대해 작업을 수행하고, 그 결과를 새로운 배열로 반환할 때 사용한다.

const numbers = [1, 2, 3];
const doubled = numbers.map(num => num * 2);
console.log(doubled); // [2, 4, 6] 변형된 데이터를 새 배열로 반환
console.log(numbers); // [1, 2, 3] 원본 배열은 그대로 유지!

• map은 배열을 순회하며 각 요소를 2배로 만들어 새로운 배열을 반환한다.
• 원본 배열을 그대로 두고 새로운 배열을 생성한다.
  ➡ 원본 배열을 변경하지 않음으로 데이터 손실 막을 수 있고, 변형된 데이터를 재사용하거나 어딘가 저장할 때 유용하다.
  (ex: 가격 데이터를 변형해서 할인가를 계산한 후, 이를 새로운 배열로 저장 가능)

🔥 map을 사용해야 할 상황에서 forEach를 사용하는 경우 발생하는 문제

1. 변형된 데이터를 얻을 수 없다.

forEach는 단순히 배열의 각 요소를 순회하면서 작업을 수행할 뿐이므로, 변형된 데이터를 저장하거나 재사용할 수 없다.

const numbers = [1, 2, 3];
const doubled = numbers.forEach(num => num * 2);
console.log(doubled); // undefined

forEach를 사용하면 새로운 배열을 반환하지 않기 때문에 doubled 변수는 undefined가 된다.
변형된 데이터를 배열로 얻으려는 상황에서 forEach를 사용하면, 데이터를 따로 저장할 수 없다.

const numbers = [1, 2, 3];
numbers.forEach(num => {
  num = num * 2; // 작업은 수행되지만
});
console.log(numbers); // [1, 2, 3] 원본 배열은 여전히 그대로

변형된 데이터를 저장할 수 없으니 재사용도 당연 불가..

2. 코드가 복잡해지고 가독성이 떨어진다.

map은 "변형된 배열을 반환"하는 명확한 목적을 가지고 사용된다. 반면, forEach는 주로 "배열을 순회하면서 작업을 수행"할 때 사용된다. 이런 차이를 무시하고 forEach를 변형 작업에 사용하면, 코드의 의도가 불분명해지고, 이는 결국 코드의 가독성을 떨어뜨리게 된다.

const numbers = [1, 2, 3];
let doubled = [];
numbers.forEach(num => {
  doubled.push(num * 2);
});

forEach로 새로운 배열을 만들기 위해서는 직접 배열을 생성하고 각각의 요소를 배열에 넣는 작업을 해야 한다. 코드는 복잡해지고 가독성은 떨어지기 때문에 이 경우 map을 사용하는 것이 더 직관적이고 의도가 명확하다.

오늘은 잊고 있던 정보처리기사 실기 결과 발표날!

그토록 기다렸던 합★격  

하지만 생각만큼 기쁘지 않다........

정처기 준비 전엔 무조건 개발자가 될 거야!!!!!! 했는데

개발 트렌드는 쉴 틈 없이 바뀌고 천재들은 많다.

개발 정복을 꿈꿨지만 공부할수록 정복은커녕 나의 하찮음만 체감하게 되는 것 같다.

해도 해도 부족한 느낌. 재밌지만 즐겁지 않은 요상한 느낌🙃

마치 탈출하지 못하고 끝나버리는 방 탈출 게임 같아..

그래서인지 '개발자가 나와 맞는 길인가?'라는 의구심이 계속해서 꿈틀꿈틀..

취업하기엔 무섭고 그만두기엔 재밌는 어정쩡한 취미의 영역...

하지만 난 시간 많은 백수니까^0^

이번 기회에 여유를 갖고 개발 포함 관심 있는 것들을 다 해보기로 했다!

머릿속만 바쁘고 몸뚱이는 한없이 게을렀던 나..  

반성의 시간을 갖고 고민했던 것들을 행동으로 옮겨봐야겠다.

하루하루 관심사들을 정리해 보면 내가 뭘 좋아하는지 알 수 있겠지.

반가워 티스토리, 앞으로 잘 부탁해 :)