나만의 Django Web 개발 준비

이 글은 Django로 본격적인 웹 서비스를 만들기 위해 개발 환경을 셋업하고, 앱 구조, 데이터베이스 설정, 프론트엔드까지 프로젝트 초기 구조를 어떻게 잡아야 할 지에 대해 정리한 것이다.


개발 개요

  • 백엔드 프레임워크: Django
  • 데이터베이스: NAS에 설치된 Docker 기반 PostgreSQL
  • 프론트엔드 프레임워크: Bootstrap (CDN 이 아닌 → Static 방식)
  • 앱 구조 전략: apps/ 폴더 하위에 앱을 모듈처럼 분리 관리
  • 민감정보 보호: .env를 통한 환경변수 관리

1. Python 가상환경 및 패키지 설치

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
# 가상환경 생성
python -m venv venv
#가상환경 활성화
source venv/bin/activate # (Windows는 venv\Scripts\activate)
# 가상환경 생성 python -m venv venv #가상환경 활성화 source venv/bin/activate # (Windows는 venv\Scripts\activate)
# 가상환경 생성
python -m venv venv

#가상환경 활성화
source venv/bin/activate  # (Windows는 venv\Scripts\activate)

기본적인 의존성 패키지를 설치한다.

  • django: 웹 프레임워크
  • psycopg: PostgreSQL용 Python 드라이버
  • python-dotenv: .env 파일로 환경변수 관리
Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
pip install django "psycopg[binary]" python-dotenv
pip install django "psycopg[binary]" python-dotenv
pip install django "psycopg[binary]" python-dotenv

2. 프로젝트 및 앱 구조 설계

프로젝트 생성

.을 입력해서 위치를 잘 구성하는것이 중요하다. 코드를 이렇게 작성하면 settings.py, urls.py 등 프로젝트 전체에서 사용하게 될 부분이 config라는 직관적인 이름으로 관리 될 수 있기 때문에 구조를 이렇게 하기로 했다.

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
django-admin startproject config . # '.'을 입력한다는 점 주의
django-admin startproject config . # '.'을 입력한다는 점 주의
django-admin startproject config . # '.'을 입력한다는 점 주의

manage.py가 위치한 루트에 config/ 폴더가 생성됨.

앱 구조 전략

웹페이지를 만들다 보면 이런 저런 앱들이 많아 질 수 있다. 폴더 구조 상 이런 저런 이름의 폴더가 많이 만들어지면 헷갈릴 수 있으므로 apps/ 라는 폴더 안에 모든 앱을 만들기로 했다.

  • 예: apps/blog, apps/wiki, apps/home

다만, 이렇게 하면 큰 단점이 하나 생기는데 앱을 만들 때마다 각 앱의 apps.py 내부에 name field 부분을 폴더 구조에 맞게 변형 해줘야 하고, config/settings.py에 앱을 등록 할 때도 폴더 경로가 반영되게 해야 된다는 점이다. 다소 불편 할 수는 있겠지만 이렇게 해 두면 나중에 코드를 볼 때 이 앱이 어느 폴더에 있는지 직관적으로 알아 보기 쉬울 것 같다는 판단이다.

혹시 나중에 테스트용 개발중인 앱을 만든다면 dev/ 폴더를 만들어서 그 안에서 사용하다가 어느정도 개발이 완료되면 apps/ 폴더로 옮길 수도 있고, 직관적인 관리가 되지 않을까 하는 생각이다.

아무튼, 이렇게 폴더 구조를 이용해서 앱을 만들려고하면 다소 귀찮아지는 건 사실이기 때문에 별도의 스크립트를 만들어서 사용하기로 했다.

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
#!/bin/bash
APP_NAME=$1
APP_PATH="apps/$APP_NAME"
mkdir -p "$APP_PATH"
django-admin startapp "$APP_NAME" "$APP_PATH"
sed -i '' "s/name = '$APP_NAME'/name = 'apps.$APP_NAME'/g" "$APP_PATH/apps.py"
#!/bin/bash APP_NAME=$1 APP_PATH="apps/$APP_NAME" mkdir -p "$APP_PATH" django-admin startapp "$APP_NAME" "$APP_PATH" sed -i '' "s/name = '$APP_NAME'/name = 'apps.$APP_NAME'/g" "$APP_PATH/apps.py"
#!/bin/bash

APP_NAME=$1

APP_PATH="apps/$APP_NAME"

mkdir -p "$APP_PATH"

django-admin startapp "$APP_NAME" "$APP_PATH"

sed -i '' "s/name = '$APP_NAME'/name = 'apps.$APP_NAME'/g" "$APP_PATH/apps.py"

이 스크립트의 동작은 간단하다.

./makeapp.sh blog라고 입력한다면, apps/blog라는 폴더를 먼저 만든 다음에 blog 앱 생성을 수행한다. 그리고 apps.py폴더 안에 있는 name 필드 값을 apps.를 붙인 이름으로 수정한다.

앱이 생성되었다면 config/settings.py에 앱을 등록한다.

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
INSTALLED_APPS = [
...
'apps.blog',
'apps.wiki',
'apps.home',
]
INSTALLED_APPS = [ ... 'apps.blog', 'apps.wiki', 'apps.home', ]
INSTALLED_APPS = [
    ...
    'apps.blog',
    'apps.wiki',
    'apps.home',
]

이런식으로 각 앱의 apps.py에서 작성된 name 필드값, 즉 ‘apps.앱이름’ 형태로 지정되어 있어야 한다.


3. PostgreSQL 연결 설정 (NAS 사용)

PostgreSQL을 NAS에 Docker로 이미 설치 해두었고 유저와 DB도 생성해 놓은 것을 사용할 예정

.env 파일 설정

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
DB_NAME=mydb
DB_USER=myuser
DB_PASSWORD=secret
DB_HOST=192.168.0.100
DB_PORT=5432
DB_NAME=mydb DB_USER=myuser DB_PASSWORD=secret DB_HOST=192.168.0.100 DB_PORT=5432
DB_NAME=mydb
DB_USER=myuser
DB_PASSWORD=secret
DB_HOST=192.168.0.100
DB_PORT=5432

settings.py 수정

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
from dotenv import load_dotenv
load_dotenv()
DATABASES = {
'default': {
'ENGINE': 'django.db.backends.postgresql',
'NAME': os.getenv('DB_NAME'),
'USER': os.getenv('DB_USER'),
'PASSWORD': os.getenv('DB_PASSWORD'),
'HOST': os.getenv('DB_HOST'),
'PORT': os.getenv('DB_PORT'),
}
}
from dotenv import load_dotenv load_dotenv() DATABASES = { 'default': { 'ENGINE': 'django.db.backends.postgresql', 'NAME': os.getenv('DB_NAME'), 'USER': os.getenv('DB_USER'), 'PASSWORD': os.getenv('DB_PASSWORD'), 'HOST': os.getenv('DB_HOST'), 'PORT': os.getenv('DB_PORT'), } }
from dotenv import load_dotenv

load_dotenv()

DATABASES = {

    'default': {

        'ENGINE': 'django.db.backends.postgresql',

        'NAME': os.getenv('DB_NAME'),

        'USER': os.getenv('DB_USER'),

        'PASSWORD': os.getenv('DB_PASSWORD'),

        'HOST': os.getenv('DB_HOST'),

        'PORT': os.getenv('DB_PORT'),

    }

}

4. Bootstrap을 Static 방식으로 설정

static 디렉토리 구성

전역적으로 사용할 수 있도록 다음과 같은 구조로 배치:

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
project_root/
└── static/
└── bootstrap/
├── css/
│ └── bootstrap.min.css
└── js/
└── bootstrap.bundle.min.js
project_root/ └── static/ └── bootstrap/ ├── css/ │ └── bootstrap.min.css └── js/ └── bootstrap.bundle.min.js
project_root/
└── static/
    └── bootstrap/
        ├── css/
        │   └── bootstrap.min.css
        └── js/
            └── bootstrap.bundle.min.js

settings.py에 static 설정

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
STATIC_URL = 'static/'
STATICFILES_DIRS = [
BASE_DIR / 'static',
]
STATIC_URL = 'static/' STATICFILES_DIRS = [ BASE_DIR / 'static', ]
STATIC_URL = 'static/'
STATICFILES_DIRS = [
    BASE_DIR / 'static',
]

템플릿에서 사용 예시

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
{% load static %}
<link rel="stylesheet" href="{% static 'bootstrap/css/bootstrap.min.css' %}">
<script src="{% static 'bootstrap/js/bootstrap.bundle.min.js' %}"></script>
{% load static %} <link rel="stylesheet" href="{% static 'bootstrap/css/bootstrap.min.css' %}"> <script src="{% static 'bootstrap/js/bootstrap.bundle.min.js' %}"></script>
{% load static %}

<link rel="stylesheet" href="{% static 'bootstrap/css/bootstrap.min.css' %}">

<script src="{% static 'bootstrap/js/bootstrap.bundle.min.js' %}"></script>

5. 템플릿 구조 설계 (base.html 포함)

apps/home/templates/home/base.html 에 base.html을 위치시키고, 다음처럼 구조화함:

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>{% block title %}My Site{% endblock %}</title>
{% load static %}
<link rel="stylesheet" href="{% static 'bootstrap/css/bootstrap.min.css' %}">
</head>
<body>
{% block content %}
{% endblock %}
</body>
</html>
<!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <title>{% block title %}My Site{% endblock %}</title> {% load static %} <link rel="stylesheet" href="{% static 'bootstrap/css/bootstrap.min.css' %}"> </head> <body> {% block content %} {% endblock %} </body> </html>
<!DOCTYPE html>

<html lang="ko">

<head>

    <meta charset="UTF-8">

    <title>{% block title %}My Site{% endblock %}</title>

    {% load static %}

    <link rel="stylesheet" href="{% static 'bootstrap/css/bootstrap.min.css' %}">

</head>

<body>

    {% block content %}

    {% endblock %}

</body>

</html>

다른 앱에서는 이렇게 상속:

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
{% extends "home/base.html" %}
{% extends "home/base.html" %}
{% extends "home/base.html" %}

→ 각 앱의 templates/앱이름/xxx.html 구조를 유지하면 템플릿 네임스페이스가 명확하고 유지보수가 쉬움

코멘트

답글 남기기

이메일 주소는 공개되지 않습니다. 필수 필드는 *로 표시됩니다