어떤 "href" 값을 JavaScript 링크에 사용해야 합니까, "#" 또는 "javascript:void(0)"?

다음은 JavaScript 코드를 실행하는 유일한 목적을 가진 링크를 작성하는 두 가지 방법입니다. 기능, 페이지 로드 속도, 유효성 검사 목적 등을 고려할 때 어느 것이 더 좋은 방법인가요?

function myJsFunc() {
    alert(myJsFunc);
}

<a href=# onclick=myJsFunc();>JavaScript 코드 실행</a>

또는

function myJsFunc() {
    alert(myJsFunc);
}

 <a href=javascript:void(0) onclick=myJsFunc();>자바스크립트 코드 실행</a>

답변 1

세 번째 이유는 onclick 이벤트 속성이 동적으로 할당되는 경우도 있는데, 특정한 메소드의 attachment 방법에 대해 함수를 특정하게 작성하지 않고도 함수를 호출하거나 동적으로 할당할 수 있기를 선호합니다. 그래서 내 HTML 마크업에서 onclick (또는 on 어떤 것)은 다음과 같이 보입니다:

onclick=someFunc.call(this)

또는

onclick=someFunc.apply(this, arguments)

javascript:void(0)을 사용하면 위의 모든 어려움을 피할 수 있으며, 단점이 있는 예제를 찾지 못했습니다.

따라서 단독 개발자라면 명확하게 자신의 선택을 할 수 있지만, 팀으로 작업한다면 다음과 같이 명시해야 합니다:

href=#을 사용하고, onclick에는 항상 끝에 return false;를 포함시키고, 호출된 함수가 오류를 발생시키지 않도록하고, 동적으로 onclick 속성에 함수를 연결하는 경우에도 오류를 발생시키지 않으며, false를 반환하도록 해주세요.

또는

href=javascript:void(0)을 사용하세요.

두 번째 방법이 훨씬 더 간단하게 설명됩니다.

답변 2

JavaScript 링크에는 # 또는 javascript:void(0)과 같은 href 값을 사용할 수 있습니다. 어떤 것을 선택해야 할까요? 이에 대해 SEO 측면에서 고려해 볼 필요가 있습니다.
검색 엔진 최적화(SEO)는 웹 사이트가 검색 엔진 결과 페이지(SERP)에서 높은 순위를 달성하기 위해 적절한 방법으로 최적화되는 것을 의미합니다. 검색 엔진은 주어진 웹 페이지에서 유용한 콘텐츠를 찾는 데 링크를 사용합니다. 따라서 JavaScript 링크에 대한 href 값 선택은 검색 엔진에서 콘텐츠를 크롤링하고 인덱싱하는 데 영향을 줄 수 있습니다.
첫 번째 옵션인 #은 문서 내에서 설정된 앵커 포인트로 이동하는 데 사용됩니다. 일반적으로 JavaScript 링크로 사용되면 클릭하면 아무 작업도 수행되지 않고 페이지의 일부를 스크롤합니다. #을 href 값으로 사용하는 것은 사용자 경험 측면에서 좋을 수 있지만, SEO에 대해서는 좋은 선택이 아닐 수 있습니다. 왜냐하면 검색 엔진은 페이지의 링크에 대한 정보를 크롤링하는 데 어려움을 겪을 수 있기 때문입니다.
반면에 javascript:void(0)을 href 값으로 사용하면 클릭 시 어떤 동작도 발생하지 않습니다. 검색 엔진은 이 링크를 무시하고 다른 컨텐츠를 보고 색인화할 수 있습니다. 따라서 크롤러가 페이지의 다른 콘텐츠를 식별하는 데 도움이 될 수 있습니다. 또한, 이와 같은 href 값은 향후 변경할 경우에도 검색 엔진 색인에 부정적인 영향을 미치지 않습니다.
하지만 javascript:void(0)은 웹 접근성과 관련하여 몇 가지 제약 사항을 가지고 있습니다. 키보드만을 사용하여 웹 사이트를 탐색하는 경우, 클릭 가능한 요소가 명확하게 식별되지 않을 수 있기 때문입니다. 이는 장애를 가진 사용자들에게 불편을 초래할 수 있습니다.
따라서 SEO 측면에서는 javascript:void(0)이 #보다 더 나은 선택일 수 있지만, 웹 접근성과 사용자 경험 측면에서 고려해야 할 사항도 있습니다. 최선의 방법은 JavaScript 링크를 사용할 때 다른 대체 방법에 대해 고려하는 것이며, 페이지의 구조와 목적에 따라 적절한 href 값이 선택되어야 합니다.