Inflearn brand logo image
Inflearn brand logo image
BEST
Programming

/

Full-stack

Vue.js - DjangoインターロックWebプログラミング

Vue.jsとDjangoフレームワークを使用してWebプログラミングを行うことができます。

（4.6）受講レビュー 68件

受講生 669名

Vue.js
Django

こんなことが学べます

  • Vue.jsとDjangoの連動

  • ToDoアプリ開発

  • クライアントとサーバーのレンダリングの違い

  • CSRFトークン処理

  • BootstrapとFontAwesomeを活用したWebデザイン

  • axiosによるデータ処理

Vue 3.x と Django 5.x の最新のソースを提供します。

バージョン違いによる現行化ガイド映像アップロードしました。

Vue.js - DjangoインターロックWebプログラミング

Webプログラミングはさまざまな言語とフレームワークで行うことができます。

その中で、フロントエンドに最適化されたVue.js、バックエンドに最適化されたDjangoフレームワークを活用すれば、最適な組み合わせで効率的にWebプログラミングができる。どちらも簡単で速いというメリットがあるからだ。

本講座では、Vue.jsの中高級機能であるVue Router、Vuexを使用せず、またDjangoの中高級パッケージであるDjango Rest Frameworkを使用せずに、Vue.js - Django間でJSON連動方式で todoアプリケーションを開発する過程を紹介する。


この過程で、Client RenderingとServer Renderingの長所と短所がわかり、Djangoのクラス型ビューを深く理解できるボーナス効果もある。

普通のシングルページアプリケーション連動方式に比べ、本講義のメリットです。

  • Vue-Django連動方式でありながら、VueRouter/Vuex/DRFを使用する必要はありません。
  • Vue-Django連動方式ながらも、DjangoのAdmin機能をそのまま使用します。
  • DjangoをAPIサーバーだけで使用するのではなく、テンプレート処理も同時に可能です。

学習目標

  • Vue.jsとDjangoフレームワークを使用してWebプログラミングを行うことができます。

役に立つ方

  • 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ソースを提供し、講義の範囲では2つのバージョン間の違いはほとんどありません。
  • Vue.jsはVSCode、DjangoはPyCharm開発ツールを使用しています。
先行知識
  • Vue.js（入門）：v-if、v-forなどのdirectiveを使用できるレベル
  • Django（初級）：Djangoチュートリアルを理解できるレベル

こんな方に
おすすめです！

学習対象は
誰でしょう？

  • Web開発初心者

  • フロントエンドとバックエンドの統合開発を学びたい人

  • 実際のプロジェクトを通して実践したい人

  • Vue.jsとDjangoを活用したWebアプリケーション開発に興味のある人

こんにちは
です。

2,079

受講生

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

講義資料（こうぎしりょう）:

授業資料

  • 1. 講義資料

  • 2. HtmlTodo ソース

    05:56

講座掲載日: 
最終更新日: 

受講レビュー

全体

68件

4.6

68件の受講レビュー

  • 김동혁님의 프로필 이미지
    김동혁

    受講レビュー 20

    ∙

    平均評価 4.8

    5

    100% 受講後に作成

    장점. 1. 실제 전문가들이 어떻게 해외공식 문서를 읽고 보는지 알 수 있음 (보는 방법 가르쳐줍니다.) 2. 장고는 초중급이라고 써놓으셨는데, 꽤 난이도가 높음 단순히 ListView, TemplateView를 쓰는게 아니라 상속해주는 부모 View클래스들에 대한 문서를 보고 활용함. 이 강좌를 보면 장고 클래스뷰에 대해 많이 감을 잡을 수 있음. 3. 실제 현업에서 개발하는 방식에 대해서 알 수 있음 서버(장고)/클라이언트(뷰JS)를 각각 구현하고 서버와 클라이언트 간 데이터 전송(JSON방식)에 대해서 완벽하게 알 수 있음 단점 없음. 추천평 장고 기초 강의 들으신 분들이 이 강의를 꼭 들어보셔야됨.

    • br님의 프로필 이미지
      br

      受講レビュー 1

      ∙

      平均評価 5.0

      5

      91% 受講後に作成

      아주 만족합니다. 잘 들었습니다. 한바퀴 더 돌아야겠네요. 초급이 듣기엔 살짝 무리가 있을 수 있겠지만, API 연동을 통한 프론트-백엔드 분리 방식 접근이 아주 유익했습니다. 사실 이런 강좌를 찾았는데 다른 곳에서는 없었던 것 같습니다.

      • 정발산님의 프로필 이미지
        정발산

        受講レビュー 5

        ∙

        平均評価 5.0

        5

        100% 受講後に作成

        장고를 공부하고 있던차에 프론트엔드 프레임 워크를 배워보고 싶다는 생각이 있었는데 이 강의를 찾아서 참 다행입니다. 일단 백과 vue를 연결하는 부분이 절실 했는데 이 강의를 통해서 어느정도 기반을 잡았습니다. 개인적으로 vue는 아예 모른다고 해도 장고를 어느정도 공부하고 html의 기본적인 구조를 알고 계신다면 강의를 보는데 문제는 없다고 생각합니다.

        • 젬미니님의 프로필 이미지
          젬미니

          受講レビュー 1

          ∙

          平均評価 5.0

          5

          100% 受講後に作成

          혼자 구글로 공부하려 했으면 많은 시간이 소모되었을 겁니다. 많은 도움이 되었습니다. 장고로 프로그래밍 할때는 ccbv만 제대로 볼 줄 알아도 많은 문제를 해결할 수 있을 것 같습니다.

          • jikim님의 프로필 이미지
            jikim

            受講レビュー 15

            ∙

            平均評価 5.0

            5

            100% 受講後に作成

            django를 어느 정도 공부했다가 다시 한 번 정리하는 겸으로 들었는데 굉장히 좋았습니다! 감사합니다.

            bestdjangoの他の講座

            知識共有者の他の講座を見てみましょう！

            Django REST Framework 핵심사항강의 썸네일

            Django REST Framework 핵심사항

            김석훈

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

            초급

            초급

            Django, REST API

            AI 웹 프로그래밍 (Streamlit)강의 썸네일

            AI 웹 프로그래밍 (Streamlit)

            김석훈

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

            입문

            입문

            streamlit, 머신러닝, Django

            Vue-Django-Bootstrap 뚝딱 블로그강의 썸네일

            Vue-Django-Bootstrap 뚝딱 블로그

            김석훈

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

            초급

            초급

            Vue.js, Django, Bootstrap

            Vue.js - Django 연동 웹 프로그래밍 (실전편)강의 썸네일

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

            김석훈

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

            초급

            초급

            Vue.js, Django, Vuetify

            似ている講座

            同じ分野の他の講座を見てみましょう！

            Vue.js - Django 연동 웹 프로그래밍 (실전편)강의 썸네일

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

            김석훈

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

            초급

            초급

            Vue.js, Django, Vuetify

            코알못에서 웹서비스 런칭까지 : 2021 제주 코딩 베이스캠프(Django)강의 썸네일

            코알못에서 웹서비스 런칭까지 : 2021 제주 코딩 베이스캠프(Django)

            제주코딩베이스캠프

            제주에서 진행하는 부트캠프를 온라인으로! 빠르게 자신만의 서비스를 만들어보세요! :)

            입문

            입문

            Python, Django, Bootstrap

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

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

            개복치개발자

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

            입문

            입문

            HTML/CSS, JavaScript, Vue.js

            AI 웹 프로그래밍 (Streamlit)강의 썸네일

            AI 웹 프로그래밍 (Streamlit)

            김석훈

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

            입문

            입문

            streamlit, 머신러닝, Django

            Django 프레임워크 제대로 배우기 Part.2강의 썸네일

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

            유용한IT학습

            Django는 Python기반 웹 애플리케이션 프레임워크입니다. Part.2에서는 Django를 통해 웹 사이트에서 데이터를 처리하는 방법을 배워봅니다.

            초급

            초급

            Django

            Django 프레임워크 제대로 배우기 Part.3강의 썸네일

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

            유용한IT학습

            Django는 Python기반 웹 애플리케이션 프레임워크입니다. Part.3에서는 Django와 SQLite3를 활용하여 데이터 기반의 웹 서비스를 만들어봅니다.

            초급

            초급

            Django

            Vue js와 UI를 한번에 학습/Nuxt3 + OpenWeatherMap 으로 실시간 날씨 앱 제작강의 썸네일

            Vue js와 UI를 한번에 학습/Nuxt3 + OpenWeatherMap 으로 실시간 날씨 앱 제작

            임종태

            Nuxt UI, Nuxt SEO, Nuxt Server Api, Pinia, PWA, Firebase, Email Login, Google Login를 쉽게 배울수 있어요~~

            초급

            초급

            Vue.js, PWA, Firebase

            Vue.js 완벽 가이드 - 실습과 리팩토링으로 배우는 실전 개념강의 썸네일

            Vue.js 완벽 가이드 - 실습과 리팩토링으로 배우는 실전 개념

            장기효(캡틴판교)

            Do it! Vue.js 입문 -> Vue.js 초급 강좌 -> Vue.js 중급 강좌의 계보를 잇는 Vue.js 실전 강좌입니다. Vue.js 를 실무에서 완벽히 활용 가능하도록 도와줄것 입니다.

            중급이상

            중급이상

            JavaScript, Vue.js

            Vue.js 시작하기 - Age of Vue.js강의 썸네일

            Vue.js 시작하기 - Age of Vue.js

            장기효(캡틴판교)

            Vue.js로 쉽게 웹 개발할 수 있도록 기본 개념과 핵심 기능에 대해서 학습하고 구현해봅니다. 강좌를 들으시고 나면 Vue.js로 프런트엔드 개발을 하시는게 재밌어질거에요.

            초급

            초급

            JavaScript, Vue.js

            실전! Django 입문 [최신 5.2 버전]

            신동현

            Django 핵심 개념과 주요 기능에 대해 상세하게 알아보고, DRF를 통한 API 개발 방법과 AWS를 활용한 배포까지 Django 웹 개발의 모든 것을 다룹니다.

            입문

            입문

            Python, Django, drf

            Django 초보 가이드 - 실습을 통해 알아보는 장고 입문강의 썸네일

            Django 초보 가이드 - 실습을 통해 알아보는 장고 입문

            onecue

            웹프레임 워크 장고(Django) 를 소개부터 기본적인 사용법을 알아봅니다.

            입문

            입문

            Django

            웹 게임을 만들며 배우는 Vue강의 썸네일

            웹 게임을 만들며 배우는 Vue

            제로초(조현영)

            간단한 8가지 웹 게임을 만들며 Vue.js와 Vue와 함께 사용되는 Vuex, Vue Router를 배워봅니다.

            초급

            초급

            Vue.js, Webpack, Vuex

            플러터와 장고로 1시간만에 퀴즈 앱/서버 만들기 [무작정 풀스택]강의 썸네일

            플러터와 장고로 1시간만에 퀴즈 앱/서버 만들기 [무작정 풀스택]

            권태뽕

            플러터와 장고로 풀스택 퀴즈앱을 만드는 강의입니다! 배울 거리가 많은 풀스택 강의로 풀스택 개발자가 되어보세요:)

            초급

            초급

            Flutter, Django