Fall in IT.

안녕하세요. 오늘은 많이 사용되는 javascript 라이브러리 lodash에 대해서 간단하게 알아보고, 자주 사용되는 기능 몇 가지만 알아보도록 하겠습니다. lodash란?lodash는 자바스크립트 유틸리티 라이브러리 입니다.유틸리티 라이브러리로 array, collection, date, number, object 등이 있으며, 데이터를 쉽게 다룰 수 있도록 도와줍니다. (예를들면, 배열 안에 중복 값을 제거하기 / object 배열 안에 특정 값만 추출하기 등..)특히, 자바스크립트에서 배열 안의 객체들의 값을 핸들링할때 유용합니다. 자주 사용되는 기능 filter - 배열 안에 요소들 중, 특정 값만 filter하고 싶을때 사용합니다. var users = [ { 'user': 'barney', ..

안녕하세요. 오늘은 Javascript에서 사용되는 "use strict" 란 무엇인지 알아보도록 하겠습니다. use strict란?Strict Mode의 선언방식 입니다.이 문구는 ES5부터 적용되는 키워드로, 안전한 코딩을 위한 하나의 가이드라인 입니다. Strict Mode란?Strict Mode는 코드에 더 나은 오류 검사를 적용하는 방법입니다.Strict Mode를 사용하면, 예를 들어 암시적으로 선언한 변수를 사용하거나 읽기 전용 속성에 값을 할당하거나 확장할 수 없는 개체에 속성을 추가할 수 없습니다.Strict Mode는 ECMAScript 5 버전에 있는 새로운 기능으로써, 당신의 프로그램 또는 함수를 엄격한 운용 콘텍스트 안에서 실행시킬 수 있게끔 합니다. 이 엄격한 콘텍스트는 몇가지 ..

안녕하세요.오늘은 타입스크립트(typescript)에서 Key/Value 쌍으로 구성된 객체에 Key/Value 아이템을 추가하는 방법에 대해서 알아보겠습니다. 자바스크립트 예제 코드var obj = { id: 1, name: '홍길동' }해당 객체에 age에 대한 정보도 추가하고 싶을 경우..obj.age = 28로 간단하게 처리가 가능합니다. 타입스크립트 예제 코드let obj = { id: 1, name: '홍길동' }위와 마찬가지로 age에 대한 정보를 추가하고 싶을 경우.. obj.age = 28; // 에러발생 (에러가 발생하는 이유는, typescript는 컴파일 단계에서 obj에 property로 age가 존재하는지 체크하기 때문에 에러가 발생합니다.)해결방법간단하게 obj 객체에 타입을 ..

안녕하세요.오늘은 자바스크립트(Javascript) 문자열에서 모든 공백을 제거하는 방법에 대해서 알아보겠습니다. 테스트도구Chrome browser의 Console을 사용하였습니다. 1. 문자열 모든 공백 제거 방법 2. 문자열 앞 공백 제거 방법 3. 문자열 뒤 공백 제거 방법 4. 문자열 앞/뒤 공백 제거 방법 (trim 함수 사용) 모두 즐거운 코딩하세요~

안녕하세요. 오늘은 간단하게 Javascript 단위 테스트 환경 구축하는 방법에 대해서 알아보도록 하겠습니다. 목적Javascript 단위 테스트(unit test) 환경을 구축합니다.Front-End 테스트를 실행할 수 있는 환경을 간단하고, 빠르게 구축합니다.테스트 툴에 대한 세부적인 설정은 생략합니다. 요구사항보편적이고 많이 사용되는 Front -End 단위 테스트 툴을 사용합니다. 보편적이고 많이 사용되는 코드로 예제를 작성합니다. 구축환경맥북프로에 로컬 테스트 환경을 구축합니다.자스민 + 카르마 조합을 사용합니다. (카르마가 실행되면 카르마 서버가 실행되고 동기화된 브라우저가 열립니다. 이때 카르마는 서버로서 테스팅 환경을 제공하고 카르마 위에서 자스민 테스팅 프레임워크가 동작합니다. ) 용어..

안녕하세요. 오늘은 자바스크립트에서 날짜 차이를 계산하는 방법에 대해서 알아보겠습니다. 날짜 시간차이 구하는 방법 날짜 일 차이 구하는 방법 결과 모두 즐거운 코딩하세요~

안녕하세요. 오늘은 자바스크립트에서 부분 문자열을 비교하는 방법에 대해서 알아보겠습니다. 부분 문자열 비교하는 법indexOf 를 사용합니다. 결과값이 -1이 아닐 경우 찾는 문자열이 존재합니다.indexOf는 str2가 일치하는 문자열의 str의 시작 index를 리턴합니다.ex) 부분문자열이 존재할 경우 var str = "cordova-diagnostic-plugin"; var str2 = "cordova"; console.log(str.indexOf(str2)); // 결과값 0 ex2) 부분문자열이 존재하지 않을 경우 var str = "cordova-diagnostic-plugin"; var str2 = "ppppp"; console.log(str.indexOf(str2)); // 결과값 -1..

안녕하세요. 오늘은 Typescript의 기초 문법들을 알아보도록 하겠습니다. ES6(ECMAScript6)란?ECMAScript는 자바스크립트 표준 단체인 ECMA가 제정하는 자바스크립트 표준이다.ECMAScript는 브라우저에 사용되는 자바스크립트 부분만 표준으로 정의한다. Typescript란?Javascript superset 이며, 간단히 타입이 있는 자바스크립트라고 말할 수 있습니다. Typescript 설치 (npm(node package module)이 설치되어 있다는 가정하에 설명합니다. Nodejs 설치시 함께 설치됩니다.)$ npm install -g typescript설치한 typescript 버전 확인 $ tsc -v ts파일을 js파일로 컴파일tsc 파일명.ts $ tsc mai..

안녕하세요. 오늘은 자바스크립트에서 Date 포맷 변경할때 유용한 Moment.js의 사용법에 대해서 알아보겠습니다. (당연히 nodejs에서도 사용가능합니다. ^^) Moment.js란? 자바스크립트에서는 날짜를 표시할때 Date 객체를 사용합니다. 이때, 특정 형태의 날짜를 나타내기 위해선 직접 함수를 개발해야합니다.또, 브라우저에 따라 시간대가 다를 경우 이를 고려하여 개발해야하는 번거러움이 있습니다.Moment.js를 사용하면 이 두가지 문제를 해결할 수 있습니다. Moment.js 공식 홈페이지https://momentjs.com/ Moment.js 설치홈페이지에서 직접 다운받을 수 있으며, npm과 같은 패키지매니저를 사용하여 설치 할 수 있습니다. Moment.js 사용법다운받은 js파일은 ..

안녕하세요. 오늘은 자바스크립트에서 비동기 프로그래밍을 더욱 편리하게 할 수 있도록 도와주는 Promise 기술에 대해서 알아보겠습니다. 비동기 프로그래밍이란?비동기 프로그래밍이란, 쉽게 예를들어보면 3가지 일을 해야한다고 할 경우에, 한가지 일을 하면서 다른일도 동시에 하는 것을 의미합니다. (동시처리)동기적 프로그래밍이란 그 반대로, 한가지일을 차례차례 하는 것을 의미합니다. (1번 일 먼저 처리 > 2번 일 처리 > 3번 일을 처리)생활코딩 영상에 쉽고, 간단하게 설명되어 있습니다. ^^ - https://opentutorials.org/course/2136/11884 Promise란?Promise는 자바스크립트에서 콜백 로직을 편하게 사용할 수 있도록, 간편화한 것을 말합니다. - 전통적인 콜백 ..