[vue] vuejs 샘플로 layout 구경하기

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

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 루틴을 타지않게 호출부분을 바꿔주거나 주석처리해야한다.