개발/Front-end
-
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 Lazy Load(비동기 컴포넌트)란?개발/Front-end 2021. 8. 24. 23:12
1. Lazy Load 사용하는 목적 Vue CLI를 통해 빌드하면 소스 코드가 하나의 파일로 합쳐집니다. 이때 큰 프로젝트는 파일 용량이 매우 커집니다. 이 때문에 사용자는 웹 사이트 처음 접속 시 큰 파일을 다운로드하느라 초기 랜더링 시간이 오래 걸리게 되며 랜더링 속도가 너무 늦어지게 됩니다. 즉 현재 보고 있는 화면과 무관한 내용까지 받아서 오래 걸리게됩니다. 따라서 Lazy Load를 이용하여 리소스를 컴포넌트 단위로 분리하여 필요한 것들만 그때그때 라우트 단위 혹은 컴포넌트 단위로 다운로드할 수 있게 하는 방법입니다. Lazy Load는 Lazy '가능한 길게 일을 미루는 행위'란 의미에 Load 단어를 합쳐 페이지 내에서 실제로 필요할 때까지 리소스 로딩을 미루는 것입니다. 2. prefet..
-
Vue Lazy load 적용하기개발/Front-end 2021. 8. 24. 20:45
이번 시간에는 Vue Router 설정 중 Lazy Loading Routes를 사용하는 실습을 진행하겠습니다. 해당 실습은 vuejs 가이드 문서를 참고해서 만들었습니다. 만약 Lazy Load에 대한 개념이 어렵다면 이전 게시물인 Vue Lazy Load(비동기 컴포넌트)란? 에 대한 포스팅을 읽고 오시는 것을 추천합니다. 1. Vue 기본 CLI 세팅 1-1. Vue CLI 설치 아래는 vue cli를 설치하는 명령어입니다. $ npm install -g @vue/cli 1-2. Default 옵션으로 프로젝트 설치하기 해당 옵션으로 프로젝트를 생성하는 경우 기본적으로 설정된 값으로 설치가 됩니다. 1-2-1. vue 프로젝트 생성 vue create [프로젝트 명] 명령어를 실행합니다. 여기서 프..
-
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..