Thumbnail
BEST
개발 · 프로그래밍 풀스택

Vue.js - Django 연동 웹 프로그래밍 (실전편) 대시보드

(4.9)
17개의 수강평 ∙  357명의 수강생

44,000원

지식공유자: 김석훈
총 82개 수업 (9시간 26분)
수강기한: 
무제한
수료증: 발급
난이도: 
입문
-
초급
-
중급이상
지식공유자 답변이 제공되는 강의입니다
폴더에 추가 공유

초급자를 위해 준비한
[웹 개발, 풀스택] 강의입니다.

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

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

        ( Vue/Vuetify 3.x 와 Django 4.x 버전의 소스를 추가 제공합니다. )        

        ( 강의는 Vue/Vuetify 2.x 기준이라, 불편할 수 있습니다. )       

 

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

 

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

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

 

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

보통의 Single Page Application 연동방식에 비해, 본 강의 장점 입니다.

  • Vue-Django 연동 방식이면서도, VueRouter/Vuex/DRF 사용하지 않아도 됩니다.
  • Vue-Django 연동 방식이면서도, Django 의 Admin 기능을 그대로 사용합니다.
  • Django 를 API 서버만으로 사용하는 게 아니라, 템플릿 처리도 동시에 가능합니다.
  • 장고의 인증 기능을 그대로 재사용할 수 있습니다.

지난 강의 (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 기본 디렉티브는 알고 있다.

안녕하세요
김석훈 입니다.
김석훈의 썸네일

프로그램 개발은 C 언어로 시작했으며, 자바를 거쳐 최근에는 주로 파이썬을 사용하고 있다.
KT ucloud 서비스의 백엔드 서버 개발 프로젝트에 참여하여, 자바로 고객의 폴더/파일에 대한 메타 정보 처리 엔진을, 파이썬으로 클라이언트 푸시 서비스를 개발하였다.

또한 KT인터넷 회선의 속도 측정 프로그램, 네트워크 장비에 대한 운용관리 프로그램, 방대한 양의 트래픽 데이터 분석 프로그램을 개발한 바 있다. 개인적으로는 파이썬의 매력에 푹 빠져 되도록이면 파이썬으로 코딩하기를 즐겨하고 있다.

그 일환으로 요즘은 Django를 활용한 웹 프로그래밍, Django Rest Framework를 활용한 JSON 연동, Pandas를 활용한 데이터 분석, Scikit-learn/Tensorflow/ChatGPT 를 활용한 AI 솔루션 개발 등의 프로젝트를 개발하면서 파이썬의 활용도를 넓혀가고 있다.

< 저서 >

1. Django 로  배우는 파이썬 웹 프로그래밍 (초판, 한빛미디어, 2015.4월)
2. Django 를 활용한 파이썬 웹 프로그래밍 - 실전편 (초판, 한빛미디어, 2016. 7월)
3. Django 로  배우는 파이썬 웹 프로그래밍 (개정판, 한빛미디어, 2018. 8월)
4. Django 를 활용한 파이썬 웹 프로그래밍 - 실전편 (개정판, 한빛미디어, 2019. 11월)
5. Django 로  배우는 파이썬 웹 프로그래밍 (3판, 한빛미디어, 2022. 11월)

 

< 동영상 강의 >

1. Vue.js - Django 연동 웹 프로그래밍 (인프런 동영상, 2019.4월)
2. Vue.js - Django 연동 웹 프로그래밍 - 실전편 (인프런 동영상, 2020.9월)
3. Vue - Django - Bootstrap 뚝딱 블로그 (인프런 동영상, 2021. 9월)
4. Django REST framework 핵심사항 (인프런 동영상, 2022.2월)

커리큘럼 총 82 개 ˙ 9시간 26분의 수업
이 강의는 영상, 수업 노트, 첨부 파일이 제공됩니다. 미리보기를 통해 콘텐츠를 확인해보세요.
섹션 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. 소스 및 수업 자료 제공
소스 및 수업 자료 (Vue/Vuetify 3.x + Django 4.x 소스 제공)
섹션 11. 배포 고려 사항 (추가영상)
배포관련 수정 사항 03:17
vue.config.js 수정 08:25
메인 메뉴 수정 07:25
Admin 메뉴 수정 03:29
장고 앱 수정 사항 01:29
섹션 12. 부록
PyCharm Key Bindings 02:36
Vue vs React 비교 05:35
CSRF Token 추가 설명 (ensure-csrf-cookie) 06:53
강의 게시일 : 2020년 09월 10일 (마지막 업데이트일 : 2023년 02월 12일)
수강평 총 17개
수강생분들이 직접 작성하신 수강평입니다.
4.9
17개의 수강평
5점
4점
3점
2점
1점
VIEW 추천 순 최신 순 높은 평점 순 낮은 평점 순 평점 순 높은 평점 순 낮은 평점 순
손찬희 thumbnail
5
강의대로 정리하면서 작업하니 후반 부로 가도 코드짜기 편한거 같아요
2021-02-01
조영준 thumbnail
5
그 동안 꼼꼼하게 이해하지 못했던 django 내용을 공식 문서를 짚어가면서 이해할 수 있었고, Vue.js 도 공식 문서와 함께 이해를 하면서 공부할 수 있어서 즐거운 마음으로 공부하였습니다. 좋은 강의 만들어 주셔서 진심으로 감사드립니다!
2020-12-19
seunghyun oh thumbnail
5
이해하기 쉽게 설명해주셔서 많은 도움이 되었습니다.
2023-08-20
선두원 thumbnail
5
필요한것만 쏙쏙 알려주시고 더 디테일한거나 추후 적용해볼만한것들은 키워드나 팁으로 알려주셔서 알아서 찾아볼수 있게끔 해줍니다 vue.js를 안해보셨거나 django를 막 배우시는분들, 혼자서 풀스택으로 뭔가 만들어보실분들 강추합니다! 인프런에서 강의를 여러개 구매했는데,, 이 강의는 돈이 아깝지 않습니다! 추천추천
2020-10-06
Youngsoo, Na thumbnail
4
Vue와 Django 에 대해서 이해하는데 많은 도움이 되었습니다.
2020-12-16
연관 로드맵
이 강의가 포함된 잘 짜여진 로드맵을 따라 학습해 보세요!