외곈 World 👽🌏

다 까먹어버린 자바스크립트를 다시 복기시키기 위해 시작한 투두 리스트 만들기!

만들다 보니 자바스크립트 처음 배울 때 써내려갔던 코드와 별반 차이가 없다..

처음이랑 똑같이 작성하면 단순 복습 단순 노가다일뿐..!!!!

뭐라도 발전된게 있어야 하지 않을까.......???????????란 생각에

반복되는 코드를 줄여보기로 했다!

👻 이전 코드

전에는 냅다 필요한 요소들 끊임없이 생성 후

냅다 붙여버리기..

부모요소 생성, 자식요소 생성, 자식요소 부모요소에 붙이기..

자꾸 늘어만 가는 createElement, appendChild......지긋지긋햐..

✨ 리팩토링

function createElement({
  tagName,
  properties,
  parent,
  children,
  count = 1,
}) {
  function create() {
    const element = document.createElement(tagName);  // 태그 생성
    Object.assign(element, properties);               // 속성 할당
    parent?.appendChild(element);                     // 부모에 추가

    // 자식 요소가 있을 경우 재귀적으로 자식 생성
    children?.map((child) => {
      child.parent = element;   // 현재 생성된 요소를 부모로 설정
      createElement(child);     // 자식 요소를 위한 createElement 재귀 호출
    });

    return element;
  }

  if (count > 1) {
    const results = [];
    for (let i = 0; i < count; i++) {
      results.push(create());
    }
    return results;
  } else {
    return create();
  }
}

• createElement와 appendChild를 재사용 가능한 createElement 함수로 변경하여 반복되는 코드를 제거하였다.
• createElement 함수는 여러 요소를 한 번에 생성할 수 있도록 count 파라미터를 추가하였다. 이를 통해 여러 요소를 동적으로 쉽게 추가할 수 있게 되었다.
• 부모-자식 관계의 DOM 구조를 쉽게 만들기 위해 children 파라미터와 재귀 호출을 사용했다. 이로써 부모 요소가 자식 요소를 갖는 복잡한 DOM 트리도 간단하게 구성할 수 있다.
• Object.assign을 사용하여 요소에 속성들을 유연하게 할당할 수 있도록 하였다. 이를 통해 여러 속성을 한 번에 설정할 수 있고, 추가적인 속성이 생기더라도 함수 수정 없이 처리할 수 있다.

Object.assign()은 객체의 속성들을 다른 객체에 복사하는 역할을 한다.
여기서는 properties 객체의 속성들을 생성된 태그(element)에 복사하여, 태그의 속성을 설정한다.

✨ 리팩토링한 createElement 사용하기

children 요소가 끊임 없이 생겨 무한 들여쓰기가 발생..

가독성을 위해 header, inputContainer, itemContainer의 큰 덩어리로 나누어서 생성해주었다.

      const app = createElement({
        tagName: "div",
        properties: { id: "app" },
        parent: document.body,
      });

      const header = createElement({
        tagName: "header",
        properties: { id: "header" },
        parent: app,
        children: [
          {
            tagName: "div",
            properties: { className: "counter" },
            children: [
              {
                tagName: "span",
                properties: { textContent: "total" },
              },
              {
                tagName: "span",
                properties: { textContent: "0" },
              },
              {
                tagName: "span",
                properties: { textContent: "completed" },
              },
              {
                tagName: "span",
                properties: { textContent: "0" },
              },
            ],
          },
          {
            tagName: "h1",
            properties: { textContent: "T🌞 D🎯 LIST", className: "title" },
          },

          {
            tagName: "span",
            properties: { textContent: "할 일을 기록하세요🌱" },
          },
        ],
      });
      
      // 이후 생략..

참고🧐

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Object/assign

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

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

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을 사용하는 것이 더 직관적이고 의도가 명확하다.