Dev's

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

개요 자바스크립트(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..

개요 window.location은 사용자가 페이지에 대한 정보를 전달해주며, 페이지 이동과 같은 역할을 수행합니다. 또한 window없이 location만으로도 사용할 수 있습니다. http://localhost:3000/my-watch?activeMenu=0#4 location.href; // http://localhost:3000/my-watch?activeMenu=0#4 location.protocol; // http: location.host; // localhost:3000 location.hostname; // localhost location.port; // 3000 location.pathname; // /my-watch location.search; // ?activeMenu=0 loc..

개요 구조 분해 할당(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 기준으로 할당..