달력

122017  이전 다음

  •  
  •  
  •  
  •  
  •  
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  •  
  •  
  •  
  •  
  •  
  •  

DB에서 프론트까지 JS풀스택

절차

  • 서버 임대
  • 시스템 설치
  • MEAN 서비스 테스트

서버 임대

  • http://www.digitalocean.com/
  • 클라우드 VM 생성 시간 1분
  • SSD 20G
  • IP, root 계정 비밀번호 이메일로 전달
  • 시간당 0.007달러
  • 샌프란시스코 서버

시스템 설치

root 계정

  • CentOS 6.5 64bit
  • passwd
  • yum update -y
  • yum install -y wget

  • git 설치(선택)

  • yum install -y curl-devel zlib-devel.x86_64 perl-ExtUtils-MakeMaker.x86_64
  • yum groupinstall -y "Development Tools"
  • cd /tmp
  • wget https://git-core.googlecode.com/files/git-1.9.0.tar.gz
  • tar xvfz git-1.9.0.tar.gz
  • cd git-1.9.0
  • ./configure
  • make
  • make install

dev 계정

npm install -g grunt-cli
npm install -g bower

MEAN 서비스 설치

서비스 테스트

iptables -t nat -A PREROUTING -p tcp -d 1xx.2xx.1xx.xx --dport 80 -j REDIRECT --to-port 3000

계정 연결

SNS

  • 페이스북
  • 트위터
  • 구글플러스
  • 깃허브
  • 링크드인

페이스북

절차

  1. 앱 생성
  2. 설정 > 플랫폼 추가 > 웹사이트
  3. 사이트 URL

mean/config/env/development.js

facebook: {
        clientID: '1417763...476376',
        clientSecret: 'a535v2.......adf68c53f41ae6c73b',
        callbackURL: 'http://okdevtv.com/auth/facebook/callback'
    },

깃허브



related: https://github.com/kenu/okdevtv/blob/master/mean/jsfullstack.md


저작자 표시
신고
Posted by 케누 kenu허광남
TAG mean

지난 번 다이어그램을 많은 분들이 좋아해 주셔서 감사합니다. 발표 자료를 위해서 정리하다가 수정할 것이 보여서 추가/이동했습니다. 패키지 매니저와 Full Stack 카테고리를 추가했습니다. 


브라우저를 탈출한 자바스크립트로 할 수 있는 영역이 넓어지고 있습니다. 자바스크립트 세상의 돌아가는 이치를 알려면 어느 게 어떤 용도인지 알 필요가 있습니다. 그래서 한 번 정리해 보았습니다.


다이어그램의 오류나 추가 사항 감사히 받겠습니다.



## 유틸리티 모듈

  * 다른 프레임워크에서 가져다 쓰는 공공재

## 프레임워크 

  * 범용 : 웹 페이지에 많이 적용된 것

  * MVC : 모델,뷰,콘트롤러 코드를 용도에 맞게 파일을 분리해 놓은 프레임워크, 화면처리 전용, 비즈로직 전용 파일, 두 가지를 엮어주는 콘트롤러 코드

  * Full Stack : 클라이언트와 서버 사이드 모두 지원하는 JS 프레임워크

## 백엔드

  * 탈 브라우저 JS 기술, 자바스크립트는 브라우저에서만 동작한다는 편견을 버리고 갈께요. 

  * Java, .NET 기술과 경쟁. 

  * 2014/02 현재 59,000가지 플러그인 등록됨. http://npmjs.org

## 빌드 도구

  * 자바스크립트 용량을 줄이고, 하루패드(https://github.com/rhiokim/haroopad) 같은 애플리케이션을 자동으로 컴파일 해주는 도구

## 패키지 매니저

  * 모듈을 제공해주는 플랫폼

## 그래픽

  * 시각화 엔진

## 테스트

  * 자동으로 테스트를 해주는 프레임워크

## 파생 언어

  * 자바스크립트 해석기로 동작하지만, 자바스크립트와 문법이 다른 언어

## 데이터베이스

  * NoSQL에 포함되는 JSON 형식의 자바스크립트 기반 데이터베이스



저작자 표시
신고
Posted by 케누 kenu허광남

var $a = a || document;


var $a

if (a !== undefined 

    && a !== false 

    && a !== null) {

  $a = a;

} else {

  $a = document;

}

저작자 표시
신고
Posted by 케누 kenu허광남
저작자 표시
신고
Posted by 케누 kenu허광남
TAG jQuery

jQuery 소스 1.11.0 버전의 소스는 약 10,000 라인입니다.

한 줄 한 줄 살펴 보기보다는 전체적인 맥락을 살펴 봤습니다.


다음과 같이 시작합니다.

(function (g, f) {}(window, Function));


CommonJS의 모듈을 따르는 부분이 나옵니다. 이 가운데 체크하는 것이 있는데, jQuery의 용도를 명확히 얘기합니다.

"jQuery requires a window with a document"

                if (!w.document) {
                    throw new Error("jQuery requires a window with a document");
                }

Function 부분은 jQuery의 본체입니다.

기억에 의하면 4부분 정도가 생각납니다.

1. Selector(Sizzle 이용)

2. Event

3. Tween

4. ajax


이클립스의 JS Outline은 다음과 같습니다.



저작자 표시
신고
Posted by 케누 kenu허광남

Backbone.js:


AngularJS

  • 홈페이지
  • 튜토리얼 http://docs.angularjs.org/tutorial
  • 라이선스 MIT License
    • Code licensed under the The MIT License.
    • Documentation licensed under CC BY 3.0.
  • 의존성
    • 없음
  • 특징
    • 웹 애플리케이션을 위한 개선된 HTML
    • 기본
      • 데이터 바인딩, 콘트롤러, 순수 자바스크립트
    • 백엔드와 연결
      • 깊은 링크, 폼 검증, 서버 통신
    • 컴포넌트 생성
      • 디렉티브, 재사용 컴포넌트, 지역화





저작자 표시
신고
Posted by 케누 kenu허광남

update doc: http://okjsp.tistory.com/1165644305


정리를 시작했습니다.

브라우저를 탈출한 자바스크립트가 일을 내고 있기 때문에 자바스크립트 세상의 돌아가는 이치를 알려면 어느 게 어떤 용도인지 알 필요가 있습니다.

다이어그램의 오류나 추가 사항 감사히 받겠습니다.









## 유틸리티 모듈

* 다른 프레임워크에서 가져다 쓰는 공공재

## 프레임워크

 * 범용 : 웹 페이지에 많이 적용된 것

 * MVC : 모델,뷰,콘트롤러 코드를 용도에 맞게 파일을 분리해 놓은 프레임워크, 화면처리 전용, 비즈로직 전용 파일, 두 가지를 엮어주는 콘트롤러 코드

* Full Stack : 클라이언트와 서버 사이드 모두 지원하는 JS 프레임워크

## 백엔드

* 탈 브라우저 JS 기술, 자바스크립트는 브라우저에서만 동작한다는 편견을 버리고 갈께요. 

* Java, .NET 기술과 경쟁. 

* 2014/02 현재 59,000가지 플러그인 등록됨. http://npmjs.org

## 빌드 도구

* 자바스크립트 용량을 줄이고, 하루패드(https://github.com/rhiokim/haroopad) 같은 애플리케이션을 자동으로 컴파일 해주는 도구

## 패키지 매니저

* 모듈을 제공해주는 플랫폼

## 그래픽

* 시각화 엔진

## 테스트

* 자동으로 테스트를 해주는 프레임워크

## 파생 언어

* 자바스크립트 해석기로 동작하지만, 자바스크립트와 문법이 다른 언어

## 데이터베이스

* NoSQL에 포함되는 JSON 형식의 자바스크립트 기반 데이터베이스



Thanks to

Outsider, Brian Choi, 에반젤리™, 망고한량


저작자 표시
신고
Posted by 케누 kenu허광남

Java, C, C++, Clojure, 등 여러 언어와 Dart 언어의 특징을 비교해서 설명합니다.



http://www.infoq.com/presentations/dart-introduction

저작자 표시
신고
Posted by 케누 kenu허광남
TAG DART

jQuery API

JavaScript 2014.02.15 13:52

http://api.jquery.com


  1. Ajax
  2. Attributes
  3. Callbacks Object
  4. Core
  5. CSS
  6. Data
  7. Deferred Object
  8. Deprecated
  9. Dimensions
  10. Effects
  11. Events
  12. Forms
  13. Internals
  14. Manipulation
  15. Miscellaneous
  16. Offset
  17. Properties
  18. Removed
  19. Selectors
  20. Traversing
  21. Utilities
  22. Version



저작자 표시
신고
Posted by 케누 kenu허광남
TAG API, jQuery

jQuery 구조

JavaScript 2014.02.15 13:12

## 소스

http://code.jquery.com/jquery-1.11.0.js


http://jsbeautifier.org 에서 정리


## 전체 구조

(function(g, f){console.log(g + f)}(3, 4));
7


## functions and prototypes



### init

    // Give the init function the jQuery prototype for later instantiation

    init.prototype = jQuery.fn;

### Tween.prototype.init

    Tween.prototype.init.prototype = Tween.prototype;


### Sizzle



### setFilters



### jQuery.fn.init



### jQuery.Event



### Tween






저작자 표시
신고
Posted by 케누 kenu허광남