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

1. best-5 샘플 목록 :https://vuejsdevelopers.com/2018/04/23/vue-boilerplate-template-scaffold/

   1.1로그인화면 맘에든것:https://github.com/icebob/vue-express-mongo-boilerplate

2. top-10 샘플 목록 : https://vuejsexamples.com/tag/layout/

  2.1 비동기-그리드 샘플 : https://github.com/jbaysolutions/vue-grid-layout

3. vscode와 git 연동 유툽 : https://www.youtube.com/watch?v=kHM3xzkou_0

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

1번의 베스트 샘플 5개 중에, 로그인 샘플 화면과 로그인 이후 화면이 가장 맘에 들어서 이 부분에 대해 분석해보고, vue 프로젝트를 추후진행해보려고 한다.

* 아래 내용으로 IDE로 Import해서 확인한다.

1) 1.1 번의 코드를 전체다운로드 받는다. ( 해당 깃 링크의 download zip )

2) vscode 또는 visual stuidio community 버젼을 다운로드 받는다. ( 무료이므로 구글링해서 다운받으면 된다. )

   ( 내 경우에는 이전에 설치한 vs 2017 community 버젼이 있어서 15.8로 버젼업했다. )

3) 다운로드 받은 소스코드 zip파일을 압축해제한다.

4) vs를 실행시키고, 새프로젝트 생성하기를 하고, nodejs 기존 코드를 불러온다.

   - 기존코드 불러온 후, 실행파일은 ./server/dev로 지정해준다.

5) 압축해제한 폴더에서 'npm install' 실행해서 실행환경을 맞추어준다.

6) 'Hello world' 한다는 생각으로 run 또는 'npm run dev'를 실행한다.

7) 에러없이 되었다면, 'npm run build' 실행한다.

8) 에러없이 되었다면, 'npm start'를 실행한다.

*** 사실, 에러가 발생하는게 정상이다. 아래의 구경/분석하면서 에러 또는 설정값 잡는 법에 대해서 나열한다.

run dev는 현 개발모드 상태에서 실행하는 의미이고,

run build는 릴리즈 모드로 빌드(컴파일/난독화등)해서 릴리즈 가능한 형태로 만들어주고,

start를 통해 빌드된 상태로 실행한다.

이제 vue 프로젝트( mongo, ... 이것저것많음 )를 구경해보러 들어간다.

이 프로젝트는 몽고 디비를 쓰고 있고, open oauth 를 가져다 사용하고 있기 때문에, 

디비를 설치하지 않는다면, 가상db 또는 mockdata를 사용할 수 있게 해야 하는데 그게 더 귀찮아서 몽고/몽구즈를 설치한다.

oauth를 사용하지 않으려면 oauth 부분의 코드를 전부 주석처리하거나, 해당 oauth 루틴을 타지않게 호출부분을 바꿔주거나 주석처리해야한다.

jitsu의 http-server를 사용하면 편리하다

주소 : https://github.com/nodeapps/http-server

 curl https://npmjs.org/install.sh | sh

 npm install http-server -g

 http-server [path] [options]

 mkdir myapp
 cd myapp/
 jitsu install http-server

 node bin/http-server

 jitsu deploy

https://github.com/gravityonmars/Balloons.IO

NodeJs로 된 오픈소스.

FB, TW 오픈 API활용하여 로그인 됨.

사용 및 설치에 대한 내용은 위 출처 사이트에서 설명해주고 있음

https://github.com/riverspirit/Springle-Chat

이건 Springle을 이용한거 같은데~ 이건 낼 봐봐야겠다~ ㅋㅋ

잠와서;;쥐쥐~ ㅋ

'제대로 배우는 NodeJS p170. ' 에 관한 내용이다.

처음에 MVC라고 해서 무슨 말인가 했다.

express말고 다른 MVC 모델 프레임웍을 소개하는건가 했다.

확장하기 편하도록 한 것으로 보인다.

이걸 MVC라 하기에는.. 좀 억지가 있어 보였다. '뭐..보는 사람마다 이해하는 사람마다 다르겠지만..'

내가 볼때에는 그냥 Visitor 패턴을 활용한 확장성을 높여준 코드로 보였다.

좀 더 풀어 쓰면,

Visitor 패턴을 활용한 CRUD 코드 작성하는 예제 코드라 생각하면 좋겠다. 

나는 CRUD는 IO접근을 위한 CRUD로 생각하고 있었지.. 이걸 따로 MVC로 CRUD를 구현했다는건지 어떤 의도였는지는 잘모르겠다. 뭐 여튼 결론적으로 하는 말은 같은것 같다. 편하게 코드짜게 해준다? ^^;

// CRUD 연결 메소드

exports.mapRoute = function ( app. prefix ) {

prefix = '/' + prefix;

var prefixObj = require( './controller/' + prefix );

// CRUD 연결 해주는 부분 : 색인 / 추가 / 조회 / 편집 / 업데이트 / 제거

app.get( prefix, prefixObj.index );

app.get( prefix + '/new', prefixObj.new );

app.get( prefix + '/:id', prefixObj.show);

app.post( prefix + '/create'. prefixObj.create)

app.get( prefix + '/:id/edit', prefixObj.edit);

app.put( prefix + '/:id', prefix.update);

app.del( prex + '/:id', prefixObj.destroy);

};

// 서버구동 부분에서 등록

...

app.get('/', route.index);

var prefixes = ['widgets'];

prefixes.forEach( function( prefix) { 

map.mapRoute( app, prefix );

});

....

// Widgets.js의 CRUD하는 실체 부분

exports.new = function( req, res ) { ... }

exports.create = function( req, res ) { ... }

exports.show = function( req, res ) { ... }

exports.destroy = function( req, res ) { ... }

exports.edit = function( req, res ) { ... }

exports.update = function( req, res ) { ... }

이렇게 하면~ 기본 단계 완성이 된다~

여기서 어떻게 확장이 되냐고?

위에 굵게 해둔 부분에서 추가 확장할 route를 만들면된다.

var prefixes = ['widgets', 'pictures', 'musics' ]; 

이렇게 한 후, pictures.js와 musics.js파일을 만들어서 똑같은 template으로 CRUD를 제공해 주면 됨! ㅋㅋ

요약 해서 말하면,

cURL로 테스트가 된다~ ㅋㅋ

curl --request GET http://ip:3000/widgets/new

curl --request POST http://ip:3000/widgets/create --data 'widgetname=name&widgetprice=1.0'

요러케~

난 갠적으로 다른 테스트툴을 쓰는데~ 간편하게 curl로 확인하는 것도 괜찮은 듯 하다~

MVC 흉내 내기 끝.

현재 보는 책은 '제대로 배우는 NodeJS'

메모하고자 하는 것은 색인을 위한 문장

페이지 150p.

./node-http-proxy --port 8000 --tartget localhost:8124

페이지 151p.

코드를 이용해서 port proxy 사용

uri값에 따라 port분기함

if req.url.match( /^\/node\// )  proxy.proxyRequest( req, res, { host : 'localhost', port : 8000 });

else                                         proxy.proxyRequest( req, res, { host : 'localhost', port : 8124 });

이게 된다는 거임..

그래서 URL을 아래같이 요청하면 프록시에서 분기시킴

/node/123 -> localhost:8000

/example.html  -> localhost:8124

/node/567 -> localhost:8000

/htmltest/wow123  -> localhost:8124

^^; 색인용으로 간단히 메모만 함.

forever 설치해서 잘써먹자~

http://blog.outsider.ne.kr/590

node.js에 대한 포스팅을 몰아치고 있군요. 얼마전에 구축했던 Side Effect Studio사이트에서 사용했던 것들을 좀 정리하고 공유하려다 보니까 node.js에 대해서만 좀 연속적으로 올라가고 있네요. 빨리 다 정리하고 다른 것들도 좀 봐야겠습니다. ㅎ

작년에 Upstart와 Monit으로 node.js Application 서비스 하기라는 포스팅을 올린적이 있는데 이는 꽤 유용하긴 하지만 관리차원에서 꽤나 귀찮은 점이 있습니다. upstart스크립트 만들고 monit에 룰 적용하고 하는 등의 일은 약간 귀찮은 일입니다. 딱히 다른 대안을 모르겠어서 Upstart와 Monit을 쓰고 있었는데 저 포스팅 이후 node앱의 인스턴스를 관리해 주는 forever라는 툴이 공개되었습니다.

forever는 npm을 사용해서 npm install forever 명령어로 간단히 설치가 가능하며 아주 간단한 명령어를 통해서 node.js로 만든 앱을 실행시켜주고 예기치 않게 종료되었을때 다시 실행해주거나 stdout을 로그파일로 남겨주는 등의 관리를 해주는 툴입니다. 사용해 보니 약간의 버그가 있기는 한데 기존 Upstart와 Monit조합에 비해서 사용성이 너무 편리해서 node.js앱의 관리는 모두 forever로 갈아탔습니다.

usage: forever [start | stop | stopall | list | cleanlogs] [options] SCRIPT [script options]

  options:
    start          start SCRIPT as a daemon
    stop           stop the daemon SCRIPT
    stopall        stop all running forever scripts
    list           list all running forever scripts
    cleanlogs      [CAREFUL] Deletes all historical forever log files

forever의 사용법은 위와 같습니다. 등록하고자 하는 스크립트를  forever start app.js와 같이 실행하면 됩니다. 프로세스를 보면 forever에 대한 프로세스가 따로 있어서 실행한 app.js 프로세스가 죽을 경우 자동으로 다시 실행을 시켜주게 됩니다. 현재 돌아가고 있는 스크립트를 보려면 forever list를 실행시키면 됩니다.

프로세스를 종료할때는 앞에 나온 번호를 이용해서 forever stop 번호를 사용하면 됩니다. 한눈에 어떤 프로세스를 현재 사용하고 있는지 파악이 되고 log파일을 자동으로 연결해 주기 때문에 사용하기가 무척 편리합니다. 

약간 사용해본 경험으로는 어느정도 안정적인것 같습니다.(별로 접속차가 없어서 fatal이 날 확률이 적기 때문에 정확한건 아니지만 그냥 기분상.. ㅡㅡ;;) 대신 약간의 버그가 있는지  forever start로 앱을 등록했는데 프로세스는 정상적으로 떴는데 forever에는 등록이 되지 않아 리스트에 나타나지 않는 경우가 있습니다. 여러번 테스트를 해보았지만 어떤 규칙성은 못찾았습니다. 이럴때는 해당 스크립트와 그에대한 forever에 대한 프로세스를 강제로 종료하고 다시 등록해주어야 합니다. 이부분 외에는 관리나 사용 모두가 편리해서 참 좋군요.

겁먹지 말길! 그냥 영어 못해도.. 명령어만 그대로 따라 치면됨~ ㅋㅋ

음... '$' 다음이 명령어임;;

How to install Bootstrap (v2.0.2) in ExpressJS (v3.0.0)

http://www.rs.au.com/31/how-to-install-bootstrap-v2-0-2-in-expressjs-v3-0-0

I’m certainly no expert when it comes with using ExpressJS orBootstrap so there may be far better ways of doing this than what I detail below, however, if you do know of better ways please let me know as I bumbled my way through!

Here goes.

Prerequisites:

I’m installing this on an Ubuntu 11.10 EC2 micro instance and assuming that you have the following installed: node npm make zip unzip git

Process:

1. Install via NPM the following: ExpressJS, Less & UglifyJS: ~$ npm install -g express less uglify-js (you may need to sudo npm install -g express less uglify-js
2. Create an ExpressJS working directory, we’ll call it testme, with Less: ~$ express --css less testme
3. Move inside your new directory: ~$ cd testme
4. Create a new directory called vendors: ~/testme$ mkdir vendors
5. Move inside the vendors directory: ~/testme$ cd vendors
6. Download from github Bootstrap: ~/testme/vendors$ git clone https://github.com/twitter/bootstrap.git bootstrap
7. Move into the newly created Bootstrap directory:~/testme/vendors$ cd bootstrap
8. Build Bootstrap: ~/testme/vendors/bootstrap$ make -i (you may see a cannot remove `docs/assets/bootstrap.zip` file –just ignore) – it would also be great if you could make to a target directory, but I couldn’t find how this could be done.
9. Once the build has been completed move to the docs/assets directory: ~/testme/vendors$ cd bootstrap/docs/assets
10. You should see a css, img, js folders and a bootstrap.zipfile: ~/testme/vendors/bootstrap/docs/assets$ ls
11. Go back to the testme folder:~/testme/vendors/bootstrap/docs/assets$ cd ~/testme
12. Move the bootstrap zip file you just created into your public folder: ~/testme$ mv vendors/bootstrap/docs/assets/bootstrap.zip public
13. Move to the public folder: ~/testme$ cd public
14. Unzip the bootstrap.zip file: ~/testme/public$ unzip bootstrap.zip
15. You should see a bootstrap folder in the public folder~/testme/public$ ls
16. Remove the bootstrap.zip file: rm bootstrap.zip
17. Now it’s a matter of linking to the bootstrap stylesheets in your jade layout template files. Edit the views/layout.jade file to include references to the bootstrap files, remember Bootstrap needs the latest jQuery, so you may want to include reference to this too, here’s what my layout.jade looks like:
    

    1234567891011

    !!! html head title= title link(rel='stylesheet', href='/bootstrap/css/bootstrap.min.css') link(rel='stylesheet', href='/bootstrap/css/bootstrap-responsive.min.css') link(rel='stylesheet', href='/stylesheets/style.css') script(src='http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js') script(src='/bootstrap/js/bootstrap.min.js') body block content

    view rawlayout.jade hosted with ❤ by GitHub
18. To test that it works, edit the views/index.jade file to include a reference that Bootstrap will be able to use, something like:
    

    123456789101112131415161718192021222324252627

    extends layout   block content div.top form.form-horizontal(method="post", id="loginForm") label Username input.span3(id="username", type="text", name="User", placeholder="Enter your username") label Password input.span3(id="password", type="password", name="Password") input.btn(type="submit", value="Log In") div.container div.content table.table.table-striped thead tr th Table th Heading tbody tr td Blah td Test tr td Hello td World   div.footer p © 2012 All rights reserved.

    view rawindex.jade hosted with ❤ by GitHub

And there you have it! Being able to use a compiled Bootstrap file with your ExpressJS install.