Vue-Django-Bootstrap 뚝딱 블로그

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

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

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

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

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

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

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

이런 분들께
추천합니다.

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

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

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

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

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

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

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

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

단순히 ‘웹 프로그램이 돌아간다’ ‘코딩할 수 있다’는 수준을 뛰어넘어, 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 성능 개선

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

스마트폰에서 보기

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

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

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

Vue.js - Django 연동 
웹 프로그래밍
투 두 앱 코딩하기

Vue.js - Django 연동 
웹 프로그래밍 (실전편)
뷰티파이 활용까지