Thumbnail
BEST
개발 · 프로그래밍 풀스택

Vue-Django-Bootstrap 뚝딱 블로그 대시보드

(4.7)
11개의 수강평 ∙  259명의 수강생

33,000원

지식공유자: 김석훈
총 50개 수업 (5시간 45분)
수강기한: 
무제한
수료증: 발급
난이도: 
입문
-
초급
-
중급이상
지식공유자 답변이 제공되는 강의입니다
폴더에 추가 공유

초급자를 위해 준비한
[웹 개발, 풀스택] 강의입니다.

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

✍️
이런 걸
배워요!
Django를 활용한 파이썬 웹 프로그래밍
jQuery를 대신하는 Vue.js 활용
Bootstrap 무료 테마/템플릿 활용

내 손으로 뚝딱, 나만의 블로그 🏠
뷰 + 장고 + 부트스트랩 웹 개발!

카테고리를 이동하고, 댓글을 남기고, 페이지네이션은 직접 구현합니다.

스크롤에 따라 메뉴가 바뀌는 scrollspy UI도 구현할 수 있습니다.

쉽고 빠르면서도
멋진 웹 개발
?

웹 프로그래밍에서 UI는 점점 화려해지고 있습니다.
때문에 초보자라면 누구나 고민하기 마련입니다. ‘나도 멋있는 웹을 만들 수 있지 않을까?’ 하고요.

이 질문에 대한 제 답을 말씀드립니다.
바로 Vue.js + Django + Bootstrap 으로 가능하다는 것입니다.

  • 하나, Vue와 Django를 연동해 웹 프로그래밍을 합니다.
  • , UI로는 Bootstrap에서 지원하는 테마를 사용합니다.

이 세 가지 모두 많은 사람들이 사용하면서도 쉽다고 얘기하는 인기 프레임워크입니다. 
이번 강의에서는 멋진 블로그 웹 페이지를 직접 만들어보면서 프론트엔드와 백엔드를 연동하는 웹 개발의 원리 및 핵심 기술을 학습해 보도록 합니다. 그럼 함께 살펴보실까요?


이런 분들께
추천합니다.

선수 지식을 확인해주세요!

  • Vue.js 및 Django 기본 지식이 있는 분들을 대상으로 하는 강의입니다.

 

쉽고 빠르면서도 
멋진 웹 프로그래밍을 
하고 싶은 분

이미 만들어진 
테마를 활용해 
멋진 UI를 만들고픈 분

기술 트렌드인 
프론트엔드/백엔드를 
연동하고 싶은 분 

혹시, 이런 고민 하고 계신가요?

  • Django 및 Vue.js의 기초적인 기능을 알고 있는 분들이 수강할 수 있는 강의입니다.

튜토리얼 정도는 만들 수 있지만, 
스스로 할 때는 막힐 때가 있습니다.

간단한 웹 프로그래밍은 할 수 있지만, 
UI가 마음에 안 듭니다.

Django는 쓸 줄 알지만, 프론트로 
최신 기술인 Vue.js를 사용하고 싶습니다.

Vue.js는 쓸 줄 알지만, 서버 기술로 
Django를 사용하고 싶습니다.

  • Django를 사용하는데, 자꾸 에러가 나고 막힐 때가 있어요.
    👉 Django(장고)는 다양한 기능과 개발자를 편하게 하는 기능이 많은 반면, 그런 기능을 잘 파악하고 있어야 에러에 대처할 수 있습니다. 이를 위해 장고 도큐먼트 읽는 법을 알려주고, 주요 내용을 자세히 설명합니다.
  • 지금보다 멋진 UI를 만들고 싶어요.
    👉 멋진 UI는 누구나 원하지만, 프론트엔드 기술과 디자인 감각이 필요한 분야라 별도 공부가 필요합니다. 본 강의에서는 미리 만들어진 Bootstrap(부트스트랩) 테마를 사용하는 방법을 알려줍니다. 전문가가 만든 멋진 UI 이면서도, 초급자도 활용할 수 있는 좋은 방법이기 때문입니다.
  • 좋아요/단어 추천 등 Async/Interactive한 기능을 만들고 싶어요.
    👉 웹 프로그램에서 Async/Interactive 기능은 거의 필수로 필요합니다. 예전에는 jQuery(제이쿼리)로 코딩을 했다면, 본 강의에서는 Vue.js(뷰)를 사용합니다. Vue는 jQuery의 모든 기능을 대체할 수 있고, 성능이 개선된 최신 기술이기 때문입니다.
  • 스마트폰에서도 동작하는 웹 프로그램을 만들고 싶어요.
    👉 본 강의에서 활용하는 Start Bootstrap 템플릿은 기본으로 반응형 동작을 지원합니다. 그래서 별도의 코딩 없이 PC와 스마트폰 양쪽에서 모두 동작하는 웹 페이지를 만들게 됩니다.

이 강의가 특별한 이유를 
알려드립니다.

이 강의를 듣고 나면!

  • Vue-Django를 연동하기 위한, axios/JsonResponse 사용법을 알 수 있습니다.
  • jQuery로 만들던 기능을, 이제는 최신 기술인 Vue로 만들 수 있게 됩니다.
  • Start Bootstrap 테마/템플릿 등을 스스로 활용할 수 있습니다
  • 장점이 많다는 Django의 클래스형 뷰를 확실히 이해할 수 있습니다.

응용까지 생각한 웹 개발 학습 강의입니다.

단순히 ‘웹 프로그램이 돌아간다’ ‘코딩할 수 있다’는 수준을 뛰어넘어, Django의 동작 원리 또는 배경 지식을 전달하고자 노력하였습니다. 그래야 하나를 배우더라도 열 개로 응용하고 확장할 수 있으니까요.

또한 주 내용은 초급 기능에 맞추었지만, ▲Pagination ▲JS로 데이터 전달 ▲prefetch-related 등의 중급 기능도 포함해 여러분께서 조금 더 발전할 수 있도록 강의를 구성하였습니다.

끝으로 중요한 내용은 PPT로 작성하여 동영상에서 설명함으로써 이해를 돕기 위해 노력했습니다. 소스 코드 및 강의에 사용된 자료를 제공합니다.

보통의 Single Page Application 연동방식에 비해, 본 강의 장점 입니다.

  • Vue-Django 연동 방식이면서도, VueRouter/Vuex/DRF 사용하지 않아도 됩니다.
  • Vue-Django 연동 방식이면서도, Django 의 Admin 기능을 그대로 사용합니다.
  • Django 를 API 서버만으로 사용하는 게 아니라, 템플릿 처리도 동시에 가능합니다.
  • 필요하다면, 장고의 인증 기능을 그대로 재사용할 수 있습니다.

Django Rest Framework 좋은데, 자주 막힌다면 ?

  • DRF 는 처음에는 쉬워 보이지만, 응용할려면 자주 막히는 경우가 있습니다.
  • DRF 의 시리얼라이즈, 클래스 상속, 오버라이딩이 익숙치 않아서 일 겁니다.
  • 본 강의를 통해 기본 기술을 익히고, 그 이후에 필요하면 DRF를 사용하기를 추천합니다.
  • DRF 에 기본이 되는 기술은, 역시 클래스형뷰(CBV) 이기 때문 입니다.

다음 순서로
학습합니다.

Start Bootstrap 테마 활용하기

부트스트랩의 테마와 템플릿을 내려받고 활용하는 방법을 알아보고, Django에서 테마를 수정해 봅니다.

Django로 Blog 앱 개발

Django로 블로그 앱의 기본 구조를 만드는 방법에 대해 학습합니다.

Vue-Django API 개발

Django에 Vue.js를 연동하면 어떤 이점이 있는지 알아보고, API를 설계합니다.

각종 확장 기능

페이지네이션, JS로 데이터 전달, CSRF 토큰 기능 등 각종 확장 기능을 학습합니다.

DB Query 성능 개선

데이터베이스 성능 향상을 위해 쿼리를 개선합니다.

스마트폰에서 보기

데스크톱뿐만 아니라 스마트폰, 태블릿 등 모바일 디바이스에서도 화면을 알맞게 볼 수 있도록 반응형 웹 기술을 학습해 봅니다.


자주 묻는 질문을 
확인해보세요.

Q. 파이썬-장고는 처음입니다. 강의를 따라갈 수 있을까요?

장고 하나로 웹 프로그래밍을 해본 경험이 필요합니다. 그 이후에 Vue를 추가하여, 본 강의와 같은 한단계 업그레이드된 Vue-Django 연동 방식의 프로그램을 하게 됩니다.

Q. 뷰를 꼭 사용해야 하나요? 장고만으로 웹 프로그래밍이 안 되나요?

물론 장고만으로 가능합니다. 다만 뷰를 사용하면 UI가 업그레이드됩니다. UI는 서버 쪽에서 처리하는 것보다는 클라이언트 쪽에서 다루는 게 훨씬 효율적이지요. 본 강의에서는 jQuery 수준으로 사용하고 있고, 강의를 마치고 좀 더 공부하면 애니메이션 등 UI 고급 기능에 대한 구현도 가능할 것입니다.

Q. 뷰 대신 리액트(React)를 사용해도 되나요?

가능합니다. 연동과 장고 쪽 코드는 동일합니다. 뷰 코드만 리액트로 바꿔주면 됩니다.

뷰와 리액트 둘 다 좋은 프레임워크라 자신의 상황에 맞게 선택하면 됩니다. 다만, 본 강의와 같이 이미 존재하는 HTML 파일을 활용하는 경우는 뷰가 리액트 대비 훨씬 유리하다는 점은 고려 바랍니다.

Q. 쉽다고 하는데 어떤 점이 쉬운 건가요?

뷰-장고를 연동할 때, 많은 경우 Vue Router, Vuex, DRF 등을 사용합니다. 이 세 가지를 사용 안해도 됩니다. 그만큼 공부량이 줄어듭니다.

또한, 인터넷에 있는 부트스트랩(Bootstrap) 테마를 활용하므로, 빠르게 쉽고 멋지게 UI를 만들 수 있습니다.

Q. 지식공유자님의 다른 강의와는 어떻게 다른가요?

난이도는 저의 인프런 강의 (Vue-Django 연동) 기본편과 실전편 중간 정도입니다.

실전편과 비교하면 블로그 앱은 동일하지만, 좋아요 비동기(Async) 기능과 댓글 폼 처리가 추가되었고, 페이지네이션(Pagination) 기능은 직접 날코딩합니다.

가장 큰 차이점은 Vuetify 대신 Bootstrap을 사용했고, 특히 미리 만들어진 Start Bootstrap 템플릿 사용법을 배움으로써 다양한 테마들을 스스로 활용할 수 있게 됩니다.


지식공유자의
다른 강의가 궁금하다면?

이런 분들께 추천드려요!

🎓
학습 대상은
누구일까요?
쉽고 빠르면서도 멋진 웹 프로그래밍을 하고 싶은 분
이미 만들어진 테마를 활용하여, 멋진 UI를 만들고 싶은 분
기술 트렌드인 Front/Backend를 연동하는 방법을 알고 싶은 분
📚
선수 지식,
필요할까요?
Django 튜토리얼 및 클래스형뷰는 코딩해 본 경험이 있어야 합니다.
Vue.js 기본 디렉티브(v-for, v-if 등)는 알고 있어야 합니다.

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

프로그램 개발은 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월)

커리큘럼 총 50 개 ˙ 5시간 45분의 수업
이 강의는 영상, 수업 노트, 첨부 파일이 제공됩니다. 미리보기를 통해 콘텐츠를 확인해보세요.
섹션 0. 완성 프로그램 미리보기
섹션 1. Start Bootstrap 테마 활용하기
테마/템플릿 다운로드 미리보기 08:53 프로젝트 시작 미리보기 08:57
Django 에서 테마 보기 06:31
Django 에서 테마 수정하기 07:57
섹션 2. Django 로 blog 앱 개발
사이트 첫 페이지 만들기 04:56
내소개 페이지 만들기 07:03
블로그 앱 만들기 11:29
테이블 및 테이블간 관계 06:14
Post-Detail 임시 화면 09:15
Django 에서 테마-2 수정하기 06:29
메인 메뉴 및 템플릿 상속 08:13
Post-Detail 화면 만들기 08:24
Scrollspy 기능 07:19
섹션 3. Vue-Django API 개발 (I)
Vue 장점 미리보기 06:18
CDN 구성하기 09:23
Post-List API 11:04
사진 크기 조정하기 05:36
Post-Detail API 07:47
Serialization 07:34
섹션 4. Vue-Django API 개발 (II)
이전-다음 포스트 API 09:46
카테고리 및 태그 API 10:36
페이지 이동 기능 06:50
페이지 이동 ppt 설명 07:47
페이지 이동 API 08:02
좋아요 API 06:07
댓글 보기 API 10:13
댓글 생성 API 10:50
폼 처리 및 CreateView 07:30
섹션 5. 확장 - Pagination 기능
페이지네이션 직접 코딩 08:39
페이지네이션 - Vue 07:57
페이지네이션 - Event 05:52
페이지네이션 - Class 06:43
페이지네이션 - Django 03:41
섹션 6. 확장 - Django to JS 데이터 전달
Django Magic 이란 ? 08:33
Django Magic - List 05:57
Django Magic - Detail 10:09
섹션 7. 확장 - CSRF Token 기능 등
ensure-csrf-cookie 06:53
v-cloak 04:05
CBV 장점 05:29
섹션 8. DB query 성능 개선
select-related 04:15
prefetch-related 06:05
섹션 9. 스마트폰에서 보기
반응형 웹 미리보기 05:44
WiFi 에 연결된 경우 03:15
섹션 10. 추가영상 - Start Bootstrap 소스 변경사항
Start Bootstrap 최신 버전과 비교 02:43
VS Code 에서 파일 비교 방법 06:17
섹션 11. 부록
PyCharm Key Bindings 02:36
Vue vs React 비교 05:35
Django 프로젝트 뼈대 만들기 미리보기 00:33
강의 게시일 : 2021년 08월 27일 (마지막 업데이트일 : 2023년 08월 20일)
수강평 총 11개
수강생분들이 직접 작성하신 수강평입니다.
4.7
11개의 수강평
5점
4점
3점
2점
1점
VIEW 추천 순 최신 순 높은 평점 순 낮은 평점 순 평점 순 높은 평점 순 낮은 평점 순
때구니 thumbnail
5
부트스트랩과 장고템플릿과 VUE.JS를 어떻게 효율적으로 사용하는 지 확인할 수 있는 좋은 강의였습니다. 감사합니다.
2022-12-18
mo app thumbnail
5
django와 vuejs를 연동 개발하려면 꼭 봐야하는 강의입니다. 완성도 높은 개발예제와 강의로 많은것을 배울 수 있습니다.
2022-09-23
호타물 thumbnail
5
좋은 강의 입니다. 클래스형뷰(CBV)에 대해 많이 배웠습니다. 나중에 DRF를 이용할 때 많은 도움이 될 것 같습니다.
2022-09-09
이현호 thumbnail
5
좋은 강의 감사합니다.
2022-09-05
김경민 thumbnail
5
vuejs를 하나도 모르더라도 어느 정도 유추하며 공부 가능합니다. 강사님께서는 장고의 로직을 야무지게 알고계시고 설명도 잘 해주십니다.
2022-08-15
연관 로드맵
이 강의가 포함된 잘 짜여진 로드맵을 따라 학습해 보세요!