조아상사
로그인
회원가입
정보찾기

개발한당

javascript:void(0)은 왜 사용하나요?

알림
|
X
Cline 211.♡.203.225
2024.06.27 17:23
796
8
0

안녕하세요, 비전공자입니다.


인터넷을 돌아다니다 javascript:void(0)을 접하고 너무 불편하여 질문드립니다.

웹에서 한 페이지에 여러 항목이 있으면 컨트롤 클릭으로 여러 탭을 띄우고 쫙 본 다음 다시 원 페이지에서 다음 페이지로 넘어갑니다. 그런데 링크로 안 되어 있고 javascript:void(0)으로 되어 있으면 새 탭으로 열 수 없습니다. 그럼 원 페이지에서 한 항목 갔다가 다시 뒤로 갔다 다시 다른 항목 가고 이걸 반복해야 합니다. 여러 개를 동시에 보며 비교하고 싶은데 한 페이지밖에 보지 못하니까 불편합니다.


이렇게 하는 게 트래픽을 적게 할 수 있어서 하는 걸까요?

javascript:void(0)을 새탭으로 열 수 있을까요?

_blank를 저기에 넣으면 새탭으로 열릴까요?

그런 확장 프로그램이 있는지 모르겠습니다.

greasemonkey가 가능하게 할 수 있는지 모르겠습니다.


비전공자로서 검색하는데 아는 게 별로 없어 어려워 질문드립니다.

댓글 8
자근자근 (211.♡.37.14)
06.27 17:58
아무것도 모른다기엔 어느정도 아시는 것 같아서 어디부터 설명해야하는지 애매하지만, 눈치나 이해력이 빠르신 분인 것 같아서 적당히 생략하겠습니다.

HTML a 태그와 그 태그에 href 속성으로 페이지를 이동하는게 표준입니다.
표준대로 구현한 경우 크롬, 엣지 등 브라우저가 이해하고 그에 맞게 작동할 수 있습니다. (a 태그를 클릭하면 href의 주소로 이동해라!)
또 이 경우엔 휠버튼 클릭이라던가 컨트롤 클릭시 새창으로 띄워라! 같은 기능도 작동할 수 있는거죠.

다만 몇가지 이유로 이동 주소를 명확히 할 수 없거나 동적으로 지정해야할 때, 자바스크립트로 페이지를 이동하도록 만듭니다.
a 태그를 클릭했을 때 이벤트를 받아서, 적절한 처리 후 페이지를 이동시켜주는거죠.
다른 태그를 써도 되지만 반쪽짜리 시맨틱의 이유로 그냥 a 태그를 쓰는데, 그렇다고 또 href 를 비워버리면 현재 페이지로 다시 이동해버립니다.
그래서 이동하지 않도록 # 혹은 javascript:void() (클릭시 자바스크립트를 실행하되, void(0), 아무것도 하지 말아라!) 를 넣어둔거죠.

자바스크립트로 페이지를 이동할 때도 휠버튼 클릭이나 컨트롤이 눌렸는지 등을 판단해서 새 창으로 띄워주도록 하는 꼼꼼한 개발자들도 있습니다만, 보통은 그렇게 안 만듭니다.
이러나저러나 결론은 해당 사이트를 만든 개발자가 섬세하거나 꼼꼼하지 못한거구요,
사이트마다 구현 방법이 다 달라서 해당 사이트만 타겟팅한 전용 확장프로그램이 아니라면 간단하게 패치해서 사용하긴 어렵습니다.

greasemonkey 는 제가 뭔지 몰라서 패스하겠습니다.
Cline (211.♡.202.227)
06.27 18:27
@자근자근님에게 답글 댓글 감사합니다.

제가 보는 페이지를 알려드리는 게 좋을 것 같네요.
https://www.goodwearmall.com/
옷 쇼핑몰입니다.
여기 말고 다른 옷 쇼핑몰도 void(0)을 사용합니다.

소스코드 보면 어쨋든 다른 페이지를 보여줘야 하니까 변수처럼 해서 새로운 페이지를 보여주는 것 같습니다.

이렇게 자바스크립트로 개발하는 게 링크보다 편한가요? ㅎㅎ
자근자근 (211.♡.37.14)
06.27 19:19
@Cline님에게 답글 해당 쇼핑몰은 사용자 행동 정보를 수집하기 위해 이렇게 만들어뒀네요.
어떤 상품이나 페이지의 어디 쯤에서 사람들이 오래 머물렀는지... 어디를 클릭해서 들어오는지 등등...

<a ... onclick="commonUtil.util.GA4_EC_SELECT_ITEM(this);commonUtil.common.goGodDetail('PHD2ER1933LBE','personal','rts_pc_dsp','rts_pc_dsp')">

이렇게 되어 있을 텐데,
GA4: Google Analytics 4 를 의미하는거일겁니다. 사용자 데이터 수집용...

goGodDetail('PHD2ER1933LBE','personal','rts_pc_dsp','rts_pc_dsp')
여기가 페이지 이동부분이고,
(앞도메인 생략)com/product/PHD2ER1933LBE/detail
여기로 이동하겠네요.
뒤쪽 인자는 마찬가지로 데이터 수집용이라 무시하셔도 됩니다.

해당 사이트에서, a 태그를 보고 정상적으로 href 를 넣어주는 확장프로그램같은걸 직접 만드신다면 사용하실 수 있을겁니다.
다만 그걸 만들기 위해서 꽤나 공부를 해야하는게 문제라면 문제져....

저 스크립트의 이름이나 구조 같은건 사이트마다 다 달라서 따로 구현해줘야하지만, 쇼핑몰 같은건 솔루션을 구매해서 쓰는 경우가 많으니 같은 솔루션을 사용한 쇼핑몰이면 한번에 될 수도 있겠네요.
Cline (112.♡.2.99)
06.27 19:42
@자근자근님에게 답글 친절한 설명 감사합니다.
단순 페이지 이동 외에 분석을 위해 자바스크립트를 사용할 수 있군요.
새탭으로 여는 것은 고민해봐야겠네요.
AI의 도움을 받던가 해야겠습니다. ㅎㅎ

앱에서도 정보를 많이 수집하네요.

wowjam (103.♡.39.5)
06.27 19:14
쇼핑몰이면, 크롤링해서 데이터 빼가는걸 막으려고 그렇게 구현했을거 같네요
Cline (112.♡.2.99)
06.27 19:43
@wowjam님에게 답글 크롤링 하기 어려워야 빼가기 어렵겠네요. 도움 감사합니다. :)
no_profile crown (118.♡.14.229)
07.19 17:04
spa 환경에서는 앵커로 이동하는게 아니라 클릭 이벤트를 받아서 라우터를 사용한 페이지 이동을 하게 됩니다.
근데 앵커라는게 href에 아무 것도 없으면 클릭도 안 되고 아무런 동작을하지 않습니다.
그래서 javascript:void(0)를 넣어서 편법을 쓰는 겁니다.
아 근데 한달 전 글이네요 ㅎㅎ..
지금은 궁금증이 해결되셨길 바래요
Cline (211.♡.196.108)
07.19 19:51
@crown님에게 답글 Single Page Application의 이점을 얻기 위해 이렇게 하는 것 같네요.
javascript void는 그것을 위한 도구 같네요.

댓글 감사합니다.

제 글이 아직 1페이지에 있네요. ㅎㅎ