2025.04.29 - [그냥 끄적끄적] - [사이드 프로젝트] 실시간 채팅 웹 서비스 - 1 (환경 구성)
[사이드 프로젝트] 실시간 채팅 웹 서비스 - 1 (환경 구성)
이번에 만들어 볼 웹 채팅 서비스의 구조는 아래와 같습니다. 이번에는 django (장고) 프레임워크를 이용할 것인데, 기본 구조만 잘 익혀두면 웹 개발에 상당히 편리함을 느낄 수 있습니다. 자체적
seongjuk.tistory.com
지난번 포스팅에서 웹 채팅 서비스 개발에 필요한 환경 구성을 마무리하였습니다.
장고는 APP (앱) 단위로 기능을 구분합니다. 우리가 만들고자 하는 채팅 프로그램을 예시로 들면,
1. 회원가입 및 로그인 관리 (회원 가입, 정보 수정 등)
2. 채팅방 관리 (방 생성, 입장 조건 검사 등)
3. 부가 기능 관리
와 같이 여러 개의 앱으로 구분할 수 있습니다. 그냥 하나의 앱에서 다 처리해도 되지만, 앱 간 서로 데이터를 주고받을 수 있기 때문에 기능 단위로 나눈다면 유지보수에 이점이 있겠죠..?
1. 새로운 앱 생성하기
장고에서 새로운 앱을 만들기 위해서는 아래의 명령어를 사용합니다.
python manage.py startapp {앱 이름}우선 사용자가 회원가입과 로그인을 할 수 있는 로비를 만들어 보겠습니다. (manage.py 가 위치한 디렉터리에서 실행해야 합니다.)
python manage.py startapp lobby아래와 같이 lobby라는 앱이 생성되고 하위에 admin, apps, models, tests, views 파일이 생성된 것을 확인할 수 있습니다. 이 파일들이 어디에 쓰이는지는 이후에 하나씩 다루어 보겠습니다 ㅎㅎ
2. 경로 연결
장고 프로젝트 myproject 가 새로 만들어진 lobby라는 앱의 존재를 알아야 합니다. 그럼 이건 어디서 알려주느냐.. settings.py 에서 알려줍니다. INSTALLED_APPS 리스트에 "lobby"를 추가해주면 됩니다.
이렇게 되면 드디어 프로젝트를 관리하는 manage.py 가 lobby 앱의 존재를 알게 됩니다. 화면을 담당하는 HTML과 script 코드는 안 보이는데, 어떻게 화면을 구성하는 건지 의문이 들죠? 이걸 위해서 우리는 다음의 추가적인 작업을 진행해야 합니다.
아래와 같이, static 폴더와 templates 폴더를 생성하고, lobby 앱의 폴더를 각각 만들어 줍니다. HTML은 templates 폴더에 저장되고, javascript와 css 파일은 static 폴더 하위에 저장됩니다. 그러면 manage.py 에서 서버를 실행했을 때, 각 폴더에 접근해서 파일들을 읽고 페이지를 구성합니다.
이렇게 만들기만 하면 manage.py 로 runserver를 실행하고 페이지에 들어가면 기존과 같은 화면이 떠있을 거에요. 아직 템플릿 (index.html) 파일이 저장된 폴더 경로를 명시하지 않았기 때문입니다. 여기서 설정해줄게 꽤 복잡하지만 하나하나 따라가 봅시다.
HTML 파일은 templates라는 폴더에 저장되어있고, script와 css는 static 폴더에 저장되어있으니, settings.py에서 앞으로 manage.py가 접근할 templates와 static 경로를 지정해주어야 합니다. 이는 아래와 같이 지정할 수 있습니다.
TEMPLATES = [
{
"BACKEND": "django.template.backends.django.DjangoTemplates",
"DIRS": [
BASE_DIR / "templates" # 추가 !
],
"APP_DIRS": True,
"OPTIONS": {
"context_processors": [
"django.template.context_processors.request",
"django.contrib.auth.context_processors.auth",
"django.contrib.messages.context_processors.messages",
],
},
},
]
# 개발 중 사용할 정적 파일 디렉토리 추가 !
STATICFILES_DIRS = [
BASE_DIR / 'static', # 프로젝트 루트의 static 폴더
]
여기까지 수정이 되었다면 manage.py 는 myproject에 새로 생긴 lobby의 존재를 알고, 앱에서 사용자에게 보여줄 템플릿의 경로가 어디인지 알고 있습니다. 그러나, lobby가 보여줄 템플릿이 무엇인지는 아직 알 수 없습니다. 아래 그림과 같은 상황이겠네요
myproject는 urls.py에서 사용자가 접근가능한 앱들의 템플릿 주소를 관리하고 있으며, 주소 별 정의된 views.py의 함수들을 호출해서 서버로 요청을 보냅니다. 우리의 목적은 브라우저 주소창에 http://127.0.0.1:8000/lobby/ 를 입력하면 lobby 앱의 index.html 파일을 브라우저에 띄우는 것입니다. 여기서는 HTTP GET 방식으로 "lobby의 index.html 파일과 해당 파일에서 사용되는 script, css 등 모든 파일을 저에게 주세요" 라는 요청을 서버에게 보내는거죠.
프로젝트의 urls.py 를 아래와 같이 수정합니다. lobby 앱의 views에 작성된 함수들을 경로마다 지정해주어야 하니 임포트해주고, 경로를 http://127.0.0.1:8000/lobby/ 로 설정하기 위해 path의 첫 번째 인자에 "lobby/"를 넣어줍니다. 그러면 해당 주소가 호출될 때 lobby 앱의 views에서 lobby_home 함수가 호출되며 템플릿 경로의 lobby 폴더 하위의 index.html을 리턴합니다.
# myproject의 urls.py
from django.contrib import admin
from django.urls import path
from lobby import views
urlpatterns = [
path("admin/", admin.site.urls),
path("lobby/", views.lobby_index, name="lobby"),
]# lobby 앱의 views.py
from django.shortcuts import render
# Create your views here.
def lobby_index(request):
return render(request, 'lobby/index.html')<!DOCTYPE html>
<html lang="en">
<head>
{% load static %}
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
장고 홈페이지!
</body>
</html>
여기까지 진행하고 runserver를 실행하면 아래와 같이 정상적으로 실행됨을 확인할 수 있습니다.
다음 포스팅에서는 데이터베이스와 연동하여 간단한 회원가입을 진행하는 내용으로 뵙겠습니다.
'그냥 끄적끄적' 카테고리의 다른 글
| 장고 Models.py 데이터베이스 관련 (0) | 2025.04.30 |
|---|---|
| [사이드 프로젝트] 실시간 채팅 웹 서비스 - 1 (환경 구성) (1) | 2025.04.29 |
| [사이드 프로젝트] 실시간 채팅 웹 서비스 - 0 (0) | 2025.04.29 |
| 인터파크 매크로 만들기 [4. 좌석 선점하기 - 마무리] (4) | 2023.12.01 |
| 인터파크 매크로 만들기 [4. 좌석 선점하기 - 1] (1) | 2023.12.01 |
