Developer N

🤷‍♀️ 버전관리를 해야하는 이유 수정한 css, js 파일을 재배포할 경우 브라우저에 바로 적용되지 않는 경우가 있다. 새로 배포를 했음에도 이전에 배포된 파일이 계속 사용되기 때문인데 이러한 경우를 방지하려면 css와 js 파일의 버전관리를 해주어야 한다. 🤷‍♀️ 버전관리 방법 재배포할 css나 js파일의 파일명을 바꿔주는 것도 하나의 방법이지만 상당히 번거롭다. 파일명을 변경하지 않는 방법으로는 수정한 파일을 참조하는 소스에 쿼리스트링을 붙이는 것이다. 방법은 간단하다. 파일명 뒤에 ?ver=0.1 또는 ?ver=20240313 등을 붙여주면 된다. 자주 수정되는 소스의 경우 날짜를 기입하고, 그렇지 않은 경우 버전을 매겨서 기입해주면 된다. 소스를 보면 아래와 같다. // css version ..

이벤트 버블링 우리가 원하는 것은 어떤 요소를 클릭했을 때 해당 요소에만 이벤트가 적용되는 것이지만 실제로는 그 요소를 포함하는 부모 요소에도 이벤트가 전달된다. 이를 거품이 커지는 것에 비유해 이벤트 버블링(event bubbling)이라고 한다. test 위 코드의 경우 자식 요소인 를 클릭하면 부모 요소인 에게도 클릭 이벤트가 전달된다. 이벤트 버블링의 경우 자식 요소를 포함하지 않는 부모 요소의 영역을 클릭하면 이벤트 핸들러가 실해되지 않는다. 만약 자식 요소를 클릭했을 때 부모 요소의 이벤트 핸들러를 실행하지 않고자 한다면 두가지 방법을 사용하면 된다. 1. 부모 요소의 이벤트 핸들러에서 this와 event.target을 이용한다. $('#parent').click(function(event)..

$.ajax( { type: "POST", url: "/test/testUrl", data: JSON.stringify(params), contentType: 'application/json', cache: false, dataType: 'json', success: function(data) { console.log('성공'); }, error: function(jqXHR, status, error) { alert('에러'); } }); jQuery의 ajax 메서드를 사용할 때 요청은 정상적으로 처리되었으나 계속해서 404 에러가 났다. 찾아보니 컨트롤러가 Ajax 요청을 받아 처리는 했으나, 다시 돌려주는 값이 없어서 발생하는 에러였다. 즉, 요청은 했는데 응답이 없으니 응답이 없다는 결과가 나온 ..

$.each() 함수는 단순히 배열이나 객체를 순회하면서 그때마다 callback을 실행시켜주는 함수이다. 따라서 반복문이 아니기 때문에 break와 continue가 먹히지 않는다. break문 continue문을 사용하려면? 반복문에는 skip할 수 있는 제어문이 필요하다. $.each() 함수는 return 키워드를 통해 이를 제어한다. 만약 break를 사용하고 싶다면 callback에서 false를 리턴하면 된다. 그외의 것을 리턴하는 경우 continue와 같이 동작한다. let elems = $('.item-box').find('.item'); let elem; elems.each(function() { if($(this).data('index') == 10) { return false; /..

이벤트 중단을 위해 자주 사용하는 코드들을 정리해보겠다. 먼저 jQuery의 이벤트 해제 메서드를 알아보자. jQuery의 이벤트 연결/해제 메서드 bind(), unbind() bind()는 jQuery의 이벤트 설정 메서드고, unbind()는 bind() 이벤트의 해제 메서드이다. on(), off() jQuery1.7부터 bind(), unbind()가 개선되어 나온 것이 on(), off()이다. on()은 이벤트 설정 메서드, off()는 on()이벤트의 해제 메서드이다. bind() 보다는 on()을 사용할 것을 권장한다. 그외 이벤트를 중단하는 방법 event.preventDefault() 현재 이벤트의 기본 동작을 중단한다. event.stopPropagation() 현재 이벤트가 상위로..