우리집앞마당

요즘 You don't know JS 라는 책을 보고있는데 배열 생성 방식에 대한 부분에 지면을 꽤나 할애하고있어 해당 부분에 대한 정리와 내 생각을 포스팅하고자한다. 1. 배열생성자바스크립트에서 배열을 생성하는 방식은 2가지가 있다. 여타 객체를 생성하듯 생성자를 사용할 수도 있고 언어차원에서 제공하는 리터럴 방식을 사용할 수도 있다. 보통은 타이핑 양도 적고, 가독성에서도 우월하고 성능에서까지 좋은 리터럴 방식을 권장하고, 사용한다. 개인적으로 리터럴 표현이 아닌 생성자를 사용해야할 경우는 아무리 생각해도 떠오르지않는다. var arr1 = []; var arr2 = new Array(); IDE 마저도 리터럴로 바꾸라고 한다. 2. 배열 생성자이미 리터럴의 우수함때문에 생성자를 사용할 이유가 없지만..

1. JSON.stringify(), JSON.parse()자바스크립트 객체를 JSON화 하는 방법에 대해 알아보자. 가끔 자바스크립트 객체와 JSON의 차이를 헷갈려하는 분들을 볼 수 있는데 JSON(JavaScript Object Notation)은 자바스크립트의 리터럴 표현식을 적극적으로 활용해 간단한 포맷으로 데이터를 구분할 수 있는 문자열 포맷일뿐 크게 대단한게 아니다. POJO(Plan Old Java Object) 처럼 용어를 참 잘 지은것같다. JSON이 자바스크립트 문법을 기반으로 하고있기때문에 JSON 형태로 변경하는건 어렵지않다. 더군다나 최근의 브라우저들은 전부 내장 객체로 JSON변환을 지원한다. 내장객체명은 JSON이다. var target = { age: 29, name: "L..

요즘 테스트와 nodejs에 관심이 많아지면서 두 개를 섞은 nodejs에서 테스트하는것에 대해 포스팅을 해보고자한다. 아주 간단한 내용에 대해 나름 자세하게 포스팅을 할 예정이다. 이런식으로 작성하는 이유는 이런 포스팅을 내가 찾지못해서 꽤 삽질을 했기때문이다.nodejs에 대해서는 이해도가 충분치않은 상태이기때문에 중간 설명에 잘못된 설명이 있을수 있다. 일단 nodejs가 설치되어있어야한다. https://nodejs.org/ko/nodejs를 설치했으면 테스트 예제를 작성할 프로젝트를 생성하자. 나는 test-environment 라는 이름으로 생성했다. 생성한 프로젝트로 들어와서 npm init 커맨드로 node 프로젝트임을 초기화하면 된다. mkdir test-environment && cd ..

정규표현식은 자바스크립트 외에도 수많은 언어에서 유용하게 활용할 수 있는 기술이다. 문자를 파싱할 일이 생겨서 각종 반복문, 분기문을 사용해서 힘들게 짜놓은걸 정규식 고수가 와서 한줄로 끝내버리면 그렇게 허탈할 수가 없다. 이번 포스팅에서는 자바스크립트에서 좀 더 다양한 정규표현식 활용법을 알아보자. var phoneNumber = "010-1234-1234"; 정규 표현식을 가장 흔하게 사용하는 때가 휴대전화번호, 이메일 등 양식을 맞출때가 아닐까싶다. -없이 입력한번호에 -를 붙인다거나, -를 붙여 입력한 번호의 -를 지운다거나 할것이다. 예제의 번호에서 -를 지워보자. var phoneNumber = "010-1234-1234"; var pattern = /(\d{3})-(\d{3,4})-(\d{4..

얼마전 ES5 Array 메서드에 관한 포스팅을 올렸다.(http://multifrontgarden.tistory.com/176)유용한 API들이 많이 추가됐는데 Array만 공부하는것보다 한번 훑어보는게 좋을것같아 추가 포스팅을 하게되었다. 사실 난 태생이 자바개발자라... ES5를 완벽하게 파해친다기보다는 알고있으면 유용하게 쓸것 같다고 매우 주관적으로 판단되는 추가사항만 들고왔다. 1. Object1-1. Object.create자바스크립트에서 상속을 이용하기위해서는 생성자 함수를 만든 뒤 프로토타입 체이닝을 이용해야한다. var Human = function(name, age){ this.name = name; this.age = age; }; Human.prototype.introduce = f..

자바와 자바스크립트의 관계는 햄과 햄버거, 인도와 인도네시아, 사자와 바다사자 같은 존재라 처음 접하는 사람들은 두 언어가 비슷할거란 기대를 하게되지만, 일부 문법외엔 완전히 다른 언어라는 사실때문에 멘붕에 빠지게된다. 하지만 오늘 포스팅할 내용은 그래도 비슷한 문법덕을 톡톡히 볼 수 있는 내용이니 그래도 좀 가볍게 볼 수 있을 것 같다. 1. Array in JavaScriptArray API에 들어가기전에 간략하게 JavaScript의 Array에 대해서 알아보고 가자. Java의 배열은 물리적인 메모리를 순차적으로 할당하게된다. 동적인 크기의 변경은 허용되지 않으며 물리적으로 순차적 할당을 하기때문에 인덱스로 값을 찾아가는 랜덤 액세스(Random Access) 방식에서 탁월한 성능을 보장한다. 다..

자바스크립트는 배열과 객체의 개념이 모호하다. 정확히 표현하자면 배열도 객체의 하나이긴하지만 배열이 아님에도 배열인척하는 객체들이 충분히 존재하기때문에 헷갈리는 경우가 존재한다. 대표적인게 arguments 객체이다. var test = function(){ for(var i = 0, size = arguments.length; i < size; i++){ console.log(arguments[i]); } }; test("hello", "world"); 배열이다. 그냥 배열이다. 반복문 자체도 전형적인 배열 루프다. console.log(arguments instanceof Array); 하지만 Array의 인스턴스는 아니라고한다. console.log(Array.isArray(arguments)); ..

1. arguments 객체 자바스크립트는 매우 유연한 언어이다. 얼마나 유연하냐면 언어차원에서 제공하는 객체들의 속성까지 변경할 수 있다. 이 코드를 보자. var test = function(arg){ arguments = []; }; test("hello"); 결과는 직접 확인해보자. 브라우저 개발자도구 열고 복붙하면 확인할 수 있다. arguments는 함수의 인자들을 관리하는 자바스크립트 엔진이 제공하는 기본적인 객체다. 일반적으로 개발할때 저걸 수정할일은 없지만(그럴일이 있다하더라도 arguments객체를 수정하는건 권장하지않는다.) 수정이 된다. 2. 생성자와 함수 또한 자바스크립트는 생성자와 함수의 역할도 함수가 혼자 다한다.var Cons = function(name, age){ this..

어찌보면 되게 당연한건데 기본이 부족해서 내가 실수한걸수도있지만..여튼 하나의 이슈를 해결하고 그에대한 정리를 하려한다. javascript 코드를 짜다보면 일정시간 이후에 실행되었으면..하는 코드가 존재하게된다.가장 먼저 떠오르는건 setTimeout() 함수다.setTimeout(function(){ // 1초 후 작동해야할 코드 alert("hello world"); }, 1000); setTimeout()은 분명 유용한 함수이지만 가끔 의도하는것에 충족하지 못하는 경우가 존재한다.해당 코드가 1초뒤에 실행되길 바란다면 setTimeout() 함수가 제격이지만 스레드 자체가 1초 동안 블록킹 되기를 바랄땐 사용할만한 함수가 되지 못한다.setTimeout()은 비동기 이벤트로 실행되는 함수로서 se..

angularJS에서 필터를 만드는법을 알아보자. 크게 어려운건 없다. angular.module("dateFilter", []) .filter("date", function () { return function (date) { return $.formatDateTime("yy.mm.dd", new Date(date)); } }) .filter("time", function () { return function (time) { return $.formatDateTime("hh:ii:ss", new Date(time)); } });요렇게 필터를 정의해주고 사용하는 부분에서는 이렇게 사용하면 된다.| 좌측에있는 값이 인자로 전달되고, 그 반환값이 노출되게된다. {{round.productDate | date}}