Jquery 로 .html() 을 사용하여 동적 HTML 삽입 시 기존 노드와 기존 이벤트 리스너가 삭제되지만.on() 으로 등록했던 이벤트 리스너들은 Jquery 가 재 바인딩을 해줘 이벤트를 사용할 수 있었다. 하지만 vanilla JS 의 .innerHTML 을 통해 동적 HTML 삽입 시 기존 노드 및 기존 이벤트 리스너가 삭제된 후.addEventListener() 를 통해 이벤트를 수동으로 재등록 해줘야 사용할 수 있다. 이때 vanilla JS 로 동적 HTML 삽입 시 이벤트 리스너 및 스크립트를 실행할 수 있는 방법은공통 함수를 호출하여 함수 내 스크립트 태그내용을 불러와서 재등록 해주면 된다. 본인은 모달창을 띄울때 모달창 내용을 동적 HTML 삽입하여 띄웠다. const initial..

모달창을 띄울때 서버단에서 HTML 파일 자체를 가져와 Dom 에 직접 넣었다.아래처럼 되어있는 div 태그내용에 모달창의 내용인 HTML 파일을 직접 받아와 넣었으나Jquery 를 사용할때와 vanilla js 를 사용할때 문제점이 있었다. 문제점 : Jquery 의 .html 을 통해 HTML 내용 자체를 넣었을 때는 HTML 파일 내 이벤트리스너가 정상적으로 동작했으나vanilla js 인 .innerHTML 을 사용했을 때는 이벤트리스너가 동작하지 않았다.// Javascriptaxios({ url : menu_href, method : 'post', header : { 'Content-Type' : 'application/json' }}).then(functi..

Javascript 를 사용하여 화면 내 scroll 을 이동 해야해서 찾아봤다. 브라우저 창 너비와 높이브라우저 창 화면에 보이는 너비와 높이를 알려면 document.documentElement 의clientWidth 와 clientHeight 를 사용한다.  사용방법document.documentElement.clientWidthdocument.documentElement.clientHeight 또 다른 확인 방법은 관리자도구(F12) 를 키고 모바일로 봤을 때 확인 가능하다.   window.innerWidth 와 document.documentElement.clientWidth 의 차이점너비와 높이를 구하는 방법중에 window.innerWidth 와 window.innerHeight 도 있다...

Javascript 에서 물음표(?), 느낌표(!)  등 다양한 연산자를 통해 코드의 간결하고 가독성 있게 바꿔준다. 물음표 1개(?)물음표 한개 연산자는 "삼항연산자", "옵셔널 체이닝 연산자" 에서 사용된다. 삼항연산자// 조건식 ? 참값 : 거짓값let a = 11;a > 10 ? 'a가 10보다 큽니다.' : 'a가 10보다 작습니다.' 삼항연산자는 조건식이 참과 거짓일 때 콜론(:)을 기준으로 각각 다른 값을 반환한다.  옵셔널 체이닝 연산자(?.)// 사용법 = (?.)let card = {};// undefined, 객체의 존재하지 않는 요소에 접근해 정보를 가져오려고 할 경우 에러가 발생한다.console.log(card && card.name && card.name.number);// u..

e.preventDefault() 와 e.stopPropagation() 는 이벤트 관련 동작에서 많이 사용되는 코드이다.  e.preventDefault() e.preventDefault() 는 a 태그나 submit 처럼 페이지를 이동시키거나 form 태그의 submit 하는 동작을중지시킨다. // javascript$("a").click(function(e){ e.preventDefault(); alert('prevnetDefault 로 인해 이벤트 중지');});// html네이버 페이지 이동 위처럼 "네이버 페이지 이동" 이라는 a 태그의 링크를 클릭하면 click 이벤트 함수가 발생하고 e.preventDefault() 로인해 이벤트가 중지된다. e.stopPropagation()e.st..

화살표 함수란? 보통 함수를 선언할 때 function 키워드를 사용하지만 ES6 에서 함수를 선언하는 새로운 문법이 등장했다. 바로 화살표 함수이다. 사용하는 방법은 단어 뜻과 같이 " => " 표시를 사용해서 함수를 선언하는 방법이다. // 기존 함수 const obo = function() { console.log('function 을 사용한 기존 함수'); }; // 화살표 함수 const obo = () => { console.log('function 이 제거된 화살표 함수'); }; 위와 같이 function 이라는 키워드를 사용하지 않고 " () => {} " 형식으로 심플한 형태로 사용된다. 하지만 이러한 심플함뿐만 아니라 사용하는 이유와 제약사항도 존재한다. 화살표 함수 제약 사항 무조건..