Forem: Gahyun Son

useContext vs Redux toolkit

Gahyun Son — Sun, 02 Mar 2025 14:19:59 +0000

I'm a newbie in Redux and React. Recently I've been developing a project with React, and I'm working on structuring the user authentication API and managing user information using Redux. I need to deepen my knowledge of Redux and React because it's quite challenging for a beginner.
I found an article about Handling global state. This article introduces various options for managing global state.
One of things that I wanted to explore was the 'context'. Below are some simple code examples to check the difference between React context and Redux.

useContext (React)

Declaring the Context.

First, I declare a context using createContext. It is the default value. And you can set a value with useState if you want(If you don't declare value then default value will be used)

const ThemeContext = createContext('light');

const Main = () => {
  const [theme, setTheme] = useState('light');

Providing a value in ThemeContext.Provider. 'theme' or everything is good. but if you need a dynamic value, you should use useState.

<ThemeContext.Provider value={'theme'}>

Using Global state? In this case, accessing {theme} inside the Panel component works well. Because Panel is a child of Main. I tried changing the value, and it updated correctly on screen.

function Panel({ title, children }) {
  const theme = useContext(ThemeContext);
  const className = 'panel-' + theme;
  return (
    <section className={className}>
      <h1>{title} and {theme}</h1>
      {children}
    </section>
  )
}

I'd tried here too. The initial value was displayed correctly, but when i tried changing it on screen, it didn't update. This happens because Test is not relevant with Main or Panel anything (not within the ThemeContext.Provider). So it only show us the default value or initial value.

function Test() {
  const theme = useContext(ThemeContext);
  return (
    <p>This is {theme}</p>
  )
}

Redux toolkit

I used Redux toolkit, It's very simple calling global state.

const count = useSelector(state => state.counter.value)

You just add it to a component.
The components don't have to have a relevant. You don't have to pass a prop.
I could see the changing value when I click the button everywhere I insert above code.

So some articles say React Context is not for managing global state. OK I understand now. If I try to use react context as managing global state, I will have headache. I'm so happy that I'm using Redux.

Add URLs to the list on the Admin Page Index.

Gahyun Son — Sat, 14 Dec 2024 13:27:58 +0000

In this post, I'll show you how to add a custom view URL to the list on the admin page index.
Here's what the result will look like:

I added a custom list to the index to apply the CSS style of the Django admin page.

Overriding 'app_list.html'

Step 1. Create the Template Directory

Create a directory /templates/admin in your Django Project. And create a file app_list.html in the directory.
The structure will look like below.

Django-Project
├── Dockerfile
├── README.md
├── app
│   ├── projectname
│   ├── core
│   ├── manage.py
│   ├── appname1
│   ├── templates
│   │   └── admin
│   │       ├── app_list.html
│   └── appname2

Step 2. Find the Original `app_list.html`

Visit the Django GitHub repository.
Search for the 'app_list.html' file.

Step 3. Copy the Original Code

Copy the entire content of the 'app_list.html' file.

Step 4. Paste the Code into Your file

Paste the copied codes into your app_list.html file.

Step 5. Locate the Insertion Point

Let's see where could we insert our codes.

{% load i18n %}

<!-- Insert your codes HERE! -->
{% if app_list %}
  {% for app in app_list %}
    <div class="app-{{ app.app_label }} module{% if app.app_url in request.path|urlencode %} current-app{% endif %}">
      <table>
        <caption>
          <a href="{{ app.app_url }}" class="section" title="{% blocktranslate with name=app.name %}Models in the {{ name }} application{% endblocktranslate %}">{{ app.name }}</a>
        </caption>
        <thead class="visually-hidden">
          <tr>
            <th scope="col">{% translate 'Model name' %}</th>
            <th scope="col">{% translate 'Add link' %}</th>
            <th scope="col">{% translate 'Change or view list link' %}</th>
          </tr>
        </thead>

Step 6. Add Your Custom Code

I add codes like below. Be mindful of the class names and tags to ensure proper styling and functionality.

{% load i18n %}


<div class="module">
    <table>
        <caption>
            <a href="#" class="section" title="new-table">{% translate 'Custom Admin View' %}</a>
        </caption>
        <thead>
            <tr>
                <th scope="col">{% translate 'Create API List' %}</th>
                <th scope="col">.</th>
                <th scope="col">.</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <th scope="row">
                    <a href="{% url 'my-api' %}">Custom Admin View</a>
                </th>
                <th scope="row"><a>.</a></th>
                <th scope="row"><a>.</a></th>
            </tr>
        </tbody>
    </table>
  </div>
  {% if app_list %}
  {% for app in app_list %}

Django API | queryset & object, filter() & get()

Gahyun Son — Thu, 28 Nov 2024 09:36:53 +0000

I tried this unittest.

    def test_price_of_photo_list(self):
        photo1 = create_photos()
        create_prices(photo1)

        url = detail_url(photo1.id)
        res = self.client.get(url)

        self.assertEqual(res.status_code, status.HTTP_200_OK)

and I got an error.

TypeError: 'Photos' object is not iterable

First, Let's go to the views.py.

class PhotoDetailView(generics.ListAPIView):
    serializer_class = PhotoDetailSerializer

    def get_queryset(self):
        queryset = Photos.objects.get(id=self.kwargs['photo_id'])
        return queryset

I wrote a Photo object. It could be cause.

.get(): returns a object.
.filter(): returns a queryset.

OK. We can't return a object to run. Then why?

ListAPIView expects a queryset. (not a object)
In documents,

ListAPIView
Used for read-only endpoints to represent a collection of model instances.
Provides a get method handler.
Extends: GenericAPIView, ListModelMixin

Move to GenericAPIView and ListModelMixin.

GenericAPIView
This class extends REST framework's APIView class, adding commonly required behavior for standard list and detail views.
Each of the concrete generic views provided is built by combining GenericAPIView, with one or more mixin classes.
Attributes
Basic settings:
The following attributes control the basic view behavior.
queryset - The queryset that should be used for returning objects from this view. Typically, you must either set this attribute, or override the get_queryset() method. If you are overriding a view method, it is important that you call get_queryset() instead of accessing this property directly, as queryset will get evaluated once, and those results will be cached for all subsequent requests.

ListModelMixin
Provides a .list(request, *args, **kwargs) method, that implements listing a queryset.
If the queryset is populated, this returns a 200 OK response, with a serialized representation of the queryset as the body of the response. The response data may optionally be paginated.

As you can see two api expect queryset. Then what I can modify?

.filter(): returns a queryset.

Let's change the method to filter.

class PhotoDetailView(generics.ListAPIView):
    serializer_class = PhotoDetailSerializer

    def get_queryset(self):
        queryset = Photos.objects.filter(id=self.kwargs['photo_id'])
        return queryset

Wow, it works! I'm happy

AssertionError: 403

Gahyun Son — Thu, 28 Nov 2024 08:49:23 +0000

The error messages.

apple@GH-MacBook-Pro hyunphoto-cbv % docker compose run --rm app sh -c "python manage.py test"
[+] Creating 1/0
 ✔ Container hyunphoto-cbv-db-1  Running                                                                                             0.0s 
Creating test database for alias 'default'...
System check identified no issues (0 silenced).
..............FFFWaiting for database...
Database unavailable, wating 1 second ...
Database unavailable, wating 1 second ...
Database unavailable, wating 1 second ...
Database unavailable, wating 1 second ...
Database unavailable, wating 1 second ...
Database available!
.Waiting for database...
Database available!
.
======================================================================
FAIL: test_signup_user_exist_error (user.tests.test_user_api.PublicUserApiTests)
Test signup a user is fail, email already exists.
----------------------------------------------------------------------
Traceback (most recent call last):
  File "/app/user/tests/test_user_api.py", line 47, in test_signup_user_exist_error
    self.assertEqual(res.status_code, status.HTTP_400_BAD_REQUEST)
AssertionError: 403 != 400

======================================================================
FAIL: test_signup_user_password_short_error (user.tests.test_user_api.PublicUserApiTests)
Test signup a user is fail, password is too short.
----------------------------------------------------------------------
Traceback (most recent call last):
  File "/app/user/tests/test_user_api.py", line 58, in test_signup_user_password_short_error
    self.assertEqual(res.status_code, status.HTTP_400_BAD_REQUEST)
AssertionError: 403 != 400

======================================================================
FAIL: test_signup_user_success (user.tests.test_user_api.PublicUserApiTests)
Test creating/signup a user is successful.
----------------------------------------------------------------------
Traceback (most recent call last):
  File "/app/user/tests/test_user_api.py", line 32, in test_signup_user_success
    self.assertEqual(res.status_code, status.HTTP_201_CREATED)
AssertionError: 403 != 201

----------------------------------------------------------------------
Ran 19 tests in 8.604s

FAILED (failures=3)
Destroying test database for alias 'default'...

The causes can be

views.py
serializers.py
something else

It was my views.py code.

class CreateUserView(generics.ListCreateAPIView):
    serializer_class = UserSerializer

I couldn't believe this situation. Because it worked very well yesterday. I don't know why it doesn't work but I have to figure out.

I have suspicion to permission.

I modified views.py and

class CreateUserView(generics.CreateAPIView):
    serializer_class = UserSerializer
    permission_classes = [AllowAny]

It fixed.

----------------------------------------------------------------------
Ran 19 tests in 8.788s

OK
Destroying test database for alias 'default'...

I just... still have a question... Why it worked yesterday...?

extra_kwargs arguments

Gahyun Son — Wed, 27 Nov 2024 12:39:21 +0000

I want to set up minimum length to password value. I looked for this argument but just got confused. Here is my steps to understand.

Where is the code defined the password?

I didn't define the password in the User model. I set up on serializer.

class UserSerializer(serializers.ModelSerializer):
    class Meta:
        model = get_user_model()
        fields = ['name', 'email', 'password']
        extra_kwargs = {'password': {'write_only': True}}

If I want to set the password minimum length,

I think extra_kwargs is also a kind of field. And you can see the documentation.

|There is also a shortcut allowing you to specify arbitrary additional keyword arguments on fields, using the extra_kwargs option.

It means extra_kwargs is a option to set arguments on fields.
So we need to see how to set arguments on fields.

Serializer fields

So we are here. As you can see here documentation,

There are common arguments - Core arguments.
And we can see arguments each field types.

I want to set minimum length of password, it belongs to Charfield. Let's go to the Charfield list.

Signature: CharField(max_length=None, min_length=None, allow_blank=False, trim_whitespace=True)

CharField

Now I find min_length argument! I'm going to set this on my code!

class UserSerializer(serializers.ModelSerializer):
    class Meta:
        model = get_user_model()
        fields = ['name', 'email', 'password']
        extra_kwargs = {'password': {'write_only': True, 'min_length': 5}}

It's hard to comprehend the documents right away. But we just need time, we can solve it!
Now I'm happy!

Docker error: port is already allocated

Gahyun Son — Tue, 26 Nov 2024 07:12:21 +0000

Where is the port allocated?

I got an error message when I tried docker compose up.

docker compose up
Attaching to app-1
Gracefully stopping... (press Ctrl+C again to force)
Error response from daemon: driver failed programming external connectivity on endpoint hyunphoto-cbv-app-1 (876c605de16e8d99e9e1b806de): Bind for 0.0.0.0:8000 failed: port is already allocated

What did I do before?
I remembered that I had run a project on Docker earlier. That could be cause. Then, how we could check it?

I checked by two steps.
First. Command docker compose down what I ran the project before. I could get the info which container is still running.

! Network hyunphoto-fbv_default  Resource is still in use                                            0.0s

Second. Command docker network inspect hyunphoto-fbv_default.

[
    {
        "Name": "hyunphoto-fbv_default",
        "Id": "eee2041694529e233c352c6e314",
        "Created": "2024-11-15T14:15:07.24638069Z",
        "Scope": "local", # this network works only in local.
        "Driver": "bridge", # Docker network type. 
        "EnableIPv6": false,
        "IPAM": {
            "Driver": "default",
            "Options": null,
            "Config": [
                {
                    "Subnet": "172.20.0.0/16", # IP address of this network.
                    "Gateway": "172.20.0.1" # Gateway IP of this network.
                }
            ]
        },
        "Internal": false,
        "Attachable": false,
        "Ingress": false,
        "ConfigFrom": {
            "Network": ""
        },
        "ConfigOnly": false,
        "Containers": { # This container is running.
            "20ea5e895019ac3279ce5009a6": {
                "Name": "hyunphoto-fbv-proxy-1", 
                "EndpointID": "5b86698bc46027072001506a1cd",
                "MacAddress": "02:42:ac:14:00:04", # Mac address allocated to the network interface of a container.
                "IPv4Address": "172.20.0.4/16", # IPv4 address allocated to a container.
                "IPv6Address": ""
            }
        },
        "Options": {},
        "Labels": {
            "com.docker.compose.network": "default", 
            "com.docker.compose.project": "hyunphoto-fbv", # Docker compose project name to which this network belongs.
            "com.docker.compose.version": "2.29.2" # Docker Compose version that created the network.
        }
    }
]

Now I know the container that I have to stop.
Solution.

docker stop hyunphoto-fbv-proxy-1

And I can see there is no a container.

apple@GH-MacBook-Pro hyunphoto-fbv % docker network inspect hyunphoto-fbv_default

[
    {
        "Name": "hyunphoto-fbv_default",
        "Id": "eee2041694529e233c352c6e3140aee457c6a33b468b92a33327fd1d39dff5bf",
        "Created": "2024-11-15T14:15:07.24638069Z",
        "Scope": "local",
        "Driver": "bridge",
        "EnableIPv6": false,
        "IPAM": {
            "Driver": "default",
            "Options": null,
            "Config": [
                {
                    "Subnet": "172.20.0.0/16",
                    "Gateway": "172.20.0.1"
                }
            ]
        },
        "Internal": false,
        "Attachable": false,
        "Ingress": false,
        "ConfigFrom": {
            "Network": ""
        },
        "ConfigOnly": false,
        "Containers": {}, # HERE!
        "Options": {},
        "Labels": {
            "com.docker.compose.network": "default",
            "com.docker.compose.project": "hyunphoto-fbv",
            "com.docker.compose.version": "2.29.2"
        }
    }
]

Reflection on Using TDD (Test Driven Development)

Gahyun Son — Mon, 25 Nov 2024 16:12:36 +0000

When creating an API, if the input and output are not clearly defined, confusion can arise during the development process. This is why writing an API document is important, and I believe TDD is a technical version of the document.

At first, I questioned why we needed to write unit tests when the API documentation was already available. However, after applying TDD, I realized how effective this approach is.

Development is the process of building a system based on the plans we've created. Through TDD, I realized that it allows us to implement features more efficiently by sticking to the structure of the plan. Rather than developing all features first and then running tests to fix errors, writing tests upfront and addressing errors one by one as we develop the features saves both time and addressing errors one by one as we develop the features saves both time and energy.

Develop API -> Test -> Find Error! -> Fix -> ...
Test -> Find Error!(no API, no model... things haven't been developed yet...) -> Fix it(create Model, API...install...) -> ...

I think TDD is a technique for minimizing mistakes and staying on track throughout the development process.

Error response from daemon: driver failed programming external connectivity on endpoint

Gahyun Son — Fri, 15 Nov 2024 13:44:14 +0000

I just tried to open the page with docker compose up,
And I got an error message.

Error response from daemon: driver failed programming external connectivity on endpoint hyunphoto-fbv-app-1 (docker container ID): Bind for 0.0.0.0:8000 failed: port is already allocated

I ran another project on docker & AWS EC2, and 'already' word is led me check docker container list.

apple@GH-MacBook-Pro recipe-app-api % docker ps -a
[+] Running 1/0
 ! Network recipe-app-api_default  Resource is still in use                                              0.0s 
apple@GH-MacBook-Pro recipe-app-api % docker network ls

and I saw one thing is suspicious.

CONTAINER ID   IMAGE                             COMMAND                  CREATED          STATUS                        PORTS     NAMES
container_id   recipe-app-api-proxy              "/docker-entrypoint.…"   29 hours

If STATUS is 29 hours ago, it means the container doesn't work. but 29 hours means still works.

Let's stop it.

docker stop container_id

Now, I'll re-run docker compose up where we want to run.
It works very well.

Simple things to design URL

Gahyun Son — Mon, 11 Nov 2024 14:31:38 +0000

How to design URL?

URLs should include nouns, not verbs.
User plural nouns only for consistency (no singular nouns).
Use HTTP methods (HTTP/1.1) to operate on these resources:
Use HTTP response status codes to represent the outcome of operations on resources.

URI normalization

To transform a URI into a normalized URI have a Goal:

The normalization is possible to determine if two syntactically different URIs may be equivalent.

Converting percent-encoded triplets to uppercase.

http://example.com/foo%2a → http://example.com/foo%2A
Converting the scheme and host to lowercase.

HTTP://User@Example.COM/Foo → http://User@example.com/Foo
Decoding percent-encoded triplets of unreserved characters. Percent-encoded triplets of the URI in the range of ALPHA, DIGIT, hyphen, period, underscore, or tilde ... should be decoded ...

http://example.com/%7Efoo → http://example.com/~foo
Removing dot-segment.

http://example.com/foo/./bar/baz/../qux → http://example.com/foo/bar/qux
Converting an empty path to a "/" path.

http://example.com → http://example.com/
Removing the default port.

http://example.com:80/ → http://example.com/

Reference [HTTP: The Definitive Guide]

If you want to analyze simply, use ProfileReport

Gahyun Son — Wed, 30 Oct 2024 05:52:15 +0000

If you don't know how to analyze with code or don't have a time, you can simply use ProfileReport library.

The steps is very simple too.

Install
pip install ydata-profiling
Import and use it

import pandas as pd
import numpy as np

from ydata_profiling import ProfileReport

df = pd.read_csv('data.csv')
report = ProfileReport(df, title='Data analysis')
report.to_file("Data_report.html")

It will be stored as 'Data_report.html'.

It automatically report these things.

Information of the data
Type of the variable
Count None value
Descriptive statistic of the variables
Correlation each of the variables
Visualization of the analysis (auto adjusted type of graph)
etc.

It was very helpful to write a report quickly.

Understanding Response Status Codes in Django REST Framework

Gahyun Son — Thu, 24 Oct 2024 10:54:22 +0000

When returning a response with data, you can omit the status parameter name if you're using HTTP_200_OK.

return Response(serializer.data, status.HTTP_200_OK)

However, when returning a response without data, simply passing the status code without the parameter name won't work as expected.

return Response(status.HTTP_204_NO_CONTENT)

You must explicitly specify the status parameter name.

return Response(status=status.HTTP_204_NO_CONTENT)

unittest with get_user_model()

Gahyun Son — Wed, 23 Oct 2024 11:18:16 +0000

1. Custom User model

In Django, you can override the user model provided by Django.

AbstractUser. 2. AbstractBaseUser.

I chose AbstractBaseUser. Below code is a my custom user.

I defined in /djangoproject/app/core/models.py
(I'm going to write all models on this file.)

from django.db import models

from django.contrib.auth.models import (
    AbstractBaseUser,
    BaseUserManager,
    PermissionsMixin,
)


class User(AbstractBaseUser, PermissionsMixin):
    name = models.CharField(max_length=255)
    email = models.EmailField(max_length=255, unique=True)
    company = models.CharField(max_length=100, blank=True, null=True)
    address = models.TextField(max_length=200, blank=True, null=True)
    address2 = models.TextField(max_length=200, blank=True, null=True)
    city = models.CharField(max_length=50, blank=True, null=True)
    nation = models.CharField(max_length=100, blank=True, null=True)
    postal = models.CharField(max_length=30, blank=True, null=True)
    phone = models.CharField(max_length=16, blank=True, null=True)

    is_active = models.BooleanField(default=True)
    is_staff = models.BooleanField(default=False)

    objects = UserManager()

    USERNAME_FIELD = 'email'

I made UserManager too, but I haven't included it here for brevity.

Setting AUTH_USER_MODEL in settings.py

AUTH_USER_MODEL = 'core.user'

Add it to settings.py. The value is a my custom user model.

Creating unittest a file. /djangoproject/app/core/tests/test_model.py

class ModelTests(TestCase):
    def test_create_user_with_email_successful(self):
        email = 'test@example.com'
        password = 'test123test'
        user = get_user_model().objects.create_user(
            email=email,
            password=password
        )

        self.assertEqual(user.email, email)
        self.assertTrue(user.check_password(password))

I checked whether the email is correctly saved in the database and whether the password is properly validated.
There are two ways to reference the custom user model.
Direct import user model.

from core import models

User = models.User
user = User.objects.create_user(...)

It works, but if the AUTH_USER_MODEL setting is later changed to a different user model, you'll need to update all instances to the changed model.

Import get_user_model().

from django.contrib.auth import get_user_model

user = get_user_model().objects.create_user(...)

get_user_model returns the currently active user model. It will work without requiring code modifications.