강의

N
챌린지

멘토링

N
클립

커뮤니티

BEST
개발 · 프로그래밍

/

풀스택

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

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

(4.6) 수강평 68개

수강생 673명

  • 김석훈
  • 김석훈
Vue.jsDjango

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

수강 후 이런걸 얻을 수 있어요

  • Vue.js와 Django의 연동

  • ToDo 앱 개발

  • 클라이언트와 서버 렌더링의 차이점

  • CSRF 토큰 처리

  • Bootstrap과 FontAwesome을 활용한 웹 디자인

  • axios를 이용한 데이터 처리

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

     버전 차이에 따른 현행화 가이드 영상 업로드 했습니다. (섹션-0)       

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

웹 프로그래밍은 다양한 언어와 프레임워크로 할 수 있다.

그 중에서 프론트엔드에 최적화된 Vue.js, 백엔드에 최적화된 Django 프레임워크를 활용하면, 최상의 조합으로 효율적으로 웹 프로그래밍을 할 수 있다. 둘 다 쉽고 빠르다는 장점이 있기 때문이다.

본 강좌에서는 Vue.js의 중고급 기능인 Vue Router, Vuex 를 사용하지 않고도, 또 Django의 중고급 패키지인 Django Rest Framework 를 사용하지 않고도, Vue.js - Django간에 JSON 연동 방식으로 todo 애플리케이션을 개발하는 과정를 보여준다.


이 과정에서, Client Rendering 과 Server Rendering 의 장단점을 알게 되고, Django의 클래스형뷰를 심층 이해할 수 있는 보너스 효과도 있다.

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

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

 학습 목표

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

도움이 되는 분들

  • Django프로젝트에, Vue.js 코드를 사용하려는 개발자
  • Vue.js는 알지만, 추가로 Django를 학습하려는 개발자
  • Django 클래스형뷰를 좀 더 활용하려는 개발자
  • Vue axios, Django JsonResponse 기능을 학습하려는 개발자

참고 사항
  • Vue.js와 Django에 대한 강의 내용 비율은 대략 3:7 정도 입니다.
  • 강의영상은 Vue 2.x / Django 2.x 버전이지만, Vue 3.x / Django 5.x 소스를 제공하며, 강의 범위에서는 두 버전간 차이는 거의 없는 편 입니다.
  • Vue.js는 VSCode, Django는 PyCharm 개발툴을 사용하고 있습니다.
선행 지식
  • Vue.js (입문) : v-if, v-for 등의 directive 를 사용할 수 있는 수준
  • Django (초급) : 장고 튜토리얼을 이해할 수 있는 수준

이런 분들께
추천드려요

학습 대상은
누구일까요?

  • 웹 개발 초보자

  • 프론트엔드와 백엔드 통합 개발을 배우고 싶은 사람

  • 실제 프로젝트를 통해 실습하고 싶은 사람

  • Vue.js와 Django를 활용한 웹 애플리케이션 개발에 관심 있는 사람

안녕하세요
입니다.

2,099

명

수강생

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

공동 지식공유자

커리큘럼

전체

37개 ∙ (4시간 41분)

해당 강의에서 제공:

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

수강평

전체

68개

4.6

68개의 수강평

  • hyukster90666님의 프로필 이미지
    hyukster90666

    수강평 20

    ∙

    평균 평점 4.8

    5

    100% 수강 후 작성

    利点。 1. 実際の専門家がどのように海外公式文書を読んで見るかを知ることができる （見方を教えてくれます。） 2. ジャンゴは小中級だと書いてありましたが、かなり難易度が高い 単にListView、TemplateViewを書くのではなく、継承する親Viewクラスのドキュメントを見て活用する。 この講座を見ると、ジャンゴクラスビューについてたくさん感覚をつかむことができる。 3. 実際の現業で開発する方法について知ることができる サーバー（ジャンゴ）/クライアント（ビューJS）をそれぞれ実装し、 サーバーとクライアント間のデータ転送（JSON方式）について完全に理解できます 欠点 なし。 推奨評価 ジャンゴ基礎講義を聞いた方がこの講義をぜひ聞いてみなければならない。

    • sobeery5113님의 프로필 이미지
      sobeery5113

      수강평 1

      ∙

      평균 평점 5.0

      5

      91% 수강 후 작성

      とても満足しています。 よく聞きました。もう一周しなければなりません。 初級が聞くには少し無理が​​あるかもしれませんが、 API連携によるフロントバックエンド分離アプローチは非常に有益でした。 実はこういう講座を見つけたのに他の場所ではなかったようです。

      • okwkdalsgur0884님의 프로필 이미지
        okwkdalsgur0884

        수강평 5

        ∙

        평균 평점 5.0

        5

        100% 수강 후 작성

        ジャンゴを勉強していた車にフロントエンドフレームワークを学びたいという考えがありましたが、この講義を探して本当に幸いです。 かつて百科vueをつなぐ部分が切実になりましたが、この講義を通じてある程度基盤をつかみました。 個人的にvueは全く分からないとしても、ジャンゴをある程度勉強し、htmlの基本的な構造を知っていれば講義を見るのに問題はないと思います。

        • so012070239님의 프로필 이미지
          so012070239

          수강평 1

          ∙

          평균 평점 5.0

          5

          100% 수강 후 작성

          一人でGoogleで勉強しようとしたら、多くの時間が費やされたでしょう。多くの助けになりました。 Djangoでプログラムするときは、ccbvだけを正しく見ることができても、多くの問題を解決できるようです。

          • huniwooks님의 프로필 이미지
            huniwooks

            수강평 15

            ∙

            평균 평점 5.0

            5

            100% 수강 후 작성

            djangoをある程度勉強して、もう一度整理する兼として聞いたのがすごく良かったです！

            ₩33,000

            김석훈님의 다른 강의

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

            AIウェブプログラミング (Streamlit)Course Thumbnail

            AIウェブプログラミング (Streamlit)

            bestdjango

            AIデータ分析およびモデリング結果をWebプログラムにしてみてください。

            Beginner

            Beginner

            streamlit, Machine Learning(ML), Django

            AIウェブプログラミング (Streamlit)Course Thumbnail

            AIウェブプログラミング (Streamlit)

            bestdjango

            Django REST Framework の要点Course Thumbnail

            Django REST Framework の要点

            bestdjango

            "DRF, 이것만은 알고 사용하자." クラス型ビューの1号講師として、DRFのクラスを正しく活用し、継承とオーバーライドを正確に学べる講義です。 重要な基本事項を正しく学習しましょう!

            Basic

            Basic

            Django, REST API

            Django REST Framework の要点Course Thumbnail

            Django REST Framework の要点

            bestdjango

            Vue-Django-Bootstrap 뚝딱ブログCourse Thumbnail

            Vue-Django-Bootstrap 뚝딱ブログ

            bestdjango

            人気3総士（Vue + Django + Bootstrap）を活用して、簡単かつ素敵な自分のブログを作ることができます。 レスポンシブは基本、スマートフォンでも見ることができます。

            Basic

            Basic

            Vue.js, Django, Bootstrap

            Vue-Django-Bootstrap 뚝딱ブログCourse Thumbnail

            Vue-Django-Bootstrap 뚝딱ブログ

            bestdjango

            Vue.js - DjangoインターロックWebプログラミング（実践編）Course Thumbnail

            Vue.js - DjangoインターロックWebプログラミング（実践編）

            bestdjango

            クライアントプロフェッショナルFWのVue.jsとサーバープロフェッショナルFWであるDjangoを一緒に活用して、アップグレードされたWebプログラミングをしましょう。 Vue側のVueRouterとVuexを使わなくても、Django側のDRFを使わなくても、簡単にできる。

            Basic

            Basic

            Vue.js, Django, Vuetify

            Vue.js - DjangoインターロックWebプログラミング（実践編）Course Thumbnail

            Vue.js - DjangoインターロックWebプログラミング（実践編）

            bestdjango

            비슷한 강의

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

            Vue.js - DjangoインターロックWebプログラミング（実践編）Course Thumbnail

            Vue.js - DjangoインターロックWebプログラミング（実践編）

            bestdjango

            クライアントプロフェッショナルFWのVue.jsとサーバープロフェッショナルFWであるDjangoを一緒に活用して、アップグレードされたWebプログラミングをしましょう。 Vue側のVueRouterとVuexを使わなくても、Django側のDRFを使わなくても、簡単にできる。

            Basic

            Basic

            Vue.js, Django, Vuetify

            Vue.js - DjangoインターロックWebプログラミング（実践編）Course Thumbnail

            Vue.js - DjangoインターロックWebプログラミング（実践編）

            bestdjango

            [2021]最近、誰が有料でWebサービスを構築するのか、Firebaseのすべて - Vue.jsCourse Thumbnail

            [2021]最近、誰が有料でWebサービスを構築するのか、Firebaseのすべて - Vue.js

            David

            ＆quot;最近、誰が有料でWebサービスを構築していますが、Firebaseのすべてです＆quot;講義がVue.jsに新たに戻った。 1人創業を夢見る初級開発者のためのバイブルになります。

            Basic

            Basic

            Firebase, Vue.js, PWA

            [2021]最近、誰が有料でWebサービスを構築するのか、Firebaseのすべて - Vue.jsCourse Thumbnail

            [2021]最近、誰が有料でWebサービスを構築するのか、Firebaseのすべて - Vue.js

            David

            シリコンバレーのエンジニアが教えるPython Django WebプログラミングCourse Thumbnail

            シリコンバレーのエンジニアが教えるPython Django Webプログラミング

            altoformula

            シリコンバレーのソフトウェアエンジニアから学ぶ、Python Django Web開発の基礎と実務のすべて！ PythonベースのDjangoフレームワークを使ったWebプログラミングを学ぶ絶好の機会を絶対に逃さないでください！ 初心者でも安心してWebプログラミングを始めることができるよう、HTMLとBootstrapも一緒に学べる破格の機会をぜひ手に入れてください！

            Basic

            Basic

            Python, Django, REST API

            シリコンバレーのエンジニアが教えるPython Django WebプログラミングCourse Thumbnail

            シリコンバレーのエンジニアが教えるPython Django Webプログラミング

            altoformula

            AIウェブプログラミング (Streamlit)Course Thumbnail

            AIウェブプログラミング (Streamlit)

            bestdjango

            AIデータ分析およびモデリング結果をWebプログラムにしてみてください。

            Beginner

            Beginner

            streamlit, Machine Learning(ML), Django

            AIウェブプログラミング (Streamlit)Course Thumbnail

            AIウェブプログラミング (Streamlit)

            bestdjango

            【ウェブ開発フルスタックコース】Vue.jsプロジェクト投入1週間前 - 基礎から実務までCourse Thumbnail

            【ウェブ開発フルスタックコース】Vue.jsプロジェクト投入1週間前 - 基礎から実務まで

            realprogrammers

            本講義は、フルスタックウェブ開発者養成のための「ウェブ開発フルスタックコース」講義シリーズのフロントエンド部分についての講義です。この講義は、講師の著書 <Vue.js プロジェクト投入一週間前>の内容に基づいて作られた講義です。

            Basic

            Basic

            Vue.js

            【ウェブ開発フルスタックコース】Vue.jsプロジェクト投入1週間前 - 基礎から実務までCourse Thumbnail

            【ウェブ開発フルスタックコース】Vue.jsプロジェクト投入1週間前 - 基礎から実務まで

            realprogrammers

            Vue.jsとUIを一度に学習/Nuxt3 + OpenWeatherMapでリアルタイム天気アプリ作成Course Thumbnail

            Vue.jsとUIを一度に学習/Nuxt3 + OpenWeatherMapでリアルタイム天気アプリ作成

            gis

            Nuxt UI, Nuxt SEO, Nuxt Server Api, Pinia, PWA, Firebase, Email Login, Google Login を 簡単に学べます~~

            Basic

            Basic

            Vue.js, PWA, Firebase

            Vue.jsとUIを一度に学習/Nuxt3 + OpenWeatherMapでリアルタイム天気アプリ作成Course Thumbnail

            Vue.jsとUIを一度に学習/Nuxt3 + OpenWeatherMapでリアルタイム天気アプリ作成

            gis

            実践！Django入門 [最新5.2バージョン]

            qu3vipon

            Djangoの核心概念と主要機能について詳しく探り、DRFを用いたAPI開発方法とAWSを活用したデプロイまで、Djangoウェブ開発の全てを扱います。

            Beginner

            Beginner

            Python, Django, AWS

            実践！Django入門 [最新5.2バージョン]

            qu3vipon

            Vue.js初級講座Course Thumbnail

            Vue.js初級講座

            JeongTaeHyun

            Vue.jsの入門講座です。 主に基本文法について学びます。 v-ディレクティブ文法、components、オプションズAPIなどを学びます。 前提知識としてはJavaScriptの知識があると良いです。

            Basic

            Basic

            Vue.js

            Vue.js初級講座Course Thumbnail

            Vue.js初級講座

            JeongTaeHyun

            Vue.js の始め方 - Age of Vue.jsCourse Thumbnail

            Vue.js の始め方 - Age of Vue.js

            captain

            Vue.jsでWebを簡単に開発できるように、基本的な概念と重要な機能について学び、実装します。 講座を聞いたら、Vue.jsでフロントエンドの開発をするのが面白いです。

            Basic

            Basic

            JavaScript, Vue.js

            Vue.js の始め方 - Age of Vue.jsCourse Thumbnail

            Vue.js の始め方 - Age of Vue.js

            captain

            Django REST Framework の要点Course Thumbnail

            Django REST Framework の要点

            bestdjango

            "DRF, 이것만은 알고 사용하자." クラス型ビューの1号講師として、DRFのクラスを正しく活用し、継承とオーバーライドを正確に学べる講義です。 重要な基本事項を正しく学習しましょう!

            Basic

            Basic

            Django, REST API

            Django REST Framework の要点Course Thumbnail

            Django REST Framework の要点

            bestdjango

            React、Vue学習のための必須知識 - FrontEnd学習環境設定およびVS Code基礎使用法Course Thumbnail

            React、Vue学習のための必須知識 - FrontEnd学習環境設定およびVS Code基礎使用法

            usefulit

            本コースは、React.jsとVue.jsフロントエンド学習に必須の開発環境設定とVS Code基礎使用法を扱う動画講義です。実習中心で環境構築から生産性を高める基本機能活用まで段階別にご案内します。

            Beginner

            Beginner

            react.js, Vue.js, VSCode

            React、Vue学習のための必須知識 - FrontEnd学習環境設定およびVS Code基礎使用法Course Thumbnail

            React、Vue学習のための必須知識 - FrontEnd学習環境設定およびVS Code基礎使用法

            usefulit

            Django初心者ガイド - 実習を通して学ぶジャンゴ入門Course Thumbnail

            Django初心者ガイド - 実習を通して学ぶジャンゴ入門

            onecue

            WebFrame Work Djangoの紹介から基本的な使い方を学びます。

            Beginner

            Beginner

            Django

            Django初心者ガイド - 実習を通して学ぶジャンゴ入門Course Thumbnail

            Django初心者ガイド - 実習を通して学ぶジャンゴ入門

            onecue

            Djangoデザイン哲学から始まるPython Django入門Course Thumbnail

            Djangoデザイン哲学から始まるPython Django入門

            pyhub

            Django 開発に必要な Python 文法と Django の設計哲学を深く理解して、Django Web 開発を正しく開始しましょう。

            Basic

            Basic

            Django, Python

            Djangoデザイン哲学から始まるPython Django入門Course Thumbnail

            Djangoデザイン哲学から始まるPython Django入門

            pyhub

            フラッターとジャンゴで1時間でクイズアプリ/サーバーを作る [ランダムフルスタック]Course Thumbnail

            フラッターとジャンゴで1時間でクイズアプリ/サーバーを作る [ランダムフルスタック]

            taebbong

            フラッターとジャンゴでフルスタッククイズアプリを作る講義です！ 学ぶ距離が多いフルスタック講義でフルスタック開発者になりましょう:)

            Basic

            Basic

            Django, Flutter

            フラッターとジャンゴで1時間でクイズアプリ/サーバーを作る [ランダムフルスタック]Course Thumbnail

            フラッターとジャンゴで1時間でクイズアプリ/サーバーを作る [ランダムフルスタック]

            taebbong

            연관 로드맵

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

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

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

            김석훈