Project21 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-1 (프론트 todoList 보충) 안녕하세요. https://newbiecs.tistory.com/310 Vue 와 Django(DRF) 를 이용하여 Todo 리스트 만들기 - 8 (프론트 todoList Create) 안녕하세요. newbiecs.tistory.com/309 Vue 와 Django(DRF) 를 이용하여 Todo 리스트 만들기 - 7 (프론트 todoList GET) 안녕하세요. 이번 포스팅에서는 CRUD 기능 구현을 해보도록 하겠습니다. 전 포스팅에서 우.. newbiecs.tistory.com 위 포스팅에서 만들고 사용해보니 Create 버튼 클릭 시 투두리스트 목록에 바로 생성되지 않아서 그 부분을 수정하려고 합니다. 왜 생성이 안되었는지 확인해보도록 하겠습니다. // App.vue mounted() { // DOM.. Project/Django & Vue.js 2020. 8. 6. 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 리스트 만들기 - 7 (프론트 todoList GET) 안녕하세요. 이번 포스팅에서는 CRUD 기능 구현을 해보도록 하겠습니다. 전 포스팅에서 우리는 DRF(Djang REST Framework) Server 에서 데이터를 가져오는 것을 실습해보았습니다. 우리는 Django 에서 GET 만 생성한 것이 아닌 GET, POST, Patch, Delete 와 같은 것들을 구현하였습니다. 오늘은 이것들을 활용하여 실제 데이터를 백엔드 서버에 전달하여 DB에 저장하는 것을 만들어보도록 하겠습니다. 데이터를 가져와 리스트에 보여지는 것을 구현해보기 데이터를 가져와 화면에 보여지게하려면 제가 생각한 방법은 2가지가 있었습니다. 1. methods 를 만들어 데이터를 가져와서 vue인스턴스의 data 에 저장하는 방법 2. mounted 를 사용하여 페이지 로드 시 데이.. Project/Django & Vue.js 2020. 7. 31. 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. Vue 와 Django(DRF) 를 이용하여 Todo 리스트 만들기 - 4 (프론트 환경세팅) 안녕하세요. 오늘은 Vue CLI 를 사용하여 Vue 환경세팅, 설치부터 프로젝트 생성, 구조를 알아보도록 하겠습니다. 맥북을 사용하기 때문에 윈도우에서 발생하는 오류를 대응못하는 점 양해 부탁드립니다. 버전확인 node -v // 10점대 이상 npm -v // 6점대 이상 Vue CLI 설치 npm install -g @vue/cli //권한 에러 발생 시 sudo npm install -g @vue/cli 프로젝트 생성 > vue create todo > default (bable, eslint) todo 폴더가 생성되고, 그 안에 여러 폴더들이 생성된 것을 확인할 수 있습니다. cd todo로 생성 된 폴더 이동 후 yarn serve 혹은 npm run serve 로 서버를 실행시킬 수 있습니다.. Project/Django & Vue.js 2020. 7. 20. Vue 와 Django(DRF) 를 이용하여 Todo 리스트 만들기 - 3 (백엔드 DRF) 안녕하세요. 평소 필력이 많이 부족한데다가 이런 프로젝트는 처음이라 두서는 진행과 설명이 부실한 부분이 많습니다. 부족한 점은 구글링을 이용하여 습득하시면 감사하겠습니다. 또한 필자는 빠르게 Todo 리스트를 만들어보는 것을 목표로 잡고 있고, 한번 만들어보고 나서 개념을 다잡는 공부방법이 가장 빠르게 습득할 수 있는 방법이라 생각하기에 이런 방식으로 진행하고 있는 점 이해주시면 감사하겠습니다. 잘못 된 부분이 있으면 댓글로 지적해주시면 감사하겠습니다 : ) DRF ( Django REST Framework) 오늘은 REST API Server를 만들어 보겠습니다. 그 전에 REST가 뭔지에 대해 알 필요가 있습니다. 설명이 자세히되어있는 블로그들이 많으니 여기서는 간단하게만 확인하고 넘어가겠습니다. R.. Project/Django & Vue.js 2020. 6. 9. Vue 와 Django(DRF) 를 이용하여 Todo 리스트 만들기 - 2 (백엔드 Django Model) 안녕하세요. 오늘은 투두 리스트에 사용 될 DB 스키마를 한번 작성하고, API Server까지 구현해보겠습니다. Django DB 구조변경 및 DB 스키마 생성 먼저 구조를 간단하게 변경해주도록 하겠습니다. 구조를 변경하는 이유는 가독성, 다른 앱의 추가되었을 때의 재사용성 등등 입니다. 먼저 todo라는 앱 폴더 내에서 models와 views라는 폴더를 생성합니다. 그리고 그 안에 기존에 있던 models.py와 views.py를 이동시켜줍니다. models.py 라는 모델 파일의 이름을 common.py 로 변경하고, 여기에 공통으로 사용될 수 있는 필드들을 정의하도록 하겠습니다. models 폴더를 모듈로 사용하고 싶으면 __init__.py 를 생성하고, 안에 파일명을 적어두면 편리하게 사용할.. Project/Django & Vue.js 2020. 6. 7. Vue 와 Django(DRF) 를 이용하여 Todo 리스트 만들기 - 1 (백엔드 환경세팅) 안녕하세요. 시작하기에 앞서 필자는 Django 주니어 개발자이고, Vue.js 에 대한 지식은 많이 부족함을 알려드립니다. 앞으로 진행 될 사항에 대해 간단하게 정리해보겠습니다. 주제는 아주 간단한 CRUD를 할 수 있는 Todo List 입니다. Vue는 Front라는 폴더에 Django는 Back 이라는 폴더에 분리하여 진행 할 예정입니다. 필자는 프론트 감각이 없기에 프론트 부분은 오픈소스와 vuetify 와 같은 라이브러리를 적극 활용할 예정입니다. Back Server 구성은 drf를 사용할 것이고, API 문서화는 swagger를 이용할 예정입니다. Dockerfile로 Front와 Back 의 이미지를 생성하여 버전관리를 하고 배포도 진행해볼 예정입니다. [참고] 프론트 관련 내용은 바로가.. Project/Django & Vue.js 2020. 6. 7. 이전 1 2 다음 💲 추천 글
