Front66

• 

  [JavaScript] addEventListener callback Function이 즉시 실행된다 ? [JavaScript] addEventListener callback Function이 즉시 실행된다 ? EventTarget의 addEventListener() 메서드는 지정한 이벤트가 대상에 전달될 때마다 호출할 함수를 설정한다. target.addEventListener(type, listener[, options]) 보통 이벤트를 등록할 때 일반적으로 다음과 같이 작성한다. document.getElementById('btn01').addEventListener('click', function(){ console.log('hello~'); }); document.getElementById('btn02').addEventListener('click', function(){ console.log('h.. Front/JavaScript 2020. 2. 25.

• 

  [JSP 오류] The JSP specification requires that an attribute name is preceded by whitespace [JSP 오류] The JSP specification requires that an attribute name is preceded by whitespace 오류 로그 심각: Servlet.service() for servlet jsp threw exception org.apache.jasper.JasperException: /WEB-INF/jsp/road/management.jsp (line: 1, column: 84) The JSP specification requires that an attribute name is preceded by whitespace Jsp 페이지 헤더에 다음 코드처럼 UTF-8"과 pageEncoding 띄어쓰기를 하지 않았을 때의 오류이다. 해결 방법 Front/JavaScript 2020. 2. 21.

• 

  [Native JS] jQuery 없이 순수 자바스크립트로 클래스 제어하기 (classList) [Native JS] jQuery 없이 순수 자바스크립트로 클래스 제어하기 (classList) jQuery class 제어 소스 $('#ele').addClass('on'); $('#ele').addClass('on normal'); $('#ele').removeClass('on'); $('#ele').removeClass('on normal'); $('#ele').hasClass('on'); $('#ele').hasClass('on normal'); $('#ele').toggleClass('on'); javascript class 제어 소스 var ele = document.getElementById('ele'); ele.classList.add('on'); ele.classList.add('on',.. Front/JavaScript 2020. 2. 17.

• 

  [JavaScript] Closure 클로저 응용하기(Feat. Naver Map Api 마커 이벤트 리스너 등록) [JavaScript] Closure 클로저 응용하기(Feat. Daum 지도 Api, Naver 지도 Api 이벤트 등록) 평소 Daum Map api 서비스를 이용하다가 처음으로 Naver Map api 서비스를 사용하게 되었다. 1. 사건의 전말 : Daum Map api 마커 클릭 이벤트 등록 과정 - 여러 개의 마커를 반복문으로 올리면서 동시에 해당 마커에 대한 인포윈도우 등록을 하는데 그 때 마커 클릭 시 해당 인포윈도우창이 열리도록 이벤트를 등록한다. 코드는 다음과 같다 for(var i in markerObj){ kakao.maps.event.addListener(markerObj[i], 'click', function(){ openInfoWindow(this.key);// openInfo.. Front/JavaScript 2020. 1. 8.

• 

  [Error] 톰캣 server.xml 설정에러 : Error processing request NullPointException [Error] 톰캣 server.xml 설정에러 : Error processing request NullPointException 에러 로그 [http-nio-80-exec-5] org.apache.coyote.http11.AbstractHttp11Processor.process Error processing request java.lang.NullPointerException 두 개의 프로젝트를 하나의 톰캣에 합친 후 발생한 에러이다. 이 에러 로그는 주로 다음 날 아침에 적으면 세~네개, 많으면 여섯개 정도 같은 에러 로그가 쌓이고 시점은 불규칙해서 알 수가 없다. 에러가 어느 시점에서 나는지 알기 위해 일부러 에러로그를 쌓기 위해 프로젝트 구동 후 여러 기능을 테스트하곤 했지만, 프로젝트가 구동되지.. Front/WebServer 2020. 1. 3.

• 

  [Error] 이클립스 JavaScript "Invalid Regular Expression Options" 빨간 줄 없애기 [Error] 이클립스 JavaScript "Invalid Regular Expression Options" 빨간 줄 없애기 에러로그 : Syntax error on token "Invalid Regular Expression Options", no accurate correction available 위 에러 문구는 이클립스 자체의 javascript validator에 의해서 표시되는 것으로 설정을 해제할 수 있다. 프로젝트 구현 자체에는 이상은 없었지만 에러 표시가 나는 것이 계속 눈에 보였다. 프로젝트 속성(Properties) - Builders 항목에서 JavaScript Validator를 해제하고 Applay and Close 하면 된다. Front/JavaScript 2019. 12. 30.

• 

  [JavaScript] 자바스크립트 함수 호출 방법2 :내가 원하는 객체를 this로? [JavaScript] 자바스크립트 함수 호출 방법2 :내가 원하는 객체를 this로? 자바스크립트에서 가장 자주 쓰이는 함수 호출 방법에 관한 게시물을 먼저 보고 오자 [JavaScript] 자바스크립트 this , 이해 쏙쏙~! [JavaScript] 자바스크립트 this , 이해 쏙쏙~! this는 함수 내에서 함수 호출 맥락(context)를 의미한다. 즉 함수를 어떻게 호출하느냐에 따라서 this가 가리키는 대상이 달라진다는 뜻이다. 먼저 함수를 호출하.. haenny.tistory.com 이번 게시물에서는 Function의 prototype인 call, apply 메소드를 이용한 함수 호출 방법에 대해 알아보도록 하자. Function.prototype.call 함수 call 메소드는 다른 객.. Front/JavaScript 2019. 12. 26.

• 

  [JavaScript] 배열과 유사배열객체 그리고 .. forEach is not a Function... 에러 [JavaScript] 배열과 유사배열객체 그리고 .. forEach is not a Function... 에러 jQuery 라이브러리에서 Native Js를 하려고 코드를 정리하려 $. each function을 forEach로 바꾸던 중 간간히 아래와 같은 에러로그가 떴다. 처음엔 배열이 아닌가보다 대수롭게 넘겼다가 저 에러를 한 번 더 마주친 후에 유사배열객체에 대해서 잠시 잊고있었다.. 그래서 잠시 정리를 하고 넘어가려한다. 일단, 배열도 유사배열도 모두 객체인 것은 알고 있는가? 배열 1개의 변수에 여러 개의 값을 순차적으로 저장할 때 사용, 자바스크립트의 배열은 객체이며 유용한 내장 메소드를 포함 유사배열 (유사배열 객체) 배열이 아닌데 배열인척 하는 것 조건 1. 반드시 length가 필요하.. Front/JavaScript 2019. 12. 24.

• 

  [JavaScript] 자바스크립트 this와 제이쿼리 $(this)의 차이? 자바스크립트 this와 제이쿼리 $(this)는 명칭이 같지만 실제로 표시되는 정보는 서로 다르다. 같은 div 객체에서 this와 $(this)를 찍어보았다. 위 결과로 보면 자바스크립트의 this 경우는 이벤트가 발생한 태그 요소가 표시되고, 제이쿼리 $(this)의 경우는 발생한 요소의 정보들이 Object로 표시된다. 쉽게말해 this == $(this)[0] 이다 Front/JavaScript 2019. 12. 20.

• 

  [Tomcat] 톰캣 하나로 여러 개의 war파일 배포하기 [Tomcat] 톰캣 하나로 여러 개의 war파일 배포하기 자, 일단 tomcat과 war파일 일대일로 배포하는 방법은 안다고 가정하겠다. 모른다면 아래링크를 참고하자. [Java] Eclipse 웹프로젝트 war파일 배포하는 방법 [Java] Eclipse 웹프로젝트 war파일 배포하는 방법 로컬 이클립스에서 개발한 프로젝트를 실제 사용할 서버에 배포할 때 단순한 JSP파일같은 경우는 간단하게 편집해서 저장할 수 있지만 JSP나 서블릿으로 프로그.. haenny.tistory.com 그렇다면 위의 상태에서 즉, 한개의 프로젝트는 배포한 상태에서 다른 프로젝트 war파일을 배포하고 싶으면 어떻게 해야할까? 1. webapps 폴더에 추가하고자 하는 배포파일(WAR파일)을 넣어준다. 2. tomcat [c.. Front/WebServer 2019. 12. 19.

• 

  [JavaScript] input 태그에서 엔터했을 때, 새로고침 현상 막기 [JavaScript] input 태그에서 엔터했을 때, 새로고침 현상 막기 원인 input 텍스트 박스에 포커스가 있을 때, 엔터키 누르면 페이지 새로고침 현상이 자꾸 나타난다. 원인을 살펴보니, form 태그 내부에 있는 input text box에서 엔터키를 누르게 되면 자동으로 Submit이 되면서 페이지가 재로드된다. 해결 방법 1. form 태그의 onsubmit 속성값 이용 2. input 박스 추가 엔터키를 눌렀을 때 자동으로 submit되는 원인은 form 내부에 input박스가 한 개만 존재하기 때문이다. 의미없는 input 박스를 추가하여 이를 방지할 수 있다. 3. keycode 값으로 엔터 여부 판단하여 처리 - HTML form input - Script Front/JavaScript 2019. 12. 13.

• 

  [JavaScript] JS 라이브러리 daterangepicker 적용하기 [JavaScript] JS 라이브러리 daterangepicker 적용하기 먼저 라이브러리 다운받기 위한 사이트에 들어가자. Date Range Picker — JavaScript Date & Time Picker Library Originally created for reports at Improvely, the Date Range Picker can be attached to any webpage element to pop up two calendars for selecting dates, times, or predefined ranges like "Last 30 Days". To get started, include jQuery, Moment.js and Date Range www.daterang.. Front/API 2019. 10. 28.