[ Spring Boot + Quasar ] 1. 프로젝트 환경설정
★ 1. [ Spring Boot + Quasar ] 1. 프로젝트 환경설정
2. [ Spring Boot + Quasar ] 2. Quasar UI / component 가져다 쓰기
0. 사전작업
node.js 가 설치되어 있어야 한다.
node.js 다운로드 및 설치
https://nodejs.org/ko/ * 화면에 보이는 TLS 버전을 다운받습니다.
------------------------------------------------------------
* 설치 폴더 > C:\Program Files\nodejs\
* 설치 확인 > C:\Users\uuser>npm -v
------------------------------------------------------------
* Node.js를 설치하게 되면 Node Package Manager인 NPM은 자동으로 설치된다.
이를 통해 원하는 패키지를 npm install ~~ 의 형태로 설치할 수 있고,
작성 코드를 빌드하고 서버를 켜는 행위도 npm을 통해 수행할 수 있다.
1. Quasar CLI 설치 npm install -g @quasar/cli
2. Spring Boot 프로젝트 생성
3. Spring Boot 사이트 확인
application.properties 수정 후 실행
기본 port 와 로그인 계정 정보
프로젝트(폴더)명은 소문자로...
Quasar에서 대문자 프로젝트명은 사용못한다.
4. Quasar 프로젝트 생성 * quasar create quasar_front
* 이클립스에서 미리 Project 폴더(quasar_front) 생성후 진행
* 프로젝트(폴더)명은 소문자로... Quasar에서 대문자 프로젝트명은 사용못한다.
5. Quasar 사이트 확인
5.1. 설정 변경 * quasar.conf.js 에사 port 번호 변경 ( 8080 -> 9091 ) * 8080은 이미 사용중..
5.2. 서버 실행/ 사이트 접속(서버 실행시 자동접속)
6. 파일 설명 * 최초 생성되는 파일들
 |
[node_module] : package.json 에 등록된 의존성 파일들이 다운로드 되는 폴더 package.json 수정시 npm install 명령어로 다운로드 된다. * 개별등록시 : npm install 모듈명 -save > package.json 자동 등록 [public] : 웹 파일 폴더. /favicon.ico처럼 루트로 접근 가능. [src] [asset] : 이미지 등을 저장하는 폴더입니다. webpack이 실행시 처리. [boot] : 부트 파일 폴더. 애플리케이션이 실행되기 전에 패키지나 플러그인 초기화. quasar.conf.js 의 boot 에 선언된 플러그인 초기화 [components] : vue컴포넌트들을 담는 폴더 [css] : 전역 css 폴더 [layout] : 레이아웃 폴더 [pages] : 페이지 폴더 [router] : 라우팅 설정 폴더 [store] : 전역 데이터 저장소 .eslintrc.js : 자바스크립트 정적 분석 도구 (코드를 분석해서 문법 오류, 안티 패턴 등을 찾아 일관된 코드 스타일로 작성할 수 있게 하는 도구) babel.config.js : https://juneyr.dev/2019-02-20/webpack-babel jsconfig.json : https://code.visualstudio.com/docs/languages/jsconfig package.json : 의존성 관리 파일 ( aka. gradle ) quasar.conf.js : Quasar 프로젝트의 환경 설정 파일. |
* store : https://kamang-it.tistory.com/entry/Vue14vuex-사용하기
https://hello-bryan.tistory.com/272
https://balmostory.tistory.com/m/70?category=812222 https://uxgjs.tistory.com/149
export default를 이용하여 외부에 노출시켜 주는데 노출시 각 키값 구조는 다음과 같은 의미를 가지고 있습니다.
▶ state: 프로젝트 내의 모든 곳에서 참조 및 사용이 가능한 전역변수
state를 바꾸기 위해서는 commit을 이용해야 한다.
▶ mutations: state를 변경시키는 역할을 합니다. 동기 처리 (Mutations을 통해서만 state를 변경해야 함)
* commit('함수명', '전달인자')으로 실행 / mutations 내에 함수 형태로 작성
▶ action: Mutations를 실행시키는 역활. 비동기처리 .비동기 처리이기 때문에 콜백함수로 주로 작성
* dispatch('함수명', '전달인자', {root:true}) 로 실행
▶ getters : 각 Components의 계산된 속성(computed)의 공통 사용 정의
하위 모듈의 getters를 불러오기 위해서는 특이하게 this.$store.getters["경로명/함수명"]; 을 사용