JavaScript를 사용하여 HTML 코드를 줄이는 방법: 간단한 예

효율적인 코딩 방법: 확장 가능한 웹 개발을 위해 JavaScript 활용

깨끗하고 쉽게 확장 가능한 코드를 작성하는 것은 모든 프로그래머에게 중요합니다. 이는 콘텐츠가 지속적으로 증가하는 블로그 웹사이트와 같은 프로젝트에서 특히 중요합니다. 이러한 프로젝트를 유지하려면 신속하고 오류가 없어야 하며 고객의 평판 손상을 방지해야 합니다. JavaScript는 코드 효율성과 디버깅 가능성을 향상시키는 강력한 솔루션을 제공합니다. 이 기사에서는 JavaScript를 사용하여 블로그 웹사이트 프로젝트에서 소셜 미디어 링크 통합을 간소화한 방법을 보여줍니다.

많은 블로그에는 온라인 가시성을 높이기 위해 소셜 미디어 링크가 포함되어 있습니다. 일반적인 접근 방식은 아래와 같이 이러한 링크를 모든 페이지의 바닥글이나 사이드바에 표시하는 것입니다.

여기에 설명된 것처럼 각 HTML 페이지에 이러한 링크(이 경우 14줄의 코드)를 수동으로 추가하는 것은 비효율적이며 오류가 발생하기 쉽습니다.

소규모 프로젝트에서는 관리가 가능하지만 이 복사하여 붙여넣기 방법은 코드를 비대하게 만들어 페이지 로드 시간을 늦추고 수정을 방해합니다. 고객이 Instagram 핸들을 변경하는 시나리오를 생각해 보세요. 모든 HTML 페이지를 수동으로 업데이트하는 것은 지루하고 위험합니다.

우수한 솔루션에는 JavaScript가 포함됩니다. 모든 HTML 페이지에 이미 존재하는 <div> 요소(<code>socialsPanel 변수에 저장됨)에 이러한 링크를 동적으로 추가하는 JavaScript 함수를 만들었습니다. 해당 기능은 아래와 같습니다:

이 접근 방식은 링크 정보를 중앙 집중화하여 업데이트를 단순화합니다. 변경 사항은 한 위치에서만 수행하면 되므로 수많은 HTML 파일을 반복적으로 수동으로 업데이트할 필요가 없습니다. 링크 추가 또는 제거도 마찬가지로 간편해졌습니다.

이 방법은 시간을 절약할 뿐만 아니라 HTML 코드도 줄여줍니다. 페이지당 14줄의 코드를 반복하는 대신 아래 강조 표시된 대로 각 페이지에서 popSocialsPanel() 함수를 호출하기만 하면 됩니다.

효율성이 크게 향상되었습니다. 9줄의 JavaScript 코드를 추가하면 페이지당 14줄의 HTML이 대체됩니다. 내 프로젝트에서 이 접근 방식을 사용하면 이미 56줄의 코드가 절약되었으며 새 블로그 게시물 페이지마다 추가로 13줄이 절약되었습니다.

이 간단한 예는 반복 코드를 식별하는 본능을 개발한다는 핵심 원칙을 강조합니다. 이러한 코드를 리팩토링하면 일반적으로 더 효율적이고 유지 관리가 쉬운 솔루션이 만들어집니다.

귀하의 피드백과 제안을 환영합니다. 이 기사가 도움이 되었다면 공유해 주세요.

2022년 9월 28일 Medium for JavaScript in Plain English에 원본 게시