Developer N

Vue.js를 사용하는 새 프로젝트에 투입되면서 Vue.js를 배울 필요가 있었다.이를 위해 VSCode에서 Vue.js 환경을 세팅하면서 내용을 정리해보았다.     1. Node.js 설치https://nodejs.org/en/download Node.js — Download Node.js®Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine.nodejs.org Vue.js 개발환경을 다운로드 받기 위해서는 Node.js가 필요하므로 위 링크에서 Node.js를 설치한다. Vue CLI를 설치 및 사용하고 Vue 애플리케이션 서버를 실행하려면 Node.js JavaScript 런타임과 npm(Node.js 패키지 관리지)이 설..

세로로 이어진 체크박스에 마우스를 드래그했을 경우 체크박스의 상태가 바뀌게 해달라는 수정 요청이 들어왔다. 해당 기능을 추가하면서 생긴 이슈 및 해결방법에 대해 정리해보고자 한다. 문제 해결우선 마우스 드래그를 통해 한번에 이벤트를 발생시키기 위해서는 mousedown, mousemove, mouseup 이벤트가 필요했다. $('ul.item-list').on('mousedown', 'li', function() { let checked = false; if($(this).find('input:checkbox').is(':checked'); { checked = false; } else { checked = true; }});제일 먼저 선택하려는 checkbox 요소위에서 ..

🤷‍♀️ 버전관리를 해야하는 이유 수정한 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 요청을 받아 처리는 했으나, 다시 돌려주는 값이 없어서 발생하는 에러였다. 즉, 요청은 했는데 응답이 없으니 응답이 없다는 결과가 나온 ..