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

본 체험제품은 No1. 전자부품 전문 쇼핑몰 아이씨뱅큐 와 뉴로메카의 지원을 받아 작성한 것입니다.


이번에는 블루투스 서버 설정 및 연동, 그리도 블루투스 에코 서버 설정으로 채팅 내용을 화면에 찍는 것 까지 해보려고 합니다. 말만 좀 복잡하네요. 그냥 채팅용 에코 서버 설정입니다. ^^;;

원래 블루투스로 채팅서버를 만들어 보려고 했지만, 제 내공도 쪼랩이고, 실제 구현을 위한 작업을 위해서 사전에 준비해야할 것들이 많기 때문에 일단 블루투스 연결 후 에코서버로 활용하는 방법까지만 확인하도록 하겠습니다.


BBA 블루투스 설정


터미널에서 BBA에 root 계정으로 접근을 합니다.


$ ssh root@192.168.7.2


블루투스 설정 페이지로 진입을 합니다.


# minicom -s


(리눅스라 맥 터미널 명령의 $과 틀린 #으로 시작합니다. 특수문자를 입력하지는 않습니다. 아시죠? ^^)

아래와 같이 minicom 설정 화면이 나옵니다.


minicom -s 에서 나오는 블루투스 설정 창. Serial port setup을 선택합니다.

블루투스 설정 창입니다. 터미널이기 때문에 그림 대신에 이렇게 글자만 덩그러니 나옵니다. "Serial port setup"을 선택합니다. 키보드의 아래 화살표로 내린 후 엔터를 입력하면 됩니다.


블루투스 설정 화면 ttyO4를 기억하세요.

이번에는 이전과 다르게 화살표로 이동이 불가능합니다. "A"를 입력해서 Serial Device를 선택한 후 ttyO4로 변경합니다. 숫자 0이 아닌 영어 대문자 "O" 입니다. Bps/Par/Bits도 확인합니다. "115200 8N1"이 아니라면 수정합니다. 수정 후 엔터, 모두 수정하였다면 다시 엔터를 치면 설정창이 사라집니다.


설정을 하였다면 화살표로 "Save setup as df1"을 선택 후 엔터!! 그리고 Exit를 누르고 엔터를 칩니다. 저장을 하지 않으면 초기에 세팅된 값이 계속 나오기 때문에 연결이 되지 않고 제가 경험했던 이상한 현상을 보실 수 있습니다. ^^


minicom 실행 화면. "AT+NAME디바이스명"으로 블루투스 디바이스 이름을 변경합니다.


설정을 마치고 Exit 나오면 위와 같이 minicom 화면이 나옵니다. 현재 블루투스가 정상동작하는지 확인하기 위해서는 "AT+" (모두 대문자여야 합니다.) 입력 후 엔터. 입력된 글자는 보이지 않고 "OK"만 나올 겁니다. 그러면 일단 블루투스는 문제없이 돌고 있다는 소리입니다.
블루투스 장치 이름을 변경하겠습니다. 그냥 디폴트 이름을 사용해도 좋으나, 인식하기 편한 이름이 좋겠죠? "AT+NAME"을 입력 후 엔터!를 치시면 "BBA8160410080" 과 같은 이름이 나옵니다. 이 이름을 저는 "GZONE_AIR"로 변경했습니다. 변경하는 방법은 


AT+NAMEGZONE_AIR


입력 후 엔터를 치시면 됩니다. 사이띄기 없이 그냥 입력하시면 됩니다. 이름이 변경되었는지는 다시 "AT+NAME"으로 확인하시면 됩니다.


이제 이름이 블루투스에 검색이 되는지 확인을 합니다. 맥 메뉴에서 "시스템 환경설정 > Bluetooth" 이름이 나오는지 확인합니다. 이상하게 안나옵니다. =_=; 여기에서 한참을 저는 헤맸습니다. 왜 안나오지?? 하면서요~


MacOS 시스템 환경설정 > Bluetooth에서는 BBA 장비가 보이질 않습니다. ㅠ,.ㅠ;;

방금 설정한 장비가 MacOS에서는 보이질 않습니다. 이게 어이된 일일까요? 많이 당황을 했고, 이것 때문에 시간을 많이 소비했습니다. 아직 답은 찾지 못했습니다.


혹시나 하는 마음에 핸드폰에서 Bluetooth 장비를 스캔해 보았습니다.

블루투스 장비에 과거 초기 세팅된 이름이 올라와서 삭제가 안됩니다. 아니 삭제를 할 수가 없었습니다.

어? 장비가 하나 스캔 되었는데... 어째 제가 등록한 이름이 아니고 과거 이름이 나오네요. 이 부분도 저를 몹시 당황하게 했습니다. 며칠을 이렇게 변경되지도 않고, 연결도 되지 않고... 계속 구글형님에게 SOS를 보냈지만 답이 나오질 않더군요. ㅠ,.ㅠ;; 이렇게 일주일 정도가 흘렀습니다. 덕분에 채팅 서버를 만들어 보려고 했던 계획에 차질이 생겼습니다.


갑자기 이름이 변경되서 연결이 가능한 것 처럼 목록에 자리를 잡습니다. 하지만 실제 연결은 되지 않습니다.

며칠이 지난 후, 혹시나 하는 심정으로 다시 열어 보니, 어라? 이번에는 제대로 나오네요. 제가 먼가 질 했나 봅니다. 다행입니다. ㅠ,.ㅠ;; 하지만 다른 블루투스 장비 처럼 "0000", "1234"를 입력하더라도 연결은 되지 않습니다. 그냥 연결 실패가 되었지만 저렇게 연결 가능한 것 처럼 목록에 올라가 있네요. =_=;; 스마트폰에서는 연결은 안되지만 일단 먼가 할 수 있는 가능성은 생긴 것 같네요. 곧바로 테스트를 해보겠습니다.


불안불안한 마음으로 안드로이드용 블루투스 채팅앱을 다운 받아 설치를 합니다. 제가 채팅 테스트로 사용할 앱은 "BLE Chat" 입니다. 블루투스 장비를 연결해서 테스트를 하기에 꽤 쓸만합니다.


구글 스토어에서 BLE Chat을 다운받으세요.

안드로이드용 블루투스 채팅 앱 다운로드를 합니다.


BLE Chat 앱을 설치 후 실행한 다음. 블루투스 장비 연결을 위해 눈 모양의 아이콘을 클랙해서 "장치 스캔"을 시작합니다. 연결 가능한 장비들이 목록에 올라옵니다. 연결할 장비이름을 선택하면 자동으로 연결을 시작합니다.


BeagleBone Air 채팅 에코서버 만들기

BeagleBone Air를 채팅 에코서버로 만들기 위해서

Ctrl+A E

를 입력 후 엔터를 입력합니다. "Ctrl+A"  그리고 그냥 "E" 이렇게 입력을 합니다. 저렇게 입력을 해도 별다른 반응은 없습니다. 그러려니 하십시오. =_=;;


BLE Chat 앱에 블루투스 장비가 연결되면 초록빛 아이콘으로 변경이 됩니다.

BLE Chat 화면의 맨 하단에 장비가 연결되면 연결된 장비 이름이 노출 됩니다. 와우~!!! 연결 확인 후에는 문자를 아무거나 입력 후 [전송] 버튼을 클릭하시면 메시지가 전송이 됩니다.


에코 서버의 첫 메시지. 다름 메시지가 줄바꿈이 되지 않고 한줄로 쭈욱 나오네? ㅠ,.ㅠ;;

전송된 메시지는 에코 서버인 BBA 터미널에 저렇게 곱게 찍힙니다~!!! 아싸 성공!


[실행 동영상]



여기까지 진행하면서 참 고생이 많았습니다. 아무래도 저의 실수겠죠? 하지만 그 실수를 어떻게 했는지, 어떻게 만회를 해야 하는지에 대한 부분이 없어서 많이 애를 먹었네요. 어찌됐건 연결이 되서 다행입니다.


BBA Bluetooth가 좋은 점

타 장비와 연결이 알고보면 그렇게 어렵지 않다. 하지만 초반에 첫단추를 잘못 채우면 멀리 돌아가는 아픔?!!이 생깁니다.

장비 이름 변경이 생각보다 쉽습니다.


아쉬운 점

이거 멀티페어링이 안되나요? 다른 장비로 연결하려면 지금은 연결을 끊어야 하는데? 이거 블루투스 호스트 아녔나요?

MacOS에서 블루투스 장비 목록에 왜 안보이나요?
안드로이드 블루투스 설정에서 왜 연결이 안되나요?
minicom의 일관적이지 않은 UI가 헤깔리게 합니다. 어디는 화살표, 어디는 알파벳을 입력, 어디는 연속적인 키 콤비네이션. 헤깔립니다.

그리고 AT+로 시작하는 명령이 보이질 않습니다. 오타가 나도 할말이 없습니다. =_=;;


총평

어디까지나 개인적인 관점이고 극히 제한된 상황입니다만, 아직까지 저는 멀티페어링이 안되고 있습니다. 멀티페어링이 안된다고 하더라도 와이파이 등등 다른 방법으로 장비들을 연동할 수는 있을 겁니다. 그래도 약점이자 제약사항이 되지 않을까 싶습니다.

다른 장비와 연결을 위해서 페어링을 해제 후 재연결을 하는 것이 여간 번거롭습니다.





BBAir 스타터키트 구입처 : 아이씨뱅큐 
http://www.icbanq.com/P007133008

아이씨뱅큐 100% 무상체험단 카페 : http://cafe.naver.com/icbanq

아이씨뱅큐 공식 블로그  : http://blog.naver.com/icbanq

신고

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

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

본 체험제품은 No1. 전자부품 전문 쇼핑몰 아이씨뱅큐 와 뉴로메카의 지원을 받아 작성한 것입니다.


이제 비글본 에어의 기본 기능 사용방법에 대해서 알아보도록 하겠습니다. 기존 사용방법은 대부분 윈도우로 나와 있지만, 저는 주 작업 PC가 맥북프로 이기 때문에 맥을 기준으로 설명을 하도록 하겠습니다.


비글본 에어에 전원을 연결하면 자동으로 켜집니다. 물론 메인보드와 Cape에 파워 버튼이 있지만 이녀석은 강제로 종료하기 위해서 사용하는 것으로 보입니다. 전원이 들어오면 리눅스가 부팅되는 동안 Cape의 빨간 LED가 계속 점멸되다가 부팅이 완료되면 계속 켜져 있습니다.


비글본 에어와 맥을 USB로 연결을 해봅니다. 드라이브가 설치된 분이라면 아래와 같이 "BEABLEBONE" 이라는 기기가 마운트되어 나타날 것입니다만, 최초 연결시에는 안나타날 것입니다. (제 기억이 가물거리네요~~ ^^;;)

USB 케이블로 맥과 비글본 에어를 연결하면 자동으로 마운트 됩니다. START.htm 파일을 클릭합니다.

마운트가 되었다면 드라이버들을 설치하기 위해 "START.htm" 파일을 클릭합니다. 이름에서 눈치챌 수 있듯이 비글본 에어 연결을 위한 설정 및 각종 소스들이 있는 웹페이지를 보여 줍니다.

혹시 자동으로 마운트가 되지 않은 분들은 [비글보드 홈페이지]에서 확인하시면 됩니다.


드라이버를 설치합니다. 맥용 파일은 두개입니다. 네트웍과 시리얼 통신을 위한 드라이버 입니다.

맥용 드라이버 파일은 두개 입니다. 하나는 네트워크 용이고 하나는 시리얼 통신 용입니다. 네트워크 드라이버와 시리얼 통신 드라이버를 모두 설치하고 나면 리부팅을 합니다. 리부팅 후 시스템 환경설정 > 네트워크를 확인하면 아래와 같이 BeagleBoneBlack이 연결되어 있는 것을 볼 수 있습니다. 저 녀석이 연결 안되면 터미널 상에서 비글본 에어에 접속을 못합니다. 꼭 확인하셔야 합니다.


시리얼 드라이버가 설치되면 네트워크에서 확인하실 수 있습니다. 연결이 안되어 있으면 비글본 에어에 터미널 접근이 안됩니다.

혹시 연결이 안되어 있다면, 상당한 멘붕이 올 것으로 보입니다. 저도 사무실에서 연결되었는데 집에서 다시 부팅을 하니 연결이 안되서 시리얼 드라이버만 서너번 깔고 리붓한 거 같습니다. 보통 일반적으로 윈도우에서는 부팅 완료 후에 USB 케이블을 다시 연결을 했을 겁니다. 그렇게 하면 맥에 제대로 연결이 안됩니다. USB 케이블을 연결한 채로 부팅을 하시면 될 겁니다.


이제 터미널 접근을 해보겠습니다.


터미널에서 ssh로 비글본 에어에 접속을 할 수 있습니다.

비글본 에어 기본 IP는 "192.168.7.2" 입니다. 위 네트워크 기본 DHCP IP가 192.168.7.1 이지만 192.168.7.2로도 접속이 됩니다. 신기하네요. 터미널에서 "ssh root@192.168.7.2" 로 연결을 시도합니다. root 비밀번호가 없기 때문에 곧바로 진입이 가능합니다. 하지만 별로 필요는 없어 보입니다. 일단 접근 방법만 알아 놓습니다.


Cloud9 IDE로 프로그램을 실행하려고 합니다.

눈썰미가 좋으신 분들은 START.htm 캡쳐 화면 하단에 보시면 http://192.168.7.2 로 링크가 있는 것을 보셨을 겁니다. 링크를 클릭하면 조금전 페이지와 분위기는 비슷하지만 내용이 다른 페이지가 나옵니다. 해당 페이지는 이른바 튜토리얼 페이지로 보입니다. 상단 링크 중 Cloud9 IDE를 클릭합니다. 아시다시피 Cloud9은 웹IDE입니다.


Cloud9 IDE를 실행합니다.

이동된 책갈피의 Cloud9 IDE를 다시 클릭합니다.


Cloud9 IDE 실행 화면

Cloud9을 과거 잠깐 써봐서 이렇게 많이 변했을 거라고는 생각을 못했습니다. 왼쪽 영역의 파일탐색기 중에서 blinkled.js를 클릭해서 파일을 엽니다.


blinkled.js를 열고 화면 상당의 "Run"을 클릭하면 하단과 같이 실행창의 보여지면서 동작을 시작합니다. blinkled.js 소스는 비글본 에어에 기본 제공되는 usr0/1/2/3 LED가 동시에 1초 단위로 점멸을 하는 예제 입니다.


아래 동영상은 blinkled 실행 화면입니다.


기본 제공된 기능을 실행하면서 느낀 점을 정리해 보면,


좋은 점


1. 아두이노 같이 별도 컴파일러가 없다! 기본 제공된 Cloud9과 같은 웹 IDE에서도 동작을 하다니!! 놀라웠습니다.

2. 자바스트립트(js), 파이썬(py) 파일로 작업을 할 수 있다. 이건 라즈베리파이와 비슷하긴 합니다. 그래도 쉬운 언어를 제공하니 무척 좋습니다.

3. 테스트용 LED 등을 기본 제공한다. LED하나 출력하기 위해서 빵판(BreadBoard)에 서너개의 줄과 저항을 연결해야하는 수고를 줄여주었네요.

4. 가이드 접근이 너무 쉽네요.

5. 튜토리얼 형태로 기본 제공 소스들을 한눈에 볼 수 있습니다.


아쉬운 점

이건 개개인 마다 견해차가 있을 수 있습니다만, 기존 IOT 제품과 비교해서 느낀 점들을 적어 보겠습니다.


1. 확장을 위해서... 어떻게 해야 하나? Cape가 외부 연결선을 위한 부분을 모두 가져가서 외부 선을 연결하기 어렵게 되었습니다. 암커넥터를 추가로 끼워 주면 참 좋을 텐데요. Cape에 이게 없어서 아쉽습니다.

2. 맥용 가이드가 너무 부실합니다. 한참 헤맸습니다.

3. TroubleShooting에 문제 해결책은 없고 왜 리눅스 이미지 업그레이드 내용만 있는 건가요?


쉬워도 너무 쉬울 수가 없네요. 다만 외부 연결 모듈을 위한 배려가 많이 없어 보입니다. 어쩌면 제가 비글본 에어의 컨셉을 이해 못하는 것일 수도 있습니다. 그래도 좋은 제품이구나, 홈네트워킹이나 기타 장비들과의 무선 허브 역할을 하기에는 딱 좋은 제품으로 보입니다.


이상 사용기를 마칩니다.


BBAir 스타터키트 구입처 : 아이씨뱅큐 http://www.icbanq.com/P007133008

아이씨뱅큐 100% 무상체험단 카페 : http://cafe.naver.com/icbanq

아이씨뱅큐 공식 블로그  : http://blog.naver.com/icbanq





신고

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

받은 트랙백이 없고 , 댓글  2개가 달렸습니다.
  1. 비밀댓글입니다
  2. 비밀댓글입니다
secret

본 체험제품은 No1. 전자부품 전문 쇼핑몰 아이씨뱅큐 와 뉴로메카의 지원을 받아 작성한 것입니다.

예전 아두이노와 비슷한 크기일거라고 생각한 택배박스가 꽤 크네요.

samsung | SM-G935S | Normal program | Center-weighted average | 1/60sec | F/1.7 | 0.00 EV | 4.2mm | ISO-200 | Flash did not fire | 2016:06:20 11:42:15samsung | SM-G935S | Normal program | Center-weighted average | 1/40sec | F/1.7 | 0.00 EV | 4.2mm | ISO-160 | Flash did not fire | 2016:06:20 11:42:25

박스 포장이 꼼꼼히 되어 있네요. 이런 포장을 보면 기분이 좋습니다. 정성을 들인 것 같아서요~ =b

samsung | SM-G935S | Normal program | Center-weighted average | 1/24sec | F/1.7 | 0.00 EV | 4.2mm | ISO-200 | Flash did not fire | 2016:06:20 11:45:00

택배박스를 개봉하니 안에 있던 붉은 박스가 강렬해 보입니다. 생각보다는 컸습니다. Beagle이 내가 아는 강아지 비글인가? 처음엔 저 글을 어떻게 읽나 싶었습니다. =_= 양면의 스티커를 뜯어야 내용물을 볼 수 있어서 좀 번거로운 느낌은 있었습니다.


samsung | SM-G935S | Normal program | Center-weighted average | 1/24sec | F/1.7 | 0.00 EV | 4.2mm | ISO-160 | Flash did not fire | 2016:06:20 11:47:59

구성품입니다. 붉은 비글보드와 사용자 가이드, 안테나 3개, USB 케이블, 그리고 전원 아댑터가 있네요. 박스 크기에 비해서 내용물은 조촐합니다. 전자 제품이라 제품 안전성을 생각해서 그런 것으로 보입니다.


samsung | SM-G935S | Normal program | Center-weighted average | 1/20sec | F/1.7 | 0.00 EV | 4.2mm | ISO-250 | Flash did not fire | 2016:06:20 11:49:21

빨간 색이 주는 느낌인지, 파란 아두이노를 보던 때와 느낌이 무척 다릅니다. 무척 깔끔해 보이는 느낌은 저만의 것일까요? ^^;;


BBA 보드samsung | SM-G935S | Normal program | Center-weighted average | 1/13sec | F/1.7 | 0.00 EV | 4.2mm | ISO-250 | Flash did not fire | 2016:06:20 11:49:422층 보드로 구성된 것이 눈길을 끕니다.

엇? 좀 이상하다 싶었습니다. 생각보다 두꺼운 모양새가 이상했습니다. 무슨 보드가 이중이지? 싶었는데... 이층 칸을 차지하고 있는 녀석은 cape?라고 합니다. (자세한 내용은 여기를 참조해 주세요)


아래는 각 측면의 사진입니다. 전반적으로 깔끔한 모양이 마음에 딱 드네요.


samsung | SM-G935S | Normal program | Center-weighted average | 1/11sec | F/1.7 | 0.00 EV | 4.2mm | ISO-200 | Flash did not fire | 2016:06:20 11:49:52


samsung | SM-G935S | Normal program | Center-weighted average | 1/12sec | F/1.7 | 0.00 EV | 4.2mm | ISO-200 | Flash did not fire | 2016:06:20 11:50:03


samsung | SM-G935S | Normal program | Center-weighted average | 1/10sec | F/1.7 | 0.00 EV | 4.2mm | ISO-250 | Flash did not fire | 2016:06:20 11:50:12


하드웨어 스펙

  • Dim: 86.36 X 54.61 (mm)
  • CPU: Sitara AM3358BZCZ100 (1GHz, 2000MIPS)
  • Memory: 512 MB (8 bit embedded MMC DDR3L 800MHz)
  • FlashROM: 4GB (8 bit eMMC on-board)
  • SD/MMC: microSD (3.3V)
  • Debugger: optional onboard 20-pin JTAG (serial header)
  • LAN: Ethernet 10/100M RJ45
  • Button: Power, Reset, Boot
  • Two expansion headers for 3rd-party CAPEs
  • Power input: 2mm 2 pin connector


소프트웨어 스펙

  • OS: Linux (debian with kernel v.3.8.13 or higher)
  • All device drivers supported
  • BLE: GATT protocol
  • IoT SW platform
  • Sensor Domain Manager
  • IGoT micro webserver
  • Thing+ (optional)
  • Cross-compile Development Environment based on Eclipse (running on MS Windows)
  • IGoT Smart apps for Easy Connection (Android)

 

총평

전체적으로 붉은 색에 깔끔한 디자인이 멋진 제품입니다. BBA에 비해서 아두이노는... 많이 칙칙하다는 느낌이 드네요. =_=;;

기존 비글본 블랙/그린 제품과 호환이 되며, WiFi, BLE, Zigbee 등 3가지의 무선환경을 기본 지원하면서 IOT 분야에 강력한 솔루션 제품으로 보입니다.


이상으로 개봉기를 마칩니다.


BBAir 스타터키트 구입처 : 아이씨뱅큐 http://www.icbanq.com/P007133008

아이씨뱅큐 100% 무상체험단 카페 : http://cafe.naver.com/icbanq

아이씨뱅큐 공식 블로그  : http://blog.naver.com/icbanq



신고

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

받은 트랙백이 없고 , 댓글이 없습니다.
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

아직은 제가 원하는 수준은 아니지만, 일단 우측이라도 like 검색이 되는 것을 확인하니, 무료로 사용할 수 있는 범위가 얼마나 될까 하는 생각이 갑자기 들었습니다.

Cloudant 가격 정책

클라우드 DB 시장에서 IBM은 분명히 후발주자가 맞습니다. 그래도 자원봉사가 아닌 이상 무료로 50GB를 무조건 주겠습니까? 절대 아닙니다. "제한없이" 이용이 가능하다는 문구가 제 논리센서?를 혼란 시켜 여기까지 왔지만, 더이상 속을 수는 없습니다~!!!

[링크] IBM Cloudant 50GB 무료사용 페이지 

일단 사용량을 확인합니다. 어? $0.09 사용이 눈에 들어옵니다. 머지? 이제 사용방법 확인 중인데 무슨 금액이지?? 무료는 무슨 말?? ㅎㅎ For period ending Apr 30 하단에 Learn about Cloudant pricing 링크를 즉시 클릭해 봅니다. 이러다 또 털리나 싶어서... [링크] Cloudant 과금 정책

위 이미지로 보면 23회의 heavy requests 가 있었는데.. 이러면 $0.015 인거 같은데 왜 $0.09 일까요? 무려 6배를 뻥친 이유가 멀까요? 증말 궁금합니다. =_=;;

일단 링크로 들어간 과금 정책 페이지를 보고 요약한 내용은 일단 1개월은 무료이고, 30일이 지나면 혹시 모르니 신용카드를 등록해서 과금 결제가 될 수 있도록 해 주시고~~ (이런 말은 아니긴 합니다. ^^) 과금은 아래와 같이 하겠다네요.

UsageCost

Quota 

Data volume 
in GBs / month
$1.00 per GB / month

이론상 API를 사용하지 않으면 50GB가 무료 맞네.
아무것도 하지 않으면... =_=;;

"Heavy" API requests * 
PUTs, POSTs, DELETEs
$0.015 per 100

 GET이 있으니 POST는 등록만 사용하도록

"Light" API requests * 
GETs, HEADs
$0.015 per 500

$1 = 33333 (약 3만번 호출시)
$10 = 33만번 정도

  • No charge if your monthly usage is under $50.00 USD

[링크] Cloudant 가격 정책 함고

POST는 대체로 등록에 사용하고, GET은 조회를 위해 사용을 합니다. $1 당 3만번의 테스트가 가능하니 그리 나쁘진 않아 보이는데, 저 API 사용료가 누적인지는 궁금합니다. 1개월 단위로 리셋이 된다면 얼마나 좋을 까요.. O_O;;

다음 번에는 nodejs에서 데이터를 등록하는 방법과 실제 서비스를 위해서 정교한 테이블 설계를 해볼 생각입니다. 그 와중에 좌측 like 검색이 가능할 수 있는 지도 찾아봐야 겠습니다.

신고

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

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