예외처리

현재는 null,undefined와 같은 처리를 하지않아서 에러가 났습니다.
forEach나 고차함수의 경우 값이 없을경우 에러가 날수도 있습니다.

기존코드

<div class="color-title"><span>${el.color}</span></div>
                    <div class="info-row">
                        <div class="color__box" data-maxcount="${colorCnt < 6 ? "" : "over"}" data-colorcount="${colorCnt < 6 ? colorCnt : colorCnt - 5}">
                            ${el.product_color.map((color, idx) => {
                            let maxCnt = 5;
                            let colorData = color.color_rgb;
                            let multi = colorData.split(";");
                            if (idx < maxCnt) {
                                return `<div class="color" data-color="${color.color_rgb}" data-productidx="${color.product_idx}" data-soldout="${color.stock_status}" style="${multi.length === 2?`background:linear-gradient(90deg, ${multi[0]} 50%, ${multi[1]} 50%)`:`background-color:${multi[0]}`}"></div>`;
                            }
                            }).join("")
                            }
                        </div>
                                
                                <div class="size__box">
                                    ${el.product_size.map((size) => {
                            return `<li class="size" data-sizetype="" data-productidx="${size.product_idx}" data-optionidx="${size.option_idx}" data-soldout="${size.stock_status}">${size.option_name}</li>`;
                        }).join("")
                        }   
                        </div>
                    </div>

null 적용

<div class="color-title"><span>${el.color || ""}</span></div>
<div class="info-row">
    <div class="color__box" data-maxcount="${colorCnt < 6 ? "" : "over"}" data-colorcount="${el.product_color ? (colorCnt < 6 ? colorCnt : colorCnt - 5) : ""}">
        ${el.product_color && el.product_color.map((color, idx) => {
            if (!color) {
                return null;
            }
            let maxCnt = 5;
            let colorData = color.color_rgb;
            let multi = colorData.split(";");
            if (idx < maxCnt) {
                return `<div class="color" data-color="${color.color_rgb || ""}" data-productidx="${color.product_idx || ""}" data-soldout="${color.stock_status || ""}" style="${multi.length === 2?`background:linear-gradient(90deg, ${multi[0]} 50%, ${multi[1]} 50%)`:`background-color:${multi[0] || ""}`}"></div>`;
            }
        }).join("")}
    </div>
                                
    <div class="size__box">
        ${el.product_size && el.product_size.map((size) => {
            if (!size) {
                return null;
            }
            return `<li class="size" data-sizetype="" data-productidx="${size.product_idx || ""}" data-optionidx="${size.option_idx || ""}" data-soldout="${size.stock_status || ""}">${size.option_name || ""}</li>`;
        }).join("")}
    </div>
</div>

옵셔널 체이닝 적용

<div class="color-title"><span>${el.color ?? ""}</span></div>
<div class="info-row">
    <div class="color__box" data-maxcount="${colorCnt < 6 ? "" : "over"}" data-colorcount="${el.product_color?.length ?? ""}">
        ${el.product_color?.map((color, idx) => {
            let maxCnt = 5;
            let colorData = color?.color_rgb;
            let multi = colorData?.split(";");
            if (idx < maxCnt) {
                return `<div class="color" data-color="${color?.color_rgb ?? ""}" data-productidx="${color?.product_idx ?? ""}" data-soldout="${color?.stock_status ?? ""}" style="${multi?.length === 2 ? `background:linear-gradient(90deg, ${multi[0]} 50%, ${multi[1]} 50%)` : `background-color:${multi?.[0] ?? ""}`}"></div>`;
            }
        })?.join("") ?? ""}
    </div>
                                
    <div class="size__box">
        ${el.product_size?.map((size) => {
            return `<li class="size" data-sizetype="" data-productidx="${size?.product_idx ?? ""}" data-optionidx="${size?.option_idx ?? ""}" data-soldout="${size?.stock_status ?? ""}">${size?.option_name ?? ""}</li>`;
        })?.join("") ?? ""}
    </div>
</div>

try-catch 적용

<div class="color-title"><span>${el.color || ""}</span></div>
<div class="info-row">
    <div class="color__box" data-maxcount="${colorCnt < 6 ? "" : "over"}" data-colorcount="${el.product_color ? (colorCnt < 6 ? colorCnt : colorCnt - 5) : ""}">
        ${el.product_color && el.product_color.map((color, idx) => {
            try {
                let maxCnt = 5;
                let colorData = color.color_rgb;
                let multi = colorData.split(";");
                if (idx < maxCnt) {
                    return `<div class="color" data-color="${color.color_rgb || ""}" data-productidx="${color.product_idx || ""}" data-soldout="${color.stock_status || ""}" style="${multi.length === 2 ? `background:linear-gradient(90deg, ${multi[0]} 50%, ${multi[1]} 50%)` : `background-color:${multi[0] || ""}`}"></div>`;
                }
            } catch (e) {
                console.error(e);
            }
        }).join("")}
    </div>
                                
    <div class="size__box">
        ${el.product_size && el.product_size.map((size) => {
            try {
                return `<li class="size" data-sizetype="" data-productidx="${size.product_idx || ""}" data-optionidx="${size.option_idx || ""}" data-soldout="${size.stock_status || ""}">${size.option_name || ""}</li>`;
            } catch (e) {
                console.error(e);
            }
        }).join("")}
    </div>
</div>

try-catch 구문은 성능 저하가 있을 수 있기 때문에, null 체크나 옵셔널 체이닝을 사용하는 것이 일반적으로 더 효율적입니다.
따라서, 상황에 따라 null 체크나 옵셔널 체이닝을 사용하는 것이 더 좋을 수 있습니다.