본문 바로가기
728x90
728x90

js5

이메일 유효성 검사 함수 사이트에서 이메일 값을 입력하는 부분에서 사용하기 좋은 함수 Input에 type='email' 사용해서 검사해도 괜찮지만 서버에 데이터를 전송하기까지 데이터값을 의심해야한다고 생각함. 그러므로 클라이언트에 데이터를 받고 서버 전송 전 또 한 번의 검사를 해줘야함. 물론 서버에서도 검사를 해줘야함,,!! 디비에 정상 데이터를 저장해야하니깐..!! 신입때 부장님이 많이 했던 잔소리(?)가 데이터를 의심해라 였음.. const isValidEmail = (email) => { const pattern = /^[\w.-]+@[a-zA-Z\d.-]+.[a-zA-Z]{2,}$/; return pattern.test(email); } - 화살표 함수 방식 사용 - 'email'이라는 매개변수 - const patt.. 2024. 2. 1.
숫자 한국어로 표시하는 함수 쇼핑몰 화면에서,, 쿠폰 할인 금액을 숫자가 아니라 한글로 표시가 되도록 디자인이 되어있었다. 쿠폰 금액은 디비에서 불러오는 값으로 숫자로 된 금액이였으면 여러 군데에 사용할 거같아서 공통 함수로 만들기로 결정 초반에는 gpt의 도움을 받고 틀을 만들었다 gpt가 계속 틀린 함수를 만들어줘서 나중에는 내가 아예 만들었음. 급하게 만들다보니 코드가 좀 길어진 아쉬움이 있음.. const formatNumberWithUnit = (number) => { const units = ["", " 십", " 백", "천", "만", "십만", "백만", "천만", "억"]; const unitCount = units.length; if (number < 1000) { return String(number); } l.. 2024. 1. 31.
JS에서 함수(Function)이란? 함수(Function) - JavaScript에서 함수(Function)는 코드의 작은 조각을 의미 - 이 코드 조각은 특정 작업을 수행하도록 설계되었으며, 필요할 때마다 호출해서 사용이 가능 - 함수는 코드의 재사용성을 높이고, 코드를 더욱 체계적으로 구성할 수 있게 해주는 중요한 요소 함수를 생성하는 방법 3가지 1. 함수 선언식(Function Declaration) : 가장 기본적인 함수 생성 방식 function 함수이름(매개변수) { // 코드 } 2. 함수 표현식(Function Expression) : 함수를 변수에 할당하는 방식 var 함수이름 = function(매개변수) { // 코드 } 3. 화살표 함수(Arrow Function) : ES6에서 도입된 새로운 함수 정의 방식으로 간.. 2024. 1. 28.
숫자, 소수점까지 입력가능, input type="text" 이용 숫자를 소수점 8자리만 입력이 가능하게 하고 싶었다. type을 number를 사용할려고 했으나 소수점 입력시 커서가 앞으로 가고 값 입력하는게 이상했다. type="text"를 사용하였고 oninput="this.value = this.value.replace(/[^0-9.]/g, '').replace(/(\..*)\./g, '$1');" oninput 이벤트를 사용해서 숫자만 인력가능하게 하였다. [ 내가 원하는 함수 ] 1. 소수점은 8자리까지 입력가능 2. 맨 앞 00 연속으로 입력되는걸 막기 3. 맨 앞이 0이고 뒤에 소수점이 오지않을 때 0을 지우고 입력한 값을 넣어줌 $('#i_number').on("input propertychange paste change keyup focusout fo.. 2023. 12. 13.
Input tag에 [숫자]만 입력하고 싶을 때 Tip! 보통 Input에 숫자만 입력할 수 있게 만들고 싶을 때 type="number"을 사용할 것입니다. type="number"를 사용하면 최소(=min), 최대(=max)도 간단하게 설정할 수 있어요. 또한, step을 설정해서 설정된 값을 기준으로 내리거나 올릴 수도 있어요. ( ex. step="10" -> 클릭 시 10씩 증가, 감소 ) 우리는 step이 필요없는 경우가 있을 수 있어요. 예를 들어, 핸드폰번호나 인증번호를 입력시 STEP이 필요할까요..? >> 필요하지않는 기능이 있다면 우리는 지우면 돼요! 그럴 때 사용하기 좋은 CSS와 태그에 직접 넣는 방법을 소개해드릴려고 해요. [ CSS 방법 ] 출처 - w3schools - Input:: 으로 직접 사용 시 step이 .. 2023. 1. 14.
728x90
728x90

티스토리툴바