강의

N
챌린지

멘토링

N
클립

커뮤니티

BEST
개발 · 프로그래밍

/

풀스택

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

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

(4.8) 수강평 21개

수강생 398명

  • 김석훈
Vue.jsDjangoVuetify

먼저 경험한 수강생들의 후기

이런 걸 배울 수 있어요

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

명

수강생

153

개

수강평

224

개

답변

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분)

해당 강의에서 제공:

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

수강평

전체

21개

4.8

21개의 수강평

  • zdzc5298558님의 프로필 이미지
    zdzc5298558

    수강평 1

    ∙

    평균 평점 5.0

    5

    100% 수강 후 작성

    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

      수강평 1

      ∙

      평균 평점 5.0

      5

      89% 수강 후 작성

      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

        수강평 3

        ∙

        평균 평점 4.7

        4

        100% 수강 후 작성

        It helped me a lot in understanding Vue and Django.

        • candy04061681님의 프로필 이미지
          candy04061681

          수강평 1

          ∙

          평균 평점 5.0

          5

          93% 수강 후 작성

          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

            수강평 1

            ∙

            평균 평점 5.0

            5

            99% 수강 후 작성

            ₩44,000

            김석훈님의 다른 강의

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

            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

            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

            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

            비슷한 강의

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

            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

            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

            [2021] Who builds paid web services these days? Everything about Firebase - Vue.js강의 썸네일

            [2021] Who builds paid web services these days? Everything about Firebase - Vue.js

            David

            "Who builds paid web services these days? Everything about Firebase" is back with a new Vue.js lecture. It will be a bible for beginner developers who dream of starting their own business.

            초급

            초급

            Firebase, Vue.js, PWA

            [2021] Who builds paid web services these days? Everything about Firebase - Vue.js강의 썸네일

            [2021] Who builds paid web services these days? Everything about Firebase - Vue.js

            David

            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

            Vue3 Perfect Mastery: From Basics to Practice - "Practical Edition"강의 썸네일

            Vue3 Perfect Mastery: From Basics to Practice - "Practical Edition"

            gymcoding

            You will develop a real-world project with Vue.js 3 and learn how to use the Composition API. In addition, after taking this course, you will gain skills in "Vue Router v4", "Pinia", and "Boostrap".

            초급

            초급

            Vue.js

            Vue3 Perfect Mastery: From Basics to Practice - "Practical Edition"강의 썸네일

            Vue3 Perfect Mastery: From Basics to Practice - "Practical Edition"

            gymcoding

            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

            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

            Creating a Web Chat Service with Python/Django (Feat. Channels) - Basics강의 썸네일

            Creating a Web Chat Service with Python/Django (Feat. Channels) - Basics

            pyhub

            The Channels library is a real-time messaging library developed under the philosophy of Django. Quickly learn the essence of Channels through this lecture.

            중급이상

            중급이상

            Python, Django, django-channels

            Creating a Web Chat Service with Python/Django (Feat. Channels) - Basics강의 썸네일

            Creating a Web Chat Service with Python/Django (Feat. Channels) - Basics

            pyhub

            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

            Practice! Using Django강의 썸네일

            Practice! Using Django

            qu3vipon

            Learn the backend development essential for practical use using Django!

            중급이상

            중급이상

            Django, Python, concurrent

            Practice! Using Django강의 썸네일

            Practice! Using Django

            qu3vipon

            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

            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

            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:)

            초급

            초급

            Flutter, Django

            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

            연관 로드맵

            강의가 포함된 로드맵으로 학습해 보세요!

            Vue.js - Django 연동 웹 프로그래밍 - 쉽다. 로드맵 썸네일

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

            김석훈