라이브스마트

Django는 웹 애플리케이션 개발을 위한 고급 파이썬 웹 프레임워크입니다. 주로 개발자들이 빠르게 깨끗하고 실용적인 웹 사이트를 생성할 수 있도록 돕기 위해 설계되었습니다. Django는 강력한 성능과 뛰어난 확장성 덕분에 많은 대기업 및 스타트업에서 널리 사용되고 있습니다. 이 글에서는 Django의 정의, 주요 특징 및 장점을 폭넓게 살펴보겠습니다.

Django란 무엇인가?

Django는 2003년에 처음 개발되어 2005년에 공개된 이후로 세계적으로 널리 사용되고 있는 오픈 소스 웹 프레임워크입니다. Django는 MTV(Model-Template-View) 아키텍처를 기반으로 하며, 이를 통해 웹 개발을 쉽고 효율적으로 수행할 수 있습니다. Django의 주된 목적은 반복적이고 표준적인 작업을 최소화하여 개발자가 보다 빠르게 웹 애플리케이션을 구축할 수 있게 돕는 것입니다.

MTV 아키텍처란?

MTV 아키텍처는 Django의 주요 구조를 설명하는 패턴으로, 다음과 같은 세 가지 구성 요소로 이루어져 있습니다:

• 모델(Model): 데이터 구조 및 데이터베이스와 상호작용을 담당합니다. Django의 ORM(Object-Relational Mapping)을 통해 데이터베이스를 쉽게 다룰 수 있습니다.
• 템플릿(Template): 사용자에게 보여질 내용을 정의하며, HTML과 Django 템플릿 언어를 결합하여 동적인 웹 페이지를 생성합니다.
• 뷰(View): 요청을 처리하고 응답을 생성하는 로직을 포함합니다. 뷰는 모델과 템플릿을 조합하여 최종적인 결과를 만듭니다.

Django의 주요 특징

Django는 특정한 특징들을 가지고 있어 개발자들이 효율적으로 작업할 수 있게 해줍니다. 이 특징들은 다음과 같습니다:

1. 빠른 개발 속도

Django는 “빠른 개발”을 강조합니다. Django의 프레임워크는 여러 가지 세팅을 필요로 하지 않으며, 개발자가 프로젝트에 집중할 수 있는 환경을 제공합니다. 그 결과, 최소한의 노력으로 최대한의 결과를 이끌어낼 수 있습니다.

2. 보안

Django는 개발자가 흔히 저지를 수 있는 보안 문제들을 예방하기 위해 여러 가지 보안 기능을 내장하고 있습니다. 예를 들어, CSRF(Cross-Site Request Forgery) 보호, SQL 인젝션 방지, XSS(Cross-Site Scripting) 방지 등이 있습니다. Django는 보안 관련하여 지속적으로 업데이트되며, 최상의 보안을 유지하도록 노력합니다.

3. 어드민 패널

Django는 기본적으로 제공되는 강력한 어드민 패널을 가지고 있어, 데이터베이스 관리를 손쉽게 할 수 있습니다. 이 기능은 관리자가 데이터베이스의 데이터를 추가하거나 수정을 쉽게 할 수 있도록 도와줍니다.

4. 확장성

Django는 대규모 애플리케이션을 지원하도록 설계되었습니다. 추가 기능을 쉽게 통합할 수 있어 확장이 용이하며, 수많은 서드파티 패키지를 사용하여 기능을 추가할 수 있습니다.

5. 커뮤니티와 생태계

Django는 거대한 커뮤니티를 갖고 있어, 다양한 리소스와 문서, 튜토리얼들이 많이 제공됩니다. Django의 커뮤니티는 애플리케이션 개발뿐만 아니라 문제 해결에도 큰 도움을 줍니다.

6. RESTful API 지원

Django는 RESTful API를 만들기 위한 Django REST Framework와 같은 라이브러리를 지원합니다. 이를 통해 애플리케이션 간의 데이터 통신을 원활하게 구성할 수 있습니다.

Django의 장점

Django의 장점은 다음과 같습니다:

1. 빠른 프로토타입 제작

Django는 여러 기본 설정과 기능을 제공하여 개발자가 빠르게 프로토타입을 제작할 수 있게 합니다. 이는 스타트업이나 신속한 검증이 필요한 프로젝트에 유리합니다.

2. 높은 생산성

Django는 사용자가 최소한의 코드를 작성하더라도 뛰어난 기능을 활용할 수 있게 해줍니다. 이는 개발자가 보다 많은 프로젝트를 동시에 진행할 수 있도록 합니다.

3. 유지보수 용이성

Django 프로젝트는 구조가 잘 설계되어 있어, 유지보수가 쉽습니다. 또한 Django는 다양한 버전을 지원하므로, 관리가 용이합니다.

4. 모듈화와 재사용성

Django의 구성 요소들은 서로 독립적으로 작동하기 때문에, 필요한 기능만 선택적으로 사용할 수 있습니다. 이는 모듈화와 코드 재사용성을 높이는 큰 장점입니다.

예제: 간단한 Django 프로젝트 만들기

이제 Django 프로젝트를 간단히 만들어 보겠습니다. 아래의 단계에 따라 Django의 설치 및 기본 설정을 진행합니다.

1. Django 설치하기

pip install django

2. Django 프로젝트 생성

django-admin startproject myproject

이 명령어는 myproject라는 이름의 새 디렉토리를 생성합니다.

3. 애플리케이션 생성

cd myproject
django-admin startapp myapp

4. 모델 작성

이제 myapp/models.py에서 모델을 정의해 보겠습니다.

from django.db import models

class Article(models.Model):
    title = models.CharField(max_length=100)
    content = models.TextField()
    pub_date = models.DateTimeField(auto_now_add=True)

    def __str__(self):
        return self.title

5. 마이그레이션 수행

python manage.py makemigrations
python manage.py migrate

6. 어드민 패널에 모델 추가

myapp/admin.py에 모델을 등록합니다.

from django.contrib import admin
from .models import Article

admin.site.register(Article)

7. 서버 실행

python manage.py runserver

이제 http://127.0.0.1:8000/admin에 접속하여 Django의 어드민 패널에서 데이터를 관리할 수 있습니다.

결론

Django는 높은 생산성과 빠른 개발 속도를 자랑하는 프레임워크로, 웹 애플리케이션 개발에 적합합니다. 이 프레임워크는 강력한 기본 제공 기능과 굉장히 풍부한 생태계 덕분에 다양한 요구 사항을 충족할 수 있습니다. Django의 커뮤니티 또한 활발하여, 학습 자료나 문제 해결을 위한 정보가 풍부하므로, 웹 개발에 입문하는 데에 매우 유용합니다.

Django를 통해 웹 애플리케이션 개발의 세계에 발을 내딛어 보세요. 이 강력한 도구가 여러분의 개발 여정을 풍요롭게 만들어 줄 것입니다.

Django는 파이썬 기반의 강력한 웹 프레임워크로, 웹 애플리케이션을 신속하게 개발할 수 있도록 다양한 기능을 제공합니다. 이번 강좌에서는 Django 서버를 개발하고, 도메인을 설정하며 HTTPS를 적용하는 방법에 대해 자세히 알아보겠습니다.

1. Django 서버 개발 환경 구축하기

Django 서버를 구축하기 위해 먼저 필요한 개발 환경을 설정해야 합니다. 주요 단계는 다음과 같습니다.

1.1. 파이썬 설치

Django는 Python 3.6 이상에서 실행됩니다. 따라서 Python이 설치되어 있는지 확인하고, 설치되어 있지 않다면 공식 웹사이트(python.org)에서 다운로드하여 설치합니다.

1.2. Django 설치

Python이 설치되었다면, pip를 사용하여 Django를 설치할 수 있습니다. 터미널 또는 커맨드 프롬프트를 열고 다음 명령어를 입력합니다.

pip install django

1.3. Django 프로젝트 생성

Django가 설치되었다면, 이제 새로운 프로젝트를 생성할 수 있습니다. 다음 명령어로 ‘myproject’라는 이름의 Django 프로젝트를 생성해봅시다.

django-admin startproject myproject

2. 도메인 설정하기

Django 프로젝트를 배포하기 위해 도메인을 설정해야 합니다. 여기서는 DigitalOcean, AWS, Heroku 등에서 도메인을 설정할 수 있는 방법을 다룰 것입니다. 이 강좌에서는 DigitalOcean을 기준으로 설명합니다.

2.1. 서버 준비하기

DigitalOcean에서 Ubuntu 서버를 생성한 후, SSH를 통해 서버에 접근합니다. 서버가 정상적으로 작동하는지 확인합니다. 다음 명령어로 서버의 공인 IP 주소를 확인할 수 있습니다.

curl ifconfig.me

2.2. DNS 설정하기

도메인을 구입한 후, 도메인 관리 패널에서 A 레코드를 추가하여 서버의 IP 주소를 입력합니다. 예를 들어, example.com 도메인을 사용할 경우, A 레코드는 다음과 같이 설정됩니다.

• 호스트: @
• 값: [서버의 IP 주소]
• TTL: 자동

2.3. Django 설정 수정하기

Django 프로젝트의 `settings.py` 파일을 열고, ALLOWED_HOSTS에 도메인을 추가합니다.

ALLOWED_HOSTS = ['example.com', 'www.example.com']

3. HTTPS 적용하기

HTTPS는 보안을 강화하고 SEO(Search Engine Optimization)를 개선하기 위해 필수적입니다. Let’s Encrypt를 사용하여 무료 SSL 인증서를 발급받고, 프로젝트에 적용하는 방법을 설명하겠습니다.

3.1. Certbot 설치하기

Ubuntu 서버에서 SSL 인증서를 발급받기 위해 Certbot을 설치합니다. 다음 명령어를 입력합니다.

sudo apt update

sudo apt install certbot python3-certbot-nginx

3.2. SSL 인증서 발급받기

SSL 인증서를 발급받기 위해 다음 명령어를 입력합니다. 이 때, `example.com`을 본인의 도메인으로 바꿔주세요.

sudo certbot --nginx -d example.com -d www.example.com

인증서 발급 과정이 진행되며, 이메일을 입력하라는 요청이 있을 수 있습니다. 이메일을 입력하고, 이용 약관에 동의합니다. 설치가 완료되면 SSL 인증서가 성공적으로 설치됩니다.

3.3. Nginx 설정 업데이트하기

이제 Nginx 설정 파일을 수정하여 SSL을 적용합니다. 설정 파일은 일반적으로 `/etc/nginx/sites-available/default` 또는 `/etc/nginx/sites-available/example`에 위치합니다. 파일을 열고 다음과 같이 설정합니다.

server {
        listen 80;
        server_name example.com www.example.com;
        return 301 https://$host$request_uri;
    }

    server {
        listen 443 ssl;
        server_name example.com www.example.com;

        ssl_certificate /etc/letsencrypt/live/example.com/fullchain.pem;
        ssl_certificate_key /etc/letsencrypt/live/example.com/privkey.pem;

        location / {
            proxy_pass http://127.0.0.1:8000;
            proxy_set_header Host $host;
            proxy_set_header X-Real-IP $remote_addr;
            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        }
    }

3.4. Nginx 재시작하기

설정이 완료되었다면 Nginx를 재시작하여 변경사항을 적용합니다.

sudo systemctl restart nginx

3.5. HTTPS 설정 확인하기

이제 브라우저에서 `https://example.com`으로 접속하여 웹사이트가 정상적으로 HTTPS를 통해 작동하는지 확인합니다. SSL 인증서가 제대로 적용되었다면 보안 자물쇠 아이콘이 표시됩니다.

4. 결론

이번 강좌에서는 Django 서버를 개발하고 도메인을 설정한 후 HTTPS를 적용하는 방법을 알아보았습니다. 보안이 중요한 현대의 웹 환경에서 HTTPS의 필요성을 강조하고, 이를 통해 데이터 전송의 안전성을 확보할 수 있습니다.

다양한 클라우드 서비스와 도메인 설정 방법이 존재하므로, 필요한 서비스에 맞게 적절한 설정을 진행하세요. 다음에는 Django에서 API를 개발하거나 데이터베이스와의 연결 방법에 대해 다루어 보도록 하겠습니다.

감사합니다!

Django는 Python으로 작성된 고급 웹 프레임워크로, 모던 웹 애플리케이션을 신속하게 개발할 수 있도록 지원합니다. 이 글에서는 Django 서버 개발에 필요한 기초부터 고급 기술까지, 그리고 서버 개발 중에 유용하게 사용할 수 있는 디버깅 도구 및 방법론에 대해서 설명하겠습니다. 초보자부터 중급자까지 다양한 독자들이 이해할 수 있도록 세심하게 구성했습니다.

1. Django 서버 개발의 기초

Django의 가장 큰 장점 중 하나는 MTV(Model-Template-View) 아키텍처를 기반으로 하고 있다는 점입니다. 이 아키텍처는 애플리케이션의 구조를 명확하게 유지하고, 개발자가 유지보수하기 쉽게 만듭니다.

1.1 Django 설치 및 프로젝트 시작하기

Django 프레임워크를 설치하고, 첫 번째 프로젝트를 생성하는 것은 매우 간단합니다. 아래의 명령어를 통해 Django를 설치할 수 있습니다.

pip install django

프로젝트 생성

Django를 설치한 후, 새로운 프로젝트를 생성할 수 있습니다. 다음 명령어를 사용하여 ‘myproject’라는 이름의 프로젝트를 만듭니다:

django-admin startproject myproject

생성된 프로젝트 디렉토리로 이동하여 서버를 실행해 보겠습니다:

cd myproject
    python manage.py runserver

서버가 성공적으로 실행되면, 브라우저에서 http://127.0.0.1:8000를 입력하면 기본 Django 환영 페이지를 볼 수 있습니다.

1.2 앱 생성

Django에서는 앱 단위로 기능을 모듈화할 수 있습니다. 다음 명령어를 통해 ‘myapp’이라는 새 앱을 생성합니다:

python manage.py startapp myapp

2. Django 모델

모델은 데이터베이스 테이블과 매핑되는 Python 클래스를 정의합니다. 이는 Django의 ORM(Object-Relational Mapping) 기능의 일부분입니다.

2.1 모델 생성 예제

다음은 사용자 데이터를 저장하는 모델을 정의하는 예시입니다:

from django.db import models

    class User(models.Model):
        username = models.CharField(max_length=150, unique=True)
        email = models.EmailField(unique=True)
        password = models.CharField(max_length=128)

        def __str__(self):
            return self.username

3. Django Views

Views는 사용자 요청을 처리하고, 응답을 반환하는 함수 또는 클래스를 정의하는 부분입니다.

3.1 View 생성 예제

아래는 사용자 리스트를 담아 페이지를 반환하는 간단한 View를 생성하는 예제입니다:

from django.shortcuts import render
    from .models import User

    def user_list(request):
        users = User.objects.all()
        return render(request, 'myapp/user_list.html', {'users': users})

4. Django Templates

Templates는 웹 페이지의 HTML 구조를 정의합니다. Django는 HTML에서 파이썬 변수를 쉽게 사용할 수 있도록 템플릿 엔진을 제공합니다.

4.1 Template 예제

사용자 리스트를 보여줄 HTML 템플릿의 예입니다:

<!DOCTYPE html>
    <html lang="ko">
    <head>
        <meta charset="UTF-8">
        <title>사용자 리스트</title>
    </head>
    <body>
        <h1>사용자 리스트</h1>
        <ul>
            {% for user in users %}
                <li>{{ user.username }}: {{ user.email }}</li>
            {% endfor %}
        </ul>
    </body>
    </html>

5. Django URLconf

Django의 URLconf는 웹 요청을 서빙할 뷰를 지정하는 라우팅 시스템입니다.

5.1 URLconf 설정 예제

아래는 사용자 리스트를 리스트하는 URLconf의 예시입니다:

from django.urls import path
    from . import views

    urlpatterns = [
        path('users/', views.user_list, name='user_list'),
    ]

6. Django의 디버깅 도구

Django는 개발 도중 발생할 수 있는 다양한 오류를 효과적으로 진단할 수 있는 여러 도구를 제공합니다.

6.1 Django Debug Toolbar

Django Debug Toolbar는 페이지 로드 시 여러 정보를 시각적으로 제공하는 툴바입니다. 설치하려면 requirements.txt에 추가하고,
다음 명령어로 설치합니다:

pip install django-debug-toolbar

설치 후, settings.py에 추가해야 합니다:

INSTALLED_APPS = [
        ...
        'debug_toolbar',
    ]
    
    MIDDLEWARE = [
        ...
        'debug_toolbar.middleware.DebugToolbarMiddleware',
    ]

    INTERNAL_IPS = [
        # ... your internal ips here
        '127.0.0.1',
    ]

6.2 Logging

로그는 애플리케이션의 상태를 파악하고, 디버깅하는 데 중요한 역할을 합니다. Django에서는 logging 모듈을 통해 로그를 남기는 것이 가능합니다.

import logging

    logger = logging.getLogger(__name__)

    def my_view(request):
        logger.info('Info level log')
        logger.error('Error level log')
        return HttpResponse('Hello World')

7. 디버깅 방법론

디버깅은 코드의 오류를 발견하고 수정하는 과정입니다. 전통적인 디버깅과 Django에 특화된 접근 방법을 소개하겠습니다.

7.1 전통적인 디버깅 기법

코드의 로그를 남기는 것 외에도, IDE의 디버거를 활용하여 변수의 상태를 실시간으로 확인할 수 있습니다. Python IDE들 중 PyCharm, Visual Studio Code 등이 이 기능을 지원합니다.

7.2 테스트 주도 개발(TDD)

Django는 테스트 주도 개발을 지원합니다. 유닛 테스트를 통해 코드의 안정성을 높입니다. Django 내장 테스트 프레임워크를 사용하여 뷰와 모델을 테스트할 수 있습니다.

from django.test import TestCase
    from .models import User

    class UserTestCase(TestCase):
        def setUp(self):
            User.objects.create(username="testuser", email="test@example.com", password="secret")

        def test_user_created(self):
            user = User.objects.get(username="testuser")
            self.assertEqual(user.email, "test@example.com")

8. 마무리

Django는 강력하면서도 사용하기 쉬운 웹 프레임워크로, 많은 기능을 갖추고 있습니다. 이 글에서는 Django 서버 개발의 기초와 디버깅 도구 및 방법론에 대해 자세히 살펴보았습니다. 서버 개발 중 발생할 수 있는 문제를 빠르게 진단하고 해결하는 데 도움이 될 것입니다. 앞으로의 웹 개발 여정을 통해 Django의 다양한 기능을 활용해 보세요.

여기까지 다룬 내용을 통해 Django의 기본적인 구조와 기능, 그리고 강력한 디버깅 도구를 통해 개발의 효율성을 높이는 방법을 이해할 수 있었기를 바랍니다. 올바른 도구를 사용하고, 효과적인 방법론을 적용함으로써 여러분의 프로덕트에 큰 가치를 더할 수 있습니다. 행복한 코딩 되세요!

작성자: 조광형

날짜: 2024년 11월 26일

1. 캐시의 필요성

웹 어플리케이션 개발에서 성능은 매우 중요한 요소입니다. 사용자 경험을 향상시키고, 서버 자원 소비를 줄이기 위해 caching은 필수적입니다.
캐시를 사용하면 데이터베이스나 소스 시스템에 대한 요청을 줄이고, 이전에 저장된 결과를 빠르게 반환할 수 있습니다.
이로 인해, 응답 시간이 줄어들고 서버 부하도 감소합니다.

Django는 다양한 캐시 백엔드를 지원하며, 매우 유연한 캐시 시스템을 제공합니다.
이 글에서는 Django에서 Memcached와 Redis와 같은 캐시 백엔드를 설정하는 방법에 대해 상세히 다루겠습니다.

2. Django의 캐시 프레임워크 개요

Django의 캐시 프레임워크는 다음과 같은 장점을 제공합니다:

• 고성능: 메모리 기반 캐시 시스템을 사용하여 빠른 데이터 접근을 가능하게 합니다.
• 유연성: 다양한 캐시 수단(Memory, Memcached, Redis 등)을 지원합니다.
• 확장성: 큰 규모의 프로젝트에서도 유용하게 사용할 수 있습니다.

기본적으로 Django는 캐시를 설정하기 위해 두 가지 방법을 제공합니다:

1. 전체 캐시 설정
2. 뷰 레벨 캐시 설정

이러한 설정을 통해 사용자 요청의 일부 결과를 저장하고, 주기적으로 갱신하여 불필요한 데이터베이스 쿼리를 줄일 수 있습니다.

3. Memcached 설정하기

3.1 Memcached 설치

Memcached는 메모리 기반의 분산 캐시 시스템으로, 속도가 빠르고 사용이 간편합니다.
설치를 위해서는 운영체제에 따라 다음과 같은 명령어를 사용합니다.

sudo apt-get install memcached

3.2 Django에서 Memcached 설정

Django 프로젝트에 Memcached를 사용하려면, settings.py 파일에서 캐시 설정을 추가해야 합니다.
아래는 Memcached를 사용하는 설정 예제입니다:

 
# settings.py
CACHES = {
    'default': {
        'BACKEND': 'django.core.cache.backends.memcached.MemcachedCache',
        'LOCATION': '127.0.0.1:11211',
    }
}
        

3.3 데이터 캐싱 예제

캐시를 사용하여 장고의 뷰에서 데이터를 캐시하는 방법은 다음과 같습니다.
간단한 예제에서 특정 사용자 정보를 캐시해 보겠습니다:

from django.core.cache import cache
from django.shortcuts import render
from .models import UserProfile

def user_profile(request, user_id):
    # 캐시에 데이터가 있는지 확인
    user_data = cache.get(f'user_profile_{user_id}')
    
    if not user_data:
        # 캐시에서 데이터를 찾지 못하면 DB에서 조회
        user_data = UserProfile.objects.get(id=user_id)
        # 캐시에 데이터 저장 (5분 동안 유지)
        cache.set(f'user_profile_{user_id}', user_data, timeout=300)
    
    return render(request, 'user_profile.html', {'user_data': user_data})
        

4. Redis 설정하기

4.1 Redis 설치

Redis는 키-값 저장소로 메모리 기반의 데이터베이스입니다. 설치는 다음 명령어로 수행할 수 있습니다.

sudo apt-get install redis-server

4.2 Django에서 Redis 설정

Django에서 Redis를 사용하기 위해 django-redis 패키지를 설치해야 합니다. 다음 명령어를 사용합니다:

pip install django-redis

그 후, settings.py 파일에 Redis 캐시 설정을 추가해야 합니다:

# settings.py
CACHES = {
    'default': {
        'BACKEND': 'django_redis.cache.RedisCache',
        'LOCATION': 'redis://127.0.0.1:6379/1',
        'OPTIONS': {
            'CLIENT_CLASS': 'django_redis.client.DefaultClient',
        }
    }
}
        

4.3 데이터 캐싱 예제

Redis를 사용하여 캐시된 데이터를 이용하는 방법은 Memcached와 유사합니다.
다음 예제에서는 특정 키워드의 검색 결과를 캐시하는 기능을 구현합니다:

from django.core.cache import cache
from django.shortcuts import render
from .models import Product

def search_products(request):
    query = request.GET.get('q')
    cache_key = f'products_search_{query}'
    products = cache.get(cache_key)

    if not products:
        products = Product.objects.filter(name__icontains=query)
        cache.set(cache_key, products, timeout=600)
    
    return render(request, 'search_results.html', {'products': products})
        

5. 캐시 무효화 및 관리

캐시된 데이터는 시간이 지나면 유효성이 떨어지거나 변경될 수 있습니다.
이럴 때는 캐시를 무효화하거나 갱신해야 합니다. Django에서는 cache.delete() 메소드를 통해 특정 키의 캐시를 삭제할 수 있습니다.

# 특정 캐시 삭제
cache.delete(cache_key)
        

또한 모든 캐시를 한 번에 삭제하고 싶다면 cache.clear()를 사용할 수 있습니다.
이는 집합적으로 모든 캐시를 무효화하는 방법입니다.

# 모든 캐시 삭제
cache.clear()
        

6. 결론

Django의 캐시 프레임워크를 활용하면 애플리케이션 성능을 크게 향상시킬 수 있습니다.
이번 글에서는 Memcached와 Redis 두 가지 캐시 백엔드를 설정하고 사용하는 방법에 대해 알아보았습니다.
각각의 캐시는 특정 상황과 용도에 따라 장단점이 있으므로, 필요에 맞는 것을 선택하여 사용하길 권장합니다.

캐시 구성은 초기 설정만으로 끝나는 것이 아니라, 주기적인 모니터링과 조정이 필요합니다.
각 캐시의 성능을 분석하고, 사용자 요구에 맞춰 적절히 관리해 나가는 것이 중요한 만큼
이 글이 Django에서 캐시 시스템을 이해하고 구현하는 데 도움이 되었길 바랍니다.

<h2>Chat Room</h2>
<div id=”chat-log”></div>
<input type=”text” id=”username” placeholder=”Enter your name” />
<input type=”text” id=”message” placeholder=”Message” />
<button id=”send”>Send</button>

<script>
$(document).ready(function(){
const roomName = “{{ room_name }}”;
const chatSocket = new WebSocket(
‘ws://’ + window.location.host + ‘/ws/chat/’ + roomName + ‘/’
);

chatSocket.onmessage = function(e) {
const data = JSON.parse(e.data);
$(‘#chat-log’).append(data.username + “: ” + data.message + “<br>”);
};

$(‘#send’).click(function(){
const messageInputDom = $(‘#message’);
const message = messageInputDom.val();
const username = $(‘#username’).val();
chatSocket.send(JSON.stringify({
‘message’: message,
‘username’: username
}));
messageInputDom.val(”);
});
});
</script>