Dev's

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

정규식을 이용하여 문자열이 MacAddress 형식에 맞는지 체크하는 기능을 가진 함수입니다. function checkValidMacAddress(addr) { const regx = /^([0-9A-F]{2}[:-]){5}([0-9A-F]{2})$/; return regx.test(addr); } checkValidMacAddress('72:9D:F3:8B:2B:71'); // true checkValidMacAddress('72:9D:F3:8B:2B'); // false checkValidMacAddress('macaddress'); // false참고자료 https://stackoverflow.com/questions/12010552/jquery-java..

개요 배열(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 = ..

개요 CRA(Create React App)를 통하여 생성된 프로젝트는 서비스 워커(serviceWorker) 기능을 제공합니다. CRA에서 기본적으로 제공되는 service-worker.js파일은 아래와 같습니다. CRA에서 서비스워커를 재구성하는 방법은 여러 가지 방법이 있겠지만 workbox를 사용하여 서비스워커를 재구성하는 방법을 설명하고자 합니다. 환경 구성 프로젝트 생성 CRA를 사용하여 프로젝트를 생성합니다. npx create-react-app rca-workbox-customize-deploy 모듈 설치 workbox-build, npm-run-all 모듈을 설치합니다. npm install --save-dev workbox-build npm-run-all workbox-build 모듈 ..

개요 CSS3에서는 transition, animate 속성을 부여하여 애니메이션 효과를 줄 수 있습니다. 이벤트 리스너에 이벤트를 등록함으로써 transition, animate 애니메이션 효과가 완료된 후 이벤트를 호출할 수 있습니다. TransitionEnd transitionend는 transition 효과가 완료된 후 이벤트를 발생시킵니다. 사용법 이벤트 리스너에 transitionend를 등록하여 사용할 수 있습니다. const dom = document.getElementById('dom'); dom.addEventListener('transitionend', function() { console.debug('transitoinend'); }); 각 브라우저별 prefix를 붙여서 사용할 수..

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