왜 href에 javascript:void(0)를 사용할까? ... or Main레거시 사이트들의 소스를 살펴보면 위와 같은 형태로 a태그의 href를 처리한 경우를 볼 수 있다.왜 a태그에 href="javascript:void(0);"를 사용했을까?void(0)을 사용하면, undefinded가 반환된다. 즉, 위 코드는 a태그의 고유 동작인 링크 이동을 막기 위함이다.즉, a태그에 걸어둔 공통 CSS 스타일링을 유지하며 실제 Link 이동을 방지하기 위함이라고 볼 수 있다.하지만 위에 처럼 a태그의 리다이렉트를 막기 위해 javascript:void(0); 을 처리하게 될 경우, 어떤 문제가 발생할까?문제 : 마우스 우클릭 액션이 막힌다마우스 우클릭을 했을 때의 “새탭에서 링크 열기/링크 주소 복사..
하고자 하는 것자바스크립트에서 이벤트가 어디서 발생했는지 해당 DOM을 가져오고자 합니다.방법이벤트 부여 방식자바스크립트에서 이벤트를 부여하는 방식은 크게 아래 두가지가 있습니다. *바닐라 JS 기준 장바구니 위 처럼 a태그가 선언되어 있고, 여기에 클릭 이벤트를 걸려고 합니다. 마크업 안에 onclick으로 이벤트 걸기 장바구니 onclick을 통해, 해당 태그를 클릭했을 때 어떤 동작을 할지 설정하기!DOM을 가져온 뒤, addEventListener(”click”, ...)으로 이벤트 걸기let elem = document.getElementById('addCart'); elem.addEventListener("click", function(){ alert('장바구니에 담았습니다.'); });JS를..
결론 $(function(){ ... }) // 위/아래는 같은 의미이다. $(document).ready(function(){ ... }) 즉시실행 함수 앞에 제이쿼리 표시 구분자인 $가 있다면, document.ready를 축약적으로 적은 것이다. 사용 이유 페이지에서 document.ready의 사용빈도는 높은 편인데, 이를 간결하게 쓰기 위해서 축약형을 사용한다. 왜 사용빈도가 높냐면, window.onload의 경우 여러번 선언되어도 단 한번만 인식되지만, document.ready는 여러번 선언되면 그거만큼 여러번 실행되기 때문에 위험도가 적은 편이다. 또한 JSP 특성상 공통 컴포넌트에 대해 include 처리를 많이 하게 되는데, 그 과정에서 페이지의 계층 구조를 명확히 파악하지 못하면 o..
인트로 다른 사람의 Javascript 코드를 보다보면 매개변수로 들어오는 ...args를 자주 볼 것이다. 과연, ... 이 무엇일까? 용어의 다른 이름은? function sum(...args){ ... } 먼저 위 코드처럼 매개변수의 위치에 존재하고 있다. 따라서, 아래처럼 여러가지 이름으로 불리고 있다. 우선 여기선 확산 매개변수 라고 부르겠다. 확산 매개변수 나머지 매개변수 스프레드 변수 (외국) ... (외국) three dots 정의 확산 매개변수는 자바스크립트의 함수 선언의 매개변수에서 활용되는 개념이다. ES6에서 추가된 문법으로 ... 을 사용하여 매개변수로 들어오는 변수의 나머지 값들을 받아오게 하는 기능이다. ... 은 확산 연산자 / 스프레드 연산자 이다. 이는 배열의 나머지 값들..
인트로 자바 Java의 OOP 개념 중에 메소드 오버로딩 Method Overloading이 있다. 이는 메소드가 동일 이름을 가지고 있어도, 들어가는 매개변수가 다르면 다르게 인식된다는 의미이다. pulbic int getGrade(){...} pulbic int getGrade(int a){...} pulbic int getGrade(int a, int b){...} 위 getGrade() 함수는 모두 “getGrade” 라는 함수명을 가지고 있지만 모두 다른 함수로 사용 될 수 있다. 그래서 개발자는 메소드 오버로딩을 활용해 함수의 재사용성을 높일 수 있다. 그렇담, 자바스크립트 Javascript 에선 어떨까? 매개변수가 함수를 결정 짓지 않는다. 결론부터 말하면 자바스크립트는 매개변수가 없든, ..
인트로 HTML의 라디오 버튼을 접근 할 수 있는 방법은 무엇일까? 여러개의 선택지 중에 선택된 것을 고를 수 있을까? 라디오 버튼의 id는 label에 연결되는데, 여러개의 라디오 버튼을 어떻게 가져올까? ... 등등의 물음으로 시작한 서칭이다. Example 1점 2점 ... input type은 radio로 id 값은, label의 연결로 활용되었다. label은 for = id값 으로 연결해서 사용한다. 이렇게 연결하면 label을 클릭할 경우, 해당 id값의 input이 클릭 처리된다. jQuery 로 처리하기 $("input[name='review.score']:checked").val() // score의 라디오 중 체크된 것의 값만 가져옴 // 아무것도 선택안되어있으면, undefined ..