Vue.js를 공부하며 내용을 정리해 보았다. 환경설정 및 SPA 설정을 정리함.

1. Vue.js 뽀개기 1장 환경설정
Vue.js 환경설정 및 라우팅 설정

2. 1. 설치 파일 목록
• visual studio code 설치
• code.visualstudio.com/Download
• node.js설치
• https://nodejs.org/ko/download/
• vue cli 설치
• npm install -g @vue/cli

3. 1-1. VSCode 설치
• https://code.visualstudio.com/Download
• 자신의 환경에 맞는 편집프로그램을 다운로드 한다. 굳이 VSCode로 환경을 할 필요없이 자주 사용하는 편집프로그램을 사용해도 무관하다.

4. 1-2. Node.js설치
• https://nodejs.org/ko/download/
• 마찬가지로 Node.js도 자신의 환경에 맞게 설치하면 된다. Node.js는 자바스크립트를 실행하는 런타임이고, Vue는 화면을 그리는 프레임워크이다.
- Node.js는 비유하자면 요리를 만드는 식자재들이라 표현 할 수 있을 것 같고, Vue는 식자재를 조달 받아 요리해주어 내보내는 것과 비유를 해볼 수 있을 것 같다.

5. 1-3. Vue CLI 설치
• 커맨드 창에서 npm으로 install 해주자.
• npm install –g @vue/cli 명령어를 실행하여 설치
• 정상적으로 설치되었는지 확인(vue – version)
• Vue-cli는 기본 vue 개발환경을 설정해주는 도구이다.
• 프로젝트의 폴더구조에 대한 고민, lint, build, 어떤 라이브러리로 구성을 해야 하는지 webpack 설정 등 고민을 덜을 수 있다.
• CLI(Command Line Interface) 터미널을 통해 사용자와 컴퓨터가 상호 작용하는 방식을 뜻한다.
• npm 또는 yarn을 사용할 수 있다. (해당 설명에서는 npm을 사용함)

6. 1-4. Vue.js devtools 설치
• Vue.js devtools 설치 이유는 디버깅을 쉽게 하도록 하기 위해서이다. 크롬 브라우저에서만 지원하고 있으며, 설치 후 웹 페이지에 들어가면 사용할 수 있다.
• 주의사항
• - vue.js 를 사용하여 코드를 작성하였음에도 Vue.js not detected라고 표시 되어 진다. 이유는? 로컬 경로 때문…

7. 2-1. Vue.js 프로젝트 생성 및 플러그인 설치
• C: 하위의 workspace를 생성하고 해당경로로 이동(커맨드창에서 cmd) ex) cd:project워크스페이스 경로
• vue create 프로젝트명 명령어로 프로젝트 생성
- 실패 현상 정리
1. 커맨드 창에서 실행 시 프로젝트가 생성이 안되고 ERR를 내뱉고 menually 선택하라고 뜨게 될수도 있음. 엔터를 쳐서 진행되도록 해주면됨.
2. 허나 여기서도 ERR가 발생하고 진행이 안되는경우가 생길수 있음.
3. npm help를 쳐서 npm이 정상 설치되었는지 확인을 해본다.
4. 처리가 안되면 아래의 하위 플러그인들을 설치 후 VSCode를 재실행 해준다.
- view-in-browser : html 파일을 기본 브라우저로 볼 수 있도록 함
- vetur: Vuew.js 작업시 편리한 기능들을 제공 (코드 자동완성, 디버깅, 하이라이팅 등...)
- HTML Snippets: HTML 태그를 빠르게 작성할 수 있게 도와줌
- JS-CSS-HTML Formatters: JS, CSS, HTML의 코드 자동완성 기능을 제공(사용법 Ctrl + Space)
- Vue 2 Snippets: Vue.js 2.0의 코드 지원 및 하이라이팅 기능을 제공
- Vue-beautify: Vue.js 코드에 대한 정리 배치 기능을 제공
- ESLint: 자바스크립트 코드 스타일, 문법 체크 기능을 제공
- Korean Language Pack for Vusual Studio Code : VsCode 한글 패치 (선택)

8. 2-2. 플러그인 설치
• 마켓플레이스에서 추가 플러그인을 검색하여 설치를 진행한다..
• 플러그인 설치 후 재실행하고, 터미널에서 프로젝트를 생성 후 npm run serve 명령으로 생성한 프로젝트를 실행해 본다.
• Localhost:8080 으로 실행한 화면을 확인해 본다.

9. 2-3. Vue router 설치
• Npm install vue-router 명령어 실행
- 라우터?
웹 페이지간에 이동하는 방법. 특정 버튼을 누르거나 특정페이지로 이동을 할 시 한 페이지에서 새로고침 처럼 특정영역만 갱신 해주는 역할.
※서버에서 URL 매핑이 SPA 페이지에 적절하게 이루어진 경우, URL을 브라우저 창에 직접 입력하여 접속하는 것도 가능
- 스프링 부트 : SPA 라우트를 위한 URL 컨트롤러

10. 2-4. bootstrap-vue 설치
• Npm install vue bootstrap-vue bootstrap 명령어 실행
- 패키지 연동으로 컴포넌트를 사용할 수 있음. Bootstrap-vue.org로 이동하여 보면 도큐먼트가 잘되어있다.
Components에 Navbar를 이용하여 상단의 헤더를 만들어 테스트 샘플 소스로 사용해보겠다.

11. 3-1. 프로젝트 생성 및 구조 설명
• 2-1의 위에서 설명과 같이 프로젝트 생성 명령어를 실행하여 프로젝트를 생성하게 되면 아래와 같은 구조의 프
로젝트가 생성이 된다.
1. 옆의 빨간 부분의 영역이 프로젝트가 생성이 되면 나타나는 구조이다.
2. src 하위에 views와 components하위의 layout을 추가 할 것이며, rotuer도 추가 하여 테스트를
진행해 보겠다.
3. 1차 목적은 한 화면의 특정영역에서 헤더는 고정으로 하고, 특정영역만 갱신
되도록 테스트를 진행해 보겠다.

12. 3-2. 구조설명(components>layout)
Components>layout 경로를 생성하여 Header.vue를 생성
- main화면의 헤더로 사용할 영역을 생성 해줌.
- bootstrap-vue.org의 Components의 Navbar의 샘플소스를
복사하여 헤더로 사용 할것이다.
- Header.vue파일에 <template>영역과 <script>영역을 선언해준다.
- 복사한 Navbar 샘플소스를 템플릿안에 넣고 스크립트 영역에 사용할
템플릿 이름을 header로 넣어준다.

13. 3-3. 구조설명(src>views)
Views하위의 Home.vue 파일과 About.vue파일을 생성
- Home파일은 경로값이 없을경우 메인화면으로 사용되도록 생성.
- About파일은 파일의 경로가 about이면 이동되도록 화면을 생성.
Header.vue파일에서와 마찬가지로 html코드는 template영역 안에, 그리고
처리되는 이벤트는 스크립트 영역 안으로 코딩하면된다.

14. 3-4. 구조설명(router.js)
• Vue-router 설정
- 플러그인을 설치만 하였고, 사용하도록 설정을 해주지 않았다.
- vue-router를 사용할수있도록 import해주고, router를 선언도 해준다.
- 호출하는 페이지도 사용할 수 있도록 경로를 지정해준다.
- 하단의 const router를 선언해주고, 디폴트 router를 선언해주지 않으면,
router를 선언은 했지만 읽을 수 없다는 warning이 발생한다.
선언을 하면 읽을 수 있도록 export 해주자.
Routs로 선언한 영역에 path가 없으면 Home화면을 path경로가 About이면
About화면을 호출하도록 지정해준다.

15. 3-5. 구조설명(App.vue)
App.vue파일의 영역에 헤더와 라우팅 부분 수정
- Header컴포넌트를 사용할수 있도록 경로를 import해주고,
템플릿 부분에 헤더영역으로 사용하고자 하는 부분에 입력.
- 한 화면에서 특정영역을 갱신해줄 router-view영역도 지정.

16. 3-6. 구조설명(main.js)
Main.js에 설치한 bootstrap을 사용하도록 import 함
- bootstrap을 사용할 수 있게 선언을 해주고, css도
사용할 수 있도록 import해준다.
- 보여주는 Vue영역에 roter영역이 갱신될 수 있도록
import한 router를 추가해주어 mount되도록 함.
- 터미널에서 npm run serve로 프로젝트를 실행
Home화면이 뜨는지 localhost:8080 url을 띄워
확인 한다. About경로를 입력하여 화면이 갱신되는
것을 확인한다.