개발노트

computed 보통 value에 대한 validation. Hello Hello data의 isError값에 따라 태그에 warning클래스 여부가 변경됨. Hello isError값이 true일 경우 warning 표시. watch computed보다 상대적으로 무거운 로직. Vue 인스턴스의 특정 프로퍼티가 변경될때 지정한 콜백함수가 실행. {{ num }} 위의 예제를 보면 num라는 프로퍼티가 변경될때 마다 fetchUserByNumber라는 method가 실행 되는걸 확인 할 수 있음. 특정 프로퍼티의 변경시점에 특정 액션(call api, push route …)을 취하고자 할때 적합해보임. * 만약 computed로 구현가능한 것이라면 watch가 아니라 computed로 구현하는것이 보통..

앞에서 작업한 내용은 Spring따로 Vue.js(Node.js) 따로 구성하였다. 이런 구조를 뷰로작성한 코드들에 대해서 build를 통해 번들링된 코드들을 지정한 경로에 저장하여 실제로는 Spring프로젝트의 Web Server만으로 화면 기동을 시키려 한다. 우선, 프로젝트 디렉토리 구조와 추가 작성내용을 살펴보면 src경로 하위에 frontend라는 vue프로젝트가 위치해있고 frontend/config/index.js 파일 build부분의 경로를 위의 화면 내용처럼 수정한다. frontend프로젝트 경로로 접근하여 해당 프로젝트를 build한다. npm run build build가 정상적으로 끝나면 아래의 보여지는 내용처럼 해당 경로에 번들링 된 파일들이 생성된다. 추가로 html파일경로와 r..

Spring boot(gradle) + vue.js 조합의 테스트 프로젝트를 진행하려고 한다. Spring boot 세팅 시 Spring Web과 Lombok만 추가 하여 가벼운 프로젝트로 생성 시켜준다. 그 이후 Vue.js 를 설치하는 과정은 아래와 같다. 1. Node 설치 https://nodejs.org/ko/download/ 다운로드 | Node.js Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. nodejs.org 2. vue-cli 설치 npm i -g @vue/cli 3. spring boot 프로젝트 경로 하위에 해당 vue프로젝트 설치 frontend라는 이름으로 vue프로젝트를 생성 시키기 앞서 np..