React

맥에서 입맛에 맞는 에디터 찾기가 쉽지 않습니다. 특히나 맥맹인 저로써는 Visual Studio for Mac도 그리 좋아하지 않습니다. 애초에 텍스트 에디터나 리치 에디터 쪽에는 애플이 별로 신경을 쓰지 않은 것으로 보이네요. 적어도 맥맹인 저에게는 그렇습니다. =_=;;

그나마 마음에 드는 녀석이 바로 WebStorm 이네요. 코딩의 즐거움을 줄이기? 위해서 ReactJS용 템플릿을 만들어 보았습니다. 만든 김에 귀찮아서 package.json, webpack.config.js 템플릿도 만들었습니다. 지우고 다시 설정하면 되도록 계속 조정을 할 생각입니다. ^^

Preferences > Editor > File and Code Templates > + (add)

1. React File (js)

import React, { Component, PropTypes } from 'react';


export default class ${NAME} extends Component {

  static propTypes = {


  };

  

  constructor(props) {

   super(props);

   this.state = {

    

   };

  }

  

  componentWillMount() {


  }


  componentDidMount() {


  }


  componentWillReceiveProps() {


  }


  componentWillUpdate() {


  }


  componentDidUpdate() {


  }


  componentWillUnmount() {


  }

  

  render() {

    return (

        <div>

        </div>

    );

  }

}


2. React Package File (json)

{

  "name": "kanbanboard",

  "version": "0.1.0",

  "private": true,

  "dependencies": {

    "history": "^4.6.3",

    "react": "^15.6.1",

    "react-dom": "^15.6.1",

    "react-router": "^4.1.1"

  },

  "devDependencies": {

    "babel-core": "^6.25.0",

    "babel-loader": "^7.1.0",

    "babel-preset-es2015": "^6.24.1",

    "babel-preset-react": "^6.24.1",

    "react-hot-loader": "^1.3.1",

    "react-scripts": "1.0.7",

    "webpack": "^3.0.0",

    "webpack-dev-server": "^2.5.0"

  },

  "scripts": {

    "start": "react-scripts start",

    "build": "react-scripts build",

    "test": "react-scripts test --env=jsdom",

    "eject": "react-scripts eject",

    "dev": "webpack-dev-server --progress --hot"

  }

}


3. React Webpack File (js)

var webpack = require('webpack');


module.exports = {

  entry: './src/index.js',


  output: {

    path: __dirname + '/public/',

    filename: 'bundle.js'

  },


  devServer: {

    hot: true, // 파일이 수정할때마다 리로드

    inline: true,

    port: 7777,

    contentBase: __dirname + '/public/'

  },


  module: {

    loaders: [

      {

        test: /\.js$/,

        loaders: ['react-hot-loader', 'babel-loader?' + JSON.stringify({

          cacheDirectory: true,

          presets: ['es2015', 'react']

        })],

        exclude: /node_modules/

      }

    ]

  },


  plugins: [

    new webpack.HotModuleReplacementPlugin()

  ]

};


신고

WRITTEN BY
비트센스
뷰파인더로 보는 프로그래머의 세상 페이스북 @bitsense 트위터 @picory 스카이프 picory MSN drawhalf@dreamwiz.com

받은 트랙백이 없고 , 댓글이 없습니다.
secret
VISUAL STUDIO

혹시나 했는데, 진짜 일까 했는데...

Visual Studio가 맥용으로 나왔네요. 설마... MS가 윈도우를 포기한 것은 아니겠죠??? ^^

그래도 한글은 그지 같은 이느낌..은 기우여야 할 건데~~

좋은 밤 되십시오.

신고

WRITTEN BY
비트센스
뷰파인더로 보는 프로그래머의 세상 페이스북 @bitsense 트위터 @picory 스카이프 picory MSN drawhalf@dreamwiz.com

트랙백이 하나이고 , 댓글 하나 달렸습니다.
  1. 비밀댓글입니다
secret
logo

Xamarin.Forms가 아쉬운 것이 여러가지 있지만, 디자인 결과를 보기 위해서 매번 컴파일 해야 한다는 것입니다. 그걸 해결해줄 녀석이 하나 있네요. 아직 베타버전이기는 하지만 고릴라 플레이어 입니다.


고릴라 플레이어 사이트

고릴라 플레이어 다운로드 페이지







이녀석을 사용하는 데 꽤나 애를 먹었습니다. 난독증이 있는지, 이해력이 떨어지는지... ㅠ,.ㅠ;; 한참 헤매다가 겨우 알아 먹었습니다.


사용방법


시뮬레이터에 고릴라 플레이어 설치


1. 고릴라 플레이어를 설치하면 "Gorilla Player by UXDivers" 창이 뜹니다. 없다면 트레이 아이콘에서 "Getting Started Walkthrough"를 선택하여 실행합니다.



2. 두번째 탭(2-Installing Gorilla Player on your devices)에서 [Opening Player.sln...](빨간색 버튼)을 선택하여 솔루션 소스를 오픈 합니다.


3. 소스가 로드 되었다면 그대로 다시 컴파일을 합니다. 그러면 시뮬레이터에 설치가 되겠죠?? Gorillar 라는 앱이 설치 됩니다.


이제 기본적인 준비는 끝났습니다. 저도 이제부터 어떻게 하는지 헤깔렸습니다.


작업 중인 프로젝트를 열거나 새로 프로젝트를 만들어서 Xamarin Studio를 실행합니다.


시뮬레이터에서 고릴라 플레이어 사용 방법


1. 도구 > Gorilla Player > Connect to Gorilla 를 선택합니다. 별다른 반응은 없습니다.


2. Xamarin.Forms 파일을 추가 합니다. 추가한 xaml 파일에서 오른쪽 버튼으로 메뉴를 오픈합니다. Stick Gorilla to this를 선택합니다.


3. 먼저 앱을 컴파일해서 시뮬레이터를 실행합니다. 이게 먼가 싶죠? 저도 여기서 헤맸습니다. 앱이 실행이 되면 앱을 종료합니다.


4. 시뮬레이터에서 조금 전에 설치한 Gorilla 앱을 실행합니다. 자동으로 현재 앱에 연결되어 선택된 페이지가 로딩됩니다.


5. 이제 xaml 파일을 수정하고 저장해 봅니다. 다른 파일도 추가해서 Stick Gorilla to this로 랜더링할 페이지를 변경해 봅니다.


잘 되나요? ^^


[추가]

아직 문제점은 있습니다.

페이지를 삽입하는 경우 인식을 못하고 오류를 냅니다. 예로들면 MasterDetailPage에서 master나 detail에 다른 페이지를 요청하면 오류가 납니다. 아주 붉게~

하지만 단일 페이피지 랜더링은 잘됩니다. 제가 아직 쪼랩이라서 그렇겠지요~!!


컴파일 시간이 보통 1분 이내로 끝나긴 하지만 디자인 하나를 보기 위해서 여러번 컴파일을 하다보면 시간적인 낭비가 상당합니다. 이부분에 있어서 높이 평가해 주고 싶네요~~ ^^

신고

WRITTEN BY
비트센스
뷰파인더로 보는 프로그래머의 세상 페이스북 @bitsense 트위터 @picory 스카이프 picory MSN drawhalf@dreamwiz.com

받은 트랙백이 없고 , 댓글이 없습니다.
secret
logo

c#을 잘 모릅니다. 그래도 몇년 전에 사 놓은 책이 몇 권 책장을 차지하고 있네요. 안봐서 문제겠지만요. xamarin도 익히 들었지만 솔직히 잘 모릅니다. 모바일 개발에 적용해 보려고, 그동안 해보고 싶었지만 월 $25의 가격정책은 높은 벽으로 넘기 어렵웠습니다. "공부하려고 하는데 돈을 내야 하다니..." 게다가 이래 저래 치여서 살다보니 짬이 안나는 시간도 문제였습니다. 머... 다들 그러시잖아요?? ㅠ,.ㅠ;;

그러다 얼마 전 MS가 xamarin을 인수하고, 감사하게도 무료로 풀었다는 반가운 소리에, 다시 힘을 얻어서 이것 저것 만져 본지도 벌써 석달이 되어 갑니다. 공부할 짬을 낼 수 없는 현실이 문제라고 하소연을 해 보지만... 역시 아무 것도 모르는 초보자에게 새로운 언어와 툴은 장벽입니다.

게다가 영어로 된 가이드들은..., 분명 자기네들 끼리는 쉽다고 만든 거 같은데... 어렵게만 느껴지는 이 기분은... ㅠ,.ㅠ;; 꼭 무슨 시험보는 듯한... 어흑... xamarin 열풍?이라고 하는데, 정작 국내 사이트 중에서 xamarin 강좌를 본격적으로 하는 곳도 없고, 실제 번역본이나 한글 개발서적이 거의 전무한 상태다 보니 의지할 곳이 없어서 더 힘든 것 같습니다.

2016년 5월 9일 현재 인터넷 서점에는 Xamarin 관련 서적이 거의 없네요.

그래서 허접한 내용이라도 공유를 해보고자 합니다. 제가 먼가를 만드는 것은 어렵고, 그러니 가장 최근 xamarin 서적인 "Creating Mobile App With Xamarin.Forms"[링크]Xamarin 공식 Blog 사이트[링크]에 소개된 샘플 소스들을 중심으로 분석한 내용을, 혹시 저처럼 맨땅에 헤딩하는 듯한 느낌으로 검색창을 두드려 보는 초보자님에게 공유해 보려고 합니다. 제가 c#도, xamarin도 잘 모릅니다. 모바일 용어들은 더더군다나 모릅니다. 영어도.. 무지... 한.. 켁...

대부분은 구글과 네이버를 기초한 단어 직역?과 체험을 근거로한 추측성 멘트? (이런 거 같다. 내가 해보니 이렇드라..) 가 위주가 될 것입니다. 머 그게 불만이시라면, 정확한 용어를 알려 주세요. 마음을 다해 감사하겠습니다. ^^;; 여튼, 몇개 분석한 내용을 중심으로 해서 지속적으로 만들어 보도록 하겠습니다.

참고로 해당 내용은 되도록 개별적인 스터디 모임에서 활용하기 위한 내용이기도 합니다.

현재까지 분석된 내용에 대해서 말씀을 드리면

1. ZXing 모듈을 이용한 바코드 스캐너
2. Xamarin.Facebook을 이용한 페이스북 로그인
3. Json 파서를 활용한 데이터 바인딩
4. 기타 등등 디자인 관련 자질구레한 용어 및 몇가지 트러블 슈팅 ??

음... 머 한게 없네.. 이런... =_=;;

신고

WRITTEN BY
비트센스
뷰파인더로 보는 프로그래머의 세상 페이스북 @bitsense 트위터 @picory 스카이프 picory MSN drawhalf@dreamwiz.com

받은 트랙백이 없고 , 댓글이 없습니다.
secret

My First Angular 2 App 만들기

[링크] Angularjs 2 샘플 소스 다운받기 (QuickStart)

샘플 소스를 따라 하면 마지막에 npm start 가 나옵니다. 이 소스는 특별히 문제가 없어 보이지만, 다음 Tutorial의 소스인 Tour of Heroes를 따라하다 보면 NodeJS 위에서는 정상동작을 하나, 실제 웹서비스에서는 오류가 나옵니다. 데이터를 제대로 읽지 못해서 그런 것으로 보입니다. 그래서 TypeScript를 사용하는 것은  NodeJS 서버 위에서 사용을 해야하는 건가? 하는 고민을 하기도 했습니다. 실은 제가 NodeJS 프로젝트는 WebStorm 에디터를 이용해서 하고 있어서, 툴에 대한 종속성 문제가 생기는 거라, 좀 헤깔렸습니다. NodeJS + AngularJS + TypeScript도 한번 고민해봐야 할 거 같습니다. ^^;;

여튼 지금은 NodeJS를 제외한 상태에서 확인을 하도록 하겠습니다. 저의 경우, 이전 페이지에서 말씀드린 바와 같이 테이블 2개 이상, 입력창 3개 정도에서 데이터를 페이지 갱신없이 동작을 시키지 위한 페이지를 만드려고 하는 것입니다. 이미 웹 어플은 php로 정해져 있기 때문에, 저에게 필요한 것은 html페이지 하에서 onload 이벤트에서 async 하게 동작하는 것이 더 좋습니다. NodeJS는 전혀 고려대상이 아닙니다.

#1. tsconfig.js 작성 후 .vscode/tasks.json 파일 자동 생성
     - tasks.json 파일로 TypeScript 컴파일러 설정까지 가능합니다.

#2. typings.json, package.json 작성 후 npm install로 node_modules, typings 폴더 이하 파일 자동 생성
     - typings.json은 TypeScript의 정의 파일들, package.json은 필요한 팩키지와 스크립트들을 정의한 파일입니다.

위 두 단계는 진행을 했을 거라고 생각을 합니다. 어렵나요? 저게 어렵다기 보다는 영어가 넘사벽이지 않을까 싶네요. ㅠ,.ㅠ;;

이제 첫번째 프로젝트인 "My First Angular 2 App" 만들기를 본격적으로 시작해 보겠습니다.

index.html

<html>
  <head>
    <title>Angular 2 QuickStart</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- 모바일 가로, 세로 변경에 따른 대응 메타 태그 -->
    <link rel="stylesheet" href="styles.css">

    <!-- 1. Load libraries -->
    <!-- Polyfill(s) for older browsers -->

    <script src="node_modules/es6-shim/es6-shim.min.js"></script> //  es6의 필수 기능
    <script src="node_modules/zone.js/dist/zone.js"></script> // 구버전 대응 polyfill
    <script src="node_modules/reflect-metadata/Reflect.js"></script> // 구버전 대응 polyfill
    <script src="node_modules/systemjs/dist/system.src.js"></script> // 구버전 대응 polyfill

    <!-- 2. Configure SystemJS -->
    <script src="systemjs.config.js"></script> // systemjs library
    <script>
      System.import('app').catch(function(err){ console.error(err);  });
    </script>
  </head>

  <!-- 3. Display the application -->
  <body>
    <my-app>Loading...</my-app>
  </body>
</html>

[참고]
polyfill? 뿔? 최신이 아닌 오래된 버전의 브라우저에서 HTML5 API를 모방한 JS 라이브러리 등의 도움을 받아 정상 작동하도록 하는 대안으로 기능을 구현하는 행위를 의미 하다고 하네요. 

app/app.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  template: '<h1>My First Angular 2 App</h1>'
})

export class AppComponent { }

모든 angular app은 AppComponent 로 이름지어진 최소 한 개 이상의 root component를 가지고 있습니다. 컴포넌트는 angular app의 기본 구성 블록? 입니다. 하나는 컴포넌트는 각 구성 템플릿을 통한 화면(뷰)의 부분(요소)들을 관리합니다. 샘플 소스의 컴포넌트는 index.html의 <my-app> 영역에  '<h1>My First Angular 2 App</h1>' 내용을 출력 할 겁니다. 잠시 구성 내용을 보겠습니다.

import : angular app의 모듈을 호출해서 객체? { 객체명 } (영문으로는 decorator) 으로 선언을 합니다. nodejs에서는 var express = require('express'); 이런 형태가 되지 않을까 싶습니다. 

decorator : js에서는 객체? 정도의 개념을 가지고 있을 것으로 보이는데, 번역이 어렵네요. import를 통해서 모듈을 참조한 객체를 활용합니다. 샘플에서는 { Component } 선언하여 '@angular/core' 모듈을 참조시킨 후 @Component로 사용하였습니다.

metadata : @Component decorator 이하 selector, template 가 포함된 { } 영역을 말합니다. 샘플 소스 처럼 모든 decorator는 metadata를 포함하고 있습니다. 해당 모듈 실행을 위한 초기값 정도로 생각하셔도 될 거 같습니다.

selector : jQuery 등을 사용하신 분이라면 익숙한 용어일 겁니다. HTML 태그명을 지칭하고 있네요. 샘플에서는 <my-app>을 찾습니다.

template : selector로 지정된 영역을 대체할 html 내용을 넣으면 됩니다. 파일명을 넣을 경우에는 templateUrl 을 사용하시면 됩니다.

AppComponent : 이 클래스에 속성과 로직을 추가하여 확장이 가능합니다. 샘플소스는 비어 있기 때문에 아무런 일이 일어나지는 않을 겁니다. 해당 내용은 main.ts에서 확인이 가능 합니다.

app/main.ts

import { bootstrap }    from '@angular/platform-browser-dynamic';

import { AppComponent } from './app.component';

bootstrap(AppComponent);

소스만 보셔도 이녀석이 딱! 무슨 일을 하는지 아시겠죠? c에서 main() 함수와 비슷한 녀석으로 보입니다. bootstrap, AppComponent를 import 해서, 다시 bootstrap에 AppComponent를 인자로 호출을 합니다. 결국 main.ts가 실제 실행 파일로 보입니다. bootstrap ('@angular/platform-browser-dynamic')이 앱을 실행하는 방법 중에 하나 라고 하네요. 모바일의 경우에는 Apache CordovarNative Script를 로드해야 합니다. 지금은 페이지가 샘플이라 간단하지만 프로젝트에 따라 훨씬 복잡하게 만들 수도 있습니다.

import {bootstrap} from '@angular/platform-browser-dynamic';
import {ROUTER_PROVIDERS} from '@angular/router-deprecated';
import {HeroService} from './hero.service';
import {AppComponent} from './app.component';

bootstrap(AppComponent, [
  ROUTER_PROVIDERS,
  HeroService
]);

위 내용은 Turorial의 샘플인 Tour of Heroes의 main.ts 파일입니다.

systemjs.config.js

샘플 소스는 다른 앱이나 모듈을 로드하기 위해서 SystemJS를 포함하고 있습니다. 이녀석은 webpack을 포함하고 있습니다. 이 부분은 생산성이나 퍼포먼스를 위해 좋은 방법으로 보입니다. 실제 설정 파일의 내용은 좀 복잡하니 실제 파일을 참고해서 확인하시면 됩니다.

styles.css

css 파일은 아실 거라고 봅니다. html 파일에 대한 스타일 파일이라 굳이 설명할 필요는 없어 보입니다.

실행할 준비는 이제 끝났습니다. 설명이 좀 부족한 거 같기는 한데... ^^ 저도 처음 하는 거라 제가 이해하는 부분까지만 정리를 했습니다.

nodejs를 실행하시는 경우에는 아래의 명령을 콘솔에서 실행하시면 됩니다. 그러면 ts파일을 js파일로 컴파일 후 브라우저를 실행합니다.

npm start

Visual Studio Code에서 직접 실행을 원하신다면 컴파일 명령(⇧⌘B)을 실행하시면 됩니다.

중간까지의 결론, 속도가 왜 이렇게 느리지?

일단 제가 무언가 잘못한 거 같아 보입니다. nodejs와 웹서버에서도 결과물이 나오는데 3초 이상이 소요되는 거 같습니다. 가끔 빠르게 나오기는 하지만 기본적으로 느립니다. 기대 이상으로 느립니다. 샘플 코드가 그러니, 이걸 어쩌나.. 하는 생각이 듭니다. =_=;;

SPA이기 때문에 최초 실행 후 부터는 페이지 갱신이 안되니 빨라 지려나 기대를 하기도 하지만, 애시당초 이를 어쩌나 싶습니다. nodejs를 경유하지 않으려고 하는데... 이걸 어쩌나.. 싶습니다. 아직 페이지는 만들지도 않았는데...

혹시 누가 아시는 분이 있다면 저에게 지식을 나누어 주시길 바랍니다. ㅠ,.ㅠ;;

신고

WRITTEN BY
비트센스
뷰파인더로 보는 프로그래머의 세상 페이스북 @bitsense 트위터 @picory 스카이프 picory MSN drawhalf@dreamwiz.com

받은 트랙백이 없고 , 댓글  2개가 달렸습니다.
  1. 저도 시작 샘플돌려보고 heroes 샘풀돌려보고 있습니다만 typescript 도 아직 초기버전이고 angularjs2 도 초기라 nodejs 이외의 컨테이너에서는 최적화 작업을 안한 거 같애요. 당분간은 nodejs를 이용해야할 것 같애요.
    • angularjs 2 샘플은 nodejs 바탕 위에서 작동을 하도록 되어 있네요.
      저는 순수하게 angularjs + javascript 처럼 typescript 만 사용하고 싶은데
      그렇게 하기에는 아직 문제가 많네요.
      시간이 되면 다시 정리를 해봐야 할 거 같습니다.
secret

SPA 만들기를 시작하면서

필요에 의해서 웹페이지 하나를 만드는데, 테이블이 2개, 셀렉트 박스가 3개가 서로 맞물려서 데이터를 주고 받아야 하는데, 이걸 처리하려고 하니 일반 웹페이지에서는 페이지 갱신을 여러번 해줘야 하고, 그럴때 마다 할일없이 데이터 요청을 계속하게 되는 악순환?이 생겨서, 처음에는 그냥 페이지 로드하면서 백단에서 async하게 ajax call을 해볼 생각이었다.

문득 백단에서 호출하는 녀석을 ajax로 할 거면 angularjs로 하는 것도 괜찮지 않을까? 하는 생각을 했다. 그러면 이번에 나온 angularjs 2는 어떨까? 그러고 보니 angularjs가 typescript를 지원한다는데... 이참에 그것도 한번 해볼까? typescript를 잘 지원하는 에디터가 visual studio code라든데 그것도 한번 써볼까? 머 이런 꼬리에 꼬리를 무는 의구심으로 또다시 헬게이트에 발을 디뎠네요.

헬게이트라고 말하는 것이 대부분의 문서가 영어고, 구글성님이 영어만 알려줘서..., 기존 한글 문서들 보다 제가 멀 어떻게 잘 할 수 있을까 하는 생각도 있고, 그래도 그 문서들은 잘 이해는 안가고... =_=;;

여튼 문서를 따라가다 보니 AngularJS + TypeScript => SPA를 만드는 것으로 귀결되어서 일단은 퍼포먼스를 고려하지 않고 진행을 합니다. 그러다 봉사 문고리 잡는 방법이 생기면 계속 공유를 하겠습니다.

개발 환경 (참고)

OS X El Capitan
visual studio code
AngularJS
TypeScript
NodeJs (v5.8.0)

Visual Studio Code 설치 및 설정

Visual Studio Code는 Visual Studio와 비슷하다 상상하시면 안됩니다. 그냥 단순한 텍스트 에디터 + 좀 많은 플러그인 조합? 정도로만 생각하십시오. 맥이 에디터 부분에서는 진짜 빡세게 안좋다는 개인적인 생각입니다.

링크 : VS Code 다운로드

링크 : VS Code Extensions 중 TypeScript 관련 다운로드

AngularJS 2 프로젝트 생성

프로젝트 폴더 생성 : angularjs2-quickstart (샘플 코드에 나온 폴더)

mkdir angularjs2-quickstart

cd angularjs2-quickstart


tsconfig.json 파일 생성 (VS Code에서 ts 컴파일 가능 설정) 

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "sourceMap": true
  }
}


(NodeJs에서 컴파일 가능 설정)

{
  "compilerOptions": {
    "target": "es5",
    "module": "system",
    "moduleResolution": "node",
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "removeComments": false,
    "noImplicitAny": false
  },
  "exclude": [
    "node_modules",
    "typings/main",
    "typings/main.d.ts"
  ]
}


Visual Studio Code에서 ts 컴파일 가능하도록 설정

#1. HelloWorld.ts 파일 생성
class Startup {
    public static main(): number {
        console.log('Hello World');
        return 0;
    }
}

Startup.main();

#2. tasks.json 생성 (F1 클릭) - TypeScript - tsconfig.json 선택 > .vscode/tasks.json 파일 생성

#2-1. tasks.json 파일

{
// See http://go.microsoft.com/fwlink/?LinkId=733558
// for the documentation about the tasks.json format
"version": "0.1.0",
"command": "tsc",
"isShellCommand": true,
"args": ["-p", "."],
"showOutput": "silent",
"problemMatcher": "$tsc"
}

#3. 맥에서 ts 컴파일 방법 - ⇧⌘B
>>> 컴파일 오류가 나는 경우, typescript 설치
$ npm install -g typescript


typings.json 파일 생성

{
  "ambientDependencies": {
    "es6-shim": "registry:dt/es6-shim#0.31.2+20160317120654",
    "jasmine": "registry:dt/jasmine#2.2.0+20160412134438"
  }
}


package.json 파일 생성

{
  "name": "app",
  "version": "1.0.0",
  "scripts": {
    "start": "tsc && concurrently \"npm run tsc:w\" \"npm run lite\" ",
    "lite": "lite-server",
    "postinstall": "typings install",
    "tsc": "tsc",
    "tsc:w": "tsc -w",
    "typings": "typings"
  },
  "license": "ISC",
  "dependencies": {
    "@angular/common":  "2.0.0-rc.0",
    "@angular/compiler":  "2.0.0-rc.0",
    "@angular/core":  "2.0.0-rc.0",
    "@angular/http":  "2.0.0-rc.0",
    "@angular/platform-browser":  "2.0.0-rc.0",
    "@angular/platform-browser-dynamic":  "2.0.0-rc.0",
    "@angular/router-deprecated":  "2.0.0-rc.0",
    "@angular/upgrade":  "2.0.0-rc.0",
    "systemjs": "0.19.27",
    "es6-shim": "^0.35.0",
    "reflect-metadata": "^0.1.3",
    "rxjs": "5.0.0-beta.6",
    "zone.js": "^0.6.12",
    "angular2-in-memory-web-api": "0.0.5",
    "bootstrap": "^3.3.6"
  },
  "devDependencies": {
    "concurrently": "^2.0.0",
    "lite-server": "^2.2.0",
    "typescript": "^1.8.10",
    "typings":"^0.8.1"
  }
}


node-module 설치

> npm install

node_modules 폴더가 생성되고 package.json을 기준으로 의존적인(dependencies) 모듈들을 설치해 줍니다.


샘플 파일 생성

샘플 소스 : https://angular.io/docs/ts/latest/quickstart.html 참조


VS Code vs NodeJS 컴파일 비교

VS Code에서 컴파일(⇧⌘B) 하는 경우, 일반 컴파일러에서 하는 것 처럼 에러 로그 메시지를 보면서 확인이 가능합니다.

NodeJS에서 컴파일(node start)을 할 경우에는 3000번 포트의 웹페이지를 실행해서 결과물까지 직접 확인 가능합니다.

[추가] 현재 Visual Studio Code에서 컴파일을 한 경우에는 Duplicate 메시지가 많이 나옵니다. 그래도 돌아는 가네요. 먼가 불안한 모습을 보이고는 있지만 곧 해결이 되지 않을까 싶습니다.

# 에러메시지 샘플
app/app.component.ts(7,14): error TS1219: Experimental support for decorators is a feature that is subject to change in a future release. Set the 'experimentalDecorators' option to remove this warning.
typings/browser/ambient/es6-shim/index.d.ts(8,14): error TS2300: Duplicate identifier 'PropertyKey'.
typings/browser/ambient/es6-shim/index.d.ts(11,5): error TS2300: Duplicate identifier 'done'.
typings/browser/ambient/es6-shim/index.d.ts(12,5): error TS2300: Duplicate identifier 'value'.
typings/browser/ambient/es6-shim/index.d.ts(250,5): error TS2300: Duplicate identifier 'EPSILON'.

이상으로 AngularJS 에 대한 허접한 설치, 설정 방법을 정리해 봤습니다. 관련 페이지 내용은 다음에 다시 정리하도록 하겠습니다. Visual Studio Code 를 설치하고 쓸일이 없었던 분들에게 좋은 기회?가 되었으면 합니다. ^^;;

참고 URL

angularJS 홈페이지 : https://angular.io/docs/ts/latest/quickstart.html
visual studio code 홈페이지 : https://code.visualstudio.com/Docs/languages/typescript

신고

WRITTEN BY
비트센스
뷰파인더로 보는 프로그래머의 세상 페이스북 @bitsense 트위터 @picory 스카이프 picory MSN drawhalf@dreamwiz.com

받은 트랙백이 없고 , 댓글이 없습니다.
secret

Laravel에서 디자인 블레이드의 변수는 {{}}를 사용하는데, 이 내용은 AngularJS와 동일합니다. 해서 변수를 지정하는 "{{}}"변경하는 작업이 필요합니다.

var myApp = angular.module('MyApp', []).config(function($interpolateProvider) {

  $interpolateProvider.startSymbol('[[[');

  $interpolateProvider.endSymbol(']]]');

});

저는 {{}} 대신에 [[[ ]]]로 변경을 했습니다. [Shift]키를 한번이라도 덜 눌러 보려는 꼼수? 입니다. ^^;;


신고

WRITTEN BY
비트센스
뷰파인더로 보는 프로그래머의 세상 페이스북 @bitsense 트위터 @picory 스카이프 picory MSN drawhalf@dreamwiz.com

트랙백  2 , 댓글이 없습니다.
secret

아두이노를 처음 받은 다음에는 대부분 Blink 샘플을 할 것으로 보입니다. LED와 저항 하나만 있으면 일단 정상동작을 하는지 테스트가 가능하니까 말이죠.

처음 동작을 시킬때 나온 에러메시지...

avrdude: stk500_getsync(): not in sync: resp=0x00

그것도 아주 빨간 글씨로...

해당 메시지는 아두이노 컴파일러가 아두이노로 컴파일된 소스를 전송하지 못했다는 얘기입니다. 구글에서 검색을 하니 너무 어렵게 설명을 해놨더라구요.

아두이노는 기본 설정이 COM1에 세팅이 되어 있습니다. 근데 제 컴은 COM4로 아두이노를 연결해 놓았더라구요. 컴파일러 도구 > 시리얼 포트 > COM4로 바꾸고 다시 컴파일을 하니 정상적으로 됩니다.


아두이노 처음 연결시 컴파일러는 COM1로 기본 설정이 되어 있습니다.

PC마다 다를 건데, 저는 COM4로 연결이 되어 있네요. 그래서 컴파일러 연결 포트를 COM4로 바꾸고 컴파일을 하니 정상적으로 동작을 했습니다.

신고

WRITTEN BY
비트센스
뷰파인더로 보는 프로그래머의 세상 페이스북 @bitsense 트위터 @picory 스카이프 picory MSN drawhalf@dreamwiz.com

받은 트랙백이 없고 , 댓글  2개가 달렸습니다.
  1. 저는 포트가 COM1 박에 없는데 어떻게 하나요?
secret

Google App Engine(이하 gae) 사용시 local mysql 연동에 문제가 좀 있더군요. 이리 저리 자료를 찾아서 정리를 했습니다.

파일다운로드 URL :
http://www.lfd.uci.edu/~gohlke/pythonlibs/#mysql-python

app.yaml 추가

libraries:

- name: MySQLdb
  version: "latest"

샘플 소스

import MySQLdb

CLOUDSQL_INSTANCE = '127.0.0.1' #localhost라고 하면 연결이 안되네요
DATABASE_NAME = 'database'
USER_NAME = 'root'
PASSWORD = '비밀번호'

def get_connection():
    kwargs = {
              'db': DATABASE_NAME,
              'user': USER_NAME,
              'passwd': PASSWORD,
              'port': 3306,
              'charset': 'utf8' #없으면 한글이 깨집니다.
              }

    return MySQLdb.connect(CLOUDSQL_INSTANCE, **kwargs)

class DbHandler(BaseHandler):
    def get(self):
        # Viewing guestbook
        conn = get_connection()
        cursor = conn.cursor()
        cursor.execute('SELECT idx, code, level FROM user_group '
                       'ORDER BY created_at DESC limit 20')
        rows = cursor.fetchall()
        conn.close()
        template_values = {"rows": rows}
        self.templates('test/test.html', **template_values);


app = webapp2.WSGIApplication([
    ('/db', DbHandler),
], debug=True)


신고

WRITTEN BY
비트센스
뷰파인더로 보는 프로그래머의 세상 페이스북 @bitsense 트위터 @picory 스카이프 picory MSN drawhalf@dreamwiz.com

받은 트랙백이 없고 , 댓글이 없습니다.
secret

무료아이콘 2800개
http://macnews.tistory.com/1932

----------------------------------

알아 두셔야 할 것은 리소스라는 점입니다. HTML 디자인이 제공되는 경우도 있으나, 대부분 그냥 이미지가 전부인 것으로 보입니다. 즉, 가공자가 디자인 프로그램을 어느 정도 할 수 있어야 한다는 말이지요~

그래도 디자인에 무지한 저로써는 샘플만이라도 참고가 되는 것이기에 한번 다운 받아 소장을 해볼 가치는 있다고 봅니다. ^^

471개 프리미엄 리소스
http://www.inkydeals.com/deal/inkys-free-web-design-bundle-471-premium-resources/

신고

WRITTEN BY
비트센스
뷰파인더로 보는 프로그래머의 세상 페이스북 @bitsense 트위터 @picory 스카이프 picory MSN drawhalf@dreamwiz.com

받은 트랙백이 없고 , 댓글이 없습니다.
secret