꼬반 Blog

[Vue.js] vue-material 사용시 event bubbling 문제 해결

Vue에서 ui framework 으로 사용하는 vue-material 에는 작은 버그가 있다. md-radio 를 포함한 input 모듈에 label 에도 click 이벤트가 걸려있어서 라벨쪽을 클릭하면 이벤트 버블링이 발생하는 것. 해당 에러를 검색해보니 얼마전 vue-material git hub 에 논의 된 내용이 있었다. (몇일만 일찍 봤으면 이 이슈는 내것이었을 텐데 ㅂㄷㅂㄷ) https://github.com/vuematerial/vue-material/pull/954https://github.com/vuematerial/vue-material/pull/954/commits/1e345ee850100269deec2821bd208633811383d0 이걸 보고 해결하기 위해서는 아직 공식 rel..

Read More

[Slack] Slack-Bot 으로 웹 서비스 모니터링 하기

회사에서는 다양한 방식으로 모니터링을 하고 있다. 일단 기본적으로 Nagios로 전반적인 서비스와 하드웨어 등을 모니터링 하고 있고 외부 모니터링 도구로 whatap.io 로 서버와 중요 url 5개(무료 제한) 를 모니터링 하고 있다. 각 서버 로그는 telegraf - influxdb - grafana / filebeat - elastic - kibana 로 이중화 하여 수집 및 모니터링을 하고 있다. 그럼에도 불구하고 안정적인 서비스를 위한 모니터링에는 끝이 없다. 그래서 이번에 Slack-Bot 을 활용하여 웹 서비스를 간편하게 체크할 수 있도록 해보았다. 먼저 개발은 다음과 같은 환경으로 진행하였다. 1. 웹 서비스 40개의 status code 와 응답시간을 체크 -> Golang 으로 개발 ..

Read More

[ReactJS] Grommet, Material-UI 기본 사용법을 알아보자.

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/ 참..

Read More

[ReactJS] 어라????

음.. 요근래 ReactJS 를 공부하다 티스토리 블로그 스킨을 ReactJS로 만들수 있지 않을까.. 라는 생각을 하고 테스트 블로그에 공부하며 작성한 ReactJS 를 빌드 후 티스토리 스킨구조에 맞게 조금 수정하고 올려봤다. 그랬더니.. 어라? 어.. 이거 이렇게 동작된다고 하면.. 음.. 티스토리가 제공하는 치환자는 사용이 안된다. 일단. 그런데 다른쪽으로 응용이 가능한데.. 이래도 괜찮나.. ㄷㄷ http://ggoban.tistory.com

Read More

[ReactJS] 기본 개발 환경

요즘 ReactJS 를 공부하는 기본 개발 환경을 정리한다. Boilderplate ReactJS : create-react-app (참조 : https://github.com/facebookincubator/create-react-app)(설명 : facebook 팀의 공식 프로젝트. 설명이 더 필요한가!?) ExpressJS : express-es6-rest-api(참조 : https://github.com/developit/express-es6-rest-api)(설명 : 여러 Boilerplate 가 있지만 개인적으로 이 프로젝트가 맘에 든다.) koa : koa2-server-boilerplate(참조: https://github.com/yankouskia/koa2-server-boilerplat..

Read More

[판매] 쇼핑몰 소스 판매 합니다.

https://www.jaram.kr 쇼핑몰 소스 판매합니다. 프론트앤드 + 백앤드 포함해서 판매하고 기본적인 기능들은 거의다 구현한 상태지만 미구현된 부분도 남아있습니다. 프론트앤드는 html5 + bootstrap + jquery로 되어 있고 레이아웃은 별도로 구매해야 합니다. (외국 라이선스) 비싸진 않습니다. 개인 라이선스로 2~3만원 정도 입니다. 백앤드는 nodejs + javascript + redis 로 되어 있고 api로 되어 있습니다. nginx - proxy - nodejs 로 동작합니다. 관리자 페이지 demo는 비밀글로 문의 주시면 접근 가능 id / pwd 발급 드립니다. 자세한건 비밀댓글이나 카카오톡 ggoban1004 로 문의 주시면 자세하게 안내 드립니다.

Read More

[nodejs / pageres] 웹 서비스 상태 확인하기

회사에서 관리하는 웹 서비스가 약 40개 가량 되다보니 모니터링이나 관리가 필요하여 어제, 오늘 간단하게 만들어보았습니다. 물론 해당 서버들에는 nagios 나 whatap, whatsup 등으로 모니터링을 하고 있고 서비스가 다운되면 메일로 알림이 오긴 하지만 아무래도 한눈에 지금 사이트들이 다 정상인지 아닌지 확인하기는 좀 어려운 부분이 있는건 사실입니다. 그래서 다음과 같은 요구 사항을 가지고 만들었습니다. 1. 모니터링 도메인의 추가/삭제 가능2. 해당 도메인의 현재 상태 (response 응답 코드) 확인 가능 (대시보드에 접속했을때 동작) 3. 해당 사이트에 메인 페이지 스크린샷 저장 가능 일단은 위 요구사항을 기본으로 다음과 같이 작성하였습니다. URL 부분은 가려두었습니다. 액션부분은 아직..

Read More

쇼핑몰 관리자 페이지 기능 구현 일지

와이프의 쇼핑몰을 개발하면서 쇼핑몰쪽에는 angularjs 를 도입하려다가 문제가 생겨 걷어내고 관리자 페이지에만 angularjs를 도입하여 개발하고 있다. 물론 이쪽도 기본 테마는 개발된걸 구매하여 진행. 구글 material 디자인을 기반으로한 angularjs admin theme 를 구매하여 작업 중이다. 다만 구매한 테마에는 위지윅 에디터가 포함되어 있지 않아서 오픈소스 위지윅 에디터를 찾아보았더니 textangular 라는 좋은 에디터가 있어서 이를 포함시켰다. 맨땅에 헤딩으로 개발하고 있자니 힘들지만 와이프거니 열심히 만들어야지! https://www.jaram.kr

Read More

오늘 삽질한 문제

nodejs 로 RESTful back-end 를 구성했다. 그런데 이게 get 메소드는 정상적으로 동작하는데 post 메소드에서는 계속 에러가 발생하는 것이 아닌가? 뭐지? bodyparser 를 잘못 사용했나 아니면 어디에 문제가 있나 한참 봤지만. 문제는 발견하지 못하다가.. 읭?? 바로 function(req, res) 이 부분을 function(res, req) 로 되어 있는 것을 발견.. 이럴수가. 고치고 나니 아주 잘 동작 한다. 쩝.. 이걸로 오늘 오전부터 방금까지 삽질.. 삽질의 연속이로구나. 어쨌든 오늘까지 쇼핑몰 관리자 페이지쪽 상품 목록 조회, 등록 기능 (기초적인 것) 구현하였고 front-end 쪽은 angularjs 빼고 작업 (ㅠㅠ) 메인에 최신 상품 리스트 출력 - 해당 제..

Read More

쇼핑몰 프로젝트 개발 수정

지금 현재 쇼핑몰 개발을 bootstrap+jquery 기반으로 된 유료 템플릿을 사서 백엔드 쪽 개발 후 연동으로 개발하고 있는데 데이터바인딩을 편의하게 하기 위해서 프론트엔드는 angularjs 를 사용했더니 처음에는 몰랐는데 두개는 다르다고 볼수 있다. bootstrap 은 문제가 안되지만 jquery 와는 angularjs 가 추구하는 방향이 다르므로 같이 사용하고자 하면 못 할 것 없지만 일반적으로는 권고하지 않는 부분.. angularjs 를 쓰려면 전체적인 디자인을 다시해야되는데 그러기에는 시간이 부족하다.. 쩝 일단 목표로 하던 angularjs 부분은 다른 곳에서 다시한번 도입하여 진행해보도록 하고 쇼핑몰쪽에서는 다시 제거해야 겠다.. 으으 삽질의 연속 이구나. 09-17 12:07 각 ..

Read More

[Vue.js] vue-material 사용시 event bubbling 문제 해결

Vue에서 ui framework 으로 사용하는 vue-material 에는 작은 버그가 있다.


md-radio 를 포함한 input 모듈에 label 에도 click 이벤트가 걸려있어서 


라벨쪽을 클릭하면 이벤트 버블링이 발생하는 것.


해당 에러를 검색해보니 얼마전 vue-material git hub 에 논의 된 내용이 있었다.


(몇일만 일찍 봤으면 이 이슈는 내것이었을 텐데 ㅂㄷㅂㄷ)


https://github.com/vuematerial/vue-material/pull/954

https://github.com/vuematerial/vue-material/pull/954/commits/1e345ee850100269deec2821bd208633811383d0


이걸 보고 해결하기 위해서는 아직 공식 release 에서는 수정되지 않았으므로 


별도로 vue-material 을 git 으로 내려 받아 


해당 소스에 laebel 쪽에 @click="toggleCheck" => @click.prevent="toggleCheck" 로 수정하고


yarn build 를 해주면 dist 폴더가 삭제 후 다시 빌드된다.


이후 해당 빌드된 폴더를 원래 작업하는 프로젝트 폴더에


node_module/vue-material/dist 폴더를 대체하여 준다.


그리고 프로젝트 에서 확인하여 보면 이벤트 버블링이 발생하지 않는다.


극뽁~!

반응형

Article By 꼬반

*certificate* : VCP 5(2012), RHCSA 7 (2014), RHCE 7 (2015), RHCSA in REDHAT OpenStack(2017) *development language* : Javascript, NodeJS, Golang, html5, css3, shell script *middle ware* : NGINX, Apache, Tomcat, Docker, Docker Swarm, Mesos, Kubernetes, HCI,

Discuss about post

[Slack] Slack-Bot 으로 웹 서비스 모니터링 하기

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


일단 기본적으로 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 들을 설치하고 사용하니

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

반응형

Article By 꼬반

*certificate* : VCP 5(2012), RHCSA 7 (2014), RHCE 7 (2015), RHCSA in REDHAT OpenStack(2017) *development language* : Javascript, NodeJS, Golang, html5, css3, shell script *middle ware* : NGINX, Apache, Tomcat, Docker, Docker Swarm, Mesos, Kubernetes, HCI,

Discuss about post

[ReactJS] Grommet, Material-UI 기본 사용법을 알아보자.

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;


위처럼 수정 후 브라우저를 확인하여 보시면 grommet 의 component 인 worldmap 을 확인할 수 있습니다.

참 쉽죠?!?!

다음은 material-ui  차례 입니다.

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;

위처럼 수정 후 브라우저를 확인하여 보시면 AutoComplete Component 를 확인할 수 있습니다!

다만 material-ui 의 경우 위에서 언급한것처럼 0.15 버전 기준으로 사용방법이 약간 달라졌습니다.


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


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


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


반응형

Article By 꼬반

*certificate* : VCP 5(2012), RHCSA 7 (2014), RHCE 7 (2015), RHCSA in REDHAT OpenStack(2017) *development language* : Javascript, NodeJS, Golang, html5, css3, shell script *middle ware* : NGINX, Apache, Tomcat, Docker, Docker Swarm, Mesos, Kubernetes, HCI,

Discuss about post

[ReactJS] 어라????

음.. 요근래 ReactJS 를 공부하다 티스토리 블로그 스킨을 ReactJS로 만들수 있지 않을까..


라는 생각을 하고 테스트 블로그에 공부하며 작성한 ReactJS 를 빌드 후


티스토리 스킨구조에 맞게 조금 수정하고 올려봤다.


그랬더니.. 어라?


어.. 이거 이렇게 동작된다고 하면..


음.. 티스토리가 제공하는 치환자는 사용이 안된다. 일단.


그런데 다른쪽으로 응용이 가능한데.. 이래도 괜찮나..


ㄷㄷ


http://ggoban.tistory.com

반응형

Article By 꼬반

*certificate* : VCP 5(2012), RHCSA 7 (2014), RHCE 7 (2015), RHCSA in REDHAT OpenStack(2017) *development language* : Javascript, NodeJS, Golang, html5, css3, shell script *middle ware* : NGINX, Apache, Tomcat, Docker, Docker Swarm, Mesos, Kubernetes, HCI,

Discuss about post

[ReactJS] 기본 개발 환경

요즘 ReactJS 를 공부하는 기본 개발 환경을 정리한다.


Boilderplate


ReactJS : create-react-app

(참조 : https://github.com/facebookincubator/create-react-app)

(설명 : facebook 팀의 공식 프로젝트. 설명이 더 필요한가!?)


ExpressJS : express-es6-rest-api

(참조 : https://github.com/developit/express-es6-rest-api)

(설명 : 여러 Boilerplate 가 있지만 개인적으로 이 프로젝트가 맘에 든다.)


koa : koa2-server-boilerplate

(참조: https://github.com/yankouskia/koa2-server-boilerplate)

(설명 : 요즘은 일단 좋은걸 찾으면 boilerplate 부터 찾는게 버릇이 된...  koa2 에서

이게 제일 내 스탈에 맞는 듯)


Editor


Microsoft : Visual Studio Code

(참조 : https://code.visualstudio.com/)

(설명 : sublime text 2 -> sublime text 3 -> webstorm -> atom -> vs code)

(설명2 : 마이크로소프트 사롸있네!)


추천 패키지 - ReactJS, Javascript, Html과 Markdown 에디터 용으로 사용

반응형

Article By 꼬반

*certificate* : VCP 5(2012), RHCSA 7 (2014), RHCE 7 (2015), RHCSA in REDHAT OpenStack(2017) *development language* : Javascript, NodeJS, Golang, html5, css3, shell script *middle ware* : NGINX, Apache, Tomcat, Docker, Docker Swarm, Mesos, Kubernetes, HCI,

Discuss about post

[판매] 쇼핑몰 소스 판매 합니다.

https://www.jaram.kr


쇼핑몰 소스 판매합니다.


프론트앤드 + 백앤드 포함해서 판매하고


기본적인 기능들은 거의다 구현한 상태지만 미구현된 부분도 남아있습니다.


프론트앤드는 html5 + bootstrap + jquery로 되어 있고


레이아웃은 별도로 구매해야 합니다. (외국 라이선스) 비싸진 않습니다. 개인 라이선스로 2~3만원 정도 입니다.


백앤드는 nodejs + javascript + redis 로 되어 있고 api로 되어 있습니다.


nginx - proxy - nodejs 로 동작합니다.


관리자 페이지 demo는 비밀글로 문의 주시면 접근 가능 id / pwd 발급 드립니다.


자세한건  비밀댓글이나 카카오톡 ggoban1004 로 문의 주시면 자세하게 안내 드립니다.






반응형

Article By 꼬반

*certificate* : VCP 5(2012), RHCSA 7 (2014), RHCE 7 (2015), RHCSA in REDHAT OpenStack(2017) *development language* : Javascript, NodeJS, Golang, html5, css3, shell script *middle ware* : NGINX, Apache, Tomcat, Docker, Docker Swarm, Mesos, Kubernetes, HCI,

Discuss about post

[nodejs / pageres] 웹 서비스 상태 확인하기

회사에서 관리하는 웹 서비스가 약 40개 가량 되다보니 모니터링이나 관리가 필요하여


어제, 오늘 간단하게 만들어보았습니다.


물론 해당 서버들에는 nagios 나 whatap, whatsup 등으로 모니터링을 하고 있고


서비스가 다운되면 메일로 알림이 오긴 하지만


아무래도 한눈에 지금 사이트들이 다 정상인지 아닌지 확인하기는 좀 어려운 부분이 있는건 사실입니다.


그래서 다음과 같은 요구 사항을 가지고 만들었습니다.


1. 모니터링 도메인의 추가/삭제 가능

2. 해당 도메인의 현재 상태 (response 응답 코드) 확인 가능 (대시보드에 접속했을때 동작)

3. 해당 사이트에 메인 페이지 스크린샷 저장 가능


일단은 위 요구사항을 기본으로 다음과 같이 작성하였습니다.



URL 부분은 가려두었습니다. 액션부분은 아직 미정인 부분입니다.


메인에 접속하면 모니터링 대상 도메인을 불러와 상태를 확인하고 해당 스크린샷을 찍어서 테이블로 뿌려줍니다.


ui는 bootstrap / nodejs, express, pageres 가 주 모듈이고, DB는 사용하지 않습니다.


개선 사항으로는


1. 스크린샷에서 확인되는 것 처럼 NO가 정렬되지 않고 노출되는 부분에 대한 수정

2. 스크린샷이 현재 시점으로 저장되는데 날짜와 시간을 파일명에 추가하여 이력관리가 가능하도록 할 것

3. 액션 추가 (왼쪽 메뉴의 관리, 이력 포함)


정도가 있습니다. 추후 수정하겠죠.. 아마...


주요 소스는 아래와 같습니다.


index.js - router

router.get('/', function(req, res) { fs.readFile('../url.list', 'utf8', function (err, data) { var array_url = data.split("\n"); res.header("Access-Control-Allow-Origin" , "*"); res.render('index', { result: array_url }); }); }); router.get('/load', function(req, res) { fs.readFile('../url.list', 'utf8', function (err, data) { var array_url = data.split("\n"); res.header("Access-Control-Allow-Origin" , "*"); res.send(array_url); }); }); router.post('/check', function(req, res) { var body = req.body; //console.log(body.t_url); check.checkUrlStatus(body.t_url, function(result) { //console.log(result); res.header("Access-Control-Allow-Origin" , "*"); res.send(result+" : "+body.cnt); }); });


checkUrl.js

/**
 * Created by ggoban on 16. 1. 4.
 */
var http = require('http'),
    url = require('url'),
    Pageres = require('pageres');
    require('events').EventEmitter.defaultMaxListeners = Infinity;

exports.checkUrlStatus = function (Url, callback) {
        var options = {
            method: 'GET',
            host: url.parse(Url).host,
            port: 80,
            path: url.parse(Url).pathname
        };

        var pageres = new Pageres({delay: 2})
            .src(Url, ['1024x768'])
            .dest(__dirname+'/public/screenshot');
        pageres.run(function (err) {
            if (err) {
                throw err;
                console.log(err);
            }
            console.log('done');
        });

        http.get(options, function (res) {
            //console.log(options);
            //console.log(res.statusCode);
            callback(options.host+options.path+" : "+res.statusCode);
        }).on('error', function(e) {
            //console.log(options);
            //console.log(e.message);
            callback(options.host+options.path+" : "+ e.message);
        });

}

위 버전은 현재 standalone 버전으로 작성해두었고 원래 진행하고 있는 satm쪽으로 모듈을 추가할 예정입니다.


월, 화 이틀동안 급조하느라 소스가 매우 허접합니다. ㅠ _ㅠ 혹시나 해당 포스팅을 보시게 되면 가감없이


수정할 부분이나 부족한 부분에 대해 지적해주시면 매우 감사하겠습니다.

반응형

Article By 꼬반

*certificate* : VCP 5(2012), RHCSA 7 (2014), RHCE 7 (2015), RHCSA in REDHAT OpenStack(2017) *development language* : Javascript, NodeJS, Golang, html5, css3, shell script *middle ware* : NGINX, Apache, Tomcat, Docker, Docker Swarm, Mesos, Kubernetes, HCI,

Discuss about post

쇼핑몰 관리자 페이지 기능 구현 일지

와이프의 쇼핑몰을 개발하면서 쇼핑몰쪽에는 angularjs 를 도입하려다가 문제가 생겨 걷어내고 관리자 페이지에만 angularjs를 도입하여 개발하고 있다.


물론 이쪽도 기본 테마는 개발된걸 구매하여 진행. 구글 material 디자인을 기반으로한 angularjs admin theme 를 구매하여 작업 중이다.


다만 구매한 테마에는 위지윅 에디터가 포함되어 있지 않아서 오픈소스 위지윅 에디터를 찾아보았더니


textangular 라는 좋은 에디터가 있어서 이를 포함시켰다.




맨땅에 헤딩으로 개발하고 있자니 힘들지만 와이프거니 열심히 만들어야지!


https://www.jaram.kr

반응형

Article By 꼬반

*certificate* : VCP 5(2012), RHCSA 7 (2014), RHCE 7 (2015), RHCSA in REDHAT OpenStack(2017) *development language* : Javascript, NodeJS, Golang, html5, css3, shell script *middle ware* : NGINX, Apache, Tomcat, Docker, Docker Swarm, Mesos, Kubernetes, HCI,

Discuss about post

오늘 삽질한 문제

nodejs 로 RESTful back-end 를 구성했다.


그런데 이게


get 메소드는 정상적으로 동작하는데


post 메소드에서는 계속 에러가 발생하는 것이 아닌가?


뭐지?


bodyparser 를 잘못 사용했나


아니면 어디에 문제가 있나 한참 봤지만.


문제는 발견하지 못하다가..


읭??


바로 function(req, res) 이 부분을 function(res, req) 로 되어 있는 것을 발견..


이럴수가.


고치고 나니 아주 잘 동작 한다.


쩝.. 이걸로 오늘 오전부터 방금까지 삽질..


삽질의 연속이로구나.


어쨌든 오늘까지 쇼핑몰 관리자 페이지쪽 상품 목록 조회, 등록 기능 (기초적인 것) 구현하였고


front-end 쪽은 angularjs 빼고 작업 (ㅠㅠ) 메인에 최신 상품 리스트 출력 - 해당 제품 상세페이지 연동


이제 리스트 페이지쪽 손 좀 보고 상품 등록 부분을 좀 디테일 하게 고친뒤


로그인, 회원, 게시판 순으로 기능 추가 해야겠다.


http://www.jarambebe.com


반응형

Article By 꼬반

*certificate* : VCP 5(2012), RHCSA 7 (2014), RHCE 7 (2015), RHCSA in REDHAT OpenStack(2017) *development language* : Javascript, NodeJS, Golang, html5, css3, shell script *middle ware* : NGINX, Apache, Tomcat, Docker, Docker Swarm, Mesos, Kubernetes, HCI,

Discuss about post

쇼핑몰 프로젝트 개발 수정

지금 현재 쇼핑몰 개발을 bootstrap+jquery 기반으로 된 유료 템플릿을 사서


백엔드 쪽 개발 후 연동으로 개발하고 있는데 데이터바인딩을 편의하게 하기 위해서 프론트엔드는 angularjs 를 사용했더니


처음에는 몰랐는데 두개는 다르다고 볼수 있다.


bootstrap 은 문제가 안되지만 jquery 와는 angularjs 가 추구하는 방향이 다르므로 같이 사용하고자 하면 못 할 것 없지만


일반적으로는 권고하지 않는 부분..


angularjs 를 쓰려면 전체적인 디자인을 다시해야되는데 그러기에는 시간이 부족하다..


쩝 일단 목표로 하던 angularjs 부분은 다른 곳에서 다시한번 도입하여 진행해보도록 하고 


쇼핑몰쪽에서는 다시 제거해야 겠다.. 


으으 삽질의 연속 이구나.


09-17 12:07 각 페이지에 route는 따로 설정하고 ng-view 는 쓰지 않고 (즉 template 기능은 비활성) controller 만 사용해서


돌려보자.


내일 사용할 것


다만 웹 페이지는 지금처럼 기본은 grunt 로 빌드 시킬 것

반응형

Article By 꼬반

*certificate* : VCP 5(2012), RHCSA 7 (2014), RHCE 7 (2015), RHCSA in REDHAT OpenStack(2017) *development language* : Javascript, NodeJS, Golang, html5, css3, shell script *middle ware* : NGINX, Apache, Tomcat, Docker, Docker Swarm, Mesos, Kubernetes, HCI,

Discuss about post