Vue.js - Django 연동 웹 프로그래밍 (실전편)
Vue.js - Django 연동 웹 프로그래밍 (실전편)
수강정보
(0개의 수강평)
14명의 수강생
30% 할인, D-14
30,800원
44,000원
지식공유자 : 김석훈
61회 수업 · 총 7시간 2분 수업
기간 : 평생 무제한 시청
수료증 : 발급 강의
수강 난이도 : 초급

이 강의는

클라이언트 전문 FW인 Vue.js와 서버 전문 FW인 Django를 같이 활용하여, 업그레이드된 웹 프로그래밍을 해보자. Vue 쪽의 VueRouter와 Vuex를 사용하지 않고도, Django 쪽의 DRF를 사용하지 않고도, 쉽게 할 수 있다.

이런 걸 배워요

  • Vue.js와 Django를 연동하여 웹 프로그램을 만들 수 있다.
  • Bootstrap보다 기능이 더 풍부한 Vuetify로 화면을 꾸밀 수 있다.
  • Django 입문 그 이상의 기술을 알 수 있다.
  • 클라이언트와 연동을 위해, JsonResponse를 활용할 수 있다.
  • 장고의 장점인 클래스형 뷰를 더욱 더 활용할 수 있다.

Vue.js와 Django로 클라이언트와 서버를 쉽게 연동해보세요.
+ 한 단계 더, Vuetify 활용까지!

Vue와 Django를 활용하면 다음의 장점이 있습니다.

  • 둘 다, 다른 프레임워크에 비해 쉬우면서도 많이 사용한다는 공통점이 있습니다.
  • Vue(뷰)를 사용하므로, Client Rendering의 장점이 살아납니다.
  • 즉 화면이 멋있고 화면 깜박임이 없으며, 화면 렌더링 속도가 빨라집니다.

  • Django(장고)를 사용하므로, 인증/DB와 같은 백단의 기술이 쉽고 편해집니다.
  • Django는 세션인증을 기본으로 제공하므로 이를 그대로 활용할 수 있습니다.
  • Django의 ORM, Admin 기능을 그대로 활용할 수 있습니다.
  • 그 외에도, 웹 프로그래밍 관련 Django의 풍부한 기술은 이미 유명합니다.

지난 강의 (Vue.js-Django 연동 웹 프로그래밍) 대비
이런 점이 업그레이드 되었습니다.

  • 실전과 같은 블로그의 CRUD 기능을 배울 수 있습니다.
  • Django의 인증기능을 그대로 활용하므로, 쉽게 인증기능을 구현할 수 있습니다.
  • Vue를 CDN 방식이 아니라, Webpack(웹팩) 방식으로 사용하므로, 큰 프로그램에 적합한 방식입니다.
  • Vue 프로그램을 컴포넌트로 쪼개고, 공통 컴포넌트는 재활용할 수 있습니다.

화면을 꾸미기 위해, Bootstrap 대비 Vuetify 사용법을 알려줍니다.

  • Bootstrap(부트스트랩)보다 Vuetify(뷰티파이)가 더 기능이 풍부하므로, 이를 선택한 것입니다.
  • 이미 Bootstrap에 익숙하다면, 동일한 방식으로 Bootstrap으로 만들 수 있습니다.

📣 강의 연재 일정 안내
• 섹션 6 (인증) 수업 동영상은 9/28(월) 오픈 예정입니다.  --> 완료함
• 섹션 7 (Post CRUD) 수업 동영상은 10/26(월) 오픈 예정입니다.

지난 강의 보기

Vue.js - Django 연동 웹 프로그래밍
클라이언트-서버 연동 원리, SPA/SSR 주요 용어, 다양하게 5가지 방식으로 코딩

도움 되는 분들

  • 클라이언트와 서버 프로그램을 독립적으로 구성하고 싶다.
  • Django 웹 프로그램을 한단계 업그레이드 하고 싶다.
  • 장고의 클래스형 뷰를 자유자재로 활용하고 싶다.
  • Vue 웹 프로그램의 백단을 Django로 하고 싶다.
  • 화면을 멋지게, Vuetify 라이브러리를 활용하고 싶다.

선수 지식

  • Django 튜토리얼 예제는 스스로 코딩할 수 있다.
  • Django 클래스형 뷰 코딩 경험이 있다.
  • Vue.js 기본 디렉티브는 알고 있다.

지식공유자 소개

1. Django 로  배우는 파이썬 웹 프로그래밍 (개정판, 한빛미디어, 2018. 8월)
2. Django 를 활용한 파이썬 웹 프로그래밍 - 실전편 (개정판, 한빛미디어, 2019. 11월)
3. Vue.js - Django 연동 웹 프로그래밍 (인프런 동영상, 2019. 4월)

교육과정

모두 펼치기 61 강의 7시간 2분
섹션 0. 완성 프로그램 미리 보기
1 강의 04 : 09
섹션 2. Vue-Django 연동 원리
7 강의 50 : 59
vue-cli 시작하기
06 : 29
package.json 살펴보기
04 : 43
index.html 만들기
07 : 42
장고와 폴더 연동하기
07 : 52
SPA vs MPA
11 : 20
Webpack devServer
03 : 13
뷰 폴더 복사하기
09 : 40
섹션 3. Vue-Django UI 화면 꾸미기
10 강의 70 : 30
home.html 만들기
11 : 57
메인 메뉴 만들기
06 : 47
post_list.html - v-data-table
04 : 33
post_list.html - codepen
08 : 08
post_list.html - test
05 : 13
post_detail.html - Grid system
06 : 05
post_detail.html - codepen
07 : 32
post_detail.html - vue
06 : 33
메뉴 수정하기
10 : 33
빌드하기
03 : 09
섹션 4. Vue-Django Read API 만들기 (I)
8 강의 71 : 51
axios-list 뷰 코딩
09 : 20
axios-list 장고 코딩
08 : 57
axios-list Serialize
06 : 37
axios-list 기능 확인
09 : 14
axios-detail 코딩
12 : 50
axios-prev-next 뷰 코딩
05 : 02
axios-prev-next 장고 코딩
07 : 27
axios-prev-next 기능 확인
12 : 24
섹션 5. Vue-Django Read API 만들기 (II)
9 강의 76 : 48
axios-tag-cloud tag.name
10 : 23
axios-tag-cloud tag.count
08 : 27
axios-tag-cloud tag.weight
09 : 26
axios-tag-cloud 기능 확인
06 : 20
페이지 이동 - URL 처리
10 : 17
페이지 이동 - API 처리
10 : 30
페이지 이동 - 제목 수정
06 : 15
페이지 이동 - Detail 화면으로
08 : 31
페이지 이동 - v-data-table
06 : 39
섹션 6. Vue-Django 인증 기능
14 강의 103 : 18
Vuetify 의 v-dialog 컴포넌트
07 : 26
로그인 Form 만들기
07 : 17
그 외 Form 만들기
07 : 35
FormData() 구성 및 보내기
12 : 46
장고 ccbv 사이트 활용하기
06 : 09
CSRF Token 처리하기
08 : 10
인증 메뉴 보완하기
09 : 32
사이트 가입(register) 기능 만들기
09 : 18
장고가 제공하는 인증 폼들
05 : 10
가입 기능 확인하기
02 : 27
로그아웃 기능 만들기
07 : 03
비밀번호 변경 기능 만들기
08 : 21
인증 상태 유지하기
04 : 55
인증 정보 가져오기
07 : 09
섹션 7. Vue-Django CRUD API 만들기
4 강의
(현재 동영상 작성 중, 10/26 오픈 예정)
(Post create/update/delete 기능을)
(Vuetify-Dialog 컴포넌트 활용하여)
(vue-django 연동방식으로 만듬)
섹션 8. 소스 및 수업 자료 제공
1 강의
소스 및 수업 자료

공개 일자

2020년 9월 10일 (마지막 업데이트 일자 : 2020년 9월 19일)

수강 후기

아직 평가를 충분히 받지 못한 강의 입니다.
모두에게 도움이 되는 수강평의 주인공이 되어주세요!😄️️

지식공유자 되기
많은 사람들에게 배움의 기회를 주고,
경제적 보상을 받아보세요.
지식공유참여
기업 교육을 위한 인프런
“인프런 비즈니스” 를 통해 모든 팀원이 인프런의 강의들을
자유롭게 학습하는 환경을 제공하세요.
인프런 비즈니스