* GitLens: 해당 라인 커밋한 시점 등의 정보를 보여 줍니다. 

 

GitLens — Git supercharged - Visual Studio Marketplace

Extension for Visual Studio Code - Supercharge Git within VS Code — Visualize code authorship at a glance via Git blame annotations and CodeLens, seamlessly navigate and explore Git repositories, gain valuable insights via rich visualizations and powerfu

marketplace.visualstudio.com

* Git Graph: 소스트리 대체할 만 합니다.

 

Git Graph - Visual Studio Marketplace

Extension for Visual Studio Code - View a Git Graph of your repository, and perform Git actions from the graph.

marketplace.visualstudio.com

* GitHub Copilot: 인공지능과 짝프로그래밍 하면 시간을 많이 줄일 수 있습니다. 경쟁자 tabnine

 

GitHub Copilot · Your AI pair programmer

GitHub Copilot works alongside you directly in your editor, suggesting whole lines or entire functions for you.

copilot.github.com

* Thunder Client: Postman보다 가볍고, 호환도 대부분 다 됩니다.

 

Thunder Client - Rest API Client Extension for VS Code

Thunder Client is a hand-crafted lightweight Rest API Client extension for Visual Studio Code

www.thunderclient.com

* Prettier: 코드 가독성은 중요합니다.

 

Prettier · Opinionated Code Formatter

Opinionated Code Formatter

prettier.io

 

추가로 하나 더, 새로 시작한 플러그인입니다.

* SonarLint: SonarQube 서버 없이도, 코드 정적분석이 코딩할 때 가능합니다. 팀 개발한다면 룰셋을 SonarQube 서버를 통해서 가능합니다.

 

SonarLint | Free and Open Source Code Quality & Security IDE Extension

Find and fix Code Quality and Security issues as you code, directly in your IDE of choice, including JetBrains, Eclipse, Visual Studio and VS Code.

www.sonarlint.org

 

typeof [ ] === 'object'

1. list.forEach(): 반복, 리턴값 없음 undefined

2. list.map(): 각 원소의 값 변경 가능, 리턴값 동일 갯수 배열

3. list.filter(): 조건에 따라 필터링, 갯수 필터된 배열

4. list.reduce(): 모든 원소의 총합 리턴, 단일값

5. list.includes():  포함 여부, true or false

more: https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array

 

Array - JavaScript | MDN

JavaScript Array 클래스는 리스트 형태의 고수준 객체인 배열을 생성할 때 사용하는 전역 객체입니다.

developer.mozilla.org

 

* 검색은 가급적 영문으로

* 블로그나 튜토리얼 따라할 때는 가능하면 `버전`을 맞춘다

* 지인 중에 해당 기술의 경험자를 물색한다.

* 꼬였다 싶으면, OS 포맷하고 다시 시작한다. #반복효과

* 1시간 삽질해도 안되면, 다른 일 한다. #산책하기 #이거말고다른일

from: https://unsplash.com/photos/m8c9PKq2E2A

AD: React + API Server 프로젝트 개발과 배포

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


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


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


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



## 유틸리티 모듈

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

## 프레임워크 

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

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

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

## 백엔드

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

  * Java, .NET 기술과 경쟁. 

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

## 빌드 도구

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

## 패키지 매니저

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

## 그래픽

  * 시각화 엔진

## 테스트

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

## 파생 언어

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

## 데이터베이스

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



var $a = a || document;


var $a

if (a !== undefined 

    && a !== false 

    && a !== null) {

  $a = a;

} else {

  $a = document;

}

  1. 호야지기 2014.03.06 11:03 신고

    3번째 줄 오타?

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은 다음과 같습니다.



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
    • 기본
      • 데이터 바인딩, 콘트롤러, 순수 자바스크립트
    • 백엔드와 연결
      • 깊은 링크, 폼 검증, 서버 통신
    • 컴포넌트 생성
      • 디렉티브, 재사용 컴포넌트, 지역화





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, 에반젤리™, 망고한량


  1. SSaMKJ 2014.02.20 09:22 신고

    역시 kenu님 대단하십니다. ^^ 한 번에 파악 할 수 있게 끔 정리하셨군요.

  2. 에반젤리™ 2014.02.20 11:56 신고

    프레임워크 MVC 쪽에 Enyo 프레임웍도 있습니다. www.enyojs.com

    • kenu허광남 2014.02.20 12:04 신고

      Enyo를 잘 쓰고 계신 것 같습니다.
      추가하겠습니다. 감사합니다. ^^

    • seoh $ 2014.02.20 23:08 신고

      Enyo가 아직 살아있었군요. 0.x때 Early Access로 잠깐 써봤었는데 HP에서 버리고 나서 잊어버리고 있었습니다.

  3. 한량망고 2014.02.20 12:27 신고

    그래픽쪽에 http://processingjs.org/ 도 있습니다. 좋은 자료 감사합니다~

+ Recent posts