Dev's

파일용량 표시하기 위해 파라미터 값에 숫자를 입력시 byte 단위로 계산하여 출력하는 함수입니다. function formatByteSizeString(bytes, decimals = 2) { if (bytes === 0) { return '0 Byte'; } const k = 1000; const dm = decimals; const sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB']; const i = Math.floor(Math.log(bytes) / Math.log(k)); return `$..

자바스크립트(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 태그와 같이 값을 입력시 emoji를 사용하곤 합니다. 그러나 emoji를 사용하여 글을 작성하여 저장할 때 문제를 발생시키거나, 또는 해당유니코드를 지원하지 않아 깨진문자로 보여지곤 합니다. 이러한 문제를 해결할 수 있는 방법도 있으나, 텍스트값 입력시 emoji문자를 제거하여 emoji를 사용하지 못하도록 처리할 수 있습니다. function removeEmojis (str) { const regex = /(?:[\u2700-\u27bf]|(?:\ud83c[\udde6-\uddff]){2}|[\ud800-\udbff][\udc00-\udfff]|[\u0023-\u0039]\ufe0f?\u20e3|\u3299|\u3297|\u303d|\u3030|\u24c..

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..

개요 프로젝트 개발을 진행하다 보면 데이터를 저장해야 하는 경우가 생깁니다. 이런 경우 브라우저에서 제공하는 LocalStorage와 SessionStorage 두 가지 중 데이터가 지니고 있는 특성에 맞는 것을 선택하여 사용할 수 있습니다. LocalStroage vs SessionStorage 두 저장소는 데이터를 저장한다는 공통점을 가지고 있으나, 데이터의 지속성에 대한 차이점이 있습니다. LocalStorage에 저장된 데이터는 만료 기간이 없으며 브라우저가 닫혀도 데이터는 지속된다는 특징을 가지고 있으나, SessionStorage는 브라우저 종료시 데이터가 모두 사라지게 됩니다. 사용법 localStorage.setItem() key-pair 형태로 데이터를 저장소에 저장합니다. 저장소에 저장..

개발 내용 웹앱 어플리케이션 프로젝트를 진행하며 workbox의 캐시 기능을 이용하여 PWA을 개발하였습니다. 어플리케이션 최초 구동 시 필요한 리소스의 캐시가 완료되면, 재실행시 캐시 된 리소스 파일들을 사용하여 오프라인 상태에서 사용할 수 있도록 개발을 진행하였습니다. 개발 환경 구성 workbox를 사용하기 위해서 workbox-build모듈을 설치 후 service-worker에서 사용될 serviceWorker.js파일을 생성하도록 하였습니다. 리소스 캐시 프로젝트 내에서 캐시 할 리소스를 필수적으로 캐시가 되어야 하는지, 사용자 또는 환경에 따라 캐시가 필요한 리소스로 구분을 지었습니다. 그리고 각 구분에 따라 캐시 하는 내용을 다르게 구성하였습니다. 필수적으로 캐시가 되어야 하는 리소스 해당..

개요 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은 함수를 정의한다는 방식에서는 동일하나, 차이점을 가지고 있기 때문..