Thumbnail
BEST 개발 · 프로그래밍 웹 개발
Vue.js - Django 연동 웹 프로그래밍
(4.5)
46개의 수강평 ∙ 398명의 수강생

33,000원

지식공유자 : 김석훈
총 31개 수업˙총 4시간 6분
평생 무제한 수강
수료증 발급 강의
입문 초급 대상 중급이상
이 강의는 멘토링 신청이 가능합니다.
멘토링은 수강 신청과 별개로 운영되며, 수강생이 아니어도 신청할 수 있습니다.
내 목록 추가 239 공유
초급자를 위해 준비한
[웹 개발, 프레임워크 및 라이브러리] 강의입니다.

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

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년 현재 최신 버전입니다. (Django 3.x 사용시 [새소식] 참고바람)
  • Vue.js는 VSCode, Django는 PyCharm 개발툴을 사용하고 있습니다.
  • Vue.js(초급), Django(초중급) 수준의 강좌입니다.
  • 오프라인 교육 참가시 50 % 할인 (https://onoffmix.com/event/205000) --> 동영상으로 제작중이라 중단함.
선행 지식
  • 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월)
- Django를 활용한 쉽고 빠른 웹 개발 파이썬 웹 프로그래밍-실전편, 개정판 (한빛미디어, 2019.11월) 

안녕하세요
김석훈 입니다.
김석훈의 썸네일

1. Django 로  배우는 파이썬 웹 프로그래밍 (개정판, 한빛미디어, 2018. 8월)
2. Django 를 활용한 파이썬 웹 프로그래밍 - 실전편 (개정판, 한빛미디어, 2019. 11월)
3. Vue.js - Django 연동 웹 프로그래밍 (인프런 동영상, 2019. 4월)                                                              
4. Vue.js - Django 연동 웹 프로그래밍 - 실전편 (인프런 동영상, 2020.9월)

공동 지식공유자: 김석훈의 썸네일
커리큘럼 총 31 개 ˙ 4시간 6분의 수업
이 강의는 영상, 수업 노트, 첨부 파일이 제공됩니다. 미리보기를 통해 콘텐츠를 확인해보세요.
섹션 0. HTML로 todo 앱 코딩하기
완성된 모습 미리 보기 미리보기 01:22
강의자료
Vue.js 골격 잡기 03:33
Vue.js todo 앱 완성 07:00
주요 사항 정리 하기 02:07
섹션 1. Vue.js 로 todo 앱 코딩하기 (VueOnly)
장고 뼈대 만들기 미리보기 06:06
장고에 Vue.js 코드 넣기 13:16
섹션 2. Django 로 todo 앱 코딩하기 (DjangoOnly)
todo 앱 설계 하기 미리보기 05:01
클래스형뷰 사용 하기 10:38
방식별 특징 비교 하기 01:47
HTML 코딩 하기 12:29
주요 사항 정리 하기 01:41
섹션 3. Django 로 첫 페이지 만들기
CDN 골격 잡기 05:54
bootstrap 으로 화면 만들기 17:02
섹션 4. Django 로 todo 앱 코딩하기 (DjangoMixin)
개발 방향 요약 하기 03:28
클래스형뷰 Mixin 사용 하기 16:38
bootstrap 팝업창 만들기 14:52
섹션 5. Client vs Server Rendering
Client vs Server Rendering 09:06
SPA vs SSR 05:46
Vue-Django 연동 설계 미리보기 04:13
섹션 6. Vue-Django 연동하기 (기본 코딩)
todo 앱 골격 만들기 09:14
todo 앱 기본 코딩 하기 04:31
Vue.js directive 사용 하기 07:42
Vue.js 1차 코딩 완료 하기 10:02
JSON 연동 Sequence Chart 04:48
섹션 7. Vue-Django 연동하기 (JSON 연동)
Vue.js - axios.get() 코딩 하기 05:51
Django - get. JsonResponse 코딩 하기 15:49
delete - Json 연동 코딩 하기 13:25
post - JSON 연동 코딩 하기 (Vue.js) 03:08
post - JSON 연동 코딩 하기 (Django) 20:43
섹션 8. Vue-Django 연동하기 (CSRF Token 처리)
CSRF Token 처리 - Vue.js 및 Django 09:13
강의 게시일 : 2019년 04월 12일 (마지막 업데이트일 : 2019년 04월 12일)
수강평 총 46개
수강생분들이 직접 작성하신 수강평입니다. 수강평을 작성 시 300잎이 적립됩니다.
4.5
46개의 수강평
5점
4점
3점
2점
1점
VIEW 좋아요 순 최신 순 높은 평점 순 낮은 평점 순 평점 순 높은 평점 순 낮은 평점 순
달사 thumbnail
다 듣고 수강평을 남깁니다. Django 어느 정도 서비스 어느 정도 만들어보시고 전체 흐름이 어떻게 돌아가는지 파악하시면서 javascript랑 vue.js 조금 이해하신 분 위주로 수업 듣기 좋습니다. 저 역시 vue.js를 조금 보고나서 다시 봐야했었습니다. 전체적으로 Django의 데이터 찾는 방법이나 ccbv같은 사이트를 통하여 다양한 class view가 어떻게 되어 있는지를 통해서 커스텀을 간단하게 하는 법 까지 배울 수 있는 좋은 자료입니다.
2021-03-04
김동혁 thumbnail
장점. 1. 실제 전문가들이 어떻게 해외공식 문서를 읽고 보는지 알 수 있음 (보는 방법 가르쳐줍니다.) 2. 장고는 초중급이라고 써놓으셨는데, 꽤 난이도가 높음 단순히 ListView, TemplateView를 쓰는게 아니라 상속해주는 부모 View클래스들에 대한 문서를 보고 활용함. 이 강좌를 보면 장고 클래스뷰에 대해 많이 감을 잡을 수 있음. 3. 실제 현업에서 개발하는 방식에 대해서 알 수 있음 서버(장고)/클라이언트(뷰JS)를 각각 구현하고 서버와 클라이언트 간 데이터 전송(JSON방식)에 대해서 완벽하게 알 수 있음 단점 없음. 추천평 장고 기초 강의 들으신 분들이 이 강의를 꼭 들어보셔야됨.
2019-05-24
br thumbnail
아주 만족합니다. 잘 들었습니다. 한바퀴 더 돌아야겠네요. 초급이 듣기엔 살짝 무리가 있을 수 있겠지만, API 연동을 통한 프론트-백엔드 분리 방식 접근이 아주 유익했습니다. 사실 이런 강좌를 찾았는데 다른 곳에서는 없었던 것 같습니다.
2019-04-18
정발산 thumbnail
장고를 공부하고 있던차에 프론트엔드 프레임 워크를 배워보고 싶다는 생각이 있었는데 이 강의를 찾아서 참 다행입니다. 일단 백과 vue를 연결하는 부분이 절실 했는데 이 강의를 통해서 어느정도 기반을 잡았습니다. 개인적으로 vue는 아예 모른다고 해도 장고를 어느정도 공부하고 html의 기본적인 구조를 알고 계신다면 강의를 보는데 문제는 없다고 생각합니다.
2020-02-07
젬미니 thumbnail
혼자 구글로 공부하려 했으면 많은 시간이 소모되었을 겁니다. 많은 도움이 되었습니다. 장고로 프로그래밍 할때는 ccbv만 제대로 볼 줄 알아도 많은 문제를 해결할 수 있을 것 같습니다.
2019-11-24

33,000원

내 목록 추가 239 공유
지식공유자 : 김석훈
총 31개 수업˙총 4시간 6분
평생 무제한 수강
수료증 발급 강의
입문 초급 대상 중급이상
이 강의는 멘토링 신청이 가능합니다.
멘토링은 수강 신청과 별개로 운영되며, 수강생이 아니어도 신청할 수 있습니다.
연관 로드맵
이 강의가 포함된 잘 짜여진 로드맵을 따라 학습해 보세요!
지식공유자 되기
많은 사람들에게 배움의 기회를 주고,
경제적 보상을 받아보세요.
지식공유참여
기업 교육을 위한 인프런
“인프런 비즈니스” 를 통해 모든 팀원이 인프런의 강의를
자유롭게 학습하는 환경을 제공하세요.
인프런 비즈니스