🚀 from error to study/Front-End
[js] 자바스크립트 정규 표현식(RegExp/Regular Expression)
🔥 포스팅 계기 자바스크립트의 정규식과 예시, 자주 사용하는 규칙을 알아보자 📍 정규 표현식(RegExp/Regular Expression)이란?👉🏻 정규표현식은 "특정 패턴의 문자열"을 찾기 위한 표현 방식 📍 정규 표현식 플래그플래그의미 g 발생할 모든 pattern에 대한 전역 검색 i 대/소문자 구분 안 함 m Multi line(여러 행)의 문자열에 대해 검색 ✔️ 즉 gi를 함께 쓸 경우, 특정 문자열 전체를 보고 대/소문자를 구분하지 않겠다는 뜻이 됨 📍 정규 표현식 매칭 패턴👉🏻 문자/숫자/기호 표시패턴의미 a-zA-Z 영어 알파벳 (-으로 범위 지정) ㄱ-ㅎ가-힣 한글 문자(-으로 범위 지정) 0-9 숫자(-으로 범위 지정) . 모든 문자열..
[JS] inclues - 단어 포함 여부 쉽게 확인하기 + 자바 버전
🔥 포스팅 계기 코딩을 하다 보면 "특정 단어가 포함된다면/포함되지 않는다면"에 따라 조건을 부여하는 일이 많음 해당 단어가 1~2개일 때는 모두 적어 줘도 큰 불편함이 없겠지만 걸러야 할 단어가 10개 이상이라면 모두 쓰기 곤란곤란 😅 그럴 때 사용할 수 있는 쉽고 간편한 inclues! 예시는 아래와 같음 📍 예제 👉🏻 validation이 K, O, R, E, A를 포함할 때만 TRUE를 RETURN 할 것 👉🏻 단, validation이 null이거나 undefined일 수도 있음 📍 1) inclues를 사용하지 않을 때 if(validation != null && validation != undefined && validation != 'K' && validation != 'O' && vali..
[js] 천 단위 콤마(,) 붙이기
이거를 이렇게 만들고 싶은데 js에서 뿌려 주는 부분은 이렇게나 많이 된다는 사실이 나를 미치게 한다,, 이걸 노가다로 해결한다면 toLocaleString()을 모두 써서 아래처럼 만들 수 있다 참 쉽죠? 하하하 renderMenuTimeKindList: function(data){ if(data.menuTimeSumRatioList.length > 0){ // 천단위 숫자에 콤마 표시 for(var i = 0; i < data.menuKindList.length; i++) { var sum07Time = data.menuKindList[i].sum07Time * 1; var sum08Time = data.menuKindList[i].sum08Time * 1; var sum09Time = data.me..
[자바스크립트] 동기 지연 함수 구현
자바스크립트에서 의도적으로 함수를 지연시키고 싶을 때 지연시킬 부분에 사용 function sleep(ms) { var start = Date.now() + ms; while (Date.now() < start) {} } sleep(5000); // 5초 지연 더보기 https://mylife365.tistory.com/504 [JavaScript][사용자함수] sleep 동기 지연 함수 // 동기 지연 함수 function sleep(ms) { var start = Date.now() + ms; while (Date.now() < start) {} } sleep(5000); // 5초 지연 mylife365.tistory.com https://inpa.tistory.com/entry/JS-%F0%9F%..
[자바스크립트] null 처리 쉽게 하는 법(삼항연산자)
객체 내 'posName'이라는 변수가 null인지 아닌지 확인하고 싶을 때 ⇒ 경우에따라 null, 공백, undefined로 들어오기 때문에 null 처리가 번거로움 if(emp.posName != '' && emp.posName != null && emp.posName != undefined) { } 2) 삼항연산자를 사용하면 간단해짐! ⇒ 있으면 한 칸 띄우고 걔를 쓰고, 없으면 공백으로 둬라 (emp.posName ? ' ' + emp.posName : '') 3) true 구문 안에서 다시 조건절도 가능함
[Dynatree] 옵션
옵션 뜻 node.isSelected(); 리턴값 boolean 얘 선택돼 있니? node.select(true); 얘 선택해라 node.select(false); 얘 선택 해제해라 $("#lectTreeDiv").dynatree("getSelectedNodes"); 저 트리 중에서 선택된 애들 가져와라(객체는 제이쿼리 객체가 됨) node.getParent(); 얘 부모 데려와 node.data.icon = false; 아이콘 필요 없어 node.data.icon = "folderopen.gif"; 아이콘 쟤로 지정해 node.getChildren(); 쟤 자식 데려와 var tree = $("#tree").dynatree("getTree"); 저 엘리멘트 트리 가져와 var node = tree.ge..
[HTML] 특수문자 치환하기
❓ 문자열 "12'3"이라는 값을 넘기고자 한다면 어떻게 표현해야 할까? 👉🏻 function( '12'3' ); 과 같이 적어 준다면 스크립트에서는 마지막 괄호(')')를 문자로 인식할 것 즉, function( '12'3' ); 와 같이 표현해야 함 문자열에 특수문자가 포함되어 값을 넘기는 데 어려움이 있다면 아래 표를 활용하자! 특수문자 치환문자 ^ ^ ' ' > >
[JavaScript/jQuery] 마우스/키보드/윈도우/입력양식 이벤트
1️⃣ 마우스 이벤트 👉🏻 마우스의 움직임에 따라 발생하는 이벤트 이벤트 이름 설명 click 마우스를 클릭할 때 발생 dbclick 마우스를 더블클릭 할 때 발생 mousedown 마우스 버튼을 누를 때 발생 mouseup 마우스 버튼을 뗄 때 발생 mouseenter 마우스가 요소의 경계 외부에서 내부로 이동할 때 발생 mouseleave 마우스가 요소의 경계 내부에서 외부로 이동할 때 발생 mousemove 마우스를 움직일 때 발생 mouseout 마우스가 요소를 벗어날 때 발생 mouseover 마우스가 요소 안에 들어올 때 발생 contextmenu 마우스 오른쪽 버튼을 눌렀을 때 발생 💡 이벤트 버블링(event bubbling) 한 요소에 이벤트 발생 시 해당 요소를 감싼 부모 요소가 있다면..
[JavaScript & jQuery] 자바스크립트 변수에 담은 값 input type="hidden"의 value 값으로 넣기
💡 현재 상황 db까지 다녀온 코드각 review별로 아래 코드, 그림과 같이 리뷰 list를 하나씩 뿌려 주고 있음 ${ r.userNickname } 신고 ★ ${ r.reviewStar } ${ r.reviewContent } 💡 원하는 상황 신고 버튼을 눌렀을 때 신고 모달이 뜨는데 모달에서 다시 신고 버튼을 눌렀을 때리뷰 번호, 로그인한 사용자의 번호, 신고 사유를 컨트롤러로 넘기고 싶음 전제 1) 자바 코드에 name 속성이 채워져 있고, value 값이 빈 input 태그가 있을 것 👉🏻 신고 모달을 전송할 때 함께 보내 주어야 할 값이므로 신고 모달의 form 태그 안에 만들어 줘야 함을 주의할 것 취소 신고 2-1) 자바스크립트 변수를 선언하고 기존에 이미 뽑혀 있던 값의 value를 담..
[jQuery] Uncaught TypeError: $.ajax is not a function
💡 해결방법 slim 빌드 jQuery에서는 ajax를 사용할 수 없음 현재 적용된 코드가 slim 버전이라면 하기 버전으로 바꾸어 주자 열심히 오타를 찾아봤지만 그런 거 없음 ajax는 jQuery CDN 중 slim 버전에서는 동작하지 않음! jQuery 빌드를 바꾸어 줬더니 (아직 코드를 모두 작성하지 않아 오류가 나긴 하지만) ajax의 실행은 잘됨!