FRONT-END (23) 썸네일형 리스트형 자바스크립트 디자인 패턴 #9. Callback Function 패턴 Callback Function 패턴자바스크립트는 함수 기반으로 동작하기 때문에 이벤트 기반으로 동작하는 부분들은 콜백함수를 통해서 다양하게 동작하고 있다.특히 자바스크립트는 변수나 인자로 함수를 쉽게 설정하과 전달할 수 있어서 더 쉽게 콜백함수를 활용할 수 있다.대표적으로 이벤트 핸들러이지만, 일반적으로 자바스크립트 처리 로직 주엥서도 이러한 콜백 패턴을 이용해서 해당 함수의 호출이 끝나고 난 뒤에 처리할 수 있도록 활용할 수 있다.콜백함수 패턴은 매우 간단하지만, 처리가 많은 자바스크립트에서 다양하게 응용할 수 있다.특히 하나의 공통 라이브러리를 이용할 때 콜백 함수를 넘겨주는 것은 라이브러리의 확장성을 높일 수 있다. ajax()함수를 공통으로 사용하기 위해 콜백 패턴을 사용하였다.이 함수는 XML.. 자바스크립트 디자인 패턴 #8. Self-invoking constructor 패턴 Self-invoking constructor 패턴자바스크립트에서 객체지향으로 프로그래밍할 때 일반적으로 function을 생성자로 하여 new 키워드로 클래스와 객체를 만들곤한다.그런데 이 생성자 자체가 function이라서 가끔 다른 라이브러리나 모듈의 클래스를 가져다가 사용하려고 하면 new 키워드를 실수로 생략하는 경우도 있다.자바스크립트에서 new 키워드를 생략하더라도 생성자 함수를 일반함수인 것처럼 호출하고 실행하므로 오류는 발생하지 않고 오동작만 하게 된다.이러한 경우 작은 오타라서 소스가 많아지면 오류를 찾아내는 것이 힘들 수 있다.Self-invoking constructor 패턴은 이러한 실수를 고려하여 생성자를 그냥 함수로 호출할 때 스스로 new를 붙여서 다시 호출하는 패턴이다. E.. 자바스크립트 디자인 패턴 #7. Memoization 패턴 메모이제이션(memoization) 패턴자바스크립트의 특징으로 인하여 쉽게 구현하고 활요할 수 있다.패턴의 이름대로 '메모'를 하는 것이 특징인데, 이 메모를 하는 대상은 바로 함수 또는 객체이다.자바스크립트의 객체들은 쉽게 새로운 속성을 추가하고 수정하고 접근할 수 있다는 점에서 이 패턴을 간단하게 활용할 수 있다. 이 패턴의 활용 용도는 일반적인 프로그래밍 언에서 캐시를 사용하는 것 처럼 사용한다고 생각하면된다.특히 컴퓨팅 자원이 소모되거나 처리 시간이 긴 산술식에 대하여 캐시를 해두는 식으로 활용하면 좋다.특정 아이템을 검색하려고 할 때 검색결과를 ID기반으로 캐시 처리하는 메모이제이션 패턴이다. Search 메모이제이션 패턴의 메모를 하는 대상은 변수가 될수도 있고 함수가 될수도 있다.이러한 특징.. 자바스크립트 디자인 패턴 #6. Self-defining function 패턴 Self-defining function 패턴Self-defining function은 자바스크립트의 변수에 함수를 쉽게 재정의하고 덮어쓸수 있는 장점에서 나온 디자인 패턴이다.이 패턴은 말 그대로 자신을 다시 정의하는 함수 패턴을 말한ㄷ.자바스크립트로 개발하다보면 특정 함수를 호출하기 전에 초기화 작업을 수행해야하는 때가 많다. 이럴 때 최초 즉시 호출함수를 이용해서 Init-time branching 패턴 등으로 초기화 하는 방법도 있지만, 자주 호출되지 않거나 웹페이지 상에서 한번 호출되지 않는 함수는 초기화 단계를 무조건 실행하도록 하는 것은 자원을 추가로 소모하게 된다. 이럴 때 Self-defining function 패턴을 사용하면 초기화 단계들의 컴퓨팅 자원 소모를 분산할 수 있다.초기화 .. 자바스크립트 디자인 패턴 #5. Init-time branching 패턴 Init-time branching 패턴Init-time branching 패턴은 자바스크립트에서 매우 유용한 패턴 중 하나이다.이름 그대로 초기화 단계에서 분기하여 같은 함수를 환경에 따라 다르게 정의하는 것을 의미한다.보통 웹페이지가 처음 열릴 때 실행된다고 해서 Init-branching 패턴이라고도 하며, 페이지가 로드될때 실행되기 때문에 Load-branching 패턴이라고도 한다. 이 패턴의 유용한 이유는 자바스크립트가 다양한 브라우저 환경에서 제공되어야 하기 때문이다.최근에는 웹 표준이 확립되어 대부분 브라우저에서 자바스크립트에 대한 거의 모든 함수를 지원하지만, 웹표준이 빠르게 확립되기 전이나 확립되는 과정에서는 그렇지 않았다.따라서 주요 기능에 대해서 이러한 호환성을 보장해줄 때 사용하면.. 자바스크립트 디자인 패턴 #4. Decorator 패턴 Decorator 패턴데커레이터 패턴호출 대상이 되는 객체에 추가 기능들을 자유롭게 추가하는 패턴이다. 데커레이터 패턴을 유용하게 이용할 수 있는 곳은 검증도구이다.인적사항을 입력하는 양식들은 일반적으로 입력값마다 검증하는 로직이 필욯다.이런 값을 서버에서 검증해도 되지만, 서버의 트래픽을 줄이기 위해 웹페이지에서 각각의 값을 자바스크립트로 사전 검증하는 것이 일반적이다.이럴 때 각각의 입력값을 검증하는 방법이 다르므로 많은 웹 페이지는 폼을 제출하는 이벤트에서 일일이 검증하는 경우가 많다. 데커레이터 패턴을 이용하면 웹페이지마다 일일이 코딩하는 것이 아니라 검증 도구를 모듈화해서 사용할 수 있다. First Name: Last Name: Age: Gender: MaleFemale 요소는 검증하기 위한 .. NPM NPM이란 무엇입니까?NPM은 Node.js 패키지의 패키지 관리자이거나 원하는 경우 모듈입니다.www.npmjs.com 은 무료로 다운로드하여 사용할 수있는 무료 패키지를 제공합니다.Node.js를 설치할 때 NPM 프로그램이 컴퓨터에 설치됩니다. npm 명령어 npm init package.json 생성 npm install 패키지설치옵션--save or -S--save-dev or -D dependencise-g 글로벌패키지에 추가 npm update설치한 패키지를 업데이트 npm dedupenpm의 중복된 패키지를 정리할때 npm docs패키지에 대한 설명 조회npm root node_modules의 위치 npm outdated오래된 패키지가 있는지 알려준다. npm ls [패키지명]패키지를 조회.. 자바스크립트 디자인 패턴 #3. Proxy 패턴 프락시 패턴프락시(Proxy) 패턴은 특히 자바스크립트에서 구현하기 쉬운 패턴이다.자바스크립트에서는 함수도 하나의 객체처럼 정의해서 사용할 수 있고, 객체의 속성을 문자열로 접근할 수 있는 특징이 있기 때문이다.프락시 패턴은 말 그대로 하나의 객체가 프락시 역할을 수행하여 상황에 따라 다른 객체에 접근하게 해주거나 다른 함수를 호출하게 해주는 패턴이다. 일반적으로 프락시란 클라이언트와 서버 연동에서 클라이언트가 바로 서버에 접근하는 것이 아니라프락시를 통해서 간접적으로 접근할 수 있게 해준다.프락시는 내부적으로 다양한 기능을 제공하는 역할을 수행한다. 프락시는 클라이언트와 서버 사이에서 중간자 역할을 한다. 프락시의 역할 중 대표적인 것은 클라이언트가 서버에 직접 접근하지 못하도록, 한 단계 가상화 또는.. 이전 1 2 3 다음