컴포넌트
-
[프로젝트][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..
-
[Vue.js][ToDoList 프로젝트] 문제해결2문제해결 2020. 2. 15. 12:37
문제 객체에 파일에 대한 내용을 넣기 위해 Import from을 사용 했는데 객체에 정보가 담기지 않음 객체에 정보가 담기지 않으니 최상위 컴포넌트에 하위 컴포넌트를 붙일 수가 없음 원인 script 분리에 의한 오류 *근거 script를 나누어 쓰지 않고 합쳐 썻더니 해결. 정확한 원인은 아직 모르겠음 개념에 대해서 이해 부족 or 진짜 버그이겠지만 이해 부족일 확률이 높음 OverView 가독성을 높이기 위해 기능별로 코드를 나누어 씀 link,cdn 관련 코드, 기능 코드 , 속성 정의 코드 part로 나누고 그 안에서도 주석을 달아 모듈별로 그룹화 함 그런데 component 객체를 인식하지 못하는 상황이 발생 로직을 살펴 보았으나 잘 못 쓴 부분이 없었음 script를 따로 인식하나 싶어 옮겨..
-
라우터&HTTP 통신Vue.js 2020. 2. 13. 22:52
상용 웹 앱을 개발할 경우 여러 페이지로 구성되어 있기 때문에 페이지 간에 이동을 돕는 라우터를 사용해야한다. 사용자에게 의미 있는 데이터를 보여주기 위해 서버에서 데이터를 가져오는 HTTP 통신도 필요하다. 라우팅 웹 페이지 간의 이동 방법을 말함. 싱글 페이지 어플리 케이션(SPA)에서 주로 사용 *싱글 페이지 어플리케이션 페이지를 이동할 때마다 서버에 요청하여 새로 갱신하는게 아니라 미리 해당 페이지를 받아 놓음 페이지 이동시에 클라이언트의 라우팅을 이용하여 화면을 갱신하는 패턴 라우팅의 장점 화면 간의 전환이 매끄럽다. 뷰 라우터 뷰에서 라우팅 기능을 구현할 수 있도록 지원하는 라이브러리 뷰 라우터를 구현할 때 필요한 특수 태그와 기능 - - * 페이지 이동태그. 화면에서는 로 표시 클릭하면 UR..
-
상-하위 컴포넌트의 관계Vue.js 2020. 2. 12. 23:07
각각의 컴포넌트는 고유한 유효 범위를 갖고 있기 때문에 직접 다른 컴포넌트의 값을 참조할 수 없다. 따라서 뷰 프레임워크 자체에서 정의한 컴포넌트 데이터 전달 방법을 따라야 한다. 부모-자식 컴포넌트간의 데이터 전달 방법이다. 전달방법 상위->하위 :props 전달 하위->상위 :이벤트 전달 *props 속성 상위 컴포넌트에서 하위 컴포넌트로 데이터를 전달할 때 사용하는 속성 props 사용을 위해선 -하위 컴포넌트의 속성에 정의 -상위 컴포넌트 태그에 v-bind 속성을 추가 하위에서 상위로 이벤트 전달하기 이벤트 발생과 수신은 $emit()과 v-on 속성을 이용한다.