[프로젝트 냠냠] 개발 노트2-2. common template, DB 설계

프로젝트 url

GitHub - AISW-takethis/yyamyyam: 사진으로 간편하게 식단을 기록하고, 효율적으로 관리할 수 있는 서비

 

Common template

Base template

이전에 말했듯이, 화면 구성은 크게 세가지로 나누어져 있다.

• 팀원은 user, 나는 diet(식단) app을 맡기로 해서, 공동 부분인 header와 nav를 짜고 main 부분에 대해서 각각 독립적으로 작업을 할 수 있도록 작성을 했다.
• 그리고, navbar가 화면상에 없는 경우도 있어서, 그런 경우에 navbar의 display를 none으로 설정하면 main 영역이 하단까지 채워지도록 했다.
• 코드 내용은 github 참조

 

GitHub - AISW-takethis/yyamyyam: 사진으로 간편하게 식단을 기록하고, 효율적으로 관리할 수 있는 서비

Navbar

navbar는 base template에 속해있으며, 해당 페이지에 들어가 있으면 selected를 활성화 하는 코드를 작성했다. 이번에 짤 때는 각각의 경우에 고유의 url이 있기 때문에, request의 경로에 고유의 url이 속해있으면 활성화 하는 코드로 작성했다.

{% with request.path as current_path %}
<a href="/diet/recommend/" class="{% if '/diet/recommend' in current_path  %}selected{% endif %}">
    <i class="fas fa-home {% if '/diet/recommend' in current_path %}selected{% endif %}"></i>
    홈
</a>
<a href="/diet/list/" class="{% if '/diet/list' in current_path %}selected{% endif %}">
    <i class="fas fa-book {% if '/diet/list' in current_path %}selected{% endif %}"></i>
    식단기록
</a>
<a id="nav-add" href="/diet/add/" class="{% if current_path == '/diet/add' %}selected{% endif %}">
    <i class="fas fa-th-large {% if current_path == '/diet/add' %}selected{% endif %}"></i>
    식단촬영
</a>
<a href="/diet/mypage/" class="{% if '/diet/mypage/' in current_path %}selected{% endif %}">
    <i class="fas fa-user {% if '/diet/mypage/' in current_path %}selected{% endif %}"></i>
    마이페이지
</a>
{% endwith %}

Confirm

이 경우는 공동의 코드는 아니지만 root의 template 경로에 있어서 여기에 기록한다.

bootstrap의 modal을 활용했으며, 식단을 기록하는 과정에서 이미지를 업로드하면, 현재 시간으로 기록할지, 혹은 사진이 찍힌 시간으로 기록할지를 고르게 하는 모달창이다.

<!-- Modal -->
<div class="modal fade" id="staticBackdrop" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered modal-sm">
    <div class="modal-content">
      <div id="modal-body" class="modal-body">
        2/1일 13:25에 촬영된 사진입니다. 촬영 시간 또는 현재 시간을 선택해주세요.
      </div>
      <div class="modal-footer">
        <button id="shooting-time-button" type="button" class="btn btn-secondary" data-bs-dismiss="modal">촬영 시간</button>
        <button id="current-time-button" type="button" class="btn btn-primary" data-bs-dismiss="modal">현재 시간</button>
      </div>
    </div>
  </div>
</div>

Loading

이 경우도 식단 기록할 때 사진을 업로드하는 과정에서 필요한 loading 창이다. bootstrap의 spinner를 활용했다.

<div id="loading-modal" class="overlap-wrapper flex-column d-none" >
  <div class="spinner-border spinner-border-lg text-light" role="status">
  </div>
  <div class="text-light mt-3"><h1>이미지 분석중</h1></div>
</div>

DB 설계

Database는 PostgreSQL을 사용했다.

table은 총 다섯개가 있다.

• user: 유저 테이블, 아이디와 비밀번호 정도만 포함되어 있으며, 로그인할 때 사용된다.
• user_profile: 유저 프로필. auth와 관련된 정보 외에 개인정보제공동의, 약관 동의, 개인 프로필 등의 모든 정보가 여기 포함되어 있다. 이렇게 나눈 까닭은 강사님께 여쭤보니 로그인을 할 때 테이블을 쿼리하는 비용도 줄어들고, 관리가 편하기 때문에 이렇게 많이들 나눈다고 한다.
• user_diet: 유저 식단에 관한 테이블. 식단 이미지, 언제 먹었는지, 메모 등에 대한 정보를 저장한다.
• detail_of_diet: user_diet에 연관된 식단에 포함된 음식에 관한 테이블. 1:n의 관계로 되어 있으며, 음식 이미지, 음식 이름, 영양소, 섭취량에 대해서 저장되어 있다. 영양 정보가 여기에만 저장되어 있기 때문에 식단 화면과 리스트 화면에서 이 테이블을 참조해서 전체 영양소의 양을 계산해야 하는 과정이 필요하다.
• food: 우리가 갖고 있는 음식 데이터. 추천 알고리즘에 사용되는 데이터이다. 사용자의 일일 권장 칼로리와 섭취한 음식들의 칼로리에 따라서 필요 칼로리가 계산되어 그에 맞춰서 여기에 있는 데이터를 사용해서 음식을 추천해준다.

데이터 베이스 전체에 대한 관계도는 다음과 같다.

개발 전에 기획 단계에서 ERD를 그린건데, 개발 도중에 tabel의 field에서 수정이 다소 이뤄졌으니 관계만 보도록 하자.

여기서 food와 user_diet 또는 detail_of_diet의 관계 설정이 이루어 지지 않았는데, 팀원과 고민을 해보다가 강사님께 여쭤봤더니, food table을 바꾸거나 하는게 없다면 굳이 관계를 안만들어도 될 것 같다고 해주셔서, 관계없이 독립적인 테이블로 설정했다.