본문 바로가기

IT_Developers/Javascript79

jQuery - 제이쿼리에서 trim() 사용하기 안녕하세요. 고코더입니다. 이전 시간에 자바스크립트로 trim() 기능을 구현했습니다. 하지만 제이쿼리를 사용하면 우리가 알던 그 trim()을 쉽게 사용이 가능합니다. ● 1. 사용법은 익숙한 trim() 사용 방법 그대로 기능이 구현되어 있습니다. let data = " gocoder "; result = $.trim(data); console.log(result) ● 2. 결과 화면처럼 아주 쉽게 앞뒤 공백을 제거할 수 있습니다. 역시 제이쿼리의 편리함이란 2021. 11. 2.
JavaScript - 숫자만 입력받는 정규식 체크 안녕하세요. 고코더 입니다. 이번에는 자바스크립트 정규식으로 숫자만 입력 가능하도록 코딩을 해보겠습니다. 참 많이 사용하는 코드이지만 할 때마다 잊어버리는 마법의 소스입니다. ● 1. 정규식의 뜻은 0~9까지 숫자만 입력만 가능하다 입니다. 이를 통해 test로 체크를 진행합니다. let str = "1234ABC" let check = /^[0-9]+$/; if (!check.test(str)) { console.log("숫자만 입력 가능합니다."); } ● 2. 결과 화면입니다. ABC 라는 글자가 있기 때문에 해당 체크를 통해 걸러낼 수 있습니다. 맨날 사용하고 까먹는 정규식 2021. 11. 1.
JavaScript - 정규식으로 숫자와 영문자만 입력하기 안녕하세요. 고코더 입니다. 자바스크립트로 가장 많이 사용하는 유효성 체크가 있다면 바로 ID를 입력받을 때 사용하는 "숫자와 영문자만 입력" 하는 체크입니다. 간단하게 예제를 코딩 해보았습니다. ● 1. 정규식으로 해당 식을 test를 사용해 체크하는 방식입니다. let str = "abc가123"; let check = /^[a-zA-Z0-9]+$/; if (!check.test(str)) { console.log("숫자와 영문자만 입력 가능합니다."); } ● 2. 결과 화면은 아래와 같습니다. 원하시는 곳에 사용하면 됩니다. 2021. 11. 1.
JavaScript - 정규식으로 이메일 주소 체크 / 자바스크립트로 이메일 주소 형식 체크 안녕하세요. 고코더 입니다. 자바스크립트로 이메일 형식을 검사하는 정규식을 알아보겠습니다. 이메일의 기본 구조는 골뱅이(@)와 도메인 점(.)이 있는지 확인하는 게 기본 룰입니다. 이 방식은 해당 이메일 주소의 존재 여부는 알 수 없고 기본 이메일 주소의 구조를 가지고 있는지 확인하는 코드입니다. ● 1. 이메일 형식을 체크합니다. let email = "test@email.net" check = /\S+@\S+\.\S+/; check.test(email); ● 2. 결과 화면입니다. 정상적으로 기본 이메일 룰이 체크됩니다. 2021. 11. 1.
jQuery UI - datepicker 특정 요일 선택하지 못하게 하기 / 데이트피커로 주말 선택 막기 안녕하세요. 고코더 입니다. datepicker에서 특정 요일의 선택을 막는 방법을 알아보도록 하겠습니다. 해당 방식은 데이터 피커에서 제공하는 beforeShowDay기능을 통해 제어가 가능합니다. ● 1. 간단한 예시로 설명을 드리겠습니다. . beforeShowDay를 실행하고 date.getDay()를 가져옵니다. 해당 값은 0:일요일~6:토요일까지 숫자를 반환하고 이에 대해 return 처리를 하면 쉽게 구현이 가능합니다. 비활성하고 싶은 요일의 코드만 남기고 아래 소스를 사용하시면 적용이 빠르실 거 같습니다. $("#calendar").datepicker({ beforeShowDay: function(date){ /* 일요일만 선택 불가 */ return [(date.getDay() != 0).. 2021. 11. 1.
JavaScript - Intl.NumberFormat을 이용하여 숫자 표현하기 / 내장 함수를 이용해 천단위 콤마 찍기 안녕하세요. 고코더 입니다. 이전 시간에 자바스크립트에서 3자리마다 콤마를 찍어 금액을 표현하는 정규식을 만들어봤습니다. 그런데 최신 브라우저에서는 복잡한 정규식을 쓰지 않아도 NumberFormat 함수를 이용해 각 나라에 맞는 통화 방식으로 숫자를 표현할 수 있습니다. 한번 실습해보겠습니다. ● 1. 가장 기초적인 방법입니다. 아무런 옵션을 주지 않으면, 해당 통화 기호는 US가 되고 우리나라와 같이 천 단위마다 콤마를 찍어 반환 합니다. let num = new Intl.NumberFormat().format('10000000000') console.log(num); ● 2. 결과 화면입니다. 이제 천단위 콤마를 한 줄로 해결이 가능합니다. ● 3. 그럼 다른 나라에 통화로 표현해보겠습니다. 독일과.. 2021. 11. 1.
JavaScript - 자바스크립트에서 trim() 기능 사용법 / 문자열 양쪽 공백 제거 안녕하세요. 고코더 입니다. trim()은 문자열 처음과 끝에 불필요한 공백을 제거하는 함수입니다. 자바에서도 ASP에서 많이 사용하는 문자열 기능이었습니다. 하지만 자바스크립트에서는 아쉽게도 trim 기능이 없습니다. (jQeury에는 존재하지만) 그래서 이번 시간에는 이가 없으면 잇몸으로 trim을 사용하는 방법을 알아보겠습니다. ● 1. 정규식을 이용해 간단하게 문자열에 공백을 제거해보겠습니다. 함수로 만들어 사용도 가능하지만 tirm()처럼 간단하게 문자열에 붙여 바로 사용할 수 있도록 코딩을 해보았습니다. let data = ' gocoder '; data.replace(/^\s+|\s+$/g,"") ● 2. 결과는 우리가 알던 그 기능처럼 잘 사용 됩니다. 2021. 11. 1.
JavaScript - 1000자리(3자리) 마다 콤마 찍기 안녕하세요. 고코더 입니다. 자바스크립트에서 보통 금액을 나타낼 때 "000" 있을 때마다 쉼표를 찍어서 표현합니다. 이 방식을 정규식을 이용해 한번 표현해보도록 하겠습니다. ● 1. 함수를 만들어 사용하도록 코딩을 하였습니다. 특정 숫자가 들어오면 이를 정규식을 이용해 "0"이 세 개가 있을 때마다 쉼표를 찍어줍니다. function setCommas(number) { return number.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ","); } ● 1. 결과 화면처럼 큰 숫자가 들어와도 정확히 세 자리마다 콤마를 찍어주므로, 쉽게 금액을 표현할 수 있습니다. 2021. 11. 1.
Mustache - 머스테치에서 if를 사용할 수 있을까? 안녕하세요. 고코더 입니다. 머스테치에서 if를 사용할 수 있을까? 라는 생각을 한번쯤 해보시는 경우가 있을 것입니다. 우선 결과를 말씀드리면 이 템플릿 엔진에서는 if 기능을 제공하지 않습니다. 단순히 화면에 데이터를 랜더링 하는 엔진이기 때문입니다. 그래서 데이터를 담기 전이나 후에, 전처리, 후처리에서 if를 사용하는 것이 맞다고 할 수 있습니다. 그래도 아쉬운 분을 위해 머스테치에서 if처럼 사용할 수 있는 방법을 알아보도록 하겠습니다. ● 1. 아래 코드를 확인해보겠습니다. 데이터가 있을 경우에는 gocoder.png를 보여주고 없을 경우에는 noimage.png를 보여주는 if 문법의 가장 기초적인 모습을 따라 했습니다. 하지만 이렇게까지가 최선이고 조건을 비교하는 기능은 없습니다. 다시 말하.. 2021. 11. 1.