특별한 일상

안녕하세요. 소다맛사탕 입니다. Spring boot + Vue.js 개인 프로젝트를 만들어 간단하게 Vue.js를 공부중 입니다. 간단하게 Vue.js에서 enter키와 setTimeout을 사용하는 방법을 적어봅니다. vue.js 파일 기본 구조 vue.js 엔터키 처리 위와 같은 템플릿 문법을 사용하면 엔터 클릭시 동작하게 됩니다. fncEnter는 script 선언부에서 호출된 함수(function)입니다. vue.js setTimeout 처리 기본적인 javaScript setTimeout 방식과 똑같이 실행될 코드 부분을 감싸 실행하면 됩니다. 선언한 1000은 1초를 나타냅니다. setTimeout 다른 방식 처리 Vue 인스터스가 사용할 함수들을 분리 시켜서 동작 시킵니다. methods ..

안녕하세요. 소다맛사탕 입니다. Spring Framework 프로젝트에서 properties 파일을 읽어와 사용하는 경우가 있습니다. @PropertySource @Value Spring xml 설정파일에서 bean을 선언한 것과 동일하게 어노테이션을 선언하여 사용 가능. common.test.test01=테스트01 common.test.test02=테스트02 testInfo.properties(.properties) public class CommonUtil { // @Value("#{testInfo['common.test.test01']}") @Value("${common.test.test01}") private static String testKey; public static String prin..

안녕하세요. 소다맛사탕 입니다. javaScript에서 특정 변수에 포함된 값을 찾기위해 == 이나 indexOf 방식이 아닌 includes() 자주 사용했는데요. Java에서도 이와 비슷하게 사용하기 위해 특정 메서드를 구현해 보았습니다. javaScript includes와 같은 기능을 사용하기 위한 정적 메서드 구현 // 재정의 public static usedItems useItemFlag(String test) { return new usedItems(test); } public static class usedItems {// static class 정의 private String value; public usedItems(String value) { // 기본 생성자 this.value = ..

안녕하세요. 소다맛사탕 입니다. 오늘은 특정 문자를 클립보드로 복사하는 코드를 구현해 보기에 앞서 HTML5 부터 지원되던 HTML DOM document에 속한 execCommand() 메서드에 대해 알아 보겠습니다. document.execCommand() HTML 문서가 designMode로 전환되면서 문서에서 execCommand 메서드를 사용할 수 있게 되는데 이것을 이용해서 문서의 편집 가능한 영역을 변경할 수 있다. document.execCommand(aCommandName, aShowDefaultUI, aValueArgument) 명령어가 지원되지 않거나 활성화되어 있지 않으면 false 반환. execCommand() 메서드는 사실상 더 이상 권장하지 않는 기술입니다. 일부 브라우저에서..

안녕하세요. 소다맛사탕 입니다. 오늘은 평소에 사용하려고 하면 이상하게 헷갈리고 정리가 되지 않은 jQuery 속성 선택자와 필터 선택자에 대해 알아보겠습니다. jQuery 메서드의 가장 기본 형태 $(선택자).메서드 1. 속성 선택자 기본 선택자 뒤에 붙여서 사용; $(선택자 형태).메서드; 선택자 형태 Description 요소[속성=값] 속성과 값이 같은 문서 객체 선택. 요소[속성|=값] 속성 안의 값이 특정 값과 같은 문서 객체를 선택. 요소[속성~=값] 속성 안의 값이 특정 값을 단어로 시작하는 문서 객체를 선택. 요소[속성^=값] 속성 안의 값이 특정 값으로 시작하는 문서 객체를 선택. 요소[속성$=값] 속성 안의 값이 특정 값으로 끝나는 문서 객체를 선택 요소[속성*=값] 속성 안의 값이 ..

안녕하세요. 소다맛사탕 입니다. 지난번 포스팅 이었던 '[JavaScript] 체크박스 전체 선택/해제'에 이어서 오늘은 체크박스 선택/해제 하는 여러가지 모음을 준비해 봤습니다. JavaScript $(function()({ // 해당 전체 체크박스 선택/해제 $("input[name=chkAll]").click(function(){ fncChkedAll(); }); // 체크박스 일부 해제 및 전체선택 조건 $("input[name=chkVal]").click(function(){ fncChkedVal(); }); // 짝수/홀수 선택 fncNthChild(); // 특정 동일 값 선택 fncChkGetValue(); // 모든 체크박스 해제 $("input[name=allNonChk]").click..

안녕하세요. 소다맛사탕 입니다. 오늘은 개행 문자열을 치환하는 방법들에 대해 알아 보겠습니다. ※ 개행 문자 : new line character의 약어. 인자 또는 표시의 위치를 다음 행의 최초의 위치로 이동시키는 서식 제어 문자. 즉, 인자 위치나 표시 위치를 다음의 인자 행이나 표시 행의 최초의 장소로 이동시키기 위한 서식 제어 문자. 위와 같이 용어에 대한 설명은 알겠는데..., 개행 문자(?). 정확하게 뜻을 알아가며 쓰는 사람은 없을 겁니다. 개행 문자열을 치환해서 쓴다는 것은 바로 이런 경우 인데요. 프로젝트를 진행하다 보면 DB TABLE에 적재되어 있는 긴 문자열이 있습니다. 그 긴 문자열을 화면으로 노출시키게 되면 아래와 같은 오류가 발생하는데요. Uncaught SyntaxError:..

안녕하세요. 소다맛사탕 입니다. 오늘은 기본적인 자바스크립트 이벤트 인터페이스 중 return과 같은 역할을 하는 preventDefault() 메서드와 stopPropagation() 메서드를 알아보겠습니다. 1. event.preventDefault(); 어떤 이벤트를 명시적으로 처리하지 않은 경우, 해당 이벤트에 대한 브라우저의 기본 동작을 실행하지 않도록 지정. 사용법 HTML과 JavaScript를 활용해서 간단하게 테스트 결과를 명시하겠습니다. 이동테스트 체크테스트 $("#urlConnect").click(function(){ console.log(event); // 이벤트 기본동작 실행 막기 // url 이동 막기 event.preventDefault(); }); $("input[name=c..