Vue.js6

• 

  Vue 와 Django(DRF) 를 이용하여 Todo 리스트 만들기 - 11 (프론트 디자인) 안녕하세요. 2020/08/26 - [] - Vue 와 Django(DRF) 를 이용하여 Todo 리스트 만들기 - 10 (프론트 Update) Vue 와 Django(DRF) 를 이용하여 Todo 리스트 만들기 - 10 (프론트 Update) 안녕하세요. 저번 포스팅에서는 작성한 TodoList를 삭제할 수 있는 Delete 기능을 구현하였습니다. https://newbiecs.tistory.com/313 Vue 와 Django(DRF) 를 이용하여 Todo 리스트 만들기 - 9 (프론트 Delete) 안.. newbiecs.tistory.com 이전 포스팅에서 Update 기능과 그 외에 한 개의 투두리스트만 업데이트 폼을 사용할 수 있도록 구현해주었습니다. 오늘은 Header, Footer, ico.. Project/Django & Vue.js 2020. 8. 26.

• 

  Vue 와 Django(DRF) 를 이용하여 Todo 리스트 만들기 - 10 (프론트 Update) 안녕하세요. 저번 포스팅에서는 작성한 TodoList를 삭제할 수 있는 Delete 기능을 구현하였습니다. https://newbiecs.tistory.com/313 Vue 와 Django(DRF) 를 이용하여 Todo 리스트 만들기 - 9 (프론트 Delete) 안녕하세요. 저번 포스팅에서는 Create 하고 리스트를 갱신해주는 것을 만들어보았습니다. 오늘은 Delete 기능과 Vuetify DatePicker 에 선택한 날짜를 텍스트로 보여주는 것을 구현해주도록 하겠습니다 newbiecs.tistory.com 오늘은 여러 TodoList 중에 원하는 TodoList 의 Update 버튼 클릭 시 수정할 수 있는 Form 이 나오고 업데이트를 할 수 있고, 다른 TodoList 의 Update 버튼을 .. Project/Django & Vue.js 2020. 8. 26.

• 

  Vue 와 Django(DRF) 를 이용하여 Todo 리스트 만들기 - 9 (프론트 Delete) 안녕하세요. 저번 포스팅에서는 Create 하고 리스트를 갱신해주는 것을 만들어보았습니다. 오늘은 Delete 기능과 Vuetify DatePicker 에 선택한 날짜를 텍스트로 보여주는 것을 구현해주도록 하겠습니다. https://newbiecs.tistory.com/312 Vue 와 Django(DRF) 를 이용하여 Todo 리스트 만들기 - 8-1 (프론트 todoList 보충) 안녕하세요. https://newbiecs.tistory.com/310 Vue 와 Django(DRF) 를 이용하여 Todo 리스트 만들기 - 8 (프론트 todoList Create) 안녕하세요. newbiecs.tistory.com/309 Vue 와 Django(DRF) 를 이용하여 Todo.. newbiecs.tist.. Project/Django & Vue.js 2020. 8. 9.

• 

  Vue 와 Django(DRF) 를 이용하여 Todo 리스트 만들기 - 8 (프론트 todoList Create) 안녕하세요. newbiecs.tistory.com/309 Vue 와 Django(DRF) 를 이용하여 Todo 리스트 만들기 - 7 (프론트 todoList GET) 안녕하세요. 이번 포스팅에서는 CRUD 기능 구현을 해보도록 하겠습니다. 전 포스팅에서 우리는 DRF(Djang REST Framework) Server 에서 데이터를 가져오는 것을 실습해보았습니다. 우리는 Django 에서 GET 만 newbiecs.tistory.com 저번 포스팅에서는 List 를 가져와 화면에 보여지는 것을 만들어보았습니다. 오늘은 TodoList 를 생성하고, Clear 를 이용하여 입력폼을 비우는 기능을 구현하도록 하겠습니다. 구현하기 전에 제가 생각한 Create 방법은 자식 컴포넌트(TodoContent.vue.. Project/Django & Vue.js 2020. 8. 4.

• 

  Vue 와 Django(DRF) 를 이용하여 Todo 리스트 만들기 - 6 (프론트 axios, cors 설정) 안녕하세요. 이전 포스팅 때 화면을 구현하였습니다. 이번에는 프로젝트 초기에 만들어두었던 DRF Server에 Todo API 를 이용하여 실제 데이터를 백엔드 서버에 넘겨 CRUD 를 할 수 있도록 만들어보겠습니다. 백엔드 서버와 통신하기 위해서는 HTTP 통신이 필요한데 저희는 axios 라는 것을 사용하여 통신을 해보도록 하겠습니다. axios 설치 npm install axios axios 사용법 import axios from 'axios'; var url = 'https:/jsonplaceholder.typicode.com/users'; var data = { username: this.username, password: this.password } axios.post(url, data); /.. Project/Django & Vue.js 2020. 7. 31.

• 

  Vue 와 Django(DRF) 를 이용하여 Todo 리스트 만들기 - 5 (프론트 컴포넌트 생성) 안녕하세요. 오늘 포스팅에서는 실제로 Todo List 를 한번 만들어보도록 하겠습니다. 가장 먼저 해야 할 일은 HelloWorld.vue 파일을 삭제하고, App.vue 의 내용을 비워주겠습니다. 간단하게 테스트 할 코드를 적어주도록 하겠습니다. {{ name }} 이러한 코드를 작성하고, yarn serve를 입력해주시면 서버가 실행되고, localhost:8080 으로 접속하면 화면에 cslee 라는 값이 div 태그 안에 생성된 것을 확인할 수 있습니다. 좋습니다. components 폴더 아래에 TodoHeader.vue, TodoContent.vue, TodoFooter.vue 를 생성해보도록 하겠습니다. // components/TodoHeader.vue Header 위 코드를 복사해서 4.. Project/Django & Vue.js 2020. 7. 30.