채널톡 아이콘

Vue-Django-Bootstrap 뚝딱 블로그

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

(4.8) 수강평 12개

수강생 295명

난이도 초급

수강기한 무제한

날개 달린 동전

강의 추천하고 성장과 수익을 만들어 보세요!

날개 달린 동전

마케팅 파트너스

강의 추천하고 성장과 수익을 만들어 보세요!

먼저 경험한 수강생들의 후기

먼저 경험한 수강생들의 후기

4.8

5.0

때구니

100% 수강 후 작성

부트스트랩과 장고템플릿과 VUE.JS를 어떻게 효율적으로 사용하는 지 확인할 수 있는 좋은 강의였습니다. 감사합니다.

5.0

mo app

96% 수강 후 작성

django와 vuejs를 연동 개발하려면 꼭 봐야하는 강의입니다. 완성도 높은 개발예제와 강의로 많은것을 배울 수 있습니다.

5.0

호타물

100% 수강 후 작성

좋은 강의 입니다. 클래스형뷰(CBV)에 대해 많이 배웠습니다. 나중에 DRF를 이용할 때 많은 도움이 될 것 같습니다.

수강 후 이런걸 얻을 수 있어요

  • 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,106

수강생

154

수강평

224

답변

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

해당 강의에서 제공:

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

수강평

전체

12개

4.8

12개의 수강평

  • 호타물님의 프로필 이미지
    호타물

    수강평 1

    평균 평점 5.0

    5

    100% 수강 후 작성

    좋은 강의 입니다. 클래스형뷰(CBV)에 대해 많이 배웠습니다. 나중에 DRF를 이용할 때 많은 도움이 될 것 같습니다.

    • mo app님의 프로필 이미지
      mo app

      수강평 14

      평균 평점 5.0

      5

      96% 수강 후 작성

      django와 vuejs를 연동 개발하려면 꼭 봐야하는 강의입니다. 완성도 높은 개발예제와 강의로 많은것을 배울 수 있습니다.

      • 이현호님의 프로필 이미지
        이현호

        수강평 1

        평균 평점 5.0

        5

        100% 수강 후 작성

        좋은 강의 감사합니다.

        • 때구니님의 프로필 이미지
          때구니

          수강평 25

          평균 평점 5.0

          5

          100% 수강 후 작성

          부트스트랩과 장고템플릿과 VUE.JS를 어떻게 효율적으로 사용하는 지 확인할 수 있는 좋은 강의였습니다. 감사합니다.

          • dcloyal1님의 프로필 이미지
            dcloyal1

            수강평 30

            평균 평점 5.0

            5

            100% 수강 후 작성

            김석훈님의 다른 강의

            지식공유자님의 다른 강의를 만나보세요!

            비슷한 강의

            같은 분야의 다른 강의를 만나보세요!

            연관 로드맵

            강의가 포함된 로드맵으로 학습해 보세요!

            ₩33,000