231124 개발일지 TIL - javascript에서 createElement 및 appendChild 사용(배열과 반복문을 활용) VS innerHTML 사용(직접적인 접근법)

createElement 및 appendChild 사용(배열과 반복문을 활용)

<div class="price"></div>

    <script>
        const prices = [
            data.result.data['590893001984'].data.priceModel.currentPrices[0].price,
            data.result.data['590893001984'].data.priceModel.currentPrices[1].price,
            data.result.data['590893001984'].data.priceModel.currentPrices[2].price
        ];

        // 가격을 표시할 요소 가져오기
        const priceContainer = document.querySelector('.price');

        // 각 가격에 대해 <p> 요소 생성하고 추가
        prices.forEach((price, index) => {
            const paragraph = document.createElement('p');
            paragraph.textContent = `가격 ${index + 1}: ${price}`;
            priceContainer.appendChild(paragraph);
        });
    </script>

createElement 및 appendChild 사용

장점:
    더 안전하며 보안 취약점을 줄일 수 있다.
    HTML 문자열에 대한 의존성을 낮출 수 있다.
    요소의 생성 및 조작이 명시적으로 이루어져 가독성이 높을 수 있다.
단점:
    조금 더 많은 코드가 필요할 수 있다.
    
    

배열과 반복문을 활용.
이 방법의 장점은 가격 정보가 동적으로 변경되거나 추가될 경우 유연하게 대응할 수 있다는 점이다. 또한, 가격 정보의 수에 상관없이 코드의 복잡성이 증가하지 않는다. 하지만, 가격 정보가 많아질수록 반복문을 실행해야 하는 부담이 있고, 코드가 다소 복잡하게 느껴질 수 있다.

innerHTML 사용(직접적인 접근법)

<div class="price"></div>

    <script>
			const price1 = data.result.data['590893001984'].data.priceModel.currentPrices[0].price;
			const price2 = data.result.data['590893001984'].data.priceModel.currentPrices[1].price;
			const price3 = data.result.data['590893001984'].data.priceModel.currentPrices[2].price;

			const priceContainer = document.querySelector('.price');

			priceContainer.innerHTML = `
            <p>${price1}</p>
            <p>${price2}</p>
            <p>${price3}</p>
      `;
    </script>

innerHTML 사용
    장점:
        간단하고 직관적
        HTML 문자열을 사용하여 동적으로 콘텐츠를 추가할 수 있다.
    단점:
        보안 문제에 노출될 수 있다. (사용자가 제공한 데이터를 삽입할 때 주의가 필요)
        코드 가독성이 낮을 수 있다.

보다 직접적인 접근법을 사용한다. 이 방법의 장점은 코드가 간결하고 이해하기 쉽다는 점이다. 특히, 가격 정보가 적을 경우 성능 면에서 이점이 있다. 하지만, 가격 정보가 추가되거나 제거될 때마다 코드를 직접 수정해야 하며, 가격 정보가 많아질수록 코드가 길어지는 단점이 있다.

결론
가격 정보의 수가 자주 변경되거나 많은 경우에는 첫 번째 방법이 유리하며,
가격 정보의 수가 적고 고정적인 경우에는 두 번째 방법이 유리할 수 있다.

두 가지 방법 모두 성능 면에서 큰 차이가 없다. 그러나 코드의 가독성, 유지보수성, 확장성 등을 고려할 때 어떤 방법을 선택할지는 프로젝트를 고려하여 선택해야 한다.