사이트 주소 : https://blackwhitechef.site

1. 주제

📝 만들게된 이유

사용자를 받아볼 수 있는 프로젝트는 무엇이 있을까?
- 사용자를 바탕으로한 피드백 -> 고도화
흑백요리사 재밌다
- 식당이 어딜까? 가보고싶다. 만들어보자!
멈출줄 모르는 흑백요리사의 인기
- -> 유행이 식기전에 빠르게 구현하고 배포

지인 프론트 알려주기
- 이왕하는 거 처음 프론트하는 친구에게 프로젝트 경험을 쌓게 해주고 싶었다
- ->간단히 구현

팀원(여름 부트캠프때 경험했던 테커 인원들에서 진행)

프론트엔드 : 조준영, 지인
백엔드 : 손석영

프로젝트 소개

흑백요리사란? 재야의 고수 셰프들부터 이미 대중에게 얼굴이 알려진 스타 셰프들까지 총 100명의 셰프가 오직 맛 하나로 맞붙는 서바이벌 프로그램

흑백 요리사라는 넷플릭스 프로그램이 방영된 후 출연자들의 식당을 찾아 가는 손님들이 많이 늘어났습니다. 백수저 20명, 흑수저 20명 총 40명의 출연자들의 식당을 찾기 쉽게 정리해 두었습니다.

백수저 20명, 흑수저 20명의 소개 및 식당 연결
한/영 두 가지 버전
응원 메세지 작성
피드백 작성

2. 프론트엔드

메인 페이지

철가방 요리사를 클릭하면 해당 인물의 식당 지도로 이동한 모습

응원 메시지 작성

피드백 메시지 작성 화면

3. 백엔드

3.1 api

Swagger

3.2 모니터링 2024-10-16 18:00 ~ 2024-10-19 00:00

3.3 시스템 아키텍처

3.4 ERD

4. 트러블 슈팅

4.1 서버 DB 인코딩 에러

한글이 깨지는 문제 발생

원인

현재 mysql의 문자 집합 확인

mysql> SHOW VARIABLES LIKE 'character_set%';
+--------------------------+--------------------------------+
| Variable_name            | Value                          |
+--------------------------+--------------------------------+
| character_set_client     | latin1                         |
| character_set_connection | latin1                         |
| character_set_database   | utf8mb4                        |
| character_set_filesystem | binary                         |
| character_set_results    | latin1                         |
| character_set_server     | utf8mb4                        |
| character_set_system     | utf8mb3                        |

현재 MySQL의 character_set_client, character_set_connection, 그리고 character_set_results가 latin1으로 설정되어 있기 때문에, 한글이 깨짐

해결

이 값들을 utf8mb4로 변경하여 인코딩 문제를 해결할 수 있습니다. 영구적으로 변경하려면 MySQL 설정 파일 (my.cnf 또는 my.ini)에 다음 내용을 추가해야 합니다. 설정 파일 위치는 시스템에 따라 다를 수 있지만 일반적으로 /etc/mysql/my.cnf 또는 /etc/my.cnf에 있습니다. 하지만 docker 컨테이너는 직접적으로 nano나 vi와 같은 편집기로 수정이 불가.

(어떻게 하지....고민하다가)

→파일안에 my.cnf파일을 만들고 컨테이너로 복사하기로 결정

[client]
default-character-set = utf8mb4

[mysql]
default-character-set = utf8mb4

[mysqld]
character-set-client-handshake = FALSE
character-set-server = utf8mb4
collation-server = utf8mb4_unicode_ci

my.cof파일

services:
  db:
    image: mysql:8
    container_name: mysql-db
    environment:
      MYSQL_ROOT_PASSWORD: root_password
      MYSQL_DATABASE: ${DATABASE_NAME}
      MYSQL_USER: ${DATABASE_USER}
      MYSQL_PASSWORD: ${DATABASE_PASS}
    ports:
      - "3306:3306"
    volumes:
      - ./backend/mysql_data:/var/lib/mysql
      - ./backend/my.cnf:/etc/my.cnf  # my.cnf 파일을 컨테이너 내부로 복사
    networks:
      my_custom_network:

dockercompose.yml의 일부분

이렇게 했지만!

unknown variable 'character-set-client-handshake=FALSE'

이라는 오류 발생.

mysql 8.4에서는 더이상 character-set-client-handshake=FALSE 사용이 불가능함. 그래서 my.cnf을 다음과 같이 수정

[client]
default-character-set = utf8mb4

[mysql]
default-character-set = utf8mb4

[mysqld]
character-set-client-handshake=FALSE(삭제)
character-set-server = utf8mb4
collation-server = utf8mb4_unicode_ci

다시 docker 실행

해결완료

4.2 응원 메세지 (get comments all) 호출 방법 이슈

응원 메세지 get all 호출할 때 있었던 문제입니다.

응원 메세지는 하단 슬라이더(footer)에서 지나가게됩니다.

4.2.1. 데이터를 2분 주기로 호출

→ 만약 데이터가 많아지면 2분 안에 모든 데이터를 다 보여주지 못할 수도 있다는 문제 발생

4.2.2. 슬라이더가 다 지나간 경우 호출

슬라이더가 처음 과 끝 이 있는데, 이 끝 이 다 지나간 경우에 get all 을 호출하도록 변경

→ api 호출이 너무 많아짐

4.2.3. 렌더링 및 응원 메세지 작성시 호출

렌더링시 get all api 호출
메세지 작성시 호출

{
  "code": 200,
  "message": "전체 댓글 조회 성공",
  "data": [
    {
      "id": 1,
      "nickname": "강록",
      "comment": "\\"나야 들기름\\"",
      "created_at": "2024-10-11T03:36:16.513564Z"
    },
    {
      "id": 2,
      "nickname": "강록",
      "comment": "ㅁㅁㅁㅁㅁㅁ",
      "created_at": "2024-10-13T19:19:47.616597Z"
    },
    {
      "id": 3,
      "nickname": "강록",
      "comment": "제가 야채의 익힘을 굉장히 중요하게 보거덩요",
      "created_at": "2024-10-13T19:20:14.129403Z"
    }
  ]  
}

3개가 이미 존재하는 데이터이고 이후 2개의 데이터가 쌓였을 경우, 리렌더링 또는 응원메세지를 작성하지 않으면 2개의 데이터는 볼 수 없음.

내가 응원 메세지를 작성하면 id는 6 에 저장되고 get all api가 호출되며 슬라이더가 최신 데이터로 바뀌게 됨

5. 피드백 및 고도화

사진이 왤케 가로로 늘어나있나요?
사진 height가 23em인데 사진을 감싸는 태그가 width: 50%네요 가로 디스플레이가 길어질수록 사진은 가로로 늘어나는데 세로는 고정이라 그런 것 같습니다
페이지 여백

닉네임 등록 뒤에는 변경이나 삭제가 안 되고, 모달 창을 다시 열면 내용이 사라지는데요, 이 경우 코멘트 창에 닉네임을 직접 입력할 게 아니라 위에서 등록한 닉네임이 자동으로 입력되게 하는 편이 좋지 않을까 싶어요 ㅎㅎ
글자 수 제한 (도배 방지를 위해)

프로메테우스 알람 기능 추가 (서버 부하 감지를 위해)

6. 마무리

개인적인 느낀점으로는 너무 재밌었습니다. 학교도 가고 알바도 하며 시간이 없었지만 내가 만들어보고 싶었던 것이기도 하고 어떻게든 완성하고 싶어서 매일 3~4시간~~(정말 눈이 안 떠졌어요...ㅠ)~~ 자며 완성했습니다. 물론 힘들었지만, 팀원들이랑 매일 디코에서 새벽 4~5시까지 같이 울며겨자먹기로 디자인부터 설계를 같이해서 해커톤 매일 하는 느낌도 들어서 재밌었고, 저의 한계가 어디까지인지 실험?해보는 경험이였습니다. 백엔드가 혼자라서 처음 django설계부터 배포까지 모든 걸 저 혼자하다 보니, 생각보다 할게 정말 많았습니다. 혼자 백엔드를 설계하며 django의 전체적인 프로젝트 흐름을 알게 되었고 프론트의 오류를 같이 공유하면서 어떤식으로 백엔드 api가 프론트에서 호출이 되는 지 알게 되었습니다. 처음으로 실사용자들을 받아봤는데, 실시간으로 모니터링 지표가 올라가니까 신기하더라구요. 이과정에서 모니터링 지표를 구성하는 방법과 이들이 어떻게 구성되는지도 배웠습니다. (이건 따로 블로그에 작성할게요!) 이런 작은 프로젝트에서도 고도화할게 많다는 걸 느꼈고 추후에 간단하게 고도화를 해보려 합니다!

다음 연말/연초 프로젝트는 인원 수도 늘리고 규모도 키워서 다시 찾아뵙겠습니다
팀명: ~~공장장이..~~

연말/연초 프로젝트로 다시 찾아뵙겠습니다. 감사합니다!

coder-ssy 님의 블로그

흑백요리사 맛집 모음 사이트 제작 (근데 이제 실 사용자를 곁들인...,)