꼬반 Blog

회사 그룹웨어가 약...간.. 조..금... 그래서

참다참다 조금 구조좀 파악해보고 익스텐션을 만들기로 했다.

처음엔 뭐 유명한 많은 다른 사이트들 확장 프로그램처럼 페이지 내에서 여러가지 옵션과 편의기능을 

넣으려고 했는데... 하.. 딥빡..

구조 자체가 프레임-프레임-프레임-프레임 으로 다중으로 호출되고 내부에서 js,css들은 중첩으로 계속

호출되고 아놔.. 이거 누가 이렇게 짰어.

덕분에 DOM Selector 가 거지같이 동작하고 분명 콘솔창에서 테스르로 코드 실행하면 잘 동작하는것도

익스텐션에서 이벤트 주입하면 동작안하고 뭐야? 하면 해당 DOM을 못찾고...

아니 시X 페이지가 Document 기준으로 하나면 모르겠는데 지 멋대로 안에서 프레임 호출이 중첩되다보니

이놈의 익스텐션이 각 iframe 따라서 안에서 같이 호출되면서 아 망했어요~ 가 되버리니

도저히 해당 방법은 각이 안보여서 일단 폐기.

이후 인스톨한 확장 아이콘을 클릭하면 나오는 팝업화면에서 주로쓰는 기능들만 모와서 불러와 주고

편의 기능을 개발하자! 하고 봤더니 일단 최대 사이즈가 정해져 있고..

뭔놈의 inline 꺼뜩하면 막히고. 아 일단 화면 작으니 답답하고 원문 링크 열어버리면 새탭으로 열리는데

이게 또 열어둔 팝업창은 내려가버리니 UX적으로 너무 짜증남.

그래서 다시 옵션창을 디폴트로 열어보자! 아니면 아이콘 클릭시 팝업창에서 옵션창을 호출해서 열어주자!

그게 아니면 팝업창을 탭으로 열어보자! 하고 이틀정도 삽질했는데 나와 있는 모든 방식이 제대로 동작안했음..

시부엉 무슨 컨텐츠 스크립트에서 sendMessage해서 backround 가 받아 openOptionsPage()를 실행하고

..다 필요 없었음

메인페스트에서 action 에서 default popup 을 설정해주지 않으면 자동으로 옵션 페이지가 열리는 거임.

하 이러면 될걸 ... 온갖걸 다 찾아보고 테스트해본다고 고생만 했네..

하지만 일단 방향은 나왔으니 나머진 꾸미기만 하면 됨. 약간 티스토리 블로그 느낌으로 그룹웨어 에서 

불러온 데이터 내가 필요한 부분만 따로 추출해서 따로 뿌려주면 됨. 

근데 언더로딩도 맘에 안들어서 json도 아니고 xml도 아닌 text로 들어온 response를 적당히 파싱해서 

처리해주는게 나을듯.

어쨋든 기본적으로 메모와 기안, 근퇴, 캘린더 기능 올려놓고 우리팀에 먼저 공개해봐야겠음.

Naver TTS API를 사용하기 위해서는 먼저 아래 링크를 참고하여 API 이용신청을 먼저 해야 한다.

https://developers.naver.com/docs/clova/api/#/CSS/API_Guide.md#clova-speech-synthesis-api-가이드

이후 발급받은 키와 시크릿 키를 가지고 진행한다.

위 가이드에는 Golang 구현 예제가 없어 아래와 같이 테스트 해보았다. (소스는 테스트 목적으로 허접...)

다른 언어들의 경우 대부분 위 링크에 나와 있으니 참고할 것.

이걸 테스트 한 목적은 이전 글에서 작성한 것처럼 토익 공부 중에 오답노트 웹앱을 만드는데

LC를 어떻게 하면 좋을까 생각하다가 TTS API를 활용해보기로 한것.

Golang 을 백엔드로 사용하고 있기 때문에 Golang 으로 구현해보았고 이걸 이용해서 LC 오답문제를

불러오면 해당 메세지를 위 api로 mp3로 변환 후 재생해줄 예정이다. 

다만 미흡한 점이 메세지가 바로 바로 재생되고 중간에 스페이스로 메세지간에 공백을 넣어도 문장 간 여백을

설정할 수 없는 점이 있다. 아쉬운 부분이 있지만 Naver TTS API 품질이 생각보다 만족스러워서 다행이다.

참고 링크

https://stackoverflow.com/questions/19253469/make-a-url-encoded-post-request-using-http-newrequest

https://stackoverflow.com/questions/16311232/how-to-pipe-an-http-response-to-a-file-in-go

http://golang.site/go/article/103-HTTP-POST-%ED%98%B8%EC%B6%9C

TTS API 관심이 있어서 (영어 재생)

Google, Naver, Voice RSS 3개 테스트를 해보았는데

Naver의 API 영어 TTS 가 생각보다 품질이 훌륭해서 놀랐음.

Google, Voice RSS 쪽도 나쁘진 않고 Voice RSS 는 미국, 영국, 호주 버전이 존재해서

선택지가 다양한데 Naver는 일단 여성, 남성만 선택이 가능 하긴 하나

생각보다 괜찮음..

테스트 한 이유는

토익 공부하며 오답노트 웹앱을 만드는데 

뷰는 Vue.js 로 작업 / 백엔드는 Golang 으로 해당 웹앱에 접속하면 

입력해둔 틀린 문제 중 임의로 한문제가 나오고 해당 문제를 풀도록 되어 있다.

일반적인 문법은 큰 문제가 없는데.. LC는 어떻게 할까 생각해보다가 TTS API를 테스트 해본것.

Naver 구현예제가 Golang 은 없는데 일단 구현해보고 문제 입력 -> 자동으로 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 들을 설치하고 사용하니

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

1. Javascript (React, ES6, ES6+, ES7, Webpack, Express, NodeJS...)

2. Monitoring (InfluxDB, Telegraf, Grafana...)

3. 개인 개발 (창세기전2, 심플 모니터링 에이전트 등)

4. 생각 중

꾸준히 만들고 있는 www.jaram.kr 쇼핑몰 사이트 (언제쯤 오픈할 수 있을련지 ㅠㅠ 눙물)

SSL 인증서를 도입하였다. 아무래도 회원가입이나 로그인, 카트 같은 개인정보가 필요한 쇼핑몰이다 보니

보안을 위해서 HTTPS 적용을 염두에 두고는 있었는데.. 발급비용이나 갱신비용때문에 선듯 도입을 하지 않았다.

(근데 대부분의 쇼핑몰에 SSL 적용이 안되어 있더라?!? 시행법인데?? 뭐지?)

근데 Let's Encrypt 에 대해서 우연히 알게되었다.

아니 이것은 오오!?!?

SSL의 확산을 위해서 여러 재단에서 만든 SSL 인증 기관! 이걸 사용하면 누구나 Free 로 SSL 을 발급 받을 수 있다.

다만 갱신 기간이 짧다. 3개월.. 하지만 이게 어딘가!

공식 사이트 : https://letsencrypt.org/

공식 사이트 : https://certbot.eff.org/

참고 사이트 : https://blog.outsider.ne.kr/1178

를 참고하여 SSL 인증서를 발급 받고 운영중인 NGINX 에 적용!

함께 HTTP2 프로토콜도 적용 완료! 

그리고 기본 HTTP 접속은 모두 HTTPS 로 연결되도록 해두었다.

추가로 내부에서 사용하는 nodejs 의 RESTful 주소를 정리했다. www.jaram.kr:포트번호/api_method 이런식으로

사용했는데 아무래도 보기에.. 좀 그래서 nginx 에서 /api/ location으로 proxy_pass 설정을 해주었다.

그리고 내부에 들어가있는 소스들을 모두 https://www.jaram/api/method 형식으로 변경 후 테스트도 완료!

오늘 작업 끝!

https://www.jaram.kr

오늘 오랜만에 시간을 내서 쇼핑몰을 코딩하고 있었다.

근데.. 음? 뭐지 로그인/로그아웃이 정상적으로 동작하지 않았다.

어라.. 이럴리가 없는데..

초기 개발당시보다 너무 nodejs 버전이 올라가서 그런가? nginx 문제?

아니면 다른 모듈 버전이 낮아서 그런가? api가 변경됬나?

열나게 찾아봤다.

근데..

그런거 없음!

헐.

뭐지.

하다가 크롬 앱인 postman으로 기능을 테스트 해보니 정상적으로 동작 하는걸 확인.

즉 이건 브라우저에서만 쿠키가 생성/삭제가 안되는 문제였는데.

원인을 찾아 해메다가 발견했다.

쩝.

내가 도메인을 기존엔 jarambebe.com 을 사용하고 있다가

신규로 jaram.kr 을 구매하면서 소스상에서 일부만 이 링크가 수정되고

몇몇 수정되지 않은 부분들이 있어서 정상적으로 쿠키가 생성/삭제가 되지 않았던 것.

즉 login 을 요청하는 ajax 주소는 기존 주소인데 로그인 후 이동되는 페이지는 신규 주소.

위와 같은경우 요청 주소의 기준으로 쿠키가 생성되므로 이동된 신규 주소에서는 쿠키가

보이지 않았던 것.

음..

젠장.

이래서 쉬다가 코딩하면 여러 문제가 발생한다.

ㅠ_ㅠ

어쨌든 해결해서 다행~

nginx 1.9.11 update -> 1.9.12 update

nodejs v5.5.0 -> v5.6.0 update -> v5.7.1 update

redis v3.0.4 -> v3.0.7 update

http://www.jaram.kr

자람

우분투가 15.10 으로 올라가고 mariadb 가 다시 문제가 발생했다.

ERROR 1524 (HY000): Plugin 'unix_socket' is not loaded

아놔...

그래서 백엔드에서 db 접속하면 에러가 뿜뿜! 하면서 백엔드가 죽음.. 쉣!

10.0.23 버전이던 maria를 겸사겸사 10.1.11 로 올리고

참조 : https://zhxq.io/how-to-solve-mariadb-plugin-unix_socket-is-not-loaded-problem-after-upgrade-to-ubuntu-15-04/

참고하여 해결하였다.

1. /etc/init.d/mysql stop and killall -9 mysqld
2. mysqld_safe –skip-grant-tables &
3. mysql -u root
[mysql] use mysql;
[mysql] update user set plugin=” where User=’root’;
[mysql] flush privileges;
[mysql] \q or exit
/etc/init.d/mysql stop (or service mysql stop) and killall mysqld
and start the mysql thru
service mysql start or /etc/init.d/mysql restart

회사에서 이런저런일로 약 3주간 쉬었더니..

일단 회사컴에서 됬다 안됬다 하는 경우가 많아서 개발 메인을 맥 에어로 옮김.. 화면 너무 작음

어차피 에디터는 서브라임 텍스트 3 을 사용하고 있었기 때문에 별 문제는 없음..

소스는 서버상에 다 올려놓고 작업하고 있었으니까.

오늘 일단 

로그인 / 로그아웃 시에 히스토리 저장하도록 추가 하여두었고.. (이건 나중에 생각하니 꼭 필요 할 것 같아 추가함. 로그인 내역이나 해킹 같은 거 방지 혹은 대비 용, 보안 설정 등?)

진행해야 되는 필수 기능은 이제

1. 결제 관련 

  1.1. 살펴본 상품 목록 관련 - 이건 redis에 세션으로 살펴본 상품 쪽으로 추가 하면 될 듯

  1.2. 장바구니 기능 - 이것도 세션쪽에서..

        - 세션을 hash 로 저장해놨더니... 세션 안에 삼품들 추가하기는 어려울 것 같다. 테스트 해보니 다중으로 값을 저장하기 위해서는

          제일 쉬운건 sadd / sbmembers 로 하는게 좋을 듯.

          처음 로그인 하면 cart_session(ssesion은 유저 이메일) / see_session 을 생성하고 살펴본 상품은 see_session에 장바구니 추가에는                 cart_session에 추가해줘야 겠다. _ 앞에는 prefix로 검색시에는 _ 기준으로 제거하면 세션명으로 일치시키고.

          누가 왜 이리 번거롭게 하냐고 물어본다면... 존재하는걸 쓰지 않고 직접 헤딩하느라 그렇습니다.. 라고 대답하겠다 ㅠㅠ

  1.3. 결제 - 이건 일단 가상 코인을 가지고 결제 테스트 모듈 개발 하고 다른 모듈로 변경 작업

2. 게시글 관련

  2.1. 리뷰 작성 - 각 상품에 리뷰 부분

  2.2. 공지 게시판 - 페이지는 만들어 두었으니 관리자가 등록하는 부분 만들 것

  2.3. 게시글 쪽은 아닌데 별점 관련 부분 같이 할 것

3. 개인 사용자 페이지

  3.1. 이쪽은 아직 하나도 안되 있음..

4. 관리자 페이지

  4.1. 상품 관리 / 회원 관리 는 기본 기능 되있음

  4.2. 전체 게시글 관리 기능 필요

  4.3. 주문 내역 관리 기능 필요

  4.4. 기본적인 페이지 수정 기능 필요

아직... 많이 남았네...

얼릉 다 하고 끝내야지 ㅠ.ㅠ