mingmong's devlog

자바스크립트는 기본적으로 싱글 스레드(Single-thread), 동기(Synchronous) 처리 언어이다.즉, 한 번에 하나의 작업만 처리할 수 있으며 코드가 작성된 순서대로 실행된다.하지만 자바스크립트에서도 비동기 처리를 할 수 있는데,자바스크립트의 동기 처리와 비동기 처리에 대해 각각 알아보자. 1) 동기(Synchronous) / 비동기(Asynchronous)란?1-1) 동기(Synchronous) 처리: 동기 처리는 코드가 순차적으로 실행되는 방식이다.앞선 작업이 끝나야 다음 작업이 실행된다.1-2) 비동기(Asynchronous) 처리: 비동기 처리는 시간이 오래 걸리는 작업을 처리할 때,그 작업이 끝나기를 기다리지 않고 다음 작업을 먼저 실행하는 방식이다.대표적으로 API 요청, 파일 읽..

웹사이트를 만들 때, 회원가입 페이지는 거의 꼭 필요하다고 할 수 있다.회원가입 페이지를 만들 때는 정책에 따라 아이디/패스워드 조건이 조금씩 다를텐데,유효성 검증을 통해 회원가입 시 이를 검증해야한다.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) 정규 표현식 활용: 문자열이 영어 대소문자와 숫자로만 이루어졌는지 확인하기 위한 패턴을 정규 ..

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

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

자바스크립트에는 배열을 합치는 함수인 concat 함수가 있다.이 concat 함수에 대하여 알아보자. 1) concat?: 연결하다(concatenate)를 의미하는 함수로,  하나의 배열에 다른 배열을 합칠 수 있다. 2) concat 문법array.concat([value1[, value2[, ...[, valueN]]]])인자로 계속해서 배열을 넘겨서 합칠 수 있다. 3) concat 예시3-1) 인자가 하나인 경우var arr1 = [1, 2, 3];var arr2 = [4, 5];arr1 = arr1.concat(arr2);console.log(arr1);결과값[1, 2, 3, 4, 5] 3-2) 인자가 여러개인 경우var arr1 = [1, 2, 3];var arr2 = [4, 5];var ..

자바스크립트에는 문자열(String)을 대,소문자로 각각 변환해주는 함수가 있다.문자열을 대문자로 변환하는 함수는 toUpperCase(), 소문자로 변환하는 함수는 toLowerCase()인데, 이 함수들에 대하여 알아보자. 1) toUpperCase(): 문자열 내의 모든 문자를 대문자로 변환해준다.사용법: str.toUpperCase()var str = "Hello JavaScript!";console.log("결과값: " + str.toUpperCase()); 2) toLowerCase(): 문자열 내의 모든 문자를 소문자로 변환해준다.사용법: str.toLowerCase()var str = "Hello JavaScript!"; console.log("결과값: " + str.toLowerCase(..

자바스크립트에서 문자 또는 문자열의 위치를 검색하기 위해 사용하는 함수들이 있다.그중에서 indexOf 함수에 대해 알아보자.1) indexOf?: 지졍한 문자열을 앞에서부터 검색하여 최초로 발견한 문자열의 위치를 반환한다.이 때 시작 위치(시작 index)를 지정하면 해당 위치부터 찾기 시작한다.지정한 문자열이 발견되지 않으면 -1을 반환한다.** 문법: str.indexOf(searchValue[, fromIndex]) **searchValue: 찾을 문자 or 문자열fromIndex: 해당 위치부터 문자열을 찾음2) indexOf 사용법2-1) 기본 사용법: indexOf 함수의 기본 사용법은 str.indexOf("찾을 문자열")의 형태로 사용한다. 해당 표를 참고하여 아래 예시들을 확인해보자. ..

객체의 빈값 여부를 찾는 방법은 여러 가지가 있는데,그 중에서 jQeury에서 제공해주는 isEmptyObject 함수에 대해 알아보자. 1) 문법jQuery.isEmptyObject(object)$.isEmptyObject(object)     => 위의 두 가지는 같은 의미를 가진다.isEmptyObject 함수는 Object 객체(json)의 빈값(null) 여부를 체크한다.결과는 true 혹은 false로 반환한다. 2) 예시$.isEmptyObject({});$.isEmptyObject({ foo: "bar" }); 결과  [reference]https://api.jquery.com/jquery.isemptyobject/