BEST

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

Name: Vue.js - Django 연동 웹 프로그래밍 (실전편)
Price: 44000 KRW

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

(4.8) 수강평 21개

수강생 394명

김석훈

Vue.js Django Vuetify

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

이런 걸 배울 수 있어요

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

Vue/Vuetify 3.x 와 Django 5.x 최신 소스 제공 합니다.

버전 차이에 따른 현행화 가이드 영상 제공 합니다. (섹션-1)

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 방식이 아니라, Vite 방식으로 사용하므로, 큰 프로그램에 적합한 방식입니다.
Vue 프로그램을 컴포넌트로 쪼개고, 공통 컴포넌트는 재활용할 수 있습니다.

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

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

지난 강의 보기

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

이런 분들께
추천드려요!

학습 대상은
누구일까요?

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

선수 지식,
필요할까요?

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

안녕하세요
김석훈입니다.

2,075

명

수강생

153

개

수강평

224

개

답변

4.6

점

강의 평점

개

강의

프로그램 개발은 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월)
5. AI Web Programming (인프런 동영상, 2024.2월)

커리큘럼

전체

109개 ∙ (11시간 28분)

해당 강의에서 제공:

수업자료

섹션 1. 완성 프로그램 미리 보기

2개 ∙ (4분)

1. 완성 프로그램 미리 보기
04:09
2. 소스 및 수업자료 (Django 5.x, Vue/Vuetify 3.x 추가 제공)

섹션 2. 최신 버전 현행화 가이드

26개 ∙ (2시간 2분)

3. 현행화 버전의 주요 변경사항
4. 섹션-2 에 대한 현행화 코딩 (1)
09:08
5. 섹션-2 에 대한 현행화 코딩 (2)
06:37
6. 섹션-3 에 대한 현행화 코딩 (1)
04:45
7. 섹션-3 에 대한 현행화 코딩 (2)
01:50
8. 섹션-3 에 대한 현행화 코딩 (3)
03:12
9. 섹션-4 에 대한 현행화 코딩 (1)
05:39
10. 섹션-4 에 대한 현행화 코딩 (2)
06:03
11. 섹션-4 에 대한 현행화 코딩 (3)
06:34
12. 섹션-4 에 대한 현행화 코딩 (4)
05:20
13. 섹션-5 에 대한 현행화 코딩 (1)
05:35
14. 섹션-5 에 대한 현행화 코딩 (2)
03:15
15. 섹션-5 에 대한 현행화 코딩 (3)
04:34
16. 섹션-5 에 대한 현행화 코딩 (4)
03:42
17. 섹션-6 에 대한 현행화 코딩 (1)
06:34
18. 섹션-6 에 대한 현행화 코딩 (2)
05:32
19. 섹션-6 에 대한 현행화 코딩 (3)
02:27
20. 섹션-7 에 대한 현행화 코딩 (1)
07:19
21. 섹션-7 에 대한 현행화 코딩 (2)
05:50
22. 섹션-7 에 대한 현행화 코딩 (3)
03:57
23. 섹션-7 에 대한 현행화 코딩 (4)
05:17
24. 섹션-7 에 대한 현행화 코딩 (5)
05:20
25. 섹션-8 에 대한 현행화 코딩 (1)
04:58
26. 섹션-8 에 대한 현행화 코딩 (2)
05:12
27. 섹션-8 에 대한 현행화 코딩 (3)
04:04
28. <삭제 예정> 섹션별 현행화 코딩 - 완료하였습니다.

섹션 3. Django 로 Blog 앱 개발

7개 ∙ (44분)

섹션 4. Vue-Django 연동 원리

7개 ∙ (50분)

섹션 5. Vue-Django UI 화면 꾸미기

10개 ∙ (1시간 10분)

섹션 6. Vue-Django Read API 만들기 (I)

8개 ∙ (1시간 11분)

섹션 7. Vue-Django Read API 만들기 (II)

9개 ∙ (1시간 16분)

섹션 8. Vue-Django 인증 기능

14개 ∙ (1시간 43분)

섹션 9. Vue-Django CRUD API 만들기

12개 ∙ (1시간 26분)

섹션 10. <삭제 예정> 개발 마무리

1개 ∙ (4분)

섹션 11. <삭제 예정> 소스 및 수업 자료 제공

1개

섹션 12. <삭제 예정> Vuetify upgrade 고려사항 (추가영상)

4개 ∙ (13분)

섹션 13. 배포 고려 사항

5개 ∙ (24분)

섹션 14. 부록

3개 ∙ (14분)

강의 게시일: 2020. 09. 09.

마지막 업데이트일: 2025. 05. 19.

수강평

전체

21개

4.8

21개의 수강평

조영준
수강평 1
∙
평균 평점 5.0
2020. 12. 18.
5
89% 수강 후 작성
그 동안 꼼꼼하게 이해하지 못했던 django 내용을 공식 문서를 짚어가면서 이해할 수 있었고, Vue.js 도 공식 문서와 함께 이해를 하면서 공부할 수 있어서 즐거운 마음으로 공부하였습니다. 좋은 강의 만들어 주셔서 진심으로 감사드립니다!
bs8.choi
수강평 1
∙
평균 평점 5.0
2025. 02. 24.
5
99% 수강 후 작성
선두원
수강평 1
∙
평균 평점 5.0
2020. 10. 05.
5
93% 수강 후 작성
필요한것만 쏙쏙 알려주시고 더 디테일한거나 추후 적용해볼만한것들은 키워드나 팁으로 알려주셔서 알아서 찾아볼수 있게끔 해줍니다 vue.js를 안해보셨거나 django를 막 배우시는분들, 혼자서 풀스택으로 뭔가 만들어보실분들 강추합니다! 인프런에서 강의를 여러개 구매했는데,, 이 강의는 돈이 아깝지 않습니다! 추천추천
손찬희
수강평 1
∙
평균 평점 5.0
2021. 02. 01.
5
100% 수강 후 작성
강의대로 정리하면서 작업하니 후반 부로 가도 코드짜기 편한거 같아요
Youngsoo, Na
수강평 3
∙
평균 평점 4.7
2020. 12. 16.
4
100% 수강 후 작성
Vue와 Django 에 대해서 이해하는데 많은 도움이 되었습니다.

김석훈님의 다른 강의

지식공유자님의 다른 강의를 만나보세요!

Django REST Framework 핵심사항

김석훈

"DRF, 이것만은 알고 사용하자." 클래스형뷰의 1호 강사로서, DRF의 클래스를 제대로 활용하고, 상속과 오버라이딩을 정확하게 배울 수 있는 강의입니다. 핵심 기본 사항을 제대로 학습해봐요!

초급

Django, REST API

Vue.js - Django 연동 웹 프로그래밍

김석훈

Vue.js 와 Django 프레임워크를 사용하여, 웹 프로그래밍을 할 수 있다.

초급

Vue.js, Django

AI 웹 프로그래밍 (Streamlit)

김석훈

AI 데이터 분석 및 모델링 결과를 Web Program 으로 만들어 보세요.

입문

streamlit, 머신러닝, Django

Vue-Django-Bootstrap 뚝딱 블로그

김석훈

인기 3총사 (Vue + Django + Bootstrap) 를 활용하여, 쉬우면서도 멋진 나의 블로그를 만들 수 있습니다. 반응형은 기본, 스마트폰으로도 볼 수 있습니다.

초급

Vue.js, Django, Bootstrap

비슷한 강의

같은 분야의 다른 강의를 만나보세요!

Vue.js - Django 연동 웹 프로그래밍

김석훈

Vue.js 와 Django 프레임워크를 사용하여, 웹 프로그래밍을 할 수 있다.

초급

Vue.js, Django

[2021] 요즘 누가 유료로 웹서비스 구축하나, 파이어베이스의 모든 것 - Vue.js

David

"요즘 누가 유료로 웹서비스 구축하나, Firebase의 모든 것" 강의가 Vue.js로 새로 돌아왔습니다. 1인 창업을 꿈꾸는 초급 개발자를 위한 바이블이 되어드립니다.

초급

Firebase, Vue.js, PWA

AI 웹 프로그래밍 (Streamlit)

김석훈

AI 데이터 분석 및 모델링 결과를 Web Program 으로 만들어 보세요.

입문

streamlit, 머신러닝, Django

기획자님 이 정도 웹 개발은 배워보면 어떨까요? [이론+실습]

개복치개발자

바쁜 기획자 분들을 위한 빠르게 진행되는 개발 강의입니다. 군더더기 없는 설명으로 웹 프론트엔드, 백엔드, DB를 직접 개발해보며 전체적인 개발 프로세스를 알아볼 수 있습니다.

입문

HTML/CSS, JavaScript, Vue.js

Django REST Framework 핵심사항

김석훈

초급

Django, REST API

Django 프레임워크 제대로 배우기 Part.1

유용한IT학습

Django는 Python기반 웹 애플리케이션 프레임워크입니다. Part.1에서는 Django에 대해 이해하고, 웹 애플리케이션을 만들 수 있습니다.

초급

Django

[웹 개발 풀스택 코스] Vue.js 프로젝트 투입 일주일 전 - 기초에서 실무까지

개발자의 품격

본 강의는 풀스택 웹 개발자 양성을 위한 [웹 개발 풀스택 코스] 강의 시리즈의 프론트엔드 부분에 대한 강의입니다. 이 강의는 강사의 저서 <Vue.js 프로젝트 투입 일주일 전>의 내용을 바탕으로 만들어진 강의입니다.

초급

Vue.js

윤재성의 Vue.js 프로젝트를 통한 실무 개발 과정

소프트캠퍼스

본 과정은 VueJS의 기본적인 부분과 미니프로젝트를 통한 실무 개발 방식을 학습할 수 있습니다. VueJS를 적용하시면 웹 애플리케이션개발이 용이해지고 서버의 부담을 줄일 수 있어 최근 트랜드가 되는 개발 방식입니다. 본 과정을 학습하시게 되면 최근 많이 사용하는웹 개발 방식으로 개발을 하실 수 있게 됩니다.

초급

Vue.js