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

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

(4.7) 수강평 69개

수강생 674명

난이도 초급

수강기한 무제한

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

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

4.7

5.0

김동혁

100% 수강 후 작성

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

5.0

br

91% 수강 후 작성

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

5.0

정발산

100% 수강 후 작성

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

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

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

수강생

154

수강평

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

해당 강의에서 제공:

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

수강평

전체

69개

4.7

69개의 수강평

  • br님의 프로필 이미지
    br

    수강평 1

    평균 평점 5.0

    5

    91% 수강 후 작성

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

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

      수강평 1

      평균 평점 5.0

      5

      100% 수강 후 작성

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

      • jikim님의 프로필 이미지
        jikim

        수강평 15

        평균 평점 5.0

        5

        100% 수강 후 작성

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

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

          수강평 21

          평균 평점 4.6

          5

          100% 수강 후 작성

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

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

            수강평 5

            평균 평점 5.0

            5

            100% 수강 후 작성

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

            비슷한 강의

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

            연관 로드맵

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

            ₩33,000