String.bold() 대신 CSS와 DOM API를 사용해야 하는 이유와 최신 코드 예시

String.bold() 메서드는 해당 문자열을 HTML의 <b> 태그로 감싼 새로운 문자열을 반환합니다. 이 메서드는 원래 웹 페이지에서 텍스트를 굵게 표시하기 위해 설계되었습니다.

// 예시 코드 (이렇게 사용했었습니다)
const myString = "안녕하세요, 세상!";
const boldString = myString.bold(); 

console.log(boldString); 
// 출력 결과: "<b>안녕하세요, 세상!</b>"

String.bold()와 같은 HTML 래퍼 메서드들은 이제 더 이상 사용이 권장되지 않습니다(Deprecated). 주요 문제점은 다음과 같습니다.

HTML 및 CSS와의 분리 원칙 위반 현대 웹 개발에서는 내용(HTML), 스타일(CSS), 동작(JavaScript)을 분리하는 것이 가장 좋습니다. bold() 메서드는 JavaScript 코드 안에서 직접 HTML 마크업(<b> 태그)을 생성하여 이 원칙을 어기게 됩니다.

접근성(Accessibility) 문제 텍스트를 시각적으로 굵게 만드는 것은 스타일의 영역입니다. 텍스트의 의미가 "중요하다"는 것을 강조할 때는 <strong> 태그를 사용해야 하지만, bold()는 무조건 <b> 태그를 생성하여 시각적인 스타일만 전달합니다.

유지보수의 어려움
스타일 변경 시, JavaScript 코드까지 수정해야 하는 번거로움이 발생합니다.

팁
<b> 태그 자체는 HTML5에서 여전히 유효하지만, 시각적으로 굵게 표시할 때만 사용해야 합니다. 텍스트의 중요성을 나타낼 때는 <strong> 태그를 사용하고, 스타일링은 CSS로 하는 것이 가장 좋은 방법입니다.

String.bold() 대신 텍스트를 굵게 표시하는 현대적인 방법은 크게 CSS를 이용하는 방법과 DOM API를 이용하는 방법이 있습니다.

JavaScript에서 HTML 요소를 생성한 후, CSS 클래스를 적용하여 스타일을 입히는 방식입니다. 이 방식이 가장 유연하고 유지보수가 쉽습니다.

<div id="target-area"></div>

/* CSS */
.text-bold {
    font-weight: bold; /* 700과 동일한 효과를 줍니다 */
}

.text-important {
    font-weight: 700;
    color: darkred; /* 의미적으로 중요함을 시각적으로도 강조 */
}

const targetArea = document.getElementById('target-area');
const contentString = "반드시 알아야 할 중요한 내용입니다.";

// <span> 요소를 생성합니다.
const spanElement = document.createElement('span');

// 텍스트를 추가합니다.
spanElement.textContent = contentString;

// CSS 클래스를 추가하여 굵게 만듭니다.
// 의미적으로 중요한 경우
spanElement.classList.add('text-important'); 
// 단순히 시각적으로 굵게 만들 경우
// spanElement.classList.add('text-bold'); 

// HTML 문서에 추가합니다.
targetArea.appendChild(spanElement);

간단한 작업의 경우, 템플릿 리터럴( )을 사용하여 <strong> 또는 <b> 태그를 직접 감싸는 문자열을 생성한 후 innerHTML을 통해 삽입할 수 있습니다. 하지만 HTML을 직접 생성하는 것은 XSS(Cross-Site Scripting)와 같은 보안 문제의 위험이 있으므로, 사용자 입력을 다룰 때는 주의해야 합니다.

const targetArea = document.getElementById('target-area');
const contentString = "이것은 강조된 텍스트입니다.";

// 템플릿 리터럴을 사용하여 <strong> 태그로 감싼 HTML 문자열을 만듭니다.
const htmlToInsert = `<strong>${contentString}</strong>`;

// DOM에 삽입합니다.
targetArea.innerHTML = htmlToInsert; 

텍스트의 의미적 중요성을 강조하기 위해 <strong> 태그를 사용하는 것이 좋습니다. DOM API를 이용하면 안전하게 요소 구조를 만들 수 있습니다.

const targetArea = document.getElementById('target-area');
const contentString = "매우 중요한 업데이트 공지!";

// <strong> 요소를 생성합니다.
const strongElement = document.createElement('strong');

// 텍스트를 추가합니다.
strongElement.textContent = contentString;

// HTML 문서에 추가합니다.
targetArea.appendChild(strongElement);