[프로젝트 냠냠] 개발 노트2-3. weekly calendar, 식단 관리(localStorage), 추천 기능

프로젝트 url

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

 

Weekly Calendar

식단 리스트 화면에서 주간 캘린더를 구현한다.

html 코드는 다음과 같이 간단하게 구성한다.

thead 부분에 요일을 표시하고

tbody 부분에 날짜를 표시한다.

...
<div class="row mb-4">
    <table id="week-calendar" class="calendar-table">
        <thead>
            <!-- 요일 표시 -->
        </thead>
        <tbody>
            <!-- 날짜 표시 -->
        </tbody>
    </table>
</div>
...

page가 로딩되면 다음 세 함수가 실행된다.

• generateWeekCalendar(date): ‘date’를 기준으로 주간 달력을 화면에 표시한다. thead를 먼저 구성하고, 이 때 일요일은 폰트 색상을 빨간색으로 설정한다. 해당 주의 시작일을 구하고, 시작일을 기준으로 7번 루프를 돌면서 일자를 하나씩 계산해서 element를 화면에 추가한다.
• refreshDate(date): 달력 상단에 표시된 날짜 표시를 ‘date’로 갱신한다.
• selectDate(date): 선택된 날짜를 캘린더에 초록 동그라미로 표시한다. 이건 해당 영역에 selected-date라는 클래스를 추가하고, css에 selected-date 클래스에 스타일 설정을 하는 방식으로 구현했다.

그리고 주별로 이동하는 화살표를 클릭하면, changeWeek함수가 실행된다. 이 함수는 달력에 표시된 날짜를 기준으로 새로운 날짜를 계산하고, 이걸 바탕으로 generateWeekCalendar를 실행해서 캘린더 화면을 재구성한다. 이 때 selectDate를 실행시켜서 현재 식단 리스트에 해당되는 날짜가 있으면 초록 동그라미 표시하도록 한다.

여기서 리뷰를 살짝 하자면,

• 먼저, 명명법이 좀 아쉽다. this-date, selectDate 등 그때 당시 이름이 딱히 생각이 안나서 막 짓긴 했는데, 나중에 볼 때 알아볼 수 있을지 모르겠다. 그나마 블로그에 정리해서 알아볼 수 있지 않을까 생각. 문서화의 필요성을 한 번 더 느낀다.
• 두번째로 주를 이동하거나 날짜를 클릭할 때마다 generateWeekCalendar를 실행하는데, 이 함수는 thead, 즉 요일을 표시하는 영역까지 새로 만든다. 따라서 굳이 불필요한 연산을 하게되는게 아닐까 생각한다. 하지만, 오래걸리는 연산이 아니라서 일단 놔뒀다.

식단 추가 과정: localStorage 사용 방법

식단 추가화면(record_add)에 접속하는 과정은 총 세가지가 있다.

추가

• 사용자가 직접 ‘식단촬영’ 메뉴를 눌러서 접속
• 식단추천 화면에서 식단을 눌러서 접속

편집

• 식단 리스트 화면에서 식단을 클릭해서 수정하는 목적으로 접속

일반적인 form을 작성하는 과정(회원가입, 게시글 작성)에서는 그냥 form만 post로 전송하면 됐기 때문에 문제가 없었는데, 식단을 기록하거나 수정하는 과정에서는 식단에 들어가는 음식을 추가하거나 수정하는 화면에 한 번 들어갔다 오는 경우가 생기기 때문에 이 ‘상태’를 관리해야 했다. 이걸 어떻게 해야하나 고민을 하다가 구글링도 해보고 chatGPT에 물어본 결과, localStorage 또는 sessionStorage 또는 서버측과 통신을 통해서 서버에 상태값을 저장하는 방식으로 하면 된다고 하더라. 이 세가지 방법 중에 나는 localStorage를 활용하는 방법을 선택했다. 이유는 가장 간단하게 구현할 수 있어서다.

여러가지 시행착오를 겪은 후에, 나는 식단 추가/수정 시스템을 다음과 같이 정리했다.

1. 식단에 관한 정보는 form에서 submit이 되기 전까지 localStorage에 저장해 놓는다.
2. localStorage에 저장되는 항목은 다음과 같다.

- text-date: 음식을 섭취한 날짜
- text-time: 음식을 섭취한 시간
- mealMemo: 식사 메모
- imagePreview: base64
- foodInfo{
  - id : {
    name: 음식이름,
    calorie: 칼로리,
    carbohydrate: 탄수화물,
    protein: 단백질,
    fat: 지방,
    img: 이미지(base64)
  }
}

그때그때 설정하다보니까 이름 짓는 방식도 제각각이다…

python과 js, html에서 이름을 지을 때 규칙이 조금씩 달라서 헷갈렸던 결과.

1. 추천을 통한 식단 추가와 식단 리스트에서 식단 수정 화면으로 넘어가기 전에, 해당 식단에 대한 정보를 localStorage에 저장한다.
2. 식단 추가 및 수정 화면에서 localStorage에 있는 정보들을 읽어서 화면에 반영한다.
3. 화면에 정리된 식단 정보들은 form에서 submit 버튼을 누르게 되면 서버로 전송된다.
4. 서버에서 정보들을 처리하고 데이터베이스 순차적으로 입력한다.(식단 → 식단 상세 순서로 저장한다.)

이 때, localStorage imagePreview와 img를 왜 base64로 변환해서 저장했냐하면, detail(음식 추가/수정 화면)으로 넘어갈 때 서버에 데이터를 넣을 수는 없어서, base64로 바꿔서 localStorage에 보관하면 되지 않을까? 싶어서 생각해낸 방법이다.

그런데 이렇게 구현했을 때 단점이 이미지를 base64로 바꾸는 과정이 오래 걸린다는 점이다. 따라서 식단 리스트에서 식단 수정 화면으로 넘어갈 때, localStorage에 저장되는 과정이 다 완료되지 않았는데, 화면이 넘어가 버려서 식단 상세 부분에 음식이 반영이 안되는 버그가 생겼다. 그래서 해결 방법은 localStorage에 다 저장이 완료가 되면 화면을 넘어가는 방식으로 코드를 구성하니 버그를 해결할 수 있었다.

추천 알고리즘 및 화면 구성

추천 부분은 크게 언급할 건 없어서 간단하게 정리만 한다.

• 추천 알고리즘은 다음과 같이 구성했다.
• cal = (일일 권장 칼로리 - 그날 식사한 칼로리) / 남은 끼니수 cal보다 낮은 칼로리를 가진 음식들을 DB에서 찾아서 랜덤으로 추천한다.
• 새로 추천은 페이지 새로 고침이다. 즉, 화면이 로딩이 되면 새로운 추천을 받는다.
• ‘맞춤 식단 기록하기’버튼을 누르면 해당되는 음식이 localStorage에 추가되고, 식단 기록 화면으로 넘어간다.

추천 기능 리뷰

• 이 부분에서 마음에 들었던 것은 최대한 디자인과 비슷하게 만들어서, 이쁘게 잘 구성이 되었다는 점이다.
• 한번 추천받은 거는 새로고침을 누르기 전까지 갱신이 되면 안되는데, 이 부분은 시간 관계상 구현을 하지 못했다. 아쉬운 부분 중 하나