Simple is Best! Simple is Best!

Vue

• Spirng Boot Vue.js 연동하기

  Vue 2019. 7. 7. 16:31

  vue.js로 브라우저의 localdatabase를 이용해서 CRUD가 가능한 Todo List 프로젝트를 하나 만들어봤고, 이제는 Vue.js+SpringBoot를 연동해보려고 한다 1) vue CLI로 아래 명령어를 실행하여 vue프로젝트를 생성한다 (webpack기반) 1vue init webpack frontendcs 2) 그 다음 SpringBoot의 기본 view경로를 맞춰준다. 생성한 뷰 프로젝트의 config > index.js > build 부분을 수정한다. 빌드후 SpringBoot의 어느경로에 결과물을 만들거냐는 경로임 참고로 에디터는 아톰을 이용했다. 2) 만들어진 vue프로젝트를 boot프로젝트 폴더 안에 넣어 준다. 3) 그리고 커맨드로 해당 내가만든 vue프로젝트까지 간후 vu..

• [Vue.js] Vue 프로젝트 구성방법 및 구조

  Vue 2019. 2. 4. 00:21

  프로젝트 구성을 세팅하기전에. 개념정리 싱글파일 컴포넌트- .vue파일로 프로젝트 구조를 구성하는 방식.- .vue파일 1개는 1개의 컴포넌트와 동일하다.- 싱글파일 컴포넌트 체계를 사용하려면 .vue파일을 웹브라우저가 인식 할 수 있는 형태의 파일로 변환해주는 웹팩 or 브라우저리파이가 필요하다 뷰CLI(커맨드 라인 인터페이스)- 커맨드창에서 명렁어로 특정 동작을 수행 할 수 있는 도구 웹팩- html, css,이미지들을 자바스크립트 모듈로 변환해서 하나로 묶어 웹성능을 향상시켜 주는 자바스크립트 모듈 번들러임. 웹팩과 브라우저리파이는 유사하지만 , 브라우저리파이는 웹자원 압축, 빌드자동화 기능이 없다. 아래 내용 총 요약 Simple is Best...1. vue CLI 설치npm install vu..

• [Vue.js] 뷰 디렉티브란?

  Vue 2019. 1. 27. 23:58

  뷰 디렉티브란? v-접두사 가지는 모든 속성을 의미함. JSTL의 foreach나 if문 처럼 화면 요소를 더 쉽게 조작하기 위해 사용한다. 디렉티브 이름 역할 v-if if문과 같다 true,false값에 따라 화면에 표시한다. v-for 지정한 뷰 데이터의 개수만큼 반복하여 출력 v-show css의 display:none 으로 속성을 준다. if문의 경우 태그를 완전삭제함. v-bind vue 데이터속성과 html태그 기본속성을 연결해줌 v-on 화면요소의 이벤트를 감지하여 처리 할 때 사용함 v-model form에서 주로 사용되는 속성. form태그에 입력한 값을 vue인스턴스의 데이터와 동기화함.화면에 입력된 값을 서버로 보낼때 사용.(watch와 같은 고급 속성을 이용하여 추가 로직 수행 가..

• [Vus.js] Vue 템플릿과 데이터 바인딩하는 법

  Vue 2019. 1. 27. 18:02

  Vue 탬플릿이란? 마크업 요소와 Vue인스턴스 속성을 연결하여 HTML로 변환해주는 속성 마크업요소: html,css등Vue 인스턴스 속성: 데이터, 로직 데이터 바인딩 방법 2가지가 있다. {{ }} - 콧수염 괄호 v-bind - vue뿐만 아니라 다른언어나 프레임워크에서도 자주사용되는 템플릿 문법이다 - vue 데이터가 변경되어도 값을 바꾸고 싶지 않다면 v-once 속성을 사용한다. - {{ }}안에서 자바스크립트 표현식작성이 가능함 - 변수선언 불가 - 분기문은 if문 사용불가, 삼항연산자 사용가능 - 복잡한 연산은 vue인스턴스의 computed속성을 이용하여 작성한다.(캐싱효과있음) - id, class, style등 html속성값에 vue 데이터 값을 연결할 때 사 용 하는 방식 - v-..

• [Vue.js] Vue Http 통신, 엑시오스(axios)란?

  Vue 2019. 1. 21. 23:57

  vue에서도 ajax를 지원하기 위한 라이브러리를 제공함 라이브러리는 엑시오스(axios) 와 뷰 리소스가 있다. 하지만 엑시오스만 다룰 것이다 왜냐하면 현재 가장많이 사용되는 HTTP통신 라이브러리이기 때문이다(엑시오스 공식 깃허브 레포지토리) 초창기에는 뷰 리소스가 공식 HTTP통신 라이브러리였지만 현재는 아니다. 엑시오스란?Promise 기반의 API 형식 . Promis란 비동기 로직 처리에 유용한 자바스크립트 객체이다 API유형 처리결과 axios.get('URL주소').then().catch() 해당 URL로 get방식으로 요청.then()안에 반환값 로직 작성.catch()안에는 오류발생시 로직 작성. axios.post('URL주소').then().catch() 해당 URL로 POST방식으..

• [Vue.js] 네임드뷰

  Vue 2019. 1. 21. 22:40

  네임드뷰란? 특정 페이지로 이동 했을 때 여러개의 컴포넌트를 동시에 표시하는 라우팅 방식 - 네스티드 라우터와의 차이점은 화면을 구성하는 컴포넌트수가 적을땐 유리하지만, 네임드뷰는 컴포넌트수가 많을때 유리하다. 예제 14행 : name이 없는 경우 default로 맵핑된다. 1234567891011121314151617181920212223242526272829303132333435363738394041424344 네임드 뷰 var Header = {template: '여기는 머리'}; var Body = {template: '여기는 바디'}; var Footer = {template: '여기는 발'}; var router = new VueRouter({ routes: [{ path:'/', compon..

• [Vue.js] Vue 라우터란?

  Vue 2019. 1. 20. 23:02

  뷰 라우터란? vue에서 라우팅 기능을 구현할 수 있도록 지원하는 공식 라이브러리. 태그 설명 페이지 이동 태그, 화면에선 태그로 치환됨 페이지 표시 태그 , 변경된 URL에 따라 해당 컴포넌트를 뿌려주는 영역 라우팅이란? 웹페이지간의 이동방법을 말함. - 페이지를 이동할때 서버에 요청하여 새로 갱신하는 것이 아니라 미리 해당 페이지를 받아 놓고 페이지 이동시 클라이언트의 라우팅을 이용하여 화면을 갱신함, 이러한 방식을 SPA라고도 함(Single Page Application) - 라우팅을 이용하면 화면간의 전환을 매끄럽게 할 수 있음 - 뷰,리액트,앵귤러 모두 라우팅을 이용하여 화면을 전환함. 예제 - 뷰 라우터 라이브러리를 사용하기 위해서는 7행의 라우터 CDN 추가를 해준다.- 35행의 $moun..

• [Vue.js] Vue 컴포넌트 데이터 주고 받기

  Vue 2019. 1. 14. 00:52

  "vue 프레임워크의 기본적인 데이터 전달 방식은 상위-하위간 데이터 전달이다." 기본 방식은 아래와 같다상위 -> 하위 (props 전달)하위 -> 상위 (이벤트 전달) 각각 컴포넌트들은 고유한 유효범위를 가지고 있어 직접 다른 컴포넌트 값을 참조 할 수 없음아래코드 참고 ㅎㅎ 123456789101112131415161718192021222324252627282930313233343536373839404142434445 컴포넌트 간의 통신! var obj1 = { template : ' 첫번째 지역 컴포넌트: {{result}} ', data : function(){ return { result : 12345 } } }; var obj2 ={ template : ' 두번째 지역 컴포넌트: {{resu..