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

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

(4개의 수강평)

90명의 수강생
33% 할인 10일 남음

22,000원33,000원

김석훈
평생
초급
수료증
31개 수업, 총 4시간 11분
Wishlist

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의 클래스형뷰를 심층 이해할 수 있는 보너스 효과도 있다.

 학습 목표

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

도움이 되는 분들

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

참고 사항
  • Vue.js와 Django에 대한 강의 내용 비율은 대략 3:7 정도 입니다.
  • Python, Django, Vue.js 모두 2019년 현재 최신 버전입니다.
  • Vue.js는 VSCode, Django는 PyCharm 개발툴을 사용하고 있습니다.
  • Vue.js(초급), Django(초중급) 수준의 강좌입니다.
선행 지식
  • Vue.js(초급) : v-if, v-for 등의 directive 를 사용할 수 있는 수준
  • Django : 장고 튜토리얼을 이해할 수 있는 수준

지식공유자 소개

김석훈
프로그램 개발은 C 언어로 시작했으며, 자바를 거쳐 최근에는 주로 파이썬을 사용하고 있다.
KT ucloud 서비스의 백엔드 서버 개발 프로젝트에 참여하여, 자바로 고객의 폴더/파일에 대한 메타 정보 처리 엔진을, 파이썬으로 클라이언트 푸시 서비스를 개발하였다.

또한 KT인터넷 회선의 속도 측정 프로그램, 네트워크 장비에 대한 운용관리 프로그램, 방대한 양의 트래픽 데이터 분석 프로그램을 개발한 바 있다. 개인적으로는 파이썬의 매력에 푹 빠져 되도록이면 파이썬으로 코딩하기를 즐겨하고 있다.

그 일환으로 요즘은 Django를 활용한 웹 프로그래밍, Django Rest Framework를 활용한 JSON 연동, Pandas를 활용한 데이터 분석 등의 프로젝트를 개발하면서 파이썬의 활용도를 넓혀가고 있다.

< 저서 >

- Django로 배우는 쉽고 빠른 웹 개발 파이썬 웹 프로그래밍 (한빛미디어, 2015.4월)
- Django를 활용한 쉽고 빠른 웹 개발 파이썬 웹 프로그래밍
- 실전편 (한빛미디어, 2016.7월)
- Django로 배우는 쉽고 빠른 웹 개발 파이썬 웹 프로그래밍, 개정판 (한빛미디어, 2018.8월)

지식공유자 소개

김석훈

교육과정

HTML로 todo 앱 코딩하기
완성된 모습 미리 보기
01 : 00
강의자료
Vue.js 골격 잡기
03 : 00
Vue.js todo 앱 완성
04 : 00
주요 사항 정리 하기
02 : 00
Vue.js 로 todo 앱 코딩하기 (VueOnly)
장고 뼈대 만들기
06 : 00
장고에 Vue.js 코드 넣기
13 : 00
Django 로 todo 앱 코딩하기 (DjangoOnly)
todo 앱 설계 하기
05 : 00
클래스형뷰 사용 하기
14 : 00
방식별 특징 비교 하기
02 : 00
HTML 코딩 하기
12 : 00
주요 사항 정리 하기
02 : 00
Django 로 첫 페이지 만들기
CDN 골격 잡기
08 : 00
bootstrap 으로 화면 만들기
24 : 00
Django 로 todo 앱 코딩하기 (DjangoMixin)
개발 방향 요약 하기
03 : 00
클래스형뷰 Mixin 사용 하기
16 : 00
bootstrap 팝업창 만들기
14 : 00
Client vs Server Rendering
Client vs Server Rendering
09 : 00
SPA vs SSR
06 : 00
Vue-Django 연동 설계
04 : 00
Vue-Django 연동하기 (기본 코딩)
todo 앱 골격 만들기
09 : 00
todo 앱 기본 코딩 하기
04 : 00
Vue.js directive 사용 하기
08 : 00
Vue.js 1차 코딩 완료 하기
10 : 00
JSON 연동 Sequence Chart
05 : 00
Vue-Django 연동하기 (JSON 연동)
Vue.js - axios.get() 코딩 하기
06 : 00
Django - get. JsonResponse 코딩 하기
16 : 00
delete - Json 연동 코딩 하기
13 : 00
post - JSON 연동 코딩 하기 (Vue.js)
03 : 00
post - JSON 연동 코딩 하기 (Django)
20 : 00
Vue-Django 연동하기 (CSRF Token 처리)
CSRF Token 처리 - Vue.js 및 Django
09 : 00

수강 후기

4.5
4개의 수강평
김동혁 3일 전
장점. 1. 실제 전문가들이 어떻게 해외공식 문서를 읽고 보는지 알 수 있음 (보는 방법 가르쳐줍니다.) 2. 장고는 초중급이라고 써놓으셨는데, 꽤 난이도가 높음 단순히 ListView, TemplateView를 쓰는게 아니라 상속해주는 부모 View클래스들에 대한 문서를 보고 활용함. 이 강좌를 보면 장고 클래스뷰에 대해 많이 감을 잡을 수 있음. 3. 실제 현업에서 개발하는 방식에 대해서 알 수 있음 서버(장고)/클라이언트(뷰JS)를 각각 구현하고 서버와 클라이언트 간 데이터 전송(JSON방식)에 대해서 완벽하게 알 수 있음 단점 없음. 추천평 장고 기초 강의 들으신 분들이 이 강의를 꼭 들어보셔야됨.
Seong Su Hong 9일 전
django랑 vue 로 구현할때 필요한 것들이 잘 나옵니다. 다들었으니 활용해서 만들어봐야겠네요
김용범 19일 전
예전 책이 나와서 실강을 들어서 온라인 까지 들었습니다. 조금 말씀이 졸리긴 하지만 내용인 좋아요. 한가지 아쉬운 점은 코딩화면이 작아서 데스크탑 PC 전체 화면이 아닌 모바일이나 태블릿에서는 보기 불편하더라구요.. 다음번 강의에는 코딩화면의 글자크기가 커졌으면 좋겠습니다
김석훈 프로필

김석훈 15일 전
모바일/태블릿 화면 까지는 생각을 못 했습니다. 첫 녹화 강의라서 불편을 드린 점 송구합니다. 다음번에는 고려하겠습니다. 그래도 내용은 도움이 된 것으로 평가한 듯 하여 감사드립니다.

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