mingmong's devlog

이전 게시글에서는 회원가입 폼에서 입력값을 검증하는 정규식에 대해 알아보았다.사용자에게 값을 입력받았을 때 필요 없는 공백이 들어가는 경우가 발생할 수가 있는데,자바스크립트에서 입력받은 값에서 공백을 제거하는 방법에 대해 알아보자.  1) 공백 제거 방법1-1) trim 함수: trim 함수는 문자열의 앞, 뒤의 공백을 제거해주는 함수이다.따라서 중간에 들어간 공백에 대해서는 처리가 되지 않는다.회원가입을 할 때 만약 id 값을 문자열의 길이로만 체크를 하게 된다면공백만 입력한 경우에도 검증이 통과가 될 것이다.이 경우, trim 함수를 활용한다면 공백이 제거가 되어 정상적으로 검증이 될 것이다.str.trim()1-2) replace 함수: replace 함수는 모든 문자에 대해 치환을 해준다.따라서 ..

웹사이트를 만들 때, 회원가입 페이지는 거의 꼭 필요하다고 할 수 있다.회원가입 페이지를 만들 때는 정책에 따라 아이디/패스워드 조건이 조금씩 다를텐데,유효성 검증을 통해 회원가입 시 이를 검증해야한다.HTML 폼에서 유효성 검증은 일반적으로 자바스크립트(JavaScript)를 사용한다.예시를 통해 자바스크립트를 활용하여 회원가입 시 유효성 검증을 하는 방법에 대해서 알아보자.개발환경언어: JavaJDK: 1.8IDE: eclipseTomcat: 8.5HTML/css (Bootstrap) 1) 회원가입 조건1. 아이디(ID)자릿수: 7~12자리영문+숫자 조합영어로 시작2. 패스워드(Password)자릿수: 8~15자리영문+숫자+특수문자 조합3. 이름(Name)자릿수: 2~5자리한글만4. 이메일(Email..

자바스크립트에서 전달된 객체가 배열인지 확인하기 위해 isArray() 함수를 사용한다.이 함수에 대해 알아보자. 1) isArray()Array.isArray(obj);: 전달된 인수(obj)가 배열이면 true, 아니면 false를 반환한다.(boolean 값으로 리턴) 2) 예시결과값위의 예시처럼 배열 형태의 변수에 Array.isArray() 함수를 사용하면 true를 반환하게 되고,문자열 형태의 변수에 Array.isArray() 함수를 사용하면 false를 반환하게 된다. 3) console.table: 배열 또는 객체 형태의 변수를 표 형식의 테이블로 표시한다.3-1) 예시 1위의 예시에 대해 console.table을 출력해보자.변수 arr는 배열 형태이기 때문에, 위처럼 테이블 형태로 출..

웹에서 사용자의 입력 값을 검사할 때(ex. 아이디) 영어 대소문자와 숫자만으로 이루어진 문자열인지 체크하는 과정이 필요하다.이 때, 자바스크립트에서 정규 표현식을 활용하여 문자열에 영문 대소문자, 숫자로만 이루어진 문자열인지 확인할 수 있는 방법이 있다.이 방법에 대해 알아보자. 1) 정규 표현식 정의: 정규 표현식(Regular Expression)이란 특정한 규칙(패턴)을 가진 문자열의 집합을 다루는 데 사용하는 형식 언어이다.정규식이라고도 부르며, 보통 RegEx 혹은 RegExp로 많이 쓰인다.자바스크립트 뿐 아니라 다양한 프로그래밍 언어에서 텍스트의 패턴을 검색하고, 치환하는 데 주로 사용한다. 2) 정규 표현식 활용: 문자열이 영어 대소문자와 숫자로만 이루어졌는지 확인하기 위한 패턴을 정규 ..

자바스크립트에서 if문을 보다 간단하게 표현할 수 있는 삼항연산자에 대해 알아보자.1) 삼항 연산자: 의미는 if문을 사용할 때와 동일한데,조건이 참(true)인 경우 선택문1을 실행, 거짓(false)이면 선택문2를 실행한다. 조건문 ? 선택문1 : 선택문2  1) if문을 사용한 경우let num = 20;if(num > 10) { console.log(true);} else { console.log(true);}결과값 2) 3항 연산자를 사용한 경우let num = 20;let flag = num > 10 ? true : false;console.log(flag); 결과값   [reference]https://yeonzzy.tistory.com/24https://fromnowwon.tis..

자바스크립트에서 배열을 다룰 때 자주 사용하게되는 함수 중에서도 앞서서 slice() 함수에 대해서 소개했는데,이번에는 그와 이름이 비슷한 splice 함수에 대해 알아보자. 1) splice(): 원본 배열에 새로운 요소를 추가하거나 기존요소를 삭제 또는 교체하여 원본 배열을 변경 하고 제거된 배열을 반환하는 함수이다.문법array.splice(start[, deleteCount[, item1[, item2[, ...]]]])start: 시작 인덱스(index)deleteCount(Optional): 배열에서 제거할 요소의 수item1, item2, ...(Optional): 배열에 추가할 요소로, 생략할 경우 요소를 제거하기만 함 2) 예시1. 요소를 제거하지 않고 추가만 하는 경우let arr = ..

자바스크립트에서 배열을 정렬하는 sort() 함수에 대하여 알아보자. 1) sort()문법:arr.sort([compareFunction]) - compareFunction이 생략될 경우, 배열의 요소들은 모두 문자열 취급되며, 유니코드 값 순서대로 정렬된다. 🔶 compareFunction : 정렬 순서를 정의하는 함수이 함수는 두 개의 배열 요소를 파라미터로 입력 받음.함수가 두 개의 배열 요소(a, b)로 입력 받을 경우a > b => return 1 // return value>0이므로 a는 b 뒤에 위치a return -1 // return valuea = b => return 0 // a와 b의 순서 변함 없음 2) 문자 정렬예시)let arr = ["a", "f", "r", "d", "o..

자바스크립트에서 배열을 다룰 때 자주 사용하게되는 함수 중에서 이름이 상당히 비슷한 slice()와 splice()가 있다.그 중에서도 먼저 slice 함수에 대해 알아보자. 1) slice(): 배열로부터 특정 범위를 복사하여 새로운 배열을 만들 수 있는 함수이다.arr.slice([begin [, end]])begin: 시작 인덱스(index)end: 종료 인덱스(생략 가능) 2) 예시예시 1)let arr = [1, 2, 3, 4, 5, 6, 7, 8, 9];console.log(arr.slice(2, 4));결과 1)> (2) [3, 4]예시 2)let arr = [1, 2, 3, 4, 5, 6, 7, 8, 9];let arr2 = arr.slice(5);console.log(arr);consol..

자바스크립트에서 Date 타입을 사용할 때, 원하는 포맷에 맞게 활용할 수 있는 방법에 대해 소개해보겠다. 1) new Date: 현재 날짜와 시간을 Date 객체로 반환한다. 2) 날짜를 포맷에 맞게 출력const now = new Date();console.log(now.getFullYear());console.log(now.getMonth() + 1); // month: 0~11console.log(now.getDate());console.log((now.getMonth() + 1).toString().padStart(2, '0'));console.log(now.getDate().toString().padStart(2, '0')); 결과값  [reference]https://hianna.tistor..

자바스크립트에서 자주 사용하는 JSON 이라는 데이터 유형과,이를 활용할 때 사용하는 stringify, parse 사용법에 대해 알아보자. 1) JSON?: JavaScript Object Notation 의 약자로 "자바스크립트 객체 표기법"을 뜻한다.텍스트 기반으로 데이터를 쉽게 교환하고 저장하기 위한 데이터 타입이다.Ajax로 서버와 통신텍스트(문자) 기반 2) JSON의 구조JSON의 자료형은 string, number, true, false, null, object, array가 올 수 있다.key : value 형태의 구조를 가지고 있다.중괄호 {} 로 감싸게 되며, 이는 객체(Object)를 의미한다.key 값은 문자열이기 때문에 쌍따옴표 "" 를 붙여줘야 하고, value에는 기본 자료형..