Thumbnail
BEST 개발 · 프로그래밍 웹 개발
Vue.js - Django 연동 웹 프로그래밍 (실전편)
(4.8)
10개의 수강평 ∙ 124명의 수강생

44,000원

지식공유자 : 김석훈
총 79개 수업˙총 9시간 11분
평생 무제한 수강
수료증 발급 강의
입문 초급 대상 중급이상
이 강의는 멘토링 신청이 가능합니다.
멘토링은 수강 신청과 별개로 운영되며, 수강생이 아니어도 신청할 수 있습니다.
내 목록 추가 81 공유
초급자를 위해 준비한
[웹 개발, 프레임워크 및 라이브러리] 강의입니다.

클라이언트 전문 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으로 만들 수 있습니다.

지난 강의 보기

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월)                                                              
4. Vue.js - Django 연동 웹 프로그래밍 - 실전편 (인프런 동영상, 2020.9월)

커리큘럼 총 79 개 ˙ 9시간 11분의 수업
이 강의는 영상, 수업 노트, 첨부 파일이 제공됩니다. 미리보기를 통해 콘텐츠를 확인해보세요.
섹션 0. 완성 프로그램 미리 보기
섹션 2. Vuetify upgrade 고려사항 (추가영상)
변경사항 안내 01:59
tools upgrade 03:00
Vuetify upgrade 02:53
index.html 만들기 05:35
섹션 3. Vue-Django 연동 원리
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
섹션 4. Vue-Django UI 화면 꾸미기
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
섹션 5. Vue-Django Read API 만들기 (I)
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
섹션 6. Vue-Django Read API 만들기 (II)
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
페이지 이동 - v-data-table 06:39
페이지 이동 - Detail 화면으로 08:31
섹션 7. Vue-Django 인증 기능
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
섹션 8. Vue-Django CRUD API 만들기
인증 vs CRUD 다이얼로그 06:49
CRUD 다이얼로그 만들기 07:32
CRUD 폼 만들기 08:42
axios 폼 요청 보내기 07:47
포스트 Create 하기 04:29
Create 기능 테스트하기 08:03
포스트 Update 하기 05:21
Event Bus 활용하기 12:23
포스트 Delete 하기 05:32
CRUD 권한 체크하기 05:00
장고의 권한 Mixin 활용하기 10:18
CRUD 권한 테스트하기 04:34
섹션 9. 개발 마무리
임시 코드 삭제 및 빌드 04:47
섹션 10. 소스 및 수업 자료 제공
소스 및 수업 자료
섹션 11. 배포 고려 사항 (추가영상)
배포관련 수정 사항 03:17
vue.config.js 수정 08:25
메인 메뉴 수정 07:25
Admin 메뉴 수정 03:29
장고 앱 수정 사항 01:29
강의 게시일 : 2020년 09월 10일 (마지막 업데이트일 : 2021년 04월 18일)
수강평 총 10개
수강생분들이 직접 작성하신 수강평입니다. 수강평을 작성 시 300잎이 적립됩니다.
4.8
10개의 수강평
5점
4점
3점
2점
1점
VIEW 좋아요 순 최신 순 높은 평점 순 낮은 평점 순 평점 순 높은 평점 순 낮은 평점 순
손찬희 thumbnail
강의대로 정리하면서 작업하니 후반 부로 가도 코드짜기 편한거 같아요
2021-02-01
조영준 thumbnail
그 동안 꼼꼼하게 이해하지 못했던 django 내용을 공식 문서를 짚어가면서 이해할 수 있었고, Vue.js 도 공식 문서와 함께 이해를 하면서 공부할 수 있어서 즐거운 마음으로 공부하였습니다. 좋은 강의 만들어 주셔서 진심으로 감사드립니다!
2020-12-19
Youngsoo, Na thumbnail
Vue와 Django 에 대해서 이해하는데 많은 도움이 되었습니다.
2020-12-16
cheolgi seo thumbnail
강좌는 이렇게 하는 것이 정석이죠. 컨텐츠 하나 하나에도 충실한 설명이 있었지만, Django Document, Vutify Document 보는 방법까지 설명해주시네요. 밥을 먹여 주는것이 아니라 밥 먹는 방법을 가르쳐 주는 강좌입니다.
2021-05-10
선두원 thumbnail
필요한것만 쏙쏙 알려주시고 더 디테일한거나 추후 적용해볼만한것들은 키워드나 팁으로 알려주셔서 알아서 찾아볼수 있게끔 해줍니다 vue.js를 안해보셨거나 django를 막 배우시는분들, 혼자서 풀스택으로 뭔가 만들어보실분들 강추합니다! 인프런에서 강의를 여러개 구매했는데,, 이 강의는 돈이 아깝지 않습니다! 추천추천
2020-10-06

44,000원

내 목록 추가 81 공유
지식공유자 : 김석훈
총 79개 수업˙총 9시간 11분
평생 무제한 수강
수료증 발급 강의
입문 초급 대상 중급이상
이 강의는 멘토링 신청이 가능합니다.
멘토링은 수강 신청과 별개로 운영되며, 수강생이 아니어도 신청할 수 있습니다.
연관 로드맵
이 강의가 포함된 잘 짜여진 로드맵을 따라 학습해 보세요!
지식공유자 되기
많은 사람들에게 배움의 기회를 주고,
경제적 보상을 받아보세요.
지식공유참여
기업 교육을 위한 인프런
“인프런 비즈니스” 를 통해 모든 팀원이 인프런의 강의를
자유롭게 학습하는 환경을 제공하세요.
인프런 비즈니스