Dev's

자바스크립트(Javascript)는 올림, 내림, 반올림과 같은 수학적 처리를 위하여 Math 내장 객체를 제공합니다. 또한 Math는 Number 자료형만 지원하며 ES2020에서 추가된 BigInt와는 사용할 수 없습니다. Math는 다음과 같은 상수와 메서드를 제공합니다. 메서드 Math는 정말 많은 수학적 메서드를 제공합니다. 여기서는 모든 메서드를 설명하지 않고 주로 사용하는 메서드만을 설명하겠습니다. Math.abs(x) x의 절댓값을 반환합니다. Math.abs(-1) // 1 Math.abs(1) // 1 Math.ceil(x) x보다 크거나 같은 수 중에서 가장 작은 정수를 반환합니다.(올림 처리) Math.ceil(1.234) // 2 Math.ceil(1.567) // 2 Math.f..

Promise.all vs Promise.allSettled 기존의 Promise.all과 병렬적으로 Promise를 처리할 수 있다는 공통점을 가지고 있습니다. 그러나 Promise.all을 통하여 실행시 Promise의 resolve 상태에서만 값(value)을 반환하지만, Promise.allSettled을 사용시에는 값(value)와 resolve rejected와 같은 상태(status)를 객체형식으로 반환하게 됩니다. Promise.all([Promise.resolve(1), Promise.resolve(2)]) .then(console.log); // [1, 2] Promise.allSettled([Promise.resolve(1), Promise.resolve(2)]) .then(conso..

Input 태그를 통해 문자열 입력시 또는 어느 특정 문자열에서 한글, 영문자가 포함되어야 하는지 확인해야 하는 경우가 있습니다. 아래는 정규식을 이용하여 문자열에 한글, 영문자가 포함되어 있는지 확인하는 함수입니다. 한글 포함 확인 function checkKorean(str) { const regx = /[ㄱ-ㅎ|ㅏ-ㅣ|가-힣]/; return regx.test(str); } checkKorean('한글abc'); // true checkKorean('abcdef'); // false checkKorean('@!@##$'); // false checkKorean('abc@!ㄱㄴde'); // true영문자 포함 확인 function checkE..

Async/Await는 ES2017(ES8)에서 추가된 비동기작업을 처리하기 위한 방식중 하나입니다. aysnc/await async 함수에 aysnc가 붙여 선언하게 되면, 선언된 함수는 Promise를 반환하는 함수입니다. async function Foo() { return '1'; } Foo(); // Promise {: "1"}await Promise 함수와 같이 사용할 경우 결과값을 반환 할 때까지 기다리며, 반환된 값을 전달합니다. async function Foo() { return '1'; } await Foo(); // "1"사용법 1초후에 Hello World 로그를 출력하는 Promise를 반환하는 함수를 선언하였습니다. 그리고 async함수에 Hello..

개요 배열(Array)에 있는 아이템을 오름차순, 내림차순으로 정렬해야 하는 경우가 발생합니다. 이러한 경우 sort() 메서드를 사용하여 배열의 아이템을 정렬을 할 수 있습니다. sort() 메소드는 배열의 요소를 정렬하여 정렬된 배열을 반환합니다. arr.sort([compareFunction]) compareFunction compareFunction가 존재하지 않을 경우 문자열의 아스키코드(AsciiCode) 변환된 값의 오름차순으로 정렬된 배열을 반환합니다. const arry1 = [ 3, 1, 2 ]; arry1.sort(); // [1, 2, 3] const arry2 = [ 'b', 'a', 'c' ]; arry2.sort(); // ["a", "b", "c"] const arry3 = ..

개요 HTTP 요청시에 GET, POST의 파라미터를 구성하다보면, URI(Uniform Resource Identifier)에 특수문자가 섞여 있어 의도치 않은 예외 상황이 발생할 수 있습니다. 예를 들어 검색을 위해 keyword라는 파라미터를 받는 경우에 맥&치즈라는 값을 인코딩 없이 전달할 경우 예상치 맥이라는 키워드로 검색되어진 결과물이 보여질 수 있습니다. https://oper0116.tistory.com?keyword=맥&치즈 // GET 방식으로 전달할 경우 & 문자열로 파라미터값이 구분되어진다.이러한 상황을 예방하기 위하여 문자열을 인코딩 할 수 있는 encodeURIComponent(), encodeURI()가 존재합니다. encodeURIComponent(str) encodeURIC..

개요 ES6에서 Arrow Function이 새롭게 추가됨으로써 자바스크립트(Javascript)에서는 Regular function과 Arrow function 두 가지 방식을 통하여 함수를 정의할 수 있게 되었습니다. function을 명시적으로 정의하는 예 function hello(name) { return `Hello ${name}`; } const Hello = function(name) { return `Hello ${name}`; }Arrow function 문법을 사용한 예 const Hello = (name) => { return `Hello ${name}`; }Regular function과 Arrow Function은 함수를 정의한다는 방식에서는 동일하나, 차이점을 가지고 있기 때문..

개요 자바스크립트(Javascript)에서는 JSON형태의 데이터 포맷을 다룰 수 있는 JSON객체가 존재합니다. 이러한 JSON 객체에는 stringify와 parse 2가지의 메서드가 있습니다. JSON.stringify(value [, replacer [, space]]) stringify()는 객체(Object)를 String 형식으로 변환합니다. const obj = { name: 'cary', gender: 'male', age: 30 }; JSON.stringify(obj); // '{"name":"car","gender":"male",age":30}'replacer JSON 문자열에 포함될 값 객체의 속성들을 선택하기 위한 매개변수입니다. cons..

개요 구조 분해 할당(Destructuring)은 배열이나 객체에서 값을 가지고 와서 개별적인 변수에 할당할 수 있는 표현식입니다. 또한 구조 분해 할당을 사용함으로써 배열이나 객체에서 필요한 값만 가지고 올 수 있습니다. 배열 구조 분해 기존의 ES5에서는 배열의 값을 변수에 할당하기 위한 방법은 다음과 같습니다. val arry = [1, 2, 3]; val a = arry[0]; val b = arry[1]; val c = arry[2]; console.log(a); // 1 console.log(b); // 2 console.log(c); // 3그러나 ES6에서는 배열의 구조 분해 할당을 이용하여 각각의 변수에 값을 할당할 수 있으며, 변수에 값을 할당하는 기준은 배열의 Index 기준으로 할당..

개요 자바스크립트(Javascript)는 6가지의 원시타입(Primitive Type)을 가지고 있습니다. String, number, boolean, undefined, null, Symbol가 있습니다. 자바스크립트는 느슨한 타입 (loosely typed) 언어, 혹은 동적 (dynamic) 언어로써 변수 선언시 원시타입을 선언하지 않아도 되기에, 여러 타입의 값을 부여할 수 있습니다. 그러나 이러한 자바스크립트의 특성은 프로젝트를 진행함에 있어 예상치 못한 문제점을 발생시킬 수 있습니다. 따라서 각 형의 특징에 대해 이해를 하고 있어야 문제점을 해결 또는 예방할 수 있습니다. const a = '1'; const b = 1; a + b; // "11"원시타입 String String..