이클립스에서 작성한 내용들을 Vscode에서 불러와 Front를 구성 해 주어야 할 때 필요한 과정들이다. cmd 창을 이용하기 보다는 Vscode 에 있는 Terminal 탭을 클릭 후 사용 해도 결과는 똑같으니 꼭 cmd 창을 켜서 진행하지 않아도 된다. 하지만 일단 cmd가 살짝 멋있어 보이니까 cmd 로 진행을 해보려고 한다. 폴더 생성 폴더를 생성 할 원하는 경로를 들어가 vue create 폴더명 을 입력해 준다. cd ../ 이것은 경로를 거슬러 올라가는 코드이다. 나는 위와 두번 거슬러 올라갔는데 한번에 하는 방법은 아래와 같으니 편한 방법으로 사용하면 좋을 것 같다. 생성 된 폴더 기본 설정 vue create 폴더명 이 성공 하게 되면 아래와 같이 preset을 설정하라고 나온다. Ma..

이클립스에서 백단으로 사용하는 spring과 비쥬얼 스튜디오에서 프론트로 사용하는 vue를 이클립스로 연동하는 방법에 대해 알아보자. 보통은 이렇게 두개의 개발도구를 이용해 동시에 다른 서버를 이용하여 웹페이지를 구현 하는게 정석이지만 만약에 내가 진짜로 서버에 해당 페이지를 올리고 싶다면 함께 넣어 놓는 것이 편리하고 + 어떤 거래처에서 프론트와 백까지 한번에 개발해 달라고 할 수 있기 때문에 연동하는 방법을 알아 두는 것이 좋다고 한다. 첫 번째 vscode에서 생성한 프로젝트의 제일 하단에 보면 vue.config,js 를 클릭한다. 두 번째 아래의 코드를 작성해준다. ● outputDir은 뷰의 입장에서 이클립스의 resources/static 폴더까지 가는 경로를 작성해준다. 예를 들어, 나는 ..

뷰의 새로운 프로젝트를 생성하기 위해 cmd 창이나 Visual Studio 의 Terminal 을 이용한다. 처음에 cmd 창을 이용했는데 VScode 이용하는게 훨씬 편하다! 더 자세하게 작성 된 vue 프로젝트 생성~~ Vue 프로젝트 생성 및 환경설정 이클립스에서 작성한 내용들을 Vscode에서 불러와 Front를 구성 해 주어야 할 때 필요한 과정들이다. cmd 창을 이용하기 보다는 Vscode 에 있는 Terminal 탭을 클릭 후 사용 해도 결과는 똑같으니 꼭 cmd henniee.tistory.com 1. node.js 설치. 패스등록 https://nodejs.org/ko/ 2. workspace로 사용할 폴더 생성 ex>C:\Users\Playdata\Desktop\vue_project..

Vue Directive 란? HTML 태그 안에 v- 접두사를 가지는 모든 속성들을 의미하며 화면의 요소를 더 쉽게 조작하기 위해 사용하는 기능이다. 뷰의 데이터 값이 변경 되었을 때 화면의 요소들이 반응하여 변경된 데이터 값에 따라 갱신 된다. 따라서 화면의 요소를 직접 제어할 필요 없이 뷰의 디렉티브를 활용하여 화면 요소들을 조작 할 수 있다. v-bind v-bind는 지정된 해당 태그의 속성값을 지정하는 데 사용되는 디렉티브다. v-bind 지우고 : 로 축약 가능, v-bind:href=“url”을 줄여서 :href=”url” 이라고 표기해줄 수 있다. {{test1}} {{test2}} v-if 저장한 뷰 데이터 값의 참, 거짓 여부에 따라 해당 HTML 태그를 화면에 표시 여부를 결정하는 ..