IT/Vue.js
-
Vue.js - 전역/지역 컴포넌트 개념 및 생성IT/Vue.js 2020. 7. 20. 14:47
1. 컴포넌트(Component)의 개념 기본 HTML 엘리먼트를 확장하여 재사용 가능한 코드를 캡슐화하는 데 도움이 됩니다. 상위 수준에서 컴포넌트는 Vue의 컴파일러에 의해 동작이 추가된 사용자 지정 엘리먼트입니다. 경우에 따라 특별한 is 속성으로 확장된 원시 HTML 엘리먼트로 나타날 수도 있습니다. Vue 컴포넌트는 Vue 인스턴스이기도 합니다. 그러므로 모든 옵션 객체를 사용할 수 있습니다. (루트에만 사용하는 옵션은 제외) 그리고 같은 라이프사이클 훅을 사용할 수 있습니다. 위와 같이 Vue.js 공식 홈페이지에는 알려주고 있습니다. 저는 이 그림을 보면서 이해하기가 쉬웠습니다. 위 그림과 같이 하나의 화면을 적절하게 분리하여 (화면 또는 기능) 블록화 하며 여기서 하나하나의 블록이 컴포넌트..
-
Vue.js - Spring Restful API 활용하기 [CrossOrigin(cors) 해결]IT/Vue.js 2020. 7. 13. 13:46
Vue.js를 공부하면서, RestAPI를 이용하기 위해서 Spring Boot를 이용하여 Restful API를 활용해보도록 하겠습니다. 프로젝트를 새로 만들어야 하지만, 현재 갖고 있는 웹 프로젝트로 한번 해보도록 하겠습니다. Spring Boot와 통신하면서 CrossOrigin(cors) 오류가 나서 조금 시간이 걸렸는데요. 해결방법도 공유하겠습니다. 구조 : - Vue : localhost:8088 - Spring : localhost:8000 1. Vue.js axios를 통해 Spring 으로 작성된 컨트롤러를 호출하겠습니다. console.log(result)를 통하여 결과 값을 확인하겠습니다. Script 소스를 아래와 같이 작성하였는데, header 부분에 아래와 같이 작성해주세요. g..
-
Vue.js - Vue CLI 이용하여 프로젝트 생성 및 설정 파일 확인IT/Vue.js 2020. 7. 9. 10:55
1. Vue CLI를 이용하여 프로젝트 생성 명령어 vue init template-name과 project-name은 직접 입력해야 합니다. 여기서 눈여겨봐야 할 것은 template-name 영역입니다. template-name은 6개 중 하나를 입력해야 한다. 옵션 6개는 다음과 같습니다. - webpack : webpack 빌드 도구와 vue-loader를 이용하는 풀옵션으로서, 선택에 따라 linter, router, css 전처리, 테스팅 도구들을 사용할 수 있다. - webpack-simple : webpack 빌드 도구와 vue-loader를 이용하는 옵션으로서, 작은 애플리케이션을 구축하는데 용이하다. - browserify : browserify와 vueify를 이용하는 풀옵션으로서, ..