Lodash는 자바스크립트 유틸리티 라이브러리로, 다양한 유틸리티 함수를 제공하여 개발자들이 더욱 효율적으로 코드를 작성할 수 있게 도와줍니다. 이 중에서도 Lodash는 HTML 관련 함수들을 제공하여 웹 개발에 특히 유용하게 사용될 수 있습니다. 이번 글에서는 Lodash의 HTML 관련 함수들과 그 사용 예제에 대해 알아보겠습니다.

1. _.escape()

이 함수는 HTML 특수 문자들을 이스케이프(escape)하여 문자열 안에서 안전하게 사용할 수 있도록 도와줍니다. 특히 사용자 입력 값이나 외부 데이터를 HTML에 표시할 때 사용하면 유용합니다.

사용 예제

const htmlString = '<script>alert("XSS Attack!");</script>';
const escapedString = _.escape(htmlString);

console.log(escapedString);
// 출력: '&lt;script&gt;alert("XSS Attack!");&lt;/script&gt;'

2. _.unescape()

이 함수는 이스케이프된 HTML 엔터티를 다시 해제하여 원래 문자열로 복원해줍니다. 이스케이프된 문자열을 다시 HTML으로 렌더링할 때 사용할 수 있습니다.

사용 예제

const escapedString = '<script>alert("XSS Attack!");</script>';
const unescapedString = _.unescape(escapedString);

console.log(unescapedString);
// 출력: '<script>alert("XSS Attack!");</script>'

3. _.template()

이 함수는 HTML 템플릿을 사용하여 동적으로 HTML을 생성할 수 있게 해줍니다. 템플릿 안에 변수를 넣어 동적 데이터를 삽입할 수 있습니다.

사용 예제

const templateString = `
  <div>
    <h1><%= title %></h1>
    <p><%= content %></p>
  </div>
`;

const template = _.template(templateString);
const htmlString = template({ title: '제목', content: '내용' });

console.log(htmlString);
// 출력: '<div><h1>제목</h1><p>내용</p></div>'

위의 예제에서는 <%= title %>과 <%= content %>부분에 객체의 값들이 삽입되어 ‘제목’과 ‘내용’이 동적으로 변경된 HTML 문자열이 생성됩니다.

결론

Lodash의 HTML 관련 함수들은 자바스크립트로 HTML을 다룰 때 유용한 도구입니다. 이스케이프/언이스케이프 함수인 _.escape()와 _.unescape()는 보안 측면에서 중요한 기능을 제공하며, _.template() 함수는 동적인 HTML 생성을 편리하게 해줍니다. 이러한 함수들을 효율적으로 사용하여 개발 과정을 더욱 쉽게 만들 수 있습니다.

참고 자료

• Lodash 공식 문서: https://lodash.com/docs
• Lodash GitHub 저장소: https://github.com/lodash/lodash