우리집앞마당

REST 방식으로 URI를 설계할때 기존 get, post 이외에 put, delete 메서드를 추가로 사용하게된다.그런데 form 태그의 method 속성은 get과 post밖에 지원하지 않는다.메서드를 put으로 지정했는데 get으로 날아가길래 왜 그런가 하다가 알게된 사실이다;; 이런식으로 input 태그를 이용해서 put, delete 메서드를 활용할 수 있다.

프로젝트 규모가 커질수록 외부에서 갖다쓰는 라이브러리도 많아지기 마련이다.자바는 메이븐이라는 오픈소스 프로젝트를 이용해 진작에 이런 라이브러리 관리를 하고있었다.xml파일에 라이브러리명과 버전만 적어주면 해당 라이브러리를 자동으로 다운받아 참조를 해주는 형식이다. 프론트쪽은 보통 참조하고자하는 js파일을 다운받아 참조하여 개발을 했는데 nodejs를 필두로 각종 프레임워크들과 라이브러리들이 나오고 또 그것들을 적극 활용하게 됨으로서 프론트쪽도 의존성관리에 애를 먹기 시작했다. 이를위해 자바의 메이븐같은 의존성을 관리해주는 툴이 나왔는데 그것이 bower다. 일단 bower는 nodejs를 이용해 개발됐기때문에 nodejs가 설치되어있어야한다.그리고 npm(node package management)을 이..

자바스크립트의 함수는 자바의 메서드와 다르게 오버로딩이 되지 않는다. 오버로딩이란 동일한 메서드명에 매개변수의 타입이나 개수만 바꿔 동일 명칭의 메서드를 여러개 정의하는것을 말한다. 그런데 이걸 잘 모르는 자바개발자들이 함수를 짤때 함수의 인자 개수를 근거로 오버로딩을 구현한걸 심심찮게 실무에서 접할 수 있다(나도 본적이 있다.). 아마 테스트를 안했거나 대충 한두번 돌려봤는데 에러가 없으니 성공적으로 오버로딩이 됐다고 생각하고 넘어갔으리라. 사실 여태 포스팅한걸 근거로 생각했을때 자바스크립트에서 함수 오버로딩이 지원되지않는다는건 쉽게 추적할 수 있다. 1. 함수는 변수로 취급된다. -동일한 명칭의 변수가 여러개로 선언될 수는 없으니 당연히 오버로딩은 안된다. 2. 모든 변수는 전역 객체(window)의..

프로젝트를 진행하는 와중에 팝업창에서 배열을 반환하고 부모창에서 그 배열을 가지고 값을 세팅하는 화면이 있었는데 기존 소스가 완성되어있는 상태에서 부모창에서 무조건 문자열만 반환이 가능한 상황이 생겼다.기존 소스를 최대한 건드리지 않는 상태로 진행을 해야 서로가 좋은 상황이었기에 배열을 문자열로 변환하고 다시 그 문자열을 배열로 변환하는 함수를 만들어봤다.그리 어려울건 없는 함수몇줄이지만 뭐랄까 처음으로 TDD에 입각한 방법으로 함수를 만들었고, 당장 프로젝트에서는 2차원배열이 끝이지만 기왕 만드는 김에 다차원 배열을 처리하기위해 개인적으로 어렵게 생각하는 재귀적 요소를 사용한게 내심 뿌듯해 블로그에 올리게됐다. 나중에 언제 다시 쓰게될지 모르니 사용방법을 미래의 나에게 전달하자면 첫번째 인자는 배열을,..

앞선 포스팅에서 프로토타입을 살짝 맛봤다. 함수를 정의하게되면 개발자의 의지와는 상관없이 프로토타입이라는 객체가 생성되게되고, 함수를 그냥 메서드 사용하듯 호출할때는 크게 신경쓸필요없지만 생성자로 사용하게될경우엔 해당 함수를 생성자로 생성된 객체가 해당함수의 프로토타입을 바라본다는것까지 포스팅을 했다. 그리고 동일한 생성자로 생성된 각각의 다른 인스턴스들이 모두 한 프로토타입 객체를 바라보기때문에 인스턴스들이 공유하는 자원은 생성자의 프로토타입 객체에 정의하게되면 자바의 static 변수와같이 메모리를 절약할수있다는것까지 알게되었다. 그럼 여기서 본질적인 궁금증을 가져보자. 인스턴스들은 어떤식으로 자신의 생성자의 프로토타입 객체를 바라보게되는것일까? function Undead(){ this.name =..

java script의 단위테스트 라이브러리인 qunit 활용법 test("테스트 설명", function(){ equal(실제값, 기대값, "테스트 설명"); //실제값과 기대값이 동일하면 성공 == 연산자로 비교하기때문에 형변환을 감안해야함. notEqual(); //실제값과 기대값이 다르면 성공 != 연산자로 비교함. strictEqual(); //=== 연산자로 비교. (1, "1", "테스트!"); 일시 테스트는 실패한다. notStricEqual(); //!== 연산자로 비교. ok(boolean, "테스트 설명"); //첫번째 인자가 true 면 성공. deepEqual();/* 참조타입을 값으로 비교하게됨. 예를들어 var obj = { age : 27 }; equal(obj, { age ..

jQuery에서 제공하는 required는 html 태그들의 name속성으로 해당 validate를 체크하는것 같다. 그래서 해당 form 태그안에 name속성이 없는 태그가 있으면 has no name assigned 라는 에러가 떨어진다.그럴때 validate 함수에 전달하는 객체에 ignore : '*:not([name])' 속성을 넣어주면 에러가 발생안함.그런데 이건 매 화면마다 추가해줘야하고 공통적인 부분에서 처리해주는게 있는거같은데 그건 좀 더 찾아봐야겠다. $("#frm_main").validate({ignore : '*:not([name])',rules : {user_name : {required : true}} });

자바스크립트는 크게 함수와 객체로 구성되어있다고 보면 된다. 사실 그게 전부다. 그런데 함수와 객체로 완벽히 나뉘어져 있는게 아니고 또 함수는 객체고 객체는 함수다. 이때부터 머리가 좀 복잡해진다. 일단 함수부터 보자. 우리가 아무런 생각없이 함수를 정의하게되면 함수의 메모리 모델링은 이런식으로 이루어진다. 코드실행영역, 지역변수영역, 함수객체영역, 프로토타입영역 일단 여기에 나오는 이 용어들은 공식적인건 아니고 그냥 내가 갖다쓰는것이므로 이 용어들까지 알필요는 없다. 코드실행영역과 지역변수영역은 여태 우리가 생각없이 쓰던 그대로 이해하면 된다. 코드실행영역은 변수 선언이 아닌 일반적 코드가 실행되는 부분이고 지역변수영역은 말그대로 지역변수들이 저장되는 영역이다. 그럼 함수객체영역은? 일단 함수객체라는 ..

자바스크립트로 코딩을 한다거나 자바스크립트를 공부하는 사람들이라면 누구나 한번쯤 원인모를 에러(사실 지극히 정상인데 본인이 그렇게 느끼게 됨)에 몇시간씩 낭비하는 경험이 있을것이다. 바로 자바스크립트의 클로저(closure)때문이다. 처음 클로저라는 단어를 들으면 아마 closure 보다는 closer를 먼저 떠올리지 않을까 한다. 하지만 closer 가 아니라 closure이기때문에 굳이 제목에서부터 영어를 사용하게됐다(은근히 뜻이 비슷해서 서로 다른 단어를 연상하면서도 말이 통하는 경우가있는건 함정). 클로저에 대한 정의는 그 영단어의 뜻을 알아보는것이 가장 빠르다. 가까운 포털을 이용해보자. 클로저라는 단어에 대한 뜻을 살펴보자 '폐쇄' 이다. 그럼 무엇이 폐쇄됐다는 걸까? 잠시 함수에 대해 생각해..

한동안 공부할것도 많고 회사일도 바빠져서 자바스크립트 포스팅을 못했다. 오랜만에 하려니 순서도 기억이 안나고 어디까지했는지도 잘 모르겠어서 클로저에 대한 포스팅을 하고자 쭉쭉 글을 써내려가고있었는데 생각해보니 변수스코프에 대한 얘기를 한적이 없다는걸 깨달았다. 변수스코프는 사실 어떻게보면 굉장히 당연한거고 어렵지않은 개념이지만 클로저를 이해하기위해서는 필수적으로 이해를 해야하는 부분이고, 간단한 소스에서는 이걸 뭘 따로 이해까지해야하나 라고 생각할 수도있지만 앞서말한 클로저 등을 접하게됐을땐 꽤나 복잡해진다. 다음의 소스를 보자. var global = "hello"; function getGlobal1(){ return global; } function getGlobal2(global){ return ..