꼬반 Blog

이전 포스트에 (http://ifmkl.tistory.com/354) Naver OpenAPI 인 Clova Speech Synthesis API 사용하기를 작성했었습니다.

그런데 오랜만에 들어가보니 해당 API가 NBP(네이버 비즈니스 플랫폼 - 클라우드 서비스)쪽으로 이관되었더군요..

즉 무료에서 -> 유료가 되었습니다...

다만 네이버 비즈니스 플랫폼의 경우 신규 사용자에겐 30만 크레딧을 제공하므로 이 크레딧 유효 기간동안은

테스트는 해볼수 있을 듯합니다.

변경된 개발 문서는 http://docs.ncloud.com/ko/naveropenapi_v2/naveropenapi-4-2.html 이고

NBP 가입 후 로그인 후 콘솔에서 접속하면 다음 메뉴에서 api 를 신청할 수 있습니다.

어플리케이션 등록 -> 클로바에 CSS 체크하여 신청하면 됩니다. 그러면 한도 설정을 할 수 있는데 당일 / 당월 설정이 가능하고 요금은

월 300만자 기준으로 12,000원 (VAT별도) 정도 나옵니다. 

기존의 소스는 동일하고 다만 기존 소스의 

api_uri가 https://openapi.naver.com/v1/voice/tts.bin --> https://naveropenapi.apigw.ntruss.com/voice/v1/tts 으로 변경 되었고

api_key는 신청한 어플리케이션의 client_id / api_secret는 client_secret 으로 사용하면 됩니다.

이후 헤더에 추가하는

는 아래 처럼 변경해줍니다.

그러면 소스를 다시 빌드하여 실행하고 로컬에서 테스트하면

# curl "localhost:3000/tts"

# ls

api api.go out.mp3

으로 잘 실행되는 것을 확인할 수 있습니다.

회사에서는 다양한 방식으로 모니터링을 하고 있다. 

일단 기본적으로 Nagios로 전반적인 서비스와 하드웨어 등을 모니터링 하고 있고

외부 모니터링 도구로 whatap.io 로 서버와 중요 url 5개(무료 제한) 를 모니터링 하고 있다.

각 서버 로그는 telegraf - influxdb - grafana / filebeat - elastic - kibana 로 이중화 하여

수집 및 모니터링을 하고 있다.

그럼에도 불구하고 안정적인 서비스를 위한 모니터링에는 끝이 없다.

그래서 이번에 Slack-Bot 을 활용하여 웹 서비스를 간편하게 체크할 수 있도록 해보았다.

먼저 개발은 다음과 같은 환경으로 진행하였다.

1. 웹 서비스 40개의 status code 와 응답시간을 체크 -> Golang 으로 개발

2. Node.js 로 Slack-Bot 개발 및 세팅

3. Slack 에서 정해진 키워드를 받으면 Bot 에서 1번에서 개발한 프로그램을 실행하여 결과를 

   메신져로 전송

아래는 결과물이다.

먼저 1번 항목의 경우 Golang 으로 작성한 이유는 Golang을 써보고 싶었고...

Golang에서 지원하는 고루틴이 매우 좋은 성능을 나타내기 때문이다. 

모바일 Slack App 에서도 동일하게 동작함을 확인하였고, 이로써 모니터링 도구가 하나더 추가되었다.

(모..모니터링 지옥이라능!)

수, 목, 금 3일동안 프로토타입은 나왔으니 앞으로 좀 가다듬으서 더 쓸만한 Bot을 만들어봐야겠다.

추신1. 이상 항목 1은 현재 내부에서만 접근가능하게 되어 있어서 나오는 항목으로 실제론 이상이 있지 않습니다?

추신 2. 아래 몇몇 서비스가 3초 이상으로 시간이 많이 걸리는데 올해 정리할 예정..

          (X키를 눌러 조의를 표하십시오.)

추신 3. 개발과 Bot 을 윈도우 환경에서 돌렸는데 생각보다 꽤 환경이 쾌적해서 놀랐..

          (Visual Studio Code - Golang - Node.js / VSC 에 각 Plugin 들을 설치하고 사용하니

           해당 프로그램 하나 켜놓고 다 작업하고 터미널도 바로 열리고 아주 맘에 들었습니다~)

개발을 할때 팀이나 조직에서 사용하기 좋은 오픈소스

https://repo.yona.io/organizations/yona-projects

과거 Yobi가 업그레이드 되었다고 한다.

팀에서 사용하기위해 셋팅해보았다.

추후 사용기를 적어보도록 하겠다.

요즘엔 개발언어들을 사용하다보면 제일먼저 찾는게 버전관리매니저와 보일러플레이트다.

과거처럼 하나하나 개발환경을 직접 세팅할 수도 있지만

그러기에는 버전업이 빠르고 새로운 기능들이 추가되는 속도가 빠른 요즘에는

기존과 같은 방법으로는 개발환경의 버전을 올리기가 쉽지 않다.

하지만 버전관리매니저를 사용하면 쉽게 개발언어의 버전을 관리하기가 용이하다.

대표적으로 Node.js 같은 경우 NVM 을 사용하면 되듯이

Golang 도 찾아보니 GVM이라는 버전관리매니저가 나와있다.

참조 : https://github.com/moovweb/gvm

사용법은 nvm 과 흡사하다.

설치 : bash < <(curl -s -S -L https://raw.githubusercontent.com/moovweb/gvm/master/binscripts/gvm-installer)

이후 쉘에서 gvm 명령어를 사용하기 위해서는 source /root/.gvm/scripts/gvm

으로 사용하거나 사용하는 쉘의 환경 설정 파일에 해당 명령어를 넣어주면 된다.

golang 설치는 기본으로 1.4 버전 설치 후 설치하도록 되어 있다.

gvm install go1.4 -B
gvm use go1.4
export GOROOT_BOOTSTRAP=$GOROOT
gvm install go1.5

현재 최신 버전인 1.7.5 버전을 설치할때는 1.4를 설치 후 1.7.5 를 설치하면 되고

재접속 이후에도 설치한 go version 을 사용하고 싶다면 

gvm use go1.7.5 --default 

옵션을 주면 된다.

ReactJS 를 공부하면서 멋진 UI를 쉽게 만들수 있도록 도와주는 여러 UI들이 있다는 걸 알게되었습니다.

그중 veloport 님 블로그에서 알게된 Grommet과 Material-UI 를 사용하는 방법을 알아보겠습니다.

(react-md, react toolbox 나 참조4의 사이트에서 다른 UI 도 확인했지만 제가 기본으로 사용하는

boilerplate인 create-react-app 에서는 sass 를 기본적으로는 지원하지 않습니다. 물론 기본 설정을 deploy

하고 그뒤 설정을 약간 변경하여 사용하는 건 충분히 가능합니다. 더 자세한 내용은 참조5 링크를 확인하세요.)

***

참조 : https://velopert.com/2597
참조2: https://grommet.github.io/
참조3: http://www.material-ui.com/#/
참조4: https://blog.webkid.io/react-ui-libraries/
참조5: https://github.com/facebookincubator/create-react-app/issues/78

***

아래 실행 환경은 기본적으로 nodejs (LTS 6.9.4 기준), create-react-app 으로 진행됩니다.

아래 테스트에 사용한 소스는 참조4 블로그를 기본으로 활용하였습니다.

# create-react-app my-app
# cd my-app
# npm install --save grommet material-ui react-tap-event-plugin
# npm start

3번째 라인에서 grommet과 material-ui 를 설치해줍니다. material-ui는 0.15 버전을 기준으로 사용방법이

변경되었습니다. 그래서 react-tap-event-plugin 을 같이 설치하여 줍니다.

이제 이 화면을 수정하여 grommet과 material-ui 의 컴포넌트들을 사용해보겠습니다.

먼저 grommet 입니다.

src/GrommetWorldMap.js (생성)
import React from 'react';
import WorldMap from 'grommet/components/WorldMap';
import '../node_modules/grommet/grommet.min.css';
const GrommetWorldMap = () => {
  return (
    <div>
      <WorldMap series={[{
        "continent": "NorthAmerica",
        "label": "North America",
        "value": 40,
        "colorIndex": "graph-1",
      }, {
        "continent": "SouthAmerica",
        "label": "South America",
        "value": 30,
        "colorIndex": "accent-2",
      }, {
        "continent": "Europe",
        "label": "Europe",
        "value": 20,
        "colorIndex": "unset",
      }, {
        "continent": "Africa",
        "label": "Africa",
        "value": 10,
        "colorIndex": "graph-2",
      }, {
        "continent": "Asia",
        "label": "Asia",
        "value": 15,
        "colorIndex": "graph-3",
      }, {
        "continent": "Australia",
        "label": "Australia",
        "value": 10,
        "colorIndex": "graph-4",
      }]} />
    </div>
  );
};
export default GrommetWorldMap;
src/App.js (수정)
import React, { Component } from 'react';
import GrommetWorldMap from './GrommetWorldMap';

class App extends Component {
  render() {
    return (
      <GrommetWorldMap/>
    );
  }
}

export default App;

src/MaterialEx.js (생성)

import React from 'react';
import AutoComplete from 'material-ui/AutoComplete';

const libs = ['Material UI', 'Elemental UI', 'Grommet', 'Mui', 'Rebass'];

const MaterialEx = () => {
  return (
    <div>
      <AutoComplete
        floatingLabelText="Type something ..."
        filter={AutoComplete.fuzzyFilter}
        dataSource={libs}
        maxSearchResults={3}
        menuStyle={{ background: '#fff' }}
      />
    </div>
  );
};

export default MaterialEx;

src/App.js (수정)

import React, { Component } from 'react';
import MaterialEx from './MaterialEx';
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
import injectTapEventPlugin from 'react-tap-event-plugin';

injectTapEventPlugin();

class App extends Component {
  render() {
    return (
      <MuiThemeProvider>
        <MaterialEx/>
      </MuiThemeProvider>
    );
  }
}

export default App;

사용하려는 컴포넌트를 마지막에 MuiThemeProvider 로 감싸주면 됩니다. 이는 테마와 관련된

내용이 추가되면서 변경된 점으로 테마를 쉽게 Material UI 와 호환되는 다른 테마로 변경할 수 있게 해줍니다.

그럼 모두 즐거운 ReactJS 되시길 바랍니다!