vue
-
Vue 데이터 바인딩 실습 - TODO 앱 구현하기개발/Front-end 2021. 9. 15. 22:28
이번 시간에는 이를 이용할 TODO 앱을 만들어보겠습니다. 0. 프로젝트 소개 및 컴포넌트 설계 0-1. 프로젝트 소개 이번에 실습할 프로젝트는 아래와 같습니다. (gif라서 약간 이미지가 깨집니다...) 0-2. 컴포넌트 구성 컴포넌트를 작게하는 경우 재사용성이 높아집니다. 따라서 아래와 같은 컴포넌트로 구성하겠습니다. TodoHeader: 제목 TodoInput: 할일 목록 추가 할일 목록 타이핑하여 + 버튼 클릭 시, localStorage에 추가(할 일 목록에 추가) 할 일 목록 입력 후 엔터 클릭 시 할 일 목록에 추가 TodoList: 할일 리스트 localStorage에서 할 일 목록 데이터를 가져와서 보여주기 완료 유무 체크, 리스트 삭제 TodoFooter: 모든 리스트를 없애는 버튼 0..
-
Vue HTTP 통신 라이브러리 - axios개발/Front-end 2021. 9. 3. 15:44
이번 시간에는 http 통신 라이브러리 axios를 이용하여 API를 호출하여 서버 데이터 바인딩을 하는 방법을 알아봅니다. 1. Axios란? axios는 서버와 데이터를 송수신할 수 있는 HTTP 비동기 통신 라이브러리입니다. Vue.js 개발 시 서버와 통신을 위해 가장 많이 사용되는 라이브러리입니다. 이는 Promise 기반의 HTTP 통신 라이브러리입니다. 아래 사이트에서 설치 방법, 사용법 등에 대해서 확인 가능합니니다. GitHub - axios/axios: Promise based HTTP client for the browser and node.js GitHub - axios/axios: Promise based HTTP client for the browser and node.js Pr..
-
Vue 데이터 바인딩개발/Front-end 2021. 8. 25. 15:32
이번 시간에는 HTML 입력 폼 객체에 따른 데이터 바인딩 방법을 알아보겠습니다. 1. 데이터 바인딩이란? Vue는 Angular와 마찬가지로 양방향 데이터 바인딩을 지원합니다. 아래 MVVM 패턴 그림을 봅니다. 뷰 모델에 있는 데이터 바인딩은 양방향 데이터 바인딩이 이뤄집니다. 모델과 뷰 중 어느 한쪽에 변경이 일어나면 다른 한쪽에 반영됩니다. MVVM 패턴: Model-View-ViewModel 약자로 프로그래밍 로직과 화면에 해당하는 View를 분리해서 개발하기 위해 설계된 패턴입니다. 모델: 데이터를 담은 용기. 서버에서 가져온 데이터를 js 객체로 저장 뷰: 사용자 화면 뷰 모델(Vue): 뷰와 모델의 중간 영역으로 돔 리스너와 데이터 바인딩을 제공 돔 리스너: 돔의 변경 내용을 즉각적으로 반..
-
Vue 컴포넌트 Basic개발/Front-end 2021. 8. 24. 23:42
이번 시간에는 vue 컴포넌트 개발을 위한 기본 문법에 대해서 알아봅니다. 컴포넌트에 대한 이해와 Vue 컴포넌트 코드 구조를 이해합니다. 1. 컴포넌트란? 웹 사이트 화면에서 하나하나가 수많은 웹 요소로 구성되어 있습니다. 예를 들어 버튼, input, 이미지 등으로 구성되어 있습니다. 이런 작은 단위의 여러 개 View 중에는 다른 화면에서도 사용됩니다. 이런 단위의 View를 재사용할 수 있는 구조로 개발하는 것을 컴포넌트라고 합니다. Vue로 개발된 파일(.vue)가 모두 컴포넌트입니다. Vue CLI를 이용해서 프로젝트를 최초 생성했을 때 src 폴더 밑에 components와 views(vue-router 설치 시 생성)이 존재합니다. 해당 역할은 아래와 같이 사용됩니다. views 폴더: 페..
-
Vue Router개발/Front-end 2021. 8. 24. 19:12
이번 시간에는 Vue Router에 대해 학습합니다. 사용자가 접속한 주소에 따라 페이지가 달라지는 것을 라우팅이라고 합니다. 이번 시간에는 라우팅이 무엇인지 파악하고, Vue에서 라우팅 처리를 위해 사용하는 플러그인 vue-router에 대한 설치 및 사용법에 대해 알아봅니다. 또한 Vue CLI의 prefetch 기능에 대해 이해하고 컴포넌트 로딩 시점을 설계하는 방법도 익혀봅니다. 1. 라우팅이란? 라우팅이란 사용자가 접속한 주소에 따라 페이지(컴포넌트)가 전환되는 것을 의미합니다. 뷰 라우터는 뷰 라이브러리를 이용하여 싱글 페이지 애플리케이션을 구현할 때 사용하는 라이브러리입니다. vue 프로젝트 내부에서는 미리 url를 정의하고, 각 주소마다 vue 페이지를 연결해 놓습니다. Vue는 vue에서..
-
2. Vue CLI로 Vue 프로젝트 생성하기개발/Front-end 2021. 8. 11. 19:37
Vue CLI는 Vue 프로젝트를 빠르게 구성하고, 빌드, 디플로이 할 수 있게 도와주는 도구입니다. 우선 CLI 설치를 해보고 프로젝트를 설치하는 3가지 방법에 대해서 알아봅시다. 처음에는 Default 옵션 설치 두 번째로는 Manully 옵션 설치 마지막으로 Vue 프로젝트 매니저를 이용하여 UI 상으로 설치하는 방법에 대해서 알아봅시다. 1. Vue CLI 설치 아래는 vue cli를 설치하는 명령어입니다. npm install -g @vue/cli -g: 해당 패키지가 현재 디렉토리뿐만 아니라 앞으로 생성되는 모든 프로젝트에서 사용할 수 있는 global 패키지 등록 2. Default 옵션으로 프로젝트 설치하기 해당 옵션으로 프로젝트를 생성하는 경우 기본적으로 설정된 값으로 설치가 됩니다. 2..
-
Vue.js 는 무엇인가?개발/Front-end 2021. 8. 9. 22:40
Vue.js 가 무엇인지 알아보고, React, Angular와 같은 다른 프론엔드 프로임워크와 비교하여 어떤 특징이 있는지 알아봅니다. 1. Vue.js는 무엇인가? Vue.js는 SPA(Single Page Application) 개발을 위한 프로트엔드 프레임워크입니다. SPA(Single Page Application)는 단일 페이지 애플리케이션을 말합니다. 이는 웹사이트 접속 시 열리는 방식이 일반적인 웹사이트와 다른 경우입니다. 일반적인 웹사이트는 페이지 이동할 때마다 매번 재 로딩하게 됩니다. 반면 SPA는 처음에 웹사이트를 접속할 때 모든 자원을 서버로부터 가져와서 로딩을 합니다. 또한 페이지를 이동할 때 전체 페이지가 재로딩되는 것이 아닌 변경된 부분만 바뀌게 됩니다. 2. Vue.js 장..