FRONT-END (23) 썸네일형 리스트형 자바스크립트 객체와 클래스 객체와 클래스 javascript에는 객체를 만드는 여러가지 방법 // Create a user with object literal var user = { name: 'Sunny', interests: ['Traveling', 'Swimming'], greeting: function () { console.log('Hi, I\'m ' + this.name + '.'); } } user.greeting();// Hi, I'm Sunny.// Create a constructor function function User (name, interests) { this.name = name; this.interests = int.. 자바스크립트 TDD(Jasmine 단위 테스트) 자바스크립트 TDD jasmine 라이브러리 자바스크립트와 CSS파일을 참조하기 위한 단순한 HTML 파일을 만든다. TestFrameworks_01.jsfunction createReservation(passenger, flight){ return { passengerInfo : passenger, flightInfo : flight };} TestFrameworks_01_tests.jsdescribe('createReservation(passenger, flight)', function () { it("주어진 passenger를 passengerInfo 프로퍼티에 할당한다.", function() { var testPassenger = { firstName : '윤지', lastName : '김' }.. 자바스크립트 표준 #2 템플릿 문자열 표현식기존에 없엇던 완전히 새로운 기능 중 하나가 바로 템플릿 문자열 표현식이다.기존의 작은 따옴표('), 큰따옴표(")로 여닫는 문자열 표현식이 아닌 역따옴표(`)로 여닫는 것을 '템플릿 문자열 표현식'이라고 한다.기존에는 문자열 중간중간 다른 변수를 넣어야 할때 문자열을 합치는 등의 작업이 필요했지만, 템플릿 문자열을 이용하면 간단하게 하게 해결 Name: change 이벤트 핸들러를 통해서 별도의 태그에 인사말을 보여준다. 역따옴표의 변수 설정은 ${} 안에 이루어지면 여기에는 일반변수뿐만 아니라 함수호출이나 계산식도 넣을 수 있다.${inputName.value.toUpperCase()} 코드로 대문자로 변경한다. 템플릿 문자열의 특징은 동적 변수 문자열 할당뿐아니라 여러 줄 문자열.. 자바스크립트 표준 #1 자바스크립트 표준ECMAScript 6 표준ECMAScript 5가 2009년에 정의되면서 자바스크립트의 활용이 다양해지기 시작이때 부터 기존 자바스크립트가 가지고 있던 문제점들이 지적되고, 자바스크립트의 언어적 한계를 개선하여 더 다양한 분야에서 활용하고자 하는 움직임이 있었다.그 결과 2009년부터 ECMAScript 6의 준비 작업을 시작하여 2015년 6월에 발표되었다.ECMAScript 6(ES6)은 ECMAScript 2015라고도 불리며 기존 자바스립트 개발자들의 다양한 논의를 거쳐서 자바스크립트 언어가 나아갈수 있는 개선된 방향을 보여주고 있다. 하지만 이미 기존의 표준을 기반으로 전 세계의 수많은 웹페이지가 동작하고 있어서 ES5의 핵심 중 하나는 하위 호환성을 지원하는 것이었다.따라서 .. 자바스크립트 HTTP GET 최적화 인터넷 환경에서의 HTTP GET 최적화자바스크립트는 텍스트로 실행되는 스크립트 언어라서 프로그래밍하고 나면 그대로 사용자의 브라우저로 전송한다.이처럼 HTTP 환경에서 데이터를 전송하는 방법의 하나가 GET이다.웹페이지를 사용자에게 제공하기 전에 HTTP GET이 이루어지는데, GET으로 데이터를 전송하는 동안은 서비스가 제공되지 않거나 제한적이다.이처럼 HTTP GET으로 발생할 수 있는 병목을 해소하려면 GET 용량을 줄이거나 GET 횟수를 줄여야 한다.GET을 최적화하는 것이 웹페이지의 사용자 경험을 좌우하는 매우 중요한 단계이므로 특별히 신경써야한다.특히 HTTP GET을 최적화하여 파일 전송 속도를 개선하는 것은 프론트엔드나 백엔드의 알고리즘을 최적화하는 것보다 처리는 훨씬 쉬우면서도 영향이 .. 자바스크립트 레이지로드(lazy load) 자바스크립트 레이지로드(lazy load) My table Table tag written by javascript 최초에 실행되는 자바스크립트는 onload 이벤트 핸들러 함수를 등록하는 과정만 거친다.그리고 웹페이지에 대한 로드가 끝나면 onload 이벤트 핸들러를 실행함으로써 새로운 레이지 로드하고자 하는 태그들은 "lazyload"라는 CSS class를 부여해주고 스크립트에서는 이러한 태그를 탐색하여 또 다른 속성으로 설정해놓은 data-src 속성값을 실제 src로 바꿔주면서 전체 페이지 로드가 끝난 뒤부터 이미지를 내려받도록 하고 있다.HTML 처리와 페이지 로드가 끝나고 난 다음부터 이미지를 내려받기 시작한는 것을 확인할 수 있다. 용량이 큰 이미지를 많이 표시하는 웹페이지는 때로는 더 빠.. 자바스크립트 디자인 패턴 #정리 자바스크립트 디자인 패턴 정리 모듈패턴은 글로벌 변수를 최소화하고 라이브러리나 API의 소스 관리에 유용하다. 이벤트 델리게이션 패턴은 여러 DOM에 이벤트 핸들러를 걸러야 하는 경우와 동적인 DOM의 이벤트 처리를 해야하는 경우 유용하다. 이벤트 처리 단계는 [캡처링]-[대상]-[버블링]의 3단계로 이루어져있다. 프락시 패턴을 통해 캐시를 활용하거나 여러 개의 요청을 하나로 합쳐서 서버 요청을 최적화하거나 외부 인터페이스를 간편하게 만들 수 있다. 프락시 패턴과 이벤트 델리게이션 패턴을 조합하면 확장성 있는 이벤트 처리가 가능하다. 데커레이터 패턴은 반복되는 기능의 조합을 조금씩 변경해서 사용하는 경우 유용하며 디버깅을 위한 로깅 툴의 으용이 가능하다. Init-time branching 패턴은 브라우.. 자바스크립트 디자인 패턴 #10. curring 패턴 curring 패턴커링패턴함수를 설계할 때 인자 전체를 넘겨서 호출할 수 도 있지만, 일부 인자는 먼저 입력해두고 나머지만 입력받을 수 있도록 새로운 함수를 만드는 패턴을 의미한다.특히 자바스크립트에서 클로저가 있어서 먼저 일부 입력된 값을 유지하고, 가지고 있는 것을 아주 쉽게 구현할 수 있기 때문에 유용하게 사용할 수 있는 패턴이다.(function(){ function sum(x, y){ return x + y; } var makeAdder = function(x){ return function(y){ return sum(x,y); }; }; var adderFour = makeAdder(4); console.log(adderFour(1)); //5 console.log(adderFour(5)); .. 이전 1 2 3 다음
