Project/Django & Vue.js17

• 

  Django - Vue(Json연동, Vue.js Directive, axios) Todo 앱 설계 1. 첫 페이지는 Django 에서 생성해서 클라이언트에게 보내준다. 2. 이 후 화면 렌더링은 Vue.js 코드에서 수행 3. Data 저장은 서버 측의 DB 에 저장(SQLite) 4. Client-Server 간 Data 연동은 JSON 포맷으로 5. Vue.js 의 directive/axios 기능 사용 6. DRF(Django Rest Framework) 대신에 Django 에서는 JsonResponse 사용 Server Rendering 1. 브라우저에서 처음으로 페이지를 요청(request)하면 2. DJango 에서는 첫 화면을 위해 HTML과 CSS를 생성해서 클라이언트에 응답 3. 첫 화면에 대한 응답 index.html Client Rendering 4. 버튼 클릭 .. Project/Django & Vue.js 2019. 9. 7.

• 

  Django - Vue(Client vs Server Rendering, SPA vs SSR, 4) Client Rendering과 Server Rendering의 차이점에 대해 알아보자 Client Rendering Server Rendering Vue.js 코드로 작성, 즉 클라이언트에서 렌더링 한다. Django 코드로 작성, 즉 서버에서 렌더링 한다. Rendering 이란? *DOM(HTML) + CSSOM(CSS Object Model) = Rendering Tree *Layout(요소들의 위치를 잡아주는 Layout) *Painting(요소들을 화면에 보여주는 Painting) 이런 Rendering은 항상 브러우저, 즉 클라이언트에서 처리되는 과정이다. -> DOM/CSSOM 에 필요한 HTML 및 CSS를 누가 생성하느냐에 따라 Client, Server Rendering으로 나뉘게된다.. Project/Django & Vue.js 2019. 9. 6.

• 

  Django - Vue(Mixin 사용하기, bootstrap 팝업창 만들기 , 4) Mixin 사용하기 한개의 템플릿 내에 CreateView의 영역이 있고, ListView의 영역이 있다. 두 개의 제네릭뷰를 한 개로 조합하는 믹스인 기능이 필요하다. 체크해야 할 점은 View에서 넘겨주는 Context변수가 뭔지 확인해야 한다. CreateView 에서는 따로 Context로 넘겨주는 값이 없고, ListView에서는 object_list를 넘겨준다. 위 점을 기억하고 View를 생성해보자. class TodoMOMCV(ListView, CreateView): # (mixin, main) template_name = 'todo/todo_form_list.html' 여기서 중요한 점은 List와 Create View를 상속받을 때 순서도 중요하다는 것이다. ccbv.co.uk 로 가면.. Project/Django & Vue.js 2019. 9. 4.

• Django - Vue(Django 뼈대 만들기 , 2) 뼈대 만들기는 너무 간단하기 때문에 정리하지 않고 넘어가겠습니다. 프로젝트 디렉터리 mysite와 todo App을 생성해주면 됩니다. 코딩 순서는 settings.py -> models.py -> urls.py -> views.py -> templates 1. settings.py todo App을 INSTALLED_APP 에다가 추가 'todo', template 디렉터리 지정 'DIRS': [os.path.join(BASE_DIR, 'templates')] static 디렉터리 지정 STATICFILES_DIRS = [os.path.join(BASE_DIR, 'static')] 2. models.py 테이블을 추가할 사항이 없으므로 pass 3. mysite/urls.py path('todo/', .. Project/Django & Vue.js 2019. 9. 2.

• 

  Django - Vue(Todo App, 1) 1. 게시글 추가 2. 게시글 삭제 &#x00D7 methods: { remove_todo: function(index) { // index를 인자를 넣어준다. console.log("remove_todo()..."); this.todoItems.splice(index,1); // splice 함수 사용 index에서 한 개 }, }, 3. name 없이 ADD를 눌렀을 때 '홍길동'이 default로 출력 if (this.name == '') this.name = '홍길동'; // name이 입력이 되어있지 않으면 '홍길동' 을 this.name으로 설정 if (this.newTodoItem == '') return; // newTodoItem이 입력되어있지 않으면 return 4. ADD 한 이후에도.. Project/Django & Vue.js 2019. 9. 1.