FOSS-final-project

주제

Vue.js를 사용하여 간단한 싱글 페이지 어플리케이션 만드는 방법

사전 준비사항

Download Node.js in https://nodejs.org/ko/

Download Visual code in https://code.visualstudio.com/

정의

Vue.js

Vue는 사용자 인터페이스를 만들기 위한 프로그레시브 프레임워크 입니다. 프로그레시브 프레임워크(Progressive Framework)란 기존 프론트 엔드 프레임워크와 달리 라이브러리 역할( 화면의 데이터 표현에 관한 기능들을 중점적으로 지원)과 프레임워크 역할( 라우터, 상태관리, 테스팅)을 동시에 할 수 있는 프레임워크를 말합니다. Vue는 현대적 도구 및 지원하는 라이브러리와 함께 사용한다면 정교한 단일 페이지 응용프로그램을 완벽하게 지원할 수 있습니다.

Node.js

Node.js는 Chrome V8 JavaScript 엔진으로 빌드된 JavaScript 런타임입니다. 이 강의에서는 node.js의 패키지 생태계인 npm(Node Packaged Manager)을 사용하기 위하여 설치합니다.(npm을 통해 vue를 설치하려고 합니다.)

Vue-cli

vue-cli 는 기본 vue 개발 환경을 설정해주는 도구입니다. vue-cli 가 기본적인 프로젝트 세팅을 해주기 때문에 폴더 구조에 대한 고민, lint, build, 어떤 라이브러리로 구성을 해야되는지 webpack 설정은 어떻게 해야되는지에 대한 고민을 덜을 수 있습니다.

간단한 싱글 페이지 만들기

프로젝트 생성

npm install -g @vue/cli
vue create new-project-name
yarn serve

vuex 사용하기

vue-cli를 생성하였을때, 컴포넌트의 데이터를 효율적으로 관리하기 위한 라이브러리

vuex 구조

• state : 프로젝트의 모든 곳에서 참조가능한 변수의 모음
• getter : state의 값을 가져오는 함수의 모음
• mutation : state의 값을 변경하는 함수의 모음
• action : 비동기 호출에 쓰이는 함수의 모음

router 사용하기

vue에서 페이지 이동을 위한 라이브러리, vue-cli를 설치하면 자동으로 설치됨

router폴더의 index.js로 라우터의 경로를 지정한다.

<router-link to="경로">

index.js에서 지정한 경로에 할당된 컴포넌트를 router-view에 전달한다.

<router-view>

router-link에서 지정한 컴포넌트를 띄워준다.

참고자료

https://kr.vuejs.org/v2/guide/index.html
https://simplevue.gitbook.io/intro/01.-vue-cli