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

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

(24개의 수강평)

206명의 수강생
33,000원
지식공유자 · 김석훈
31회 수업· 총 4시간 11분수업
평생 무제한 시청
수료증 발급 강의
수강 난이도 '초급'
김석훈의 다른 강의
연관 로드맵
아직 다른 강의가 없어요 ㅠㅠ

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

교육과정

모두 펼치기 31 강의 4시간 11분
섹션 0. HTML로 todo 앱 코딩하기
5 강의 10 : 00
완성된 모습 미리 보기
01 : 00
강의자료
Vue.js 골격 잡기
03 : 00
Vue.js todo 앱 완성
04 : 00
주요 사항 정리 하기
02 : 00
섹션 1. Vue.js 로 todo 앱 코딩하기 (VueOnly)
2 강의 19 : 00
장고 뼈대 만들기
06 : 00
장고에 Vue.js 코드 넣기
13 : 00
섹션 2. Django 로 todo 앱 코딩하기 (DjangoOnly)
5 강의 35 : 00
todo 앱 설계 하기
05 : 00
클래스형뷰 사용 하기
14 : 00
방식별 특징 비교 하기
02 : 00
HTML 코딩 하기
12 : 00
주요 사항 정리 하기
02 : 00
섹션 3. Django 로 첫 페이지 만들기
2 강의 32 : 00
CDN 골격 잡기
08 : 00
bootstrap 으로 화면 만들기
24 : 00
섹션 4. Django 로 todo 앱 코딩하기 (DjangoMixin)
3 강의 33 : 00
개발 방향 요약 하기
03 : 00
클래스형뷰 Mixin 사용 하기
16 : 00
bootstrap 팝업창 만들기
14 : 00
섹션 5. Client vs Server Rendering
3 강의 19 : 00
Client vs Server Rendering
09 : 00
SPA vs SSR
06 : 00
Vue-Django 연동 설계
04 : 00
섹션 6. Vue-Django 연동하기 (기본 코딩)
5 강의 36 : 00
todo 앱 골격 만들기
09 : 00
todo 앱 기본 코딩 하기
04 : 00
Vue.js directive 사용 하기
08 : 00
Vue.js 1차 코딩 완료 하기
10 : 00
JSON 연동 Sequence Chart
05 : 00
섹션 7. Vue-Django 연동하기 (JSON 연동)
5 강의 58 : 00
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
섹션 8. Vue-Django 연동하기 (CSRF Token 처리)
1 강의 09 : 00
CSRF Token 처리 - Vue.js 및 Django
09 : 00

공개 일자

2019년 4월 12일 (마지막 업데이트 일자 : 2019년 4월 12일)

수강 후기

4.3
24개의 수강평
thumbnail_default.png
김희수 12일 전
강의는 좋은데 좀 많이 끊기네요.. 초반에는 안그랬던거같은데 후반으로 갈수로 끊기는 정도가 자주 발생합니다. 개선 좀 해주세요..
김석훈

김석훈 1일 전
불편을 드렸군요. 수강평을 늦게 봐서 답변도 늦었습니다. 미안합니다. 인프런에 관련 사항 개선을 요청했습니다. 감사합니다.

thumbnail_default.png
이의현 1달 전
하는 내내 이상할 정도로 제가 찾아서 고치는 시간이 많았습니다. 강의 시간보다 고치는 시간이 절반을 차지할 정도로요
김석훈

김석훈 1달 전
불편을 드려 송구합니다. 저는 지금도 현업에서 잘 사용하는 방법이라서, 주신 의견은 제가 생각하지 못한 수강평 입니다. 혹시 안되었던 사례 한두개만 알려주실 수 있는지요 ? 제가 검토해 보겠습니다. (여기 또는 제 이메일로 보내도 되구요. kimseokhun@gmail.com)

비슷한 강의들

지식공유자 되기
많은 사람들에게 배움의 기회를 주고,
경제적 보상을 받아보세요.
지식공유참여
기업 교육을 위한 인프런
“인프런 비즈니스” 를 통해 모든 팀원이 인프런의 강의들을
자유롭게 학습하는 환경을 제공하세요.
인프런 비즈니스