Vue.js
-
Vuex(수정 필요)Vue.js 2020. 2. 22. 21:36
정의 애플리케이션의 상태 관리를 돕는 라이브러리 *상태 특정 데이터를 여러 컴포넌트가 공유하고 있는 것을 말한다. 상태 관리의 필요성 상당히 많은 컴포넌트 사이에서 props로 데이터를 전달한다고 할때 손이 너무 많이간다. 만약 데이터 이름을 바꾸기라도 한다면 관리가 어려워진다. *EventBus를 사용하면? 데이터 전달은 좀 더 쉬워지겠지만 단방향 데이터 흐름이 아닌 셀 수 없이 많은 데이터 흐름이 생기게 된다. 자세한 것은 아직 공부해보지 않아 기본적인 것을 연습한 후에 실습 .
-
Vue 애니메이션Vue.js 2020. 2. 17. 22:11
애니메이션 효과 뷰 프레임워크 자체에서 지원하는 애니메이션 기능 데이터 추가,변경,삭제에 대해서 여러 애니메이션 효과 지원 *예제 기존에 써 놓은 기능 중 ul을 제거하고 transition-group을 사용한다. transition-group은 목록에 애니메이션을 추가할 때 사용하는 태그이며 ,tag 속성에 애니메이션이 들어갈 HTML 태그 이름(p,ul,section등)을 지정하면 된다. ul 태그의 자식 태그인 li 태그에 v-bind:key를 간략하게 표현한 :key를 추가한다. 애니메이션 적용을 위해선 transition-group 안의 대상 태그에 :key 속성을 꼭 지정해야 한다. :key값으로는 유일하게 구분 될 수 있는 요소를 넣어준다. * :key key 속성은 v-for 디렉티브를 사..
-
[ToDo 프로젝트] 구조의 문제점Vue.js 2020. 2. 16. 23:23
한 쪽 컴포넌트에서 변화가 일어났을 때 다른 컴포넌트에서 자동으로 변화를 갱신하지 못한다는 문제점. 컴포넌트간 통신 데이터에 대한 행위를 최상위 컴포넌트에서 통제하도록 만들고 반영되어 출력되는 곳에 props로 넘겨준다. 이론 적용하기 최상위 컴포넌트 App.vue에 데이터 속성 todoItems를 선언 선언한 데이터 속성을 하위 컴포넌트에 props로 전달한다. Input 태그에는 버튼 클릭 시 최상위 컴포넌트로 이벤트를 전달 할 수 있게 v-on 디렉티브를 추가해준다. 하위 컴포넌트를 구조에 맞게 수정하기 로컬 스토리지에 직접 저장하는 로직은 삭제한다. 대신 값을 전달하는 emit method를 사용한다. 상위 컴포넌트에서 올려보낸 값들을 받아서 로컬 스토리지에 저장하도록 하는 로직을 짠다. 로컬 스..
-
[프로젝트][ToDoList] 컴포넌트 내용 구현하기1Vue.js 2020. 2. 15. 13:47
TodoHeader: 애플리케이션 이름 표시 TodoInput:할 일 입력 및 추가 TodoList:할 일 목록 표시 및 특정할 일 삭제 TodoFooter:할 일 모두 삭제 TodoHeader scoped는 뷰에서 지원하는 속성, 스타일 정의를 해당 컴포넌트에만 적용하겠다는 의미이다. ToDoInput input 태그,버튼 추가하기 v-model로 값을 특정 data에 넣어준다. 버튼 이벤트 설정해준다. 입력 받은 값을 로컬 스토리지에 저장한다. setItem() API를 사용해 저장할 수 있다. -setItem()은 키, 값 형태이며 저장 기능을 최대한 단순하게 하기 위해 키, 값 모두 입력받은 텍스트로 지정한다- *저장된 위치 개발자 도구->Application->Local Storage ->htt..
-
[프로젝트][ToDoList] 프로젝트 생성하고 구조 확인하기Vue.js 2020. 2. 15. 10:48
뷰 CLI를 이용한 프로젝트 생성 프로젝트로 사용할 폴더 생성후 cmd로 주소창을 따라 들어가 vue 프로젝트를 생성 npm install 명령어를 입력해 pakckage.json파일에 등록된 자바스크립트 라이브러리를 모두 다운로드한다. npm run dev를 실행하여 애플리케이션이 정상적으로 실행되는지 확인한다. 프로젝트 초기 설정 1.반응형 웹 디자인 태그 설정 index.html 파일의 Head 태그에 meta 태그 설정하기 meta 태그의 viewport 속성 모발일 웹에서도 레이아웃이 깨지지 않고 잘 보이도록 함 meta 태그의 width=device-width 속성은 기기의 너비만큼 웹페이지의 너비를 결정 initial-scal=1.0은 페이지의 배율로 페이지가 로딩되었을 때 줌레벨을 의미 2..
-
뷰 프로젝트 구성방법Vue.js 2020. 2. 14. 23:49
싱글 파일 컴포넌트 체계 기존에 쓰던 방식은 오류를 찾기 힘들고 가독성이 매우 떨어지기 때문에 나온 방법 .vue 파일로 프로젝트를 구성하는 방식 확장자 .vue 파일 1개는 뷰 애플리케이션을 구성하는 1개의 컴포넌트와 동일 뷰 CLI .vue 파일을 웹 브라우저가 인식할 수 있는 형태의 파일로 변환해주는 도구-웹팩- 웹팩은 웹 앱의 자원(HTML,CSS,이미지)들을 자바스크립트 모듈로 변환해 하나로 묶어 웹성능을 향상시켜주는 자바스크립트 모듈 번들러이다. -모듈 번들러: 서로 의존 관계가 있는 모듈을 하나의 파일로 묶어 주는 도구- VUE는 프로젝트를 구성할 수 있도록 CLI 도구를 제공한다.-노드제이에스가 필수- *설치 cmd창에 해당 명령어를 입력한다. 설치가 정상적으로 완료되면 해당 명령어가 보인..
-
화면 개발을 위한 기본 지식과 팁Vue.js 2020. 2. 14. 22:20
템플릿 HTML,CSS등의 마크업 속성과 뷰 인스턴스에서 정의한 데이터 및 로직들을 연결하여 사용자가 브라우저에서 볼 수 있는 형태의 HTML로 변환해주는 것 템플릿 사용방법 1. ES5에서 뷰 인스턴스의 Template 속성을 활용하는 방법 템플릿에서 사용하는 뷰의 속성 1. 데이터 바인딩 데이터 바인딩은 HTML 화면 요소를 뷰 인스턴스의 데이터와 연결하는 것을 의미한다. 주요 문법으로는 {{ }} 와 v-bind 속성이 있다. *{{ }} HTML 태그에 연결하는 가장 기본적인 텍스트 삽입 방식 v-once는 data 속성의 message 값이 바뀌어도 기존의 값을 고수한다. *v-bind 아이디,클래스,스타일 등의 HTML속성 값에 뷰 데이터 값을 연결할 때 사용하는 데이터 연결 방식 v-bind..
-
라우터&HTTP 통신Vue.js 2020. 2. 13. 22:52
상용 웹 앱을 개발할 경우 여러 페이지로 구성되어 있기 때문에 페이지 간에 이동을 돕는 라우터를 사용해야한다. 사용자에게 의미 있는 데이터를 보여주기 위해 서버에서 데이터를 가져오는 HTTP 통신도 필요하다. 라우팅 웹 페이지 간의 이동 방법을 말함. 싱글 페이지 어플리 케이션(SPA)에서 주로 사용 *싱글 페이지 어플리케이션 페이지를 이동할 때마다 서버에 요청하여 새로 갱신하는게 아니라 미리 해당 페이지를 받아 놓음 페이지 이동시에 클라이언트의 라우팅을 이용하여 화면을 갱신하는 패턴 라우팅의 장점 화면 간의 전환이 매끄럽다. 뷰 라우터 뷰에서 라우팅 기능을 구현할 수 있도록 지원하는 라이브러리 뷰 라우터를 구현할 때 필요한 특수 태그와 기능 - - * 페이지 이동태그. 화면에서는 로 표시 클릭하면 UR..