본문 바로가기

자바스크립트20

lodash & underscore 라이브러리 소스코드를 보다 보니 _.method() 로 시작하는 코드들이 있길래 보니 lodash 라는 모듈(라이브러리) 이었다.해서 내용을 확인해보니 여기 잘 정리되어 있었다.쓰더라도 이유나 용도를 알고 써야겠다는 생각으로. 링크 : 자바스크립트 라이브러리 Lodash와 Underscore 알아보기 자바스크립트 인기 라이브러리 중 하나인 Lodash와 underscore 알아보려합니다. 소스 코드를 보면 _.test() 처럼 _로 시작하는 코드를 볼 수 있습니다. 이 코드는 위 라이브러리 소스로 자주 사용되는 라이브러리 툴입니다. 위 두 라이브러리 모두 자바스크립트를 확장하여 편리하게 코드를 작성하거나 웹표준, 크로스 브라우징에 많이 사용됩니다. 이처럼 Lo-dash와 underscore가 인기를 끄는 이유는 아.. 2018.10.08
자바스크립트 오버로딩 출처 : http://webclub.tistory.com/404 진작에 구글링 할걸...ㅡㅡ;;;엄밀히 말하자면 비스무리흉내 ㅋㅋ 그래도 너무 편하다;; function sum() { var result = 0; for (var i = 0; i < arguments.length; i++) { result += arguments[i]; } return result; } console.log(sum(10, 20));// 30 console.log(sum(10, 20, 30));// 60 console.log(sum(10, 20, 30, 40)); // 100 console.log(sum(10, 20, 30, 40, 50)); //150 2017.05.22
[펌] 자바스크립트에서 strict mode를 사용해야 하는 이유 출처 : http://blog.aliencube.org/이 포스트는 Stack Overflow의 What does “use strict” do in JavaScript, and what is the reasoning behind it?의 질문과 답변을 번역한 내용입니다.자바스크립트에서 use strict는 뭘 하는 것이고, 왜 그걸 써야 하나요?질문:최근에 내가 짰던 자바스크립트 코드를 크록포드의 JSLint를 통해 실행시켰더니 아래와 같은 에러가 나타났습니다:Problem at line 1 character 1: Missing “use strict” statement.검색을 좀 해봤는데, 몇몇 사람들이 "use strict;" 라인을 그들의 자바스크립트 코드에 추가했다는 것을 알아챘습니다. 저도 이것을.. 2016.03.09
[펌] +function() 의 원리 출처 : http://blog.coderifleman.com오픈소스나 레거시 읽다 보면 종종 +function(){}() 같은 코드를 마주하게됩니다. 이 코드가 혼란스러운 분들을 위해 +function(){}()이 무엇인지 그리고 어떻게 동작하는 것인지 간략히 정리해보겠습니다.엔진이 함수를 실행하는 방법함수를 실행하기 위해서는 이름(식별자)이 필요합니다. 이름이 있어야 스코프에서 값을 참조할 수 있기 때문입니다.예를 들어 function foo(){}를 정의하면 foo(); 구문을 이용해 함수를 실행할 수 있습니다.엔진이 함수 선언문을 만나면 식별자를 관리하는 특별한 집합(EnviromentRecord)에 함수의 이름을 식별자로 넣고 함수 객체를 생성하여 참조합니다. 그리고 함수 실행 구문 중 foo를 .. 2016.03.09
펌) 코어자바스크립트(1) - OOP 본문링크 : http://youngman.kr/?p=457 개요아직도 많은 개발자들은 자바스크립트를 단순히 클라이언트 상의 액션을 실행하기 위한 함수 기반의 스크립트 언어라고 생각하고 있다. 하지만 자바스크립트는 객체 지향 언어이다. 비록 자바나 C#처럼 완벽하지는 않지만 기본적인 클래스 개념과 상속, 은닉 등을 제공한다. 이번 장에서는 자바스크립트의 OOP 요소들을 하나하나 예제로 풀어가며 알아보도록 할 것이다.클래스 정의function MyClass() { } var MyClass = function() { } // -- 위의 두 구문은 동일하게 MyClass 클래스를 선언한다. // -- 필자는 가독성 측면에서 두 번째 방식을 선호한다(1) 접근 제어자자바스크립트는 클래스 내부에서 정의할 수 있는 .. 2014.01.28
자바스크립트 디버깅용 함수들. Ver 20131219 오브젝트형태의 데이터를 문자열로 전환하여 확인할때 function objToString (obj) { var str = ''; for (var p in obj) { if (obj.hasOwnProperty(p)) { str += p + '::' + obj[p] + '\n'; } } return str; } 새로 생길때마다 코드를 추가하고, 날짜를 업데이트 할 예정입니다.^^ 2013.12.19
‘제다이급’ 자바스크립트 고수들이 전하는 6가지 개발팁 필자는 최전방 개발자로서 자바스크립트를 사용하는 사람들을 많이 만난다. 이들 대부분은 주로 jQuery와 몇 가지 플러그인을 사용해 멋진 라이트박스 효과나 이미지 슬라이더를 추가하는 정도의 작업을 하지만, 그중 일부는 키보드 위로 손을 올려 놓기만 해도 코드가 저절로 써진다는 ‘제다이’급 개발자들이 있다. 이 두 가지 기술 수준의 중간 어딘가에 있는 사람은 때로 어떻게 해야 할지 모르는 상황에 부닥친다. 전문적인 지식을 찾는 길은 많다. 지금 구덩이에 빠져 도움이 필요하다면 모든 자바스크립트 전문가가 알아야 하는 다음과 같은 몇 가지 개념을 살펴보라. 자바스크립트 비밀 1: 클로저(Closures) 자바스크립트의 클로저는 함수에 부모 함수의 범위에 대한 접근성을 제공한다. 개발자에게는 극히 혼란스러운 개.. 2013.12.11
Node.js 로 데스크탑 앱을 만드는 app.js 출처 : http://composite.tistory.com/36 node.js 에서 드디어 UI도 정복하는 건가? 커뮤니티에서 이미 데스크탑 UI까지 이식하려 한다.UI 프레임워크는 다른 것도 봤듯이 API가 드럽게 방대해서 일반적인 데스크탭 앱 프레임워크를 만들기엔 당연히 무리.하지만 그런 UI 구조에 구세주를 내려주셨으니 그것은 바로 Chrome Embedded Framework바로 프로그램 안에 HTML5를 이식할 수 있는 프레임워크이다. 거기다가 크로스 플랫폼이다.app.js 는 바로 이 크롬 임베디드로 UI 프레임워크의 방대함을 간단하게 극복했다. 만약 Qt나 WxWidget 를 자바스크립트로 이식한다 해도 그 API를 알아야 하지만, HTML은 그럴 필요가 없기 때문이다. Morteza Mi.. 2013.12.05
TitanumStudio - 자바스크립트를 이용한 크로스 플랫폼 미래는 자바스크립트다. 오늘 간단히 둘러보며 확신을 갖는다.앞으로 자바스크립트와 HTML5 . 웹에 몰빵이다!! ㅋㅋㅋㅋ [Jscamp] Titanium - Javascript를 이용한 크로스 플랫폼 앱 개발 from JongEun Lee안그래도 요새 타이타늄 스튜디오에 계속 관심이 가드만..자바스크립트로 웹 / 서버사이드 / 데스크톱 애플리케이션까지 개발이 가능해지고 있다.엄청난 영역파괴이지만.. 하나의 어플리케이션이 단일언어로만 개발되어 있다면.. 엄청나게 큰 매력으로 작용하지 않을까란 생각이다.공부할게 더 늘어서 짜증나지만 좋기도 한다. 고로 나는 또 공부한다. 2013.12.05
자바스크립트 개체지향 JavaScript ( 출처 링크 연결 )개체 지향 기술을 이용한 고급 웹 응용 프로그램 만들기Ray Djajadinata 이 기사에서 다루는 내용:프로토타입 기반 언어로서의 JavaScriptJavaScript를 사용한 개체 지향 프로그래밍JavaScript에서의 코딩 트릭JavaScript의 미래이 기사에서 사용하는 기술: JavaScript 목차JavaScript 개체는 사전입니다. JavaScript에서는 함수가 가장 중요합니다. 생성자 함수는 있지만 클래스는 없습니다. 프로토타입 정적 속성 및 메서드 차단 전용 속성 시뮬레이션 클래스로부터 상속 네임스페이스 시뮬레이션 JavaScript에서 이와 같이 코딩해야 할까요? 앞으로의 전망 최근에 필자는 웹 응용 프로그래밍 개발 부문에 5년 경력을 가진.. 2013.04.24
자바스크립트 오브젝트 출처 : http://asrada2001.tistory.com/163 스쿨에 javascript 의 색다른 표현식에 관한 글이 올라왔다(by 행복한고니) 그중 new Object === {} 라는 고니님의 의견에 숨어지내리님이 급 제동을 걸어왔다. 너무나도 살벌한 분위기 속에서 결국 두 분의 논쟁에는 결론이 나질 않았고 나는 개인적으로 무소레즈님의 코멘트를 이 논쟁의 결론으로 치부한다. 무소레즈님의 댓글 --------------------------------------- 1. new Object() === {} 가 같다? 2. Object 가 {} 으로 만들어진다? 3. constructor 의 비교로 객체가 똑같다고 말할수 있다? 4. Object 는 Function 의 instance 이다? --.. 2013.04.24
[펌] 자바스크립트 정리. 8 - 자바스크립트 DOM 스크립트 간단 정리 검색엔진을 뒤지면서 보다가 너무나 깔끔하게 정리된자바스크립트가 있기에 퍼옴. GENERAL 님의 정리 감사합니다.댓글은 아래 링크 블로그에 달아주세요~ ^^ 링크 : http://blog.naver.com/minis24/800942519022006년 정도 인걸로 기억이 나는데요.. ajax 가 한참 이슈가 되던 시절이 있었습니다.지금도 ajax를 많이 쓰고는 있지만 그 당시 처럼 환상에 가려진, 신비의 테크닉이라는 고급기술에서범용 테크닉으로 많이 일반화 되었지요.. 무턱대고 ajax 책을 사서 보았는데..음 당췌 무슨 말인지 이해가 안되더군요..시간이 약이라고 해야하나요? 한몇년 그렇게 해매면서 고민하면서 정리하면서 살다보니어느덧 익숙해지더라구요~ 아직 많은 부분이 부족하긴 하지만요~ ajax를 잘 사용.. 2013.01.21
[펌] 자바스크립트 정리. 7 - 자바스크립트 생성자 체이닝 검색엔진을 뒤지면서 보다가 너무나 깔끔하게 정리된자바스크립트가 있기에 퍼옴. GENERAL 님의 정리 감사합니다. 링크 : http://blog.naver.com/minis24/80094251902 * 생성자 체이닝 정리 6의 마지막에서 처럼 서브클래스의 생성자 함수 내에서 상위클래스의 생성자를 명시적으로 호출하는 것을 생성자 체이닝 이라고 한다. call() 함수를 써서 생성된 객체의 메서드인것 처럼 호출했었는데 다음처럼 간단하게 고칠 수 있다. //상위클래스에 대한 참고 저장 subRectangle.prototype.superclass = Rectangle ; function subRectangle( x , y , w ,h ){ // 프로토타입 객체의 프로퍼티인 superclass 에 Rectangl.. 2013.01.21
[펌] 자바스크립트 정리. 6 - 자바스크립트 클래스의 서브클래스화 검색엔진을 뒤지면서 보다가 너무나 깔끔하게 정리된자바스크립트가 있기에 퍼옴. GENERAL 님의 정리 감사합니다.댓글은 아래 링크에 달아주세요~ 링크 : http://blog.naver.com/minis24/80094251902* 자바스크립트 클래스의 서브클래스 정의하기 자바스크립트는 프로토타입 기반의 상속을 지원하므로 프로토타입 객체를 알맞게 조작하여 서브클래스를 흉내낼수 있다.아래는 그 방법이다. 1. 서브클래스의 생성자에서 슈퍼클래스의 생성자를 호출한다. 이때, 슈퍼클래스의 생성자가 새로만든 객체의 메서드인것처럼 호출해야 한다. 2. 프로토타입 객체를 설정한다. * 프로토타입객체를 반드시 슈퍼클래스의 인스턴스로 만들어 줘야한다. * 프로토타입 객체의 constructor 프로퍼티를 명시적으로 설정해.. 2013.01.21
[펌] 자바스크립트 정리. 5 - 자바스크립트 클래스,생성자,프로토타입 검색엔진을 뒤지면서 보다가 너무나 깔끔하게 정리된자바스크립트가 있기에 퍼옴. GENERAL 님의 정리 감사합니다. 링크 : http://blog.naver.com/minis24/80094251902 * 자바스크립트는 자바와 같은 실제 클래스를 지원하지는 않는다. (자바스크립트 2.0에서는 지원한다고 합니다.* 대신 자바스크립트는 프로토타입객체와 생성자 함수를 사용하여 모조클래스를 구현할 수 있다. (이하 클래스라 함) * 자바스크립트 생성자 - new 연산자와 함께 사용되도록 설계된 함수를 생성자라고 한다. - 생성자는 새로운 객체를 초기화 하고 객체에 있는 프로퍼티중에서 사용되기전에 미리 값이 할당되어야 하는 프로퍼티들의 초기값을 할당 한다. - 생성자는 객체들의 클래스를 정의한다. - 생성자는 일반적.. 2013.01.21
[펌] 자바스크립트 정리. 4 - 자바스크립트 연산자 검색엔진을 뒤지면서 보다가 너무나 깔끔하게 정리된자바스크립트가 있기에 퍼옴. GENERAL 님의 정리 감사합니다.댓글은 아래 링크에 달아주시기 바랍니다. 링크 : http://blog.naver.com/minis24/80094251902 * 자바스크립트를 공부하면서 노트에 정리해 놓은 내용을 보기 편하고, 효율적으로 검색하기 위해 블로그에 올리고 있습니다.* 괜찮게 생각했던 내용과 메서드나,프로퍼티등의 인덱스가 있었으면 해서 정리한 거라서 아주 기초적인 내용은 없을지도 모르겠네요. ^^ * 오늘은 자바스크립트 연산자와 관련된 내용입니다. * 자바스크립트 연산자 1. in 좌변 --> 문자열 우변 --> 객체 or 배열 좌변의 값이 우변객체의 프로퍼티의 이름이면 true 리턴 2. instanceof 좌변.. 2013.01.21
[펌] 자바스크립트 정리. 3 - 자바스크립트 함수 검색엔진을 뒤지면서 보다가 너무나 깔끔하게 정리된자바스크립트가 있기에 퍼옴. GENERAL 님의 정리 감사합니다.댓글은 아래 링크에 달아주시기 바랍니다. 저도 고맙게 생각하는지라.^^;; 링크 : http://blog.naver.com/minis24/80094251902 * 자바스크립트를 공부하면서 노트에 정리해 놓은 내용을 보기 편하고, 효율적으로 검색하기 위해 블로그에 올리고 있습니다.* 괜찮게 생각했던 내용과 메서드나,프로퍼티등의 인덱스가 있었으면 해서 정리한 거라서 아주 기초적인 내용은 없을지도 모르겠네요. ^^ * 오늘은 자바스크립트 함수와 관련된 내용입니다. * function - 함수 정의는 프로그램의 정적인 구조를 나타낸다. - 자바스크립트에서 문장은 실행시간에 실행되는 반면 함수는 실행되.. 2013.01.21
[펌] 자바스크립트 정리. 2 - 자바스크립트 객체 (Object) 검색엔진을 뒤지면서 보다가 너무나 깔끔하게 정리된자바스크립트가 있기에 퍼옴. GENERAL 님의 정리 감사합니다.댓글은 아래 링크에 달아주시기 바랍니다. 저도 고맙게 생각하는지라.^^;; 링크 : http://blog.naver.com/minis24/80094251902 * 자바스크립트를 공부하면서 노트에 정리해 놓은 내용을 보기 편하고, 효율적으로 검색하기 위해 블로그에 올리고 있습니다.* 괜찮게 생각했던 내용과 메서드나,프로퍼티등의 인덱스가 있었으면 해서 정리한 거라서 아주 기초적인 내용은 없을지도 모르겠네요. ^^ * 오늘은 자바스크립트 객체와 관련된 내용입니다. 자바스크립트 객체에 대하여 알아봅시다. * 초기화 하는 방법 두가지 1. 객체의 리터럴 (값) var empty = {}; // 빈객체 .. 2013.01.21