본문 바로가기
반응형

분류 전체보기129

[개인블로그] 13.Vue.js + SpringBoot 통신(feat. axios설치, 사용하기) axios ? - axios는 Promise 기반의 자바스크립트 비동기 플러그인으로, Vue.js에서도 통신을할 때 매우 요긴하게 사용됩니다. Vue에서 ajax요청을 하는 방법이 여러가지 있지만, 그 중에서도 axios가 가장 성공적인 HTTP 클라이언트 라이브러리 중 하나이며, github에서도 스타가 많아 각종 이슈 대응이 가능하다. axios 설치 vue-cli를 사용하고 있기때문에 아래 npm 명령어를 이용해서 설치하면 된다. npm install --save axios 설치가 완료되면 package.json 에 dependencies가 추가됨을 확인할 수 있다. axios 설정 main.js에 axios import를 해주고, vue 앱 전역으로 사용이 가능하게끔 해준다. - Vue.proto.. 2021. 7. 20.
[개인블로그] 12.SpringBoot 환경 설정 하기 프론트 단은 Vue.js 백엔드 단은 Spring-Boot 를 이용하려고 한다. 회사에서는 Intellij를 사용하는데 개인으로 쓰려면 유료인것도 있고 그냥 이클립스(STS)를 사용해서 Spring Boot 프로젝트를 생성해보자. 1.STS 설치 https://spring.io/tools/ Spring Tools 4 is the next generation of Spring tooling Largely rebuilt from scratch, Spring Tools 4 provides world-class support for developing Spring-based enterprise applications, whether you prefer Eclipse, Visual Studio Code, or T.. 2021. 7. 20.
[개인블로그] 11. vuetify 적용하기 vuetify 설치 프로젝트 경로에서 아래 명령어 입력 - vue add vuetify vuetify 설치를 하게 되면 - src/plugins/vuetify.js - vue.config.js 파일 등 vuetify 설정 파일들이 생성이 된다. 주의사항 vuetify를 설치하면 App.vue 등 여러 소스들이 변경이 되니, 기존에 작업하던 것들은 반드시 백업을 해놓고 진행하거나, 실제 프로젝트 시작전에 설치하고 진행할 것! (vuetify를 쓸생각을 안하고 중간에 하니, 작업한 것들이랑 겹쳐서 싱크를 맞춰줘야함) 2021. 7. 19.
[개인블로그] 10.Vue router 설정 현재까지 완성한 헤더, 풋터입니다. 이제 Vue 라우터 설정을 하고 메뉴 클릭시 화면 전환까지 진행해보겠습니다. - 준맛 - 찐맛 - 유튜브 메뉴별 src/views 밑에 각 디렉토리들을 만들어줬고, 그 밑에 index.vue 를 만들어줬습니다. 그리고 router/index.js 에서 3개의 화면들을 라우터에 등록해줬습니다. 라우터에 해당 화면들의 path를 선언해주면, 실제로 해당 경로 url을 호출하면 화면이 뜨는 것을 아래와 같이 확인할 수 있습니다. 메뉴클릭 시 화면전환 1. 헤더 메뉴 a태그에 href로 전환될 화면 경로를 선언해준다. 2. 메뉴 클릭해보면 정상적으로 화면이동이 됨을 확인할 수 있다. 2021. 7. 19.
반응형

티스토리툴바