mingmong's devlog

이전 글에서는 자바스크립트의 비동기 처리 방식 중 콜백 함수와 Promise를 비교해보았다.이번 글에서는 Promise를 더 직관적이고 깔끔하게 사용할 수 있는 방법인 async / await 문법에 대해 알아보자.예시 코드와 함께 실제로 어떻게 사용하는지, 기존 Promise 코드와 어떤 점이 다른지도 함께 정리해보자. 1) async / await란?async와 await는 ES2017(ES8)에서 도입된 문법으로,Promise 기반 비동기 코드를 동기식처럼 작성할 수 있도록 도와준다.async 함수는 항상 Promise를 반환한다.await 키워드는 Promise가 처리될 때까지 기다렸다가 결과를 반환한다.기본 예시async function fetchData() { const result = aw..

앞선 글에서는 자바스크립트의 동기(Synchronous) 처리와비동기(Asynchronous) 처리 방식의 차이를 살펴보았다.이번 글에서는 비동기 처리 방식 중 하나인콜백 함수(callback function)의 한계와,이를 보완하기 위해 등장한 Promise 객체에 대해 알아보자.각 방식의 예시와 차이점을 함께 정리하면서,실제 비동기 코드를 어떻게 구성하면 좋을지도 함께 살펴보자. 1) 자바스크립트의 동기 / 비동기 다시 정리자바스크립트는 싱글 스레드 기반으로, 기본적으로 코드를 순차적으로 실행하는 구조다.이런 실행 방식을 동기(synchronous) 처리라고 한다.동기 처리 예시console.log("1. 시작");function run() { console.log("2. 실행 중");}run()..

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

이전 게시글에서는 회원가입 폼에서 입력값을 검증하는 정규식에 대해 알아보았다.사용자에게 값을 입력받았을 때 필요 없는 공백이 들어가는 경우가 발생할 수가 있는데,자바스크립트에서 입력받은 값에서 공백을 제거하는 방법에 대해 알아보자.  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..