Vue.js
-
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 디렉티브를 사..
-
[프로젝트][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..
-
[GIT][Vue.js][TodoList 프로젝트] 문제해결1문제해결 2020. 2. 15. 12:20
문제 CLI를 통해 Vue.js를 실행하는 과정에서 Vue.js가 활성화가 안되는 문제 발생 Vue.js not detected란 문구만 뜨고 어떠한 안내도 뜨지 않음 원인 버전관리를 하기 위해 Git과 연동했는데 .git 파일이 vue 폴더에 생성되면서 webpack이 폴더를 읽어들이는 과정에서 .git과 같이 읽음으로써 에러가 난 것으로 추정 *근거 .git 파일을 밖으로 빼보니 정상적으로 작동함. webpack의 프로세스에 대해서 공부하지 않은 상태라 정확한 원인이라 할 수는 없음 webpack에 대한 공부가 필요함. OverView 갑자기 Vue.js가 발동되지 않음 오류에 대한 코멘트가 없고 git과 관련되어 있을거라 전혀 생각을 못해 전혀 다른 곳에서 원인을 찾음 webpack이 data를 읽..
-
[프로젝트][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..