일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | |||
5 | 6 | 7 | 8 | 9 | 10 | 11 |
12 | 13 | 14 | 15 | 16 | 17 | 18 |
19 | 20 | 21 | 22 | 23 | 24 | 25 |
26 | 27 | 28 | 29 | 30 | 31 |
- sql
- crud
- EXTJS
- reactjs
- 쿼리
- 자바
- 개발
- 리액트
- 스프링
- 컴포넌트
- jdk
- Intellij
- React
- springboot
- 보안취약점
- GIT
- restapi
- Spring
- java
- javascript
- 데이터베이스
- DATABASE
- table
- component
- Vue
- 자바스크립트
- JS
- 개발공부
- 스프링부트
- mssql
- Today
- Total
목록Vue.JS (13)
준준의 기록일지
유튜버 짐코딩님의 gird system 설명을 바탕으로 한 정리를 하려고 합니다. Vuetify는 12 Column Grid System으로 지원 5가지 중단점을 지원 출처 : 유튜버 짐코딩의 CODING GYM : https://www.youtube.com/watch?v=V30z8k8kTfE&t=30s
Vue로 대략적인 로직은 이해하겠는데, 기능별 / 공통 함수를 어떻게 관리하고 사용해야하는지에 대해 고민이 많았다. 프로젝트 초기 구조가 중요할텐데, 무조건적으로 vue파일에 기능을 때려박는다던가 vuex store에 action, state, getters, mutations를 활용한 예제를 활용해 함수를 구현하는것도 가독성이나 기능성에서 문제가 있을거라 판단했다. (물론 내가 구조를 공부해도, 위에서 안한다고 하면 방법은 없지만...미리 학습하고 좋은 프로젝트를 구성하도록 상사 유도...해보자) 오픈 카톡방에 질문한 답변에 따르면 프로젝트 함수관리는 아래와 같이 한다. 프로젝트 함수 관리 - 공통 함수 -> 모듈로 관리한다. - store state에 의존적인 로직 - 공통 함수 모듈로 관리 -> 비..
front -vue project 생성 vue프로젝트 루트에서 npm install -g @vue/cli or yarn global add @vue/cli 로 vue cli를 설치한다. 설치 후 vue create front 로 front 프로젝트 생성 완료 Springboot와 연동을 위한 설정 front 프로젝트에서 vue.config.js 파일을 생성하고 아래 코드를 작성한다. - 아래 코드의 proxy 서버를 통해 base 경로를 설정하고 axios로 통신할때 사용하는걸로 보여진다. (포인트) BootStrap 설정 Bootstrap 설치 npm install vue bootstrap bootstrap-vue Main.js에 작성 1 2 3 4 5 6 7 8 9 10 11 import Vue fr..