컴퓨터 공부/자바스크립트 7

Vert.x 특징 및 Node.js와의 성능 비교

Vert.x 특징 및 Node.js와의 성능비교 node.js가 단일 스레드라는 점 그리고 서버가 자꾸 죽는다는 단점을 대체할 수 있는 유사한 서버 프레임워크가 없을까 하다가 Vert.x 서버프레임워크를 알게 되었다. 그렇다고 해서 node.js를 보완한 프레임워크가 Vert,x 라는 것은 아니다. 자세한 내용은 특징과 함께 둘을 비교해가며 이해해 가보자. A. Vert.x 특징 이벤트 기반 비동기 프로그래밍 모델 플랫폼이 최근 급부상하며 그 가치를 높여가고 있다. Vert.x와 유사한 개발 모델을 제공하는 유명한 Node,js를 언급하지 않을 수 없다. Node.js는 Ryan Dahl에 의해 2009년부터 시작된 프로젝트로 Vert.x보다 앞선 시기에 많은 관심과 이슈를 불러일으켰고 그 결과 오늘날 ..

[앵귤러] 앵귤러(Angular)js 수명주기

저번 글에서는 간단하게 예제를 중심으로 개념을 설명해보았다. 이번엔 그렇다면 과면 앵귤러 js는 어떤 흐름으로 동작되는지를 살펴보도록 하겠다. 1. 앵귤러JS 수명주기 ㄱ. 부트스트랩(bootstrap) 단계 앵귤러 js 수명주기의 첫번째 단계는 부트 스트랩 단계이다. 앵귤러 js자바스크립트 라이브러리가 브라우저에 로딩될 때 발생한다. 앵귤러 js는 자신만의 컴포넌트들을 초기화하고 난 이후에, ng-app지시자와 관련된 다른 모듈을 초기화 한다. 모듈이 로딩되면 의존성이 사용하는 모듈로 주입되고 모듈내에서는 코드동작이 가능하다. 웹 페이지 내에서 앵귤러 ㄴ. 컴파일 단계 앵귤러js 수명주기의 두번째 단계는 HTML 컴파일 단계다. 웹페이지가 로딩됐을 때 DOM의 정적 폼이 브라우저에 로딩된다. 컴파일 단..

[앵귤러] 앵귤러(Angular) JS 개념 및 예제 1

앵귤러(Angular) JS 입문 jQuery에 이어 요즘 2013년도부터 이슈인 앵귤러(Angular)JS에 대하여 공부해보자 (공부한 앵귤러JS는 버전 1.X기준으로 작성되었다. 2.X부터 많은 변화를 겪는다고 들었는데 그 부분은 나중에 추가적으로 덧붙이도록 할 예정이다.) 먼저 앵귤러(Angular)JS란 구글이 개발한 클라이언트 측 프레임워크이다. 압축된 제이쿼리(jQuery)라이브러리와 마찬가지로 자바스크립트로 작성된 프레이워크다. 본질적으로 앵귤러 JS를 사용하는 이유는 잘 설계된 좋은 구조의 웹 페이지와 애플리케이션을 구현할 수 있는 프레임워크를 제공하자는 것이 앵귤러 JS의 기원이다. 앵귤러 JS와 유사한 자바스크립트 프레임워크로는 BackBond.js, Ember. Meteor 등과 있으..

[jquery] hover 기능에 대하여 알아보자

[jQuery] hover() 오늘은 jquery기능 중 hover에 대하여 정리해보고자 한다. 또한, mouseover, mouseout을 직접 사용했을 경우와 hover을 직접사용했었을 경우에 대하여 구분해보자. 1. hover()란 마우스 포인터가 mouseover와 mouseout시 두개의 핸들러를 bind한다. 1.parameter : over:(Function) : 마우스 커서가 대상 element의 위로 올라간 경우 실행할 콜백함수 out:(Function) : 마우서 커서가 대상 element의 밖으로 나온 경우 실행할 콜백함수 2. return : jQuery 3. description: 마우스 커서가 대상 element위로 올라갔을 경우 1번째 위치에 구현된 콜백함수(0ver)를 실행하..

[jquery] jquery manipulation [3] (요소를 추가하는메소드)

오늘은 jquery 조작방식에 대한 메서드를 배워보겠다. 먼저 . jquery manipulation(조작)을 사용하는 이유는 무엇일까? 요소에 값을 지정한다거나, 특정 요소의 값을 읽어온다거나 하는 작업을 포함해서, 동적으로 요소자체를 생성 , 삭제, 복사, 제거하는 기능을 의미한다. 현재 jquery에서 제공하는 조작과 관련해서 내가 생각한 주관적인 분류를 나누어보자면 1. 요소를 추가하는 메서드 ( After(), addClass(), append() , appendTo(), prepend(), prependTo(), before() , insertAfter, insertBefore, ) 2.. 요소를 복사하는 메서드 ( clone() ) 3. 요소를 삭제하는 메서드( remove(), remove..

[jquery] jquery selectors [2] (:not, :hidden,[attribute=value], :selected, eq(index) )

jquery selector 두번째 글이다. 오늘은 :not , eq, :hidden, :input, :checked, :selected 에 대해서 정리해보도록 하겠다. :not (selector) 1.parameter : selector 대상 element에서 제외시킬 selector 2,return : arrayt 3.description : 일치하는 element 들 중 not에 해당되는 element를 제외한 element를 리턴한다. 4. 예시 ::hidden(selector) 1,return : arrayt 2.description : input element의 type속성 값이 hidden으로 되어이쓴 모든 element를 가르킨다. 또한 display가 none으로 되어있는 경우도 리턴할 ..

[jquery] jquery selectors [1] ( $("") ,$("#"), $(".") )

HTML 문서 안에는 다양한 엘리먼트들이 포함되어 있는데, 이를 컨트롤하기란 결코 간단한 일이 아니다. 일반적으로 자바스크립트에서 element를 얻기 위해 많이 쓰이는 방법은 document.getElementById("엘리먼트 ID 속성 값") 함수를 사용하면 되지만, 간소화된 jquery를 사용하는 것이 더 가독성도 좋고 유용하다. 그렇기 때문에 오늘은 jquery selector에 대해 배워보도록 하자 . $("") 1. parameters element ( string ) : 검색하고자 하는 Dom 태그명 2. return array * document.getElementById과 $("")의 차이점 자바스크립트 사용시 많이 쓰이는 getElementById()는 retrun형이 object를 ..