Fall in IT.

javascript에서는 함수를 선언하는 방법이 다양합니다. 함수 선언하는 방법에 대해서 간단히 알아보고, 언제 사용되는지 알아보도록 하겠습니다. 함수 선언 종류와 사용법일반적인 방법 function testFuction () { // logic } //실행 testFuction(); // "()"는 함수를 실행시키겠다는 약속된 문법입니다. 만약, testFunction; 이라고 했다면 변수로 인식할 것 입니다. 일반적인 방법2 var testFunction = function() { // logic } //실행 testFunction(); 익명함수: 이름이 없는 함수로, 즉시 실행이 필요할 경우 사용합니다. (function () { //logic })();

간단하게, javascript for문의 종류와 특징에 대해서 정리해보도록 하겠습니다. for문 알아보기기존 for문let array = [1,2,3,]; for(let i = 0; i < array.length; i++) {console.log("value: ", array[i]);} // output: value: 1, value: 2, value: 3 for .. in - 일반 Object의 문자열 키를 순회하기 위해 만들어진 문법입니다. - 배열의 속성들을 순회하기 위한 구문입니다. - 주의. 모든 열거 가능한 프로퍼티에 대해서 순회합니다. (즉, 배열 원소가 아닌 확장 속성도 순회합니다. length와 같은)for (let i in array) {console.log(i);} // output:..

안녕하세요.자바스크립트뿐만 아니라 모든 언어에서 시간 차이를 구하는 함수는 많이 사용됩니다.오늘은 자바스크립트에서 Moment.js를 사용하여 시간차이를 구하는 방법에 대해서 알아보도록 하겠습니다. Moment.js란?기존에 포스팅한 내용이기 때문에 생략합니다. ^^Moment.js 간단 설명 Moment.js를 사용하여 시간차이 구하기 (시간1: 과거시간, 시간2: 현재시간 임을 가정합니다.)Sample 1) - 시간 1, 시간 2 사이의 일(day) 차이 구하기 console.log('일 차이: ', moment.duration(t2.diff(t1)).asDays());Sample 2) - 시간 1, 시간 2 사이의 시간(hour) 차이 구하기 console.log('시간 차이: ', moment.d..

안녕하세요. 오늘은 PWA(Progressive Web App)에 대해서 알아보도록 하겠습니다. PWA는 재배포 하지 않아도 업데이트가 가능하고 즉시 수정이 가능해서 항상 최신상태를 유지할 수 있다는 말을 많이 들었습니다. 또한, 오프라인/온라인 모두 사용이 가능하다는 말에 PWA가 어떤 기술이길래 가능할까 의문이 들어 알아본 내용들을 정리합니다. PWA(Progressive Web App) 란?PWA는 웹의 장점과 앱의 장점을 결합한 환경입니다. 앱과 같이 설치가 필요 없고, 느린 네트워크에서도 빠르게 로드 됩니다. 관련된 푸시 알림을 전송할 수 있고 홈 화면에 아이콘을 만들 수 있으며, 앱과 같이 전체화면으로 로드할 수 있습니다. PWA의 특징프로그레시브 - 어떤 브라우저에서도 똑같이 동작합니다.반응..

안녕하세요. 오늘은 많이 사용되는 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 함수 사용) 모두 즐거운 코딩하세요~

안녕하세요. 오늘은 패딩 영역은 제외하고 백그라운드 색상 입히는 방법에 대해서 알아보도록 하겠습니다. 패딩 영역은 제외하고 백그라운드 색상 입히는 방법간단히 background-clip 속성을 사용하여 해결할 수 있습니다.아래 예제를 참고해주세요. 소스코드background-clip 속성을 사용하지 않았을 경우 background-clip 속성을 사용했을 경우 참조https://stackoverflow.com/questions/5896351/how-to-background-a-div-without-the-padding-area 모두 즐거운 코딩하세요~

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