The Complete Guide to Python/Django Web Service Development with React (Based on Django 4.2)

Section (0) Building a development environment

"""We will prepare to proceed smoothly with the lecture by correctly understanding and setting up the development environment."""

To get started with Python/Django web development, it is essential to set up a smooth development environment. This section will guide both Windows and Mac users to properly install and set up development tools such as Python, Django, PyCharm, and Terminal. Setting up a development environment may seem relatively simple, but if you miss a few key points, you can spend days setting up the environment. Just as a craftsman must fine-tune and maintain his tools to produce the best results, it is important for developers to set up their tools well and keep them in optimal condition . This section will help students to set up an environment where they can smoothly proceed with lectures and labs.

Section (1) A quick taste of Django from static web documents to dynamic web documents

"""You will learn the flow from static web to dynamic web intuitively and understand the overall big picture of web development."""

This is a warm-up stage where you can quickly practice and get a feel for the basic web development elements before going into full-scale Django web development. I hope you can feel the big picture of how the basic components of the web are connected by simply experiencing the process of starting from a static web page and developing it into a dynamic web page. The goal is to learn the flow of web development intuitively rather than trying to memorize every detail.

• We'll start with an HTML document generated from a Word document, add some simple JavaScript to make it interactable, and cover the process of serving the HTML via a web server.

• Afterwards, you will get a taste of the basic concepts of Django through a single-file Django project, and quickly experience dynamic web page elements such as loading external data, outputting it in HTML, and adding a search function.

• We'll also show you how to generate HTML responses based on information stored in a database, address security threats like SQL Injection, and improve the styling of your web pages with Bootstrap 5 and Tailwind CSS.

• Finally, we'll compare the differences between server-side rendering and client-side rendering to help you briefly understand the features and pros and cons of each.

Section (2) Review of Django's core features

"""By systematically understanding Django's basic apps and core functions, we will learn the true value of Django and seek efficient development methods."""

We review the core features and basic apps that maximize Django's productivity. By systematically understanding the main tools provided by Django, we aim to help you understand the true value of Django beyond simply copying and using model and view code .

Rather than approaching Django as a simple tool for creating list/create/edit pages, we will present ways to save time and effort during the development process by understanding the functions and philosophy of Django. First, we will look at 15 basic Django apps and find out what role each app plays in an actual project and in what situations it can be usefully utilized.

Next, we delve deeper into 14 of Django’s core features with example code. This course is designed to go beyond simply listing features and give you a full picture of how Django can be used in web development.

This section will help you understand the structure and functions of Django, and gain a deeper understanding of the various possibilities and values that Django has.

Section (3) Creating a Django Core Feature Sampler Service with Melon Data

"""Learn the core functions of Django intuitively through a simple query service using Melon data and build confidence in Django web development."""

This is the second "warm-up" stage where you will practice the core functions of Django web development. You will experience the practical functions of Django by creating a simple data search service using Melon TOP100 music data. Through this process, you will become intuitively familiar with how Django's functions are implemented in web applications.

In this tutorial, we will learn how to load data into the database using custom commands and query it through models. We will also learn how to manage data using Django's admin features.

The goal is to build the confidence needed to start web development with Django by overcoming the initial vague fear through two warm-ups . This section will provide a solid foundation for starting a long journey of learning Django.

Section (4) Request processing via View function

"""Understand the differences and advantages of function-based and class-based views, and gain the ability to efficiently generate responses by selecting the appropriate view method for request processing."""

Learn how to handle and respond to various requests using Django's View feature. View is the core element that handles the web request/response flow of a Django application, and it can generate responses in various formats such as HTML, images, CSV, and Excel.

Learn the differences between function-based views and class-based views, their respective strengths, and when they can be appropriately used. In particular, when repetitive View patterns are required, class-based views can be used to handle requests with code close to the configuration. However, class-based views are not suitable for all situations. It is important to mix function-based views and class-based views appropriately.

This section also covers the API of class-based views in depth, so you will learn how to understand the structure of each class and how to utilize it . Class-based views are difficult to apply without a sufficient understanding of their structure . It is essential to clearly understand this.

Section (5) Database query through model

"""Understand how various databases and Django models are linked, and grasp the actual working principles of Django model code through operations at the SQL level"""

Learn how to handle various databases through Django models. Django models can connect to databases such as SQLite, PostgreSQL, MySQL/MariaDB, Oracle, and SQL Server with a single Python code . We will cover the configuration method for connecting each database and Django project with code to help you understand database connection. In addition, you will experience database configuration in a real environment through hands-on practice of creating PostgreSQL and MySQL databases through Docker and connecting them to Django projects.

We will also explain the purpose of the various model fields that Django provides by default, along with example code , to help you understand how each field is actually stored and utilized in the database.

Finally, we will use the django-extensions library to verify the process of creating a queryset object and querying the database through the model manager at the SQL level . This will help us better understand how Django model code actually works.

Section (6) Managing Database Schemas through Migration

"""Learn the basic concepts and usage of Django's migrations and build a foundation for efficiently and reliably executing database schemas"""

Migration is an important tool in Django that helps you manage the database structure with Python code and easily reflect changes to Django models to the database . Without the migration function, you would have to manually manage the database schema, which is cumbersome and error-prone, and it becomes very difficult to maintain as the project becomes more complex. Since you have to manually reflect each modification one by one when managing the schema, there is a high risk of inconsistencies or errors occurring in various parts whenever the model changes.

Since many people simply execute commands mechanically without understanding the migration process, it is difficult to respond when migration fails, and confusion often occurs. Some people misunderstand that migration can only cover simple situations and cannot be used in complex situations through these failure experiences. This section covers the following to help you understand migration better:

• Learn the basic concepts and related commands for performing data migration with Python code .

• We will practice migration by experiencing the process of moving actual data to a database using zip code CSV data as an example.

• We cover how to efficiently migrate large amounts of data , enabling stable migration even in large-scale data environments.

• We analyze three common migration failure cases and provide practical tips to prevent errors and effectively deal with problems when they occur.

Section (7) Custom Model Fields and Database Constraints

"""Learn how to use Django models to reflect real business needs, and learn the basics of data management and performance optimization through various database constraints."""

Learn techniques to implement various requirements that may arise in practice into Django models. In addition to basic model fields, you can experience the flexibility and extensibility of Django models by handling custom model fields and database constraints that meet specific business needs.

The main contents of this section are as follows:

• Basic Model Fields : Learn the basic model fields provided by Django and organize the characteristics and uses of each field.

  
  

• How to Develop Custom Model Fields : Learn how to develop custom model fields to store special data types that cannot be expressed as basic fields. For example, learn the basics of handling custom fields by implementing an IP field that stores numbers and a true/false field that stores Y/N strings.

  
  

• Various Meta Options : Learn how to set database constraints and model properties through Meta options such as indexes, unique constraints, proxy models, etc. This will help you understand how to ensure data integrity and optimize query performance.

Section (8) Highly productive input form processing using Django Form

"""You will learn how to deeply understand Django's Form functionality and how to overcome limitations to increase flexibility. You will be equipped with the ability to integrate the process of creating and validating HTML input forms."""

Form processing is a task that requires a lot of development manpower even in front-end frameworks such as React, but Django Form can handle everything from HTML input form creation to validation, which greatly increases development productivity. In addition , since validation in the back-end is essential, learn how to thoroughly verify user input values on the server. Various security features required for form processing are a bonus.

It is true that Django Form is powerful but somewhat inflexible . However, we will cover ways to overcome such limitations and use it more flexibly , helping you increase the usability of Django Form. If necessary, you can create HTML input forms directly without relying on Django Form. In front-end frameworks such as React, you can also use Django Form to significantly reduce the work of form processing.

The main topics covered in this section are:

• Request Objects and Response Objects : Understand the process of processing requests received through HTML Forms and responding to them.

• CSRF Protection : We'll look at the CSRF (Cross-Site Request Forgery) attack protection that's enabled by default in Django. Don't turn off a good security feature that's already provided.

• Form Validation : Learn how to use Forms to efficiently validate input, respond with error messages, and process only valid values that pass validation.

  
  

• Django Form and ModelForm : Using Django Form, you can configure forms to your liking. There are many cases where you configure input forms according to model configuration. In this case, if you use ModelForm, you can configure forms according to model configuration without having to define form fields one by one. Let's understand the difference between Form and ModelForm and look at how to use each in practice.

• Explore form fields and develop custom form fields/widgets : Learn various form fields and develop custom form fields and widgets as needed to implement customized input forms, increasing the reusability of input form fields/widgets based on Python.

• Configuring Form Layouts with Python Code : You don't have to touch HTML directly to configure various form layouts. Let's look at how to configure various layouts with only Python code.

• Processing Multiple Form Requests at Once : The configuration of a single input field that you receive from the user may change from time to time, and sometimes you need to receive multiple form elements at once. Learn how to process multiple form values at once to efficiently handle complex input requests.

Section (9) Django Basic Authentication Implementation in Detail

"""You can deeply understand and apply the basic structure and implementation method of Django authentication system."""

We will learn the process of implementing Django's basic authentication system one by one while deeply implementing the authentication function, which is an essential element of web services. Authentication is an essential function for security and user management. It is important to understand and implement it properly.

First, to understand the authentication method of web services, we learn the principles of cookies and sessions, and design the authentication flow in Django based on this. Then, we implement Django's basic authentication function from the ground up, and experience firsthand what role each function plays and how it works. Through this process, we will acquire the ability to easily graft Django authentication onto various existing services .

The main contents of this section are as follows:

• Understanding Cookies and Sessions : Understand the basic concepts and roles of cookies and sessions to lay the foundation for how authentication is done in web services.

• Implementing Django Authentication Features : We will implement core authentication features such as login, signup, logout, password reset request, and confirmation from the ground up. This will help you understand Django's authentication system in more depth.

• Django Basic Permission Policy : Learn about the permission policy provided by Django and additional security features such as user permission management in addition to authentication.

Section (10) Django-driven web front-end technologies and web components

"""Learn how to effectively use front-end technologies centered around Django, and gain the ability to implement more efficient and maintainable web applications through component-based development."""

Learn how to develop efficient and reusable Django template-based components. Django template-based front-end development techniques allow you to implement interactive web pages without relying on JavaScript , maximizing maintainability and reusability.

The main topics covered in this section are:

• Developing HTML5 Web Frontends Without JS : Learn how to build interactive web pages using HTML5 without JavaScript.

• Developing Components Using Django Templates : Learn how to develop reusable components based on Django templates, and learn ways to increase consistency and maintainability within your project.

• Developing components using the django-components library : Let's implement components that support better modularization and reusability using the django-components library.

  
  

Section (11) (Photolog Project) Developing Django-centric web services

"""You will gain experience in building an actual web service by combining various libraries of Django, implement various functions that can be applied in practice, and acquire full-stack web development skills centered on Django."""

We will develop a photolog web service centered on Django, and utilize the powerful functions that Django provides as a full-stack web framework rather than a simple API . Starting from project creation and initial settings, we will gradually complete the actual service from the ground up, while drawing out the synergy between Django and various libraries.

The main topics covered in this section are:

• The ultimate synergy with Django and django-crispy-forms, htmx

• Implementing multiple image uploads : Let's implement a user-friendly image upload environment by adding the ability to upload multiple images at once.

  
  

• Image Optimization Using Pillow Library : In Python, you can easily perform various image processing using the Pillow library. It is also easy to install. We will cover optimization methods that reduce image size by up to 98% by resizing and converting images to JPEG using the Pillow library.

• Tag support with the django-taggit library : Add tag functionality to effectively categorize and search content.

• Develop various components : Develop components such as modal-form, image-overlay, and carousel to provide interactive user experiences.

• Implementing comments by actively utilizing HTMX and modals : Develop comment functions efficiently and improve the user interface by actively utilizing HTMX and modals.

• Implementing user following : By implementing a user-to-user follow function, we complete the photolog service with basic social functions.

Section (12) Deploying Django Services on a Linux Virtual Machine

"""You will learn the techniques to safely deploy Django services to a Linux environment and acquire the ability to build and manage an actual service operation environment on AWS Lightsail infrastructure."""

Since most web services are operated in a Linux environment , Linux-based deployment and server management skills are essential capabilities for web developers. In this section, you will learn the settings and architecture configurations for stable deployment of Django services in an actual operating environment.

Although this course focuses on AWS Lightsail, the setup and deployment methods you learn can be applied to other Linux server environments in almost the same way .

The main topics covered in this section are:

• Setting up a local network : This covers how to connect to a development server from devices such as mobile phones during the development phase without deploying to an external server. This will help you learn how to test in a local network environment and easily check on various devices during development.

• Service Architecture : Introduces the basic architecture of web service deployment and understands server configuration and role division.

• Deploying Django Services on Ubuntu Linux Virtual Machines

  • Learn how to install the latest version of Python, 3.12, and set up your deployment environment.

  • Reverse proxying and serving static files with nginx: Learn how to effectively distribute web traffic based on web requests with nginx.

  • Error Log and Administrator Email Sending: Learn how to set up an administrator email so that administrators can quickly recognize service errors.

  • Error logging service Sentry: Integrates with error tracking service Sentry to improve service manageability through real-time monitoring.

    
    

• Deployment using Amazon Lightsail virtual machines and databases: Build a stable deployment environment based on AWS.

  
  

Section (13) Creating a productive web API using django-rest-framework

"""You will gain a comprehensive understanding of the features of django-rest-framework and acquire the practical skills to build efficient and productive web APIs."""

A widely used library for developing web APIs in Django is django-rest-framework (hereinafter referred to as DRF). Learn how to develop highly productive web APIs using DRF. Just as Django provides various functions optimized for web page development , DRF systematically supports functions required for web API development, reducing repetition and effectively helping build web APIs.

The main topics covered in this section are:

1. APIView : Understand the basic structure and operation of APIView, which is the core of API request processing.

2. Mixin : A feature that utilizes class inheritance syntax, allowing you to combine multiple DRF APIViews to support various scenarios with code close to the configuration . Learn how to increase code reusability and easily add common functions.

3. ModelViewSet : A comprehensive gift set of CRUD (create/query/edit/delete) API implementations, allowing you to freely combine and use the CRUD functions you need. We will look at the inheritance process and learn how to easily implement various functions with various inheritance combinations.

4. Renderer : API servers need responses in JSON format as well as images, Excel files, PDFs, etc. Just as documents with the same content need to be in Excel, Word, Word, and Hangul formats depending on the situation. Learn how to make API responses in various formats with high reusability through DRF Renderer.

5. Serializer : The role of Django Form is handled by the serializer. Learn how to efficiently handle data validation and conversion.

6. Authentication and Authorization : Learn authentication and authorization, which teaches API security, and implement user access control.

7. pytest Testing : Learn how to test APIs using pytest and verify that the API works as intended.

8. Pagination : Data in a database table is not retrieved all at once. It is retrieved in page units by specifying a page size. Let’s look at the three pagination methods supported by DRF.

   
   

Section (14) Session Authentication for Web APIs

"""You will understand session authentication methods suitable for web APIs and gain practical skills to implement authentication efficiently."""

Many people think that JWT authentication should be used for web APIs, but JWT authentication has more disadvantages than advantages, so session authentication is a more stable and suitable choice in actual operating environments . Learn how to increase security and efficiency in API requests through session authentication provided by default in Django.

If you use session authentication, you don't need to implement functions such as login when developing a React SPA (Single Page Application). Use the functions already implemented in Django and focus on implementing your business .

The main topics covered in this section are:

• Session Authentication vs. JWT Authentication : Compare the pros and cons of session authentication and JWT authentication to understand which authentication method is right for your web API.

  
  

• Designing to leverage session authentication in web API requests : Learn design methods to securely handle web API requests from a React SPA (Single Page Application) by leveraging session authentication.

• Django/Next.js Integration and Authentication Using Session Cookies : We will look at how to integrate Django and Next.js to utilize session authentication without JWT.

Section (15) Learn React and Create Django Template Components with React (Based on React v18)

"""Learn the core concepts of React and learn how to use them to implement Django template components that can be used in Django templates."""

React is simply a UI library , and using React does not necessarily mean that your front-end must be built as a Single Page Application.

React is a powerful front-end technology, but its development cost is high . And there are probably more than 80% of the service's functions that do not necessarily require React . Rather than using React for all the development of functions, if you apply React technology only to core functions (even core functions may not need React), and actively utilize Django-centric front-end technologies to make time to polish those core functions, you can make enough time and implement most functions . The biggest cost is time.

From this perspective, we designed this section to help backend developers understand React technology and use it appropriately only for the functions that require it.

• Creating a React project using CRA and Parcel bundlers

• Pure Functions and JSX : Learn the concept of pure functions, which are the core of React components, and how to create declarative UIs using JSX.

  
  

• State, Attributes, and Event Handling : Learn how to manage state using state and attributes in React, and handle user interactions as events.

• How to Write Component CSS : Learn how to add styles to your components using Modules and Sass.

• Handling immutable objects easily using immer : Handling immutable objects is essential in React. Handling immutable objects is cumbersome with only basic JS functions. Learn how to handle immutable values easily using immer.

  
  

• Fold pattern, reducers, and global state management : As React components take up a larger portion of the page, managing global state becomes essential. Learn about reducers as one way to efficiently handle global state management.

• Web API request using Axios : You can send HTTP requests via the fetch API in the web basics, but let's look at how to make a web API request using the Axios library, which has various convenient functions enhanced.

• Creating SPA with Router : In a Single Page Application, you inevitably need to show multiple screens depending on the request URL. Let’s learn how to show different React components depending on the request URL by utilizing the React Router library.

• Creating Django Template Components with React : Since React is just a UI library, it can be used anywhere on a web page. Learn how to create React components that can be used in Django templates.

Section (16) Creating a Django/React Hybrid Service

"""By integrating the previously developed Django project and React application, we will implement a flexible and efficient web application while taking advantage of each other's strengths."""

Designing forms in React , managing field status, and handling error messages are tasks that require a lot of man-hours of development . If a complex form is required, it can be handled in React, but in most cases, utilizing Django's Form function can greatly reduce development man-hours.

In this section , you will learn how to implement modal forms in React by simply specifying an address, using Django forms depending on the situation, and learn how to maximize the harmony between Django and React.

Here are the main topics covered in each section:

• To-do List CRA Application with API : Implement a to-do list management feature by combining Django's API and React application. This will help you understand the structure of how the backend and frontend are organically connected.

• Implementing a ToDo modal form in a Django/React hybrid way

  • Implement modal forms by integrating React and Django forms. In particular, by completing the form by only specifying the Django form page address in React, you can maximize the productivity of Django forms while utilizing React's interactive UI.

Section (17) Cache API

"""Understand Django's various caching strategies and learn practical ways to use cache to optimize service performance."""

Learn how to use Django's cache API to reduce database load and increase service response speed . Cache is a great help in efficiently processing data requests, shortening response time and saving system resources.

However, cache is a "double-edged sword" , and if it is not properly managed, it can reduce the freshness of data and cause unexpected problems. It is time to understand the potential risks of cache while effectively utilizing it.

The main topics covered in this section are:

• Leveraging the Caching Low-Level API : Understand the basic behavior of caching by using Django's low-level cache API.

• Different caching backends (memory, memcached, redis): Compare different cache backends to find out their pros and cons.

• Analyzing the logic that constitutes a caching key : Learn how to optimize the hit rate of your cache by analyzing the logic that constitutes a caching key.

• Verifying cache with django-debug-toolbar : Learn how to verify internal caching behavior and debug problems with django-debug-toolbar.

• How to increase cache hit rate by sorting query parameters with the same value but different order : Query parameters with the same value but different order are stored in different cache locations. Learn how to increase cache hit rate by sorting query parameters.

• How to bulk delete caches using Redis and django-redis cache backend : Learn how to efficiently bulk delete caches with large amounts of data or that meet specific conditions using the Redis and django-redis libraries.

• How to clear the template cache : Learn how to manually clear the template cache, so you can respond quickly when a cache refresh is required.

Section (18) Deploying Django/React Services on a Linux Virtual Machine

"""Learn the technology to reliably deploy a full-stack application combining Django and React to a Linux environment, and acquire overall deployment capabilities including security and domain settings required for actual service operation."""

Learn how to deploy a Django web service and a React SPA frontend together using AWS Lightsail infrastructure.

The main topics covered in this section are:

• Separate environment variables for development/deployment : Learn how to manage environment variables appropriate for deployment by separating the settings required depending on the environment.

• Easy and simple server deployment with deployment script : Learn how to deploy to servers easily and simply by writing a deployment script that automates server deployment tasks.

• How to set up CRA deployment files in nginx : Learn how to deploy React applications reliably by setting up nginx to serve React files built with Create React APP (CRA).

• Subdomain support for learning : A domain is essential for service operation. Even if you do not have a domain, we support a domain that can be used for learning purposes.

• Link HTTPS certificates and domains : Strengthen security by applying HTTPS certificates and link them to domains to complete a production-level deployment environment.