강의

N
챌린지

멘토링

로드맵

Inflearn brand logo image
BEST
Programming

/

Full-stack

Vue.js - Django Integration Web Programming (Practical)

Let's try upgraded web programming by using Vue.js, a client-specific FW, and Django, a server-specific FW. You can do it easily without using VueRouter and Vuex on the Vue side, or DRF on the Django side.

(4.8) 21 reviews

396 learners

  • bestdjango
Vue.js
Django
Vuetify

Reviews from Early Learners

What you will learn!

  • You can create a web program by linking Vue.js and Django.

  • You can decorate your screens with Vuetify, which has richer features than Bootstrap.

  • You can learn techniques that go beyond the Django introduction.

  • To interact with the client, you can use JsonResponse.

  • You can further utilize the class-type view, which is an advantage of Django.

We provide the latest sources for Vue/Vuetify 3.x and Django 5.x.      

We provide a video guide to updating the version according to the differences (Section 1).      

Easily connect your client and server with Vue.js and Django.
+ One step further, leveraging Vuetify!

Leveraging Vue and Django offers the following advantages:

  • Both have something in common: they are easy to use compared to other frameworks, yet widely used.
  • Since we use Vue, the advantages of Client Rendering come to life.
  • This means the screen looks great, there is no screen flicker, and the screen rendering speed is faster.

  • Since we use Django, backend technologies such as authentication/DB become easy and convenient.
  • Django provides session authentication by default, so you can use it as is.
  • You can utilize Django's ORM and Admin features as they are.
  • Besides that, Django's rich technologies related to web programming are already well known.

This is an advantage of this course compared to the usual Single Page Application linking method.

  • It is a Vue-Django integration method, but you don't need to use VueRouter/Vuex/DRF.
  • It is a Vue-Django integration method, but it uses Django's Admin function as is.
  • Django can be used not only as an API server, but also for template processing.
  • You can reuse Django's authentication functionality as is.

In preparation for the previous lecture (Vue.js-Django integrated web programming)
This has been upgraded.

  • You can learn the CRUD functions of a blog just like in real life.
  • Since it utilizes Django's authentication function as is, you can easily implement authentication functionality.
  • Because Vue is used in the Vite way, not the CDN way, it is suitable for large programs.
  • You can split your Vue programs into components and reuse common components.

To decorate your screen, we will show you how to use Vuetify versus Bootstrap.

  • I chose Vuetify because it is more feature-rich than Bootstrap.
  • If you are already familiar with Bootstrap, you can create it in the same way.

View previous lectures

Vue.js - Django Integration Web Programming
Client-server integration principles, SPA/SSR key terms, and coding in five different ways.

Recommended for
these people

Who is this course right for?

  • I want to configure the client and server programs independently.

  • I want to take my Django web application to the next level.

  • I want to freely utilize Django's class-type views.

  • I want to use Django as the backend for my Vue web program.

  • I want to make the screen look nice and utilize the Vuetify library.

Need to know before starting?

  • Django tutorial examples you can code yourself.

  • I have experience coding Django class-type views.

  • I know the basic Vue.js directives.

Hello
This is

2,090

Learners

153

Reviews

224

Answers

4.6

Rating

5

Courses

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

Curriculum

All

109 lectures ∙ (11hr 28min)

Course Materials:

Lecture resources
Published: 
Last updated: 

Reviews

All

21 reviews

4.8

21 reviews

  • zdzc5298558님의 프로필 이미지
    zdzc5298558

    Reviews 1

    ∙

    Average Rating 5.0

    5

    100% enrolled

    I think it will be easier to write code in the latter half of the course if you work while organizing it according to the lecture.

    • modoomusic06071506님의 프로필 이미지
      modoomusic06071506

      Reviews 1

      ∙

      Average Rating 5.0

      5

      89% enrolled

      I was able to understand the Django content that I had not thoroughly understood until now by going through the official documentation, and I was able to study Vue.js while understanding it along with the official documentation, so I studied with a happy heart. I sincerely thank you for creating such a great lecture!

      • newpullin님의 프로필 이미지
        newpullin

        Reviews 3

        ∙

        Average Rating 4.7

        4

        100% enrolled

        It helped me a lot in understanding Vue and Django.

        • candy04061681님의 프로필 이미지
          candy04061681

          Reviews 1

          ∙

          Average Rating 5.0

          5

          93% enrolled

          It tells you only what you need, and it tells you more detailed things or things that you can apply later with keywords or tips so that you can find them yourself. I highly recommend it to those who have not tried vue.js or are just learning django, and those who want to make something full-stack on their own! I bought several lectures from Inflearn,, and this lecture is worth the money! I highly recommend it

          • bs8choi7413님의 프로필 이미지
            bs8choi7413

            Reviews 1

            ∙

            Average Rating 5.0

            5

            99% enrolled

            $34.10

            bestdjango's other courses

            Check out other courses by the instructor!

            AI Web Programming (Streamlit)강의 썸네일

            AI Web Programming (Streamlit)

            bestdjango

            Make AI data analysis and modeling results into a Web Program.

            입문

            입문

            streamlit, Machine Learning(ML), Django

            AI Web Programming (Streamlit)강의 썸네일

            AI Web Programming (Streamlit)

            bestdjango

            Django REST Framework Essentials강의 썸네일

            Django REST Framework Essentials

            bestdjango

            "DRF, let's use it knowing this." As the first instructor of Class View, this is a class where you can properly use DRF classes and learn inheritance and overriding accurately. Let's learn the core basics properly!

            초급

            초급

            Django, REST API

            Django REST Framework Essentials강의 썸네일

            Django REST Framework Essentials

            bestdjango

            Vue-Django-Bootstrap Quick Blog강의 썸네일

            Vue-Django-Bootstrap Quick Blog

            bestdjango

            You can create a simple yet beautiful blog using the popular trio (Vue + Django + Bootstrap). It is responsive and can be viewed on smartphones as well.

            초급

            초급

            Vue.js, Django, Bootstrap

            Vue-Django-Bootstrap Quick Blog강의 썸네일

            Vue-Django-Bootstrap Quick Blog

            bestdjango

            Vue.js - Django Integration Web Programming강의 썸네일

            Vue.js - Django Integration Web Programming

            bestdjango

            You can do web programming using Vue.js and Django frameworks.

            초급

            초급

            Vue.js, Django

            Vue.js - Django Integration Web Programming강의 썸네일

            Vue.js - Django Integration Web Programming

            bestdjango

            Similar courses

            Explore other courses in the same field!

            Vue.js - Django Integration Web Programming강의 썸네일

            Vue.js - Django Integration Web Programming

            bestdjango

            You can do web programming using Vue.js and Django frameworks.

            초급

            초급

            Vue.js, Django

            Vue.js - Django Integration Web Programming강의 썸네일

            Vue.js - Django Integration Web Programming

            bestdjango

            Practical! Django Introduction [Latest Version 5.2]

            qu3vipon

            Delving into Django's core concepts and key features in detail, from API development methods using DRF to deployment leveraging AWS, this covers everything about Django web development.

            입문

            입문

            Python, Django, AWS

            Practical! Django Introduction [Latest Version 5.2]

            qu3vipon

            AI Web Programming (Streamlit)강의 썸네일

            AI Web Programming (Streamlit)

            bestdjango

            Make AI data analysis and modeling results into a Web Program.

            입문

            입문

            streamlit, Machine Learning(ML), Django

            AI Web Programming (Streamlit)강의 썸네일

            AI Web Programming (Streamlit)

            bestdjango

            Creating a job search site with Vue3 and Supabase강의 썸네일

            Creating a job search site with Vue3 and Supabase

            Michael Kwon

            From developing your own full-stack application to a Progressive Web App (PWA)!

            초급

            초급

            Vue.js, supabase, Vue 3

            Creating a job search site with Vue3 and Supabase강의 썸네일

            Creating a job search site with Vue3 and Supabase

            Michael Kwon

            Getting started with payments using Python/Django (Feat. Aimport) - Basics강의 썸네일

            Getting started with payments using Python/Django (Feat. Aimport) - Basics

            pyhub

            Are you having trouble integrating payments for your web service? Quickly apply payments to your service with Django and Import.

            중급이상

            중급이상

            Python, Django

            Getting started with payments using Python/Django (Feat. Aimport) - Basics강의 썸네일

            Getting started with payments using Python/Django (Feat. Aimport) - Basics

            pyhub

            Django with Python: Introduction강의 썸네일

            Django with Python: Introduction

            shinycoo1752

            Learn how to start developing a web app project using Django (2.0 or later), and use the content to create a simple non-member bulletin board site that can be run on AWS.

            초급

            초급

            Python, Django

            Django with Python: Introduction강의 썸네일

            Django with Python: Introduction

            shinycoo1752

            Quasar Perfect Mastery: If you want to make Vue front-end web quickly! (Based on Vue3)강의 썸네일

            Quasar Perfect Mastery: If you want to make Vue front-end web quickly! (Based on Vue3)

            gymcoding

            This course is for those who want to use Quasar while developing a web with Vue.js. Are you someone who needs to quickly build a front-end web within the company or someone who needs to create their own cool UI? Through this course, you can easily and quickly create a front-end web.

            초급

            초급

            Quasar, Vue.js

            Quasar Perfect Mastery: If you want to make Vue front-end web quickly! (Based on Vue3)강의 썸네일

            Quasar Perfect Mastery: If you want to make Vue front-end web quickly! (Based on Vue3)

            gymcoding

            Vue 3 & Firebase 10 Community Building Full Stack - "Practical Use" (with Pinia, Quasar, Tiptap, VueUse)강의 썸네일

            Vue 3 & Firebase 10 Community Building Full Stack - "Practical Use" (with Pinia, Quasar, Tiptap, VueUse)

            gymcoding

            This course on creating a community using Vue3 & Firebase(v10) will help you grow as a developer in various ways, including practical use of Vue3, Firebase basics to practical use, use of the latest web technologies, and sharing experiences as a knowledge sharer!

            중급이상

            중급이상

            Vue.js, Firebase, Quasar

            Vue 3 & Firebase 10 Community Building Full Stack - "Practical Use" (with Pinia, Quasar, Tiptap, VueUse)강의 썸네일

            Vue 3 & Firebase 10 Community Building Full Stack - "Practical Use" (with Pinia, Quasar, Tiptap, VueUse)

            gymcoding

            Creating a Vuetify Admin Template - Practical (Based on Vue2)강의 썸네일

            Creating a Vuetify Admin Template - Practical (Based on Vue2)

            gymcoding

            Useful tips for those who are developing in practice with Vue&Vuetify! 😃

            초급

            초급

            Vue.js, Vuetify

            Creating a Vuetify Admin Template - Practical (Based on Vue2)강의 썸네일

            Creating a Vuetify Admin Template - Practical (Based on Vue2)

            gymcoding

            Django REST Framework Essentials강의 썸네일

            Django REST Framework Essentials

            bestdjango

            "DRF, let's use it knowing this." As the first instructor of Class View, this is a class where you can properly use DRF classes and learn inheritance and overriding accurately. Let's learn the core basics properly!

            초급

            초급

            Django, REST API

            Django REST Framework Essentials강의 썸네일

            Django REST Framework Essentials

            bestdjango

            Django Basecamp강의 썸네일

            Django Basecamp

            jejucoding

            Django Base Camp is a course where you can systematically learn the core of the Django web framework from beginner to intermediate level. You can quickly develop the ability to build web applications through project-oriented, practical classes.

            초급

            초급

            Django, Python, python3

            Django Basecamp강의 썸네일

            Django Basecamp

            jejucoding

            Create a Quiz App/Server in 1 Hour with Flutter and Django [Full Stack]강의 썸네일

            Create a Quiz App/Server in 1 Hour with Flutter and Django [Full Stack]

            taebbong

            This is a lecture on creating a full-stack quiz app with Flutter and Django! Become a full-stack developer with this full-stack lecture with a lot to learn:)

            초급

            초급

            Django, Flutter

            Create a Quiz App/Server in 1 Hour with Flutter and Django [Full Stack]강의 썸네일

            Create a Quiz App/Server in 1 Hour with Flutter and Django [Full Stack]

            taebbong

            Django Beginner's Guide - Getting started with Django through hands-on experience강의 썸네일

            Django Beginner's Guide - Getting started with Django through hands-on experience

            onecue

            We will introduce the web framework Django and learn its basic usage.

            입문

            입문

            Django

            Django Beginner's Guide - Getting started with Django through hands-on experience강의 썸네일

            Django Beginner's Guide - Getting started with Django through hands-on experience

            onecue

            React and Vue Learning Essentials - FrontEnd Development Environment Setup and VS Code Basic Usage강의 썸네일

            React and Vue Learning Essentials - FrontEnd Development Environment Setup and VS Code Basic Usage

            usefulit

            This course is a video lecture that covers essential development environment setup and basic VS Code usage for React.js and Vue.js frontend learning. It provides step-by-step guidance from environment setup to utilizing basic features that enhance productivity, with a focus on hands-on practice.

            입문

            입문

            react.js, Vue.js, VSCode

            React and Vue Learning Essentials - FrontEnd Development Environment Setup and VS Code Basic Usage강의 썸네일

            React and Vue Learning Essentials - FrontEnd Development Environment Setup and VS Code Basic Usage

            usefulit