웹페이지의 텍스트 일부가 일반 앰퍼샌드 대신 &로 표시되는 이유를 디버깅하고 있습니다. 또는 HTML을 직접 작성하면서 부등호 기호가 태그의 시작으로 해석되지 않도록 이스케이프해야 합니다. 어느 쪽이든, HTML 엔티티를 다루고 있는 것입니다 — 올바르게 표시되거나 마크업을 망가뜨리지 않으려면 특별한 인코딩이 필요한 소수의 문자들입니다.
흔한 것들은 기억하기 쉽습니다: &는 &가 되고, <는 <가 되고, >는 >가 됩니다. 하지만 곡선 따옴표, 줄표, 줄바꿈 없는 공백, 악센트가 있는 문자로 넘어가면 엔티티 이름이 더 이상 직관적이지 않아서 매번 참조표를 검색하게 됩니다.
포맷팅만이 아니라 보안 문제
HTML 엔티티 인코딩은 단순히 미적인 문제가 아닙니다. 사용자가 입력한 콘텐츠를 웹페이지에 렌더링하기 전에 인코딩하지 않는 것은 크로스 사이트 스크립팅의 전형적인 경로입니다. 애플리케이션이 댓글, 사용자 이름, 폼 입력값 같은 원시 텍스트를 표시해야 한다면, 정확히 무엇이 어떻게 인코딩되는지 이해하는 것은 깔끔해 보이는 출력을 만드는 것을 넘어 안전한 코드를 작성하는 일의 일부입니다.
반대로 디코딩도 그만큼 흔한 요구사항입니다: 웹페이지를 스크래핑하거나, RSS 피드를 파싱하거나, 내보낸 CMS 문서를 읽다 보면 다른 곳에서 사용하기 전에 평문 문자로 되돌려야 하는 엔티티 인코딩된 텍스트를 자주 만나게 됩니다.
한 단계로 인코딩·디코딩하기
Bellows는 41가지 개발자 도구 중 하나로 HTML 엔티티 인코더와 디코더를 포함합니다. 원시 텍스트를 붙여넣으면 올바르게 이스케이프된 HTML 엔티티를 얻고, 인코딩된 마크업을 붙여넣으면 읽기 쉬운 텍스트를 볼 수 있습니다. 양방향 모두 즉시, 완전히 오프라인으로 처리됩니다.
스크래핑한 콘텐츠 정리하기
RSS 피드, 내보낸 블로그 게시물, 스크래핑한 HTML에서 가져온 텍스트에는 평문 구두점이 있어야 할 자리에 엔티티 코드가 가득한 경우가 많습니다. 다른 곳에 저장하거나 표시하기 전에 대량으로 디코딩하면, 아포스트로피가 있어야 할 자리에 ’가 나타나는 페이지를 피할 수 있습니다.
마크업을 직접 작성할 때
HTML 템플릿이나 이메일 뉴스레터를 직접 편집하면서 눈에 보이는 텍스트에 실제 부등호나 앰퍼샌드를 포함해야 할 때, 처음부터 올바르게 인코딩하면 이메일을 이미 보낸 후에야 나타나는 렌더링 버그를 피할 수 있습니다.