[프로젝트 냠냠] 개발 노트2-1. 개발 - 개발 환경 세팅

개발 환경 세팅

requirements.txt에 있는 것부터 가상환경에 설치한다.

pip install -r requirements.txt

 

django project를 시작한다.

django-admin startproject yyamyyam

 

app을 만든다. 우리는 크게 식단관리 관련 앱 diet와 유저관리 관련 앱 user로 나누어서 관리를 했다.

python manage.py startapp diet
python manage.py startapp user

 

 

settings.py에 app을 등록한다.

INSTALLED_APPS = [
...
    "diet.apps.DietConfig",
    "user.apps.UserConfig",
]

 

Setting urlconfigs

urlconfig를 세팅한다. 이러면 나중에 앱 단위로 라우팅할 때 편하다.

간단하게 views.py에 함수를 만든다.(연결 테스트용)

views.py

from django.shortcuts import render, HttpResponse

# Create your views here.
def home(request):
    return HttpResponse("This is diet home page")

urls.py에 연결시킨다.

urls.py

from django.urls import path

from .views import home

app_name = "diet"
urlpatterns = [
    path("", home, name="diet_home")
]

project의 urls에 연결시킨다.

...
from django.contrib import admin
from django.urls import path, include

urlpatterns = [
    path("admin/", admin.site.urls),
    path("user/", include("user.urls")),
    path("diet/", include("diet.urls")),
]

runserver를 돌려서 연결이 잘 되었는지 확인해본다.

Template & static

html template를 사용하기 위해 template 폴더와 static 만든다. template folder는 html 코드를 보관하는 용도이고, static folder는 css 및 js를 보관하기 위한 용도이다.

각 app별로 static과 templates 폴더를 만들 때, 하위 디렉토리로 app 이름을 한 번 더 명시해준다. 나는 여기에 추가로 static 폴더에 css와 js를 구분하는 폴더를 추가로 만들었다.

Base Template Dir

같이 작업을 하다보면 공동으로 사용할 템플릿이 필요하다. 그래야 디자인 일관성이 유지되기 때문이다. 따라서 base template를 만들어야 하는데, base template가 저장되고 사용될 위치를 프로젝트에 등록해야 한다.

일단 root folder에 templates 폴더를 만든다.

settings.py에 template 항목의 DIRS 리스트에 templates 경로를 추가한다.

settings.py

import os
...

TEMPLATES = [
    {
                ...
        "DIRS": [os.path.join(BASE_DIR), "templates"],
        ...
    },
]

Base Static Dir

template와 같은 이유로 공동 static file을 저장하기 위한 폴더를 프로젝트에 등록한다.

root folder에 static folder를 만든다.

settings.py에 STATICFILES_DIRS를 추가한다.

예시)

...
STATIC_URL = "static/"

STATICFILES_DIRS = [
    os.path.join(BASE_DIR, "static"),
]
...

테스트

연결이 잘 되었는지 확인한다.

diet/templates/diet/home.html

{% extends 'base.html' %}
{% load static %}
{% block title %}home{% endblock %}
{% block css %}{% endblock css %}
{% block header %}home{% endblock %}
{% block main %}
{% endblock main %}
{% block script %}{% endblock script %}

연결이 잘 된 모습을 확인할 수 있다.

핸드폰 화면을 기준으로 디자인이 되다 보니, 화면 섹션을 크게 세가지로 나누었다.

• 상단(header)
• 메인(main)
• 하단(navbar)

상단은 header라고 이름을 짓고, 하단은 footer라고 하기에는 애매해서 그냥 navbar로 명명했다. 그리고 앞으로 template를 구현할 떄 main 부분에 구현을 하면 되게 만들었다.

가끔 navbar가 화면에 없는 경우가 있는데, 그런 경우에도 하단의 navbar만 display:none 처리 해놓으면 나머지 부분은 main이 채워넣고, 상단 header에 뒤로가기 버튼이 보일 수 있게 처리를 해놓았다. 따라서 현재 디자인이 된 모든 경우에 대응을 할 수 있게 만들어 놓았다.

Database

Database는 postgreSQL을 사용했다. 이걸 사용하기 위해서는 psgcopg2 라이브러리를 설치해야 한다. <개발 환경 세팅>에 명시함. 우리는 psycopg2==2.9.9 를 사용했다.

DB 설치는 다음 자료를 참고했다.

https://velog.io/@jochedda/Mac-OS-PostgreSQL-%EC%84%A4%EC%B9%98-%EB%B0%8F-%EC%A0%91%EC%86%8D-DBeaver-%EC%99%80-%EC%97%B0%EA%B2%B0%ED%95%98%EA%B8%B0

[Mac OS] PostgreSQL 설치 및 접속 + DBeaver 와 연결하기

 

먼저 terminal에서 postgresql에 접속한다.

psql postgresql

DB에 접속할 수 있는 user를 생성한다.

CREATE ROLE newuser WITH LOGIN PASSWORD 'password';

권한 설정

ALTER ROLE newuser CREATEDB;
ALTER ROLE newuser CREATEROLE;

확인

\du

를 입력하면 유저 리스트가 출력된다.

모든 설정이 완료되면, \q 명령어를 입력하여 PostgreSQL에서 로그아웃한다.

생성한 user로 접속해서 db를 생성한다

psql postgres -U newuser

CREATE DATABASE YYAMYYAM;

확인

\l

을 하면 데이터베이스 리스트가 출력된다.

Timezone & Language

language code와 timezone을 한국으로 바꾼다.

LANGUAGE_CODE = "ko-kr"

TIME_ZONE = "Asia/Seoul"

 

다음에 할 일

이제 기능을 하나씩 추가해보자.