인프런 영문 브랜드 로고
인프런 영문 브랜드 로고
BEST
개발 · 프로그래밍

/

풀스택

Vue-Django-Bootstrap 뚝딱 블로그

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

(4.8) 수강평 12개

수강생 285명

Vue.jsDjangoBootstrap
Thumbnail

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

이런 걸
배워요!

  • 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 등)는 알고 있어야 합니다.

안녕하세요
김석훈입니다.

수강생 수

2,024

수강평 수

148

강의 평점

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

커리큘럼

전체

50개 ∙ (5시간 44분)

수업 자료

가 제공되는 강의입니다.

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

수강평

아직 충분한 평가를 받지 못한 강의입니다.
모두에게 도움이 되는 수강평의 주인공이 되어주세요!