인프런 영문 브랜드 로고
BEST
개발 · 프로그래밍

/

풀스택

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

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

(4.8) 수강평 19개

수강생 382명

Vue.jsDjangoVuetify
Thumbnail

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

이런 걸
배워요!

  • 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,024

수강평 수

148

강의 평점

4.6

강의 수

5

프로그램 개발은 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분)

수업 자료

가 제공되는 강의입니다.

강의 게시일: 
마지막 업데이트일: 

수강평

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