Mr.Lee의 하루

안녕하세요.한가지 더 정리해 보겠습니다.javaScript에서 alert로 변수 하나를 출력해 보았습니다.값은 undefinded가 나왔습니다. 정의되지 않은 변수라는 뜻입니다.해당 값을 if문으로 제어해야 하는데동적으로 해당 값이 있을 수 도 있고, 없을 수도 있습니다.이를 위해 undefinded 값도 if문에서 잡아보려고 합니다.JavaScript에서 변수 undefined 체크하기자바스크립트에서 변수를 alert로 찍었을 때 undefined가 나올 수 있습니다.이 경우를 if문으로 체크하는 여러 가지 방법을 정리했습니다.1. 기본적인 undefined 체크if (typeof a === "undefined") { alert("a는 undefined 입니다.");} else { alert("a의..

안녕하세요.라디오 버튼말고 텍스트를 선택해도 라디오가 체크 가능하도록 만들어 보려고 합니다.사실 엄청 오래된 기술(?)이지만 매번 잊어서 적어둡니다.HTML Radio 버튼에서 텍스트 클릭으로 체크 가능하게 하기라디오 버튼()은 기본적으로 작은 원형 버튼만 클릭 가능하지만, 태그를 활용하면 텍스트를 클릭해도 체크가 가능합니다.1. 라디오를 label로 감싸는 방법 신용카드 계좌이체 휴대폰결제 라벨 안에 라디오와 텍스트를 함께 넣으면, 텍스트 클릭 시 라디오가 선택됩니다.접근성(키보드, 스크린리더)에도 유리합니다.2. for와 id를 활용하는 방법 신용카드 계좌이체 휴대폰결제라디오에 id, 라벨에 동일한 for를 지정.라벨 클릭 시 ..

안녕하세요. 한창 개발공부를 할때 열심히 포스팅을 하곤했는데, 요즘은 개발 이외에 것들이 관심이 많아져서 개발 공부는 하지 않게 되네요. 공부는 하지않지만 업무에 필요한 것들이 나오면 간단하게 적어 두려고 합니다. 몇년이 흘러도, 어디를 가서도 에러들은 항상 비슷한것 같습니다. 개발을 하다가 화면이 먹통이 되면 개발자 도구(F12)를 눌러 확인해 보세요. 저는 부모창과 자식 창을 활용하여 다른 서버와의 통신을 시도하고 있었습니다. 그리고 도중에 이와같은 에러를 발견했습니다. 사진은 잘 보이지는 않네요. [에러] ccess to XMLHttpRequest at '---------' from origin '--------------' has been blocked by CORS policy: Response..

안녕하세요.web 시스템을 개발하다보면 tree 구조의 UI를 사용할 경우가 굉장히 자주 생깁니다.원래는 기존 시스템에 있는 라이브러리들을 활용하였는데이번에는 처음부터 개발해야할 상황이 생겨서 포스팅하게 되었습니다. 제가 사용한 tree 구조의 UI는 zTree 입니다.jQuery 플러그인 입니다.zTree의 홈페이지 입니다.http://www.treejs.cn/v3/main.php#_zTreeInfo아마 중국 사이트 인것 같네요. 사이트에서 데모를 볼수 있는 공간이 있는데심플하게 잘 나와 있습니다.데모 주소 http://www.treejs.cn/v3/demo.php#_101그리고 기본적인 활용법 예시 입니다. 스크립트 부분 ZTREE DEMO html 부분 기본 활용법을 알아보았습니다.이제 라이브러리를..

안녕하세요.너무 현실에 안주하였다는 사실을 깨달았습니다.promise를 듣고 너무 생소하여 찾아봤더니..현재 상당히 많이 사용하고 있어 더욱더 놀랬습니다. promise와 관련된 더욱 깊이있는 개념과 내용들은 다른 블로그를 참조하세요.저는 단지 ajax에서 콜백 호출시 콜백 지옥을 탈출하는 예시만 보여드리겠습니다. javascript, jquery 등에서 ajax 통신방법은 상당히 자주 사용합니다. 하지만 ajax를 사용한후 다시 ajax를 사용할땐 어떻게 할까요?첫번째 ajax의 성공여부를 확인한 뒤에두번째 ajax를 실행시켜야 할 것입니다. 다음은 잘못된 예시 입니다.$.ajax({url: '/xx/xxx/ajaxTest',data: 'num=10',type: 'post',dataType: 'json..

안녕하세요.자바스크립트(javascript), 제이쿼리(jquery) 선택자에 대해 포스팅하겠습니다. 일반 선택자$(.class) = 클래스 선택자$(#ID) = id 선택자 $(input:[name='name 값']) 뭐 이런식 등등 으로 선택자를 사용 하실겁니다.이러한경우는 class, id, name 값이 한 단어로 이루어질 경우에 사용합니다. 그렇다면 이러한 경우에 div를 어떻게 선택할까요?제가 매번 잊어 버리기위해... 적어 놓겠습니다. element[속성~=값]: 해당 값이 특정 단어로 시작element[속성^=값]: 특정 값으로 시작하는 객체element[속성$=값]: 특정 값으로 끝나는 객체element[속성*=값]: 특정 값을 포함하는 문서 객체 이러한 형식으로 적어 사용할 수 있습니다..

안녕하세요. 자바스크립트를 이용하면서 replace all 기능을 사용하고자 하는경우가 많습니다. 하지만, 자바스크립트에서는는 replacaAll 기능이 없습니다. 자바에서만 있죠. 그러나 이러한 기능을 수행할 수 있습니다. replace 및 정규식을 사용하면 됩니다. 사용패턴을 알아보겠습니다. 문자.replace(/패턴/구분자, '변경하고자하는 문자') 구분자 종류g : 전역으로 검색 i : 대소문자 구분없이 검색 m : 다중라인으로 검색 사용예) var value = '가/나/다/라' value = value.replace(/\//gi, '\r\n'); 저는 슬래쉬('/') 문자를 개행문자로 변환하는데 사용하였습니다. 상세하게 나눠보면 / \/ /gi -> \/는 슬래쉬가 특수문자이기때문에 \를 추가..

안녕하세요.스프링에서

안녕하세요.오랜만에 포스팅을 하게되었습니다.일이 바빠 포스팅에 소홀했네요...그만큼 제가 공부를 더 안했다고 볼수도 있겠군요. 웹상에 차트를 사용할 일이 생겨 포스팅을 하게 되었습니다.차트중에서 유명한 구글 차트도 있지만 저는 막대 그래프와 선 그래프를 동시에 사용하기위하여chart js 를 선택하였습니다. 바로 이런 모습으로 사용됩니다. chart js의 주소 입니다.http://www.chartjs.org/ 그리고 샘플 소스를 다운 받을 수 있습니다.제가 받았던 링크도 공유하겠습니다.https://www.jsdelivr.com/package/npm/chart.js?path=dist 기본적인 사용방법은 간단합니다.세부적으로 컨트롤 하는 것들은 구글링이나 홈페이지를 참고하세요.기본적인 차트 만드는 소스 ..

안녕하세요 ~!자바스크립트를 이용하면서 빈번히? 쓰이는 함수를 소개합니다.저도 2~3번??? 찾아 쓰다가 적어두려 합니다. 바로 setInterval 함수와 setTimeout 함수 입니다. setInterval 함수! - > 특정시간마다 계속 실행되는 함수! ex) 1초마다 계속 실행! setTimeout 함수! - > 특정시간이후 실행 ex) 1초 후 실행! 제가 실제 사용한 예 입니다. 사용법 : setInterval('함수', 시간), 1000가 약 1초 입니다. setInterval(function(){var time_text = '(' + time +'초 후 목록이 갱신됩니다.)';$("#count").text(time_text);time--;},1000); 해석 : time 값을 초기에 10..