youngwan2 / food-picker Goto Github PK

전통음식 페이지

• 데이터 부족으로 잠시 배제되었으나, 데이터를 구할 수 있게 됨에 따라 시간이 날 때 마다 다음 기능들을 추가해볼 예정

전통음식 상세 조회

• 현재 전통식품 조회는 대표식품 명칭만을 조회하여 해당 대표식품별로 존재하는 다양한 전통식품 정보를 조회할 수 없는 상태.
• 공공데이터로 제공되는 API 를 사용하여 전통식품 상세 조회 기능을 구현하려고 했으나, OPEN API 의 라우팅 에러가 반환되고, 해당 기관 측에서도 이에 대한 조치를 할 생각이 없어 보임. 다행히 2022년도 경에 XLS 파일 형태로 올려준 자료가 있음을 확인하였고, 아래와 같은 XLS 데이터를 정제하여 데이터베이스 저장 후 활용할 예정
  

대표식품별 건강 기능 정보 조회

• 현재 전통음식 페이지에 조회되는 각 음식들은 전통음식의 최상위 카테고리라고 할 수 있는 대표식품 명칭을 나열한 것. 그리고 각 대표식품은 동의보감, 식의심감 등의 고전의학서 라고 할 수 있는 저서에서 소개되어 있고, 각각 건강기능과 관련해서 어떤 효능을 보이는지도 나와 있음. 따라서 대표식품별 전통음식 조회 이전에 대표식품에 대한 간략한 정보를 사용자에게 제공해줄 수 있도록 하여 정보 사용성과 유용성을 높일 수 있도록 해볼 생각.
  

문제

레시피 상세 조회 이미지 사이즈 깨짐 문제 발생

발견일시

2023-11-10 오후 5:08

고려하고 있는 작업

음식 영양 데이터베이스 관련

사용자 선택 음식 데이터 기반 권장 칼로리 계산기

• 현재 음식영양 데이터베이스를 활용한 방식은 검색을 통한 조회 기능, 그리고 페이지네이션을 이용한 추가적인 데이터 조회 기능이 전부이므로 사용자가 입력하거나 선택한 음식 정보를 기반으로 칼로리를 계산하고 하루 권장 섭취량을 계산할 수 있는 기능이 있다면 좋을 것 같음.

칼로리 계산 외 영양소 시각화

• 이번에 대체되는 영양소 DB 정보의 경우 업데이트가 되면서 기존의 누락된 영양데이터가 많이 갱신됨. 따라서 이를 사용자가 쉽게 구분할 수 있도록 d3.js 혹은 chart.js 와 같은 데이터 시각화 도구를 활용해볼 예정.

필터링 기능(#29)

• 같은 이름의 음식이라도 외식과 가정식, 급식 등의 기준에 따라 동일한 이름의 다른 데이터가 존재함. 이러한 구분을 쉽게할 수 있는 필터링 기능과 검색 기능을 통합하여 제공할 수 있다면, 사용자는 더 쉽고 효율적으로 필요한 음식 데이터와 영양 정보를 획득할 수 있음

3d 입체 카드 전환 애니메이션을 실행하기 위한 컨트롤 버튼 추가(#25)

• 현재 구현된 부분은 4면체의 3D 형식의 카드로 만들어져 있으나, 별도의 컨트롤 버튼을 추가하는 작업을 하지 않아서. 조작이 불가능한 상황이므로 이에 대한 기능이 필요함

루트 페이지(#24)

루트 페이지 개선

• 기존 루트 페이지는 각 주요 페이지에 대한 간략한 소개와 네비게이션 역할을 하고 있었음. setInterval 을 이용한 3초 단위로 슬라이드가 자동으로 변경되는 방식으로 구현 하였는데, 키보드, 마우스, 자동 슬라이드 방식으로 사용자가 더 효율적으로 확인할 수 있는 기능을 추가하고, 전체적인 다지안과 레이아웃을 변경할 것임.

문제상황

• (개요) HACCP 조회 페이지에서 API 요청 시 실패하는 문제가 발생
• (원인) 공공데이터포털의 OPEN API 에서 HACCP API 경로에 대한 수정이 있었고, 이로 인해 기존 요청 경로가 존재하지 않게 되어 문제가 발생

발생경로

• https://port-0-foodpicker-12fhqa2blnl2zdg4.sel5.cloudtype.app/haccp

처리 예정일

• 확인되는대로 즉시 수정

시연이미지

계속된 로딩

네트워크 확인 결과 서버에러

문제상황

• 초기 데이터 렌더링 기점에서는 페이지네이션이 정상적으로 동작함
• 문제는 키워드 검색 이후 페이지를 10페이지 이상 이동하고 나서, prev 버튼으로 뒤로 가기 하면 데이터 자체는 해당 페이지로 렌더링 되는 반면, 페이지네이션의 경우에는 9페이지 이하로 내려갔음에도 10페이지 이상의 버튼이 렌더링되어 있음

10 페이지에서 뒤로가기 버튼을 클릭하였음에도 페이지 번호 포커스는 정상적으로 이동했으나, 보여지는 화면은 다음과 같음

문제원인

• 사용자의 추가적인 키워드 검색 이후에 0 페이지 이상 페이지를 이동하고 나서 생기는 문제인 것을 보면, 검색과 페이지 이동 사이의 로직에 충돌이 발생하는 것으로 보임. 향후 디버깅을 통해서 데이터가 어떻게 흘러가고 있는지 파악해볼 필요가 있음

문제상황

• 로드뷰를 풀 스크린 형태로 확장 시 헤더 레이아웃이 로드뷰 보다 가시성 우선순위가 높게 잡힘에 따라 로드뷰를 컨트롤 하는 버튼을 조작하지 못하게 되는 문제가 발생함.

발생원인

• 로드뷰 마커를 모듈화하여 별도의 컴포넌트로 분리하는 작업을 수행할 때, SCSS 를 잠시 건드렸는데 이 때 문제가 발생한 것으로 추측

발견 일시/조치 예정일

• 발견 일시: 2024.06.17 오후 11:27 경 발견
• 조치 예정일: 2024.06.17 오전 중으로 처리 예정

참고 이미지

비고

• 재접속 후 확인해보니 이번에는 정상적으로 렌더링 됨. 어떤 문제로 인한 것인지는 파악 필요
  

• 2024.06.16 오후 11:32 해당 차이가 어떤 이유로 발생한 것인지 확인해보니, 헤더의 가시성 우선순위가 높은 것인 분명한 원인으로 보임. 앞서 정상적으로 로드뷰가 나왔던 이유는 스크롤 위치에 따라 헤더와 겹치는 부분이 아니었기에 그럤던 것.
  

주요 내역(24.05.24 ~)

#55 큰 크기의 이미지 다운로드 시 화면 버벅임 문제 개선을 위한 조치 및 레시피 목록 디자인 변경
#51 feat:실시간 채팅서비스 추가
#42 레이아웃 깨짐 문제 외 페이지네이션 깨짐 문제 개선
#36 모바일 웹 환경에서 레이아웃 깨짐 문제 개선 외 Local 관련 컴포넌트 구조 개선
#34 추가된 페이지에 대한 코드분할 적용, 일부 Common 폴더 내 컴포넌트 위치 이동 및 리스트의 누락된 key 속성 추가
#31 프론트엔드 CI/CD 적용 및 전통식품조회 기능 추가
#29 식품영양조회 페이지의 다중 필터 기능 외 디바운스 적용
#28 백과사전 모달 레이아웃 및 디자인 변경, 최근 검색어 기능 추가 외
#26 Haccp 상품 카드 호버 시 아무런 호버 효과가 나타나지 않는 문제 개선
#25 식품영양조회 페이지 내 카드 목록의 3d 회전 애니메이션 기능 추가
#24 루트 페이지 플립 슬라이드 애니메이션 추가 외
#23 향토 이야기 페이지 디자인 및 레이아웃 수정, 지역 필터 기능 추가 외
#22 헤더 컴포넌트 내 모바일 네비게이션 메뉴 디자인 변경 외
#21 식품영양정보 조회 페이지 디자인 변경 및 로직 개선 작업, 탐색경로 레이아웃 깨지는 부분 수정 작업
#19 레시피 세부 페이지 UI 디자인 변경 및 비효율적인 로직 개선 작업
#18, #17 리덕스 툴킷 및 관련 로직 제거, 브라우저 스토로지 기반 캐싱처리 기능 구현
#16 recipe 페이지 UI 및 디자인 수정, 기존 무한 스크롤 기능 최적화 작업 외
#14 feat:HACCP 페이지 UI 디자인 및 레이아웃 변경
#13 향토이야기 지도 로드뷰 기능 추가 외 개선작업
#12 이미지 스프라이트 기술을 적용한 Haccp 카테고리 조회 기능 및 불필요한 목록 요청 방지를 위한 로직 추가 외
#11 haccp 카드 애니메이션 추가 및 검색 기능 재연동

예정중 혹은 추가해보면 좋을 것들

• 전통식품 용어 조회 서비스(비고: 2024.06.12 기준 - 상세 페이지 정보 조회에 대한 openAPI 이 차단되어 상세 조회 불가)(#40 )

현재 진행중인 것

문제상황

• localmarket 페이지에서 페이지 하단으로 스크롤 후 다음 페이지에 대한 커서에 http:// 스키마가 반환됨에 따른 CORS 문제로 리소스 요청에 대한 응답이 차단됨. 하지만 localfood 페이지 경우는 localmarket과 동일한 설정에 의한 동일한 Get 요청을 수행함에도 CORS 문제 없이 정상적인 https://~ 경로로 Get 요청을 함.

비고

• 서버 측에서 추가 데이터 로드를 요청 받으면, 해당 데이터를 json 객체에 담아서 응답하는데, 이 때 next 프로퍼티에 다음 요청에 사용한 URL 을 담아서 반환함
  

• localfood 의 경우도 마찬가지로 동일한 서버 측 로직에 의해 next 를 반환받음
  

• 그리고 이 두 컨트롤러 모두 동일한 환경변수 설정에 의해 사용됨

• LocalFood
  

• LocalMarket
  

특이사항

• localfood 페이지와 localmarket 페이지는 서버에서 서로 동일한 로직에 의해 .env 환경변수에 저장된 API_PROTOCOL 을 기반으로 동일한 스키마를 공유하고 있었음. 이는 클라우드 플랫폼 배포 시에도 동일하게 적용되는 부분으로 서로 같은 환경변수를 참조하기 때문에 http 와 https 중 하나는 통일되어 설정되어야 함에도 서로 다른 스키마가 적용됨

• 백엔드 로직 중 localmarket.controller 의 .next 관련 로직

• 백엔드 로직 중 localfood.controller 의 .next 관련 로직

개요

• 2024.06.06 기준 최소 1주 이내 배포 예정
• 프론트엔드의 경우 CI/CD + 깃허브 액션을 통해 AWS S3 에 빌드 파일을 올리고, cloud front 를 통해 htts 로 배포하는 과정을 진행할 예정

비고

• 2024.06.06 기준, 현재 테스트 배포 까지는 성공하였고(수동 S3+CloudFront), 향후 Github actions CI/CD (자동) 적용할 예정
• 2024.06.11 깃허브 액션을 사용한 CI/CD 적용 예정
• 2024.06.11 배포 완료(#31)

프론트엔드 배포 과정 히스토리

AWS S3+CloudFront | 초기셋팅
AWS S3+CloudFront | Github Actions CI/CD

배포 방향

• 현재 까지 생각해본 방향은 cloudtype 을 사용하여 백엔드를 배포할 예정. 클라우드타입은 국내 클라우드 플랫폼으로 최근에 가파르게 성장하고 있는 곳임. 내부적으로 도커를 사용하여 특정 환경에 제한되지 않고 사용할 코드만 배포하면 나머지는 알아서 빌드 후 배포까지 처리해주는 것이 장점.
• 클라우드 타입을 이용하고자 하는 이유는 최대한 비용 부담을 줄이기 위해서임. AWS EC2 를 이용한 배포는 이미 해봤고, 현재 재개발 중인 현 프로젝트의 배포측면에서의 목표는 프론트엔드는 AWS S3 와 Cloud Front, Github Actoins 를 이용한 CI/CD 를 배포해보는 것이 주이므로 백엔드의 경우에는 최대한 간편하고 비용 효율적인 방향으로 배포 하고자 함. 다만 Github Actions 을 적극 사용하여 배포 자동화를 시도해보는 것이 백엔드에서의 최종목표임

비고

배포 현황

• 2024.06.12 배포 완료

프라이빗 저장소

• 해당 SQLite3 의 db 파일에는 개인 정보가 저장되어 있지는 않지만, 데이터 자체가 돈 이므로 이를 외부에 노출하는 것은 꺼려지는 상황. 따라서 코드 자체는 공개하고, DB 자체는 숨기기 위해 레포지토리를 공개용, 숨김용 두 개로 만들고, 숨김처리한 저장소를 통해 배포 진행 할 것

데이터베이스

• 데이터베이스의 경우 SQLite3 를 사용하고 있음. 프로덕션에서 사용하는 경우에 가볍고 경량화 되어 있다는 점에서 큰 장점이지만, 수백 MB 의 데이터를 저장하고, 이를 삽입, 삭제, 수정하는 쓰기 작업이 다수 유저에 의해 동시에 일어나면 성능 저하 문제가 발생함. 즉, 직렬화된 쓰기 작업 처리로 인해 동시성 제어 문제가 나타날 수 있음.
• 그러나, 현 프로젝트는 읽기 작업만 허용하고 있으며, 읽기 작업의 경우에는 SQLite는 다수 사용자에 의한 동시 읽기를 지원함. 따라서 동시성 제어 문제가 발생하지 않음
• 단, 쓰기 작업을 처리 중이라면 읽기 작업도 대기상태에 놓임. 이는 쓰기작업과 읽기 작업을 같이 처리하는 데이터베이스로서 사용한다면 성능 저하 문제가 큰 이슈가 될 수 있으나, 현재 프로젝트는 데이터베이스에 대한 읽기 작업만 허용하므로 이러한 이슈와 크게 연관되지 않음. 따라서 해당 SQLite3 를 프로덕션에서 사용해도 괜찮겠다라는 결론을 얻음

배포 과정 히스토리

[푸드피커] Github Actions 를 활용한 NodeJS 백엔드 배포 CI/CD 구축(With 국내 클라우드 플랫폼 Cloudtype)

배포 결과

문제상황

• 2024.06.14 오후 2시 경 HACCP 페이지 접속 히 pageNo 이 undefined 라는 메시지가 명시되면서 페이지 에러가 발생함.
• 해당 문제가 발생한 원인 공공데이터 포털 API 를 제공하는 기관 측 서버에서 문제가 발생하여 HTTP ERROR 04 를 반환함에 따라 요청에 대한 응답을 받지 못해서 발생한 문제

조치

• 현재 해당 페이지에 사용자 친화적이지 못한 에러 페이지가 뜨는 것을 확인하고, 이를 급히 추가하는 작업을 수행함(#43 )
• API 문제와 관련해서 해당 기관에 연락 및 문의 후 대기 중

문제사항

Nutrtion 페이지에서 데이터 조회 후 상세 페이지를 이동하고, 다시 뒤로가기를 누르면 조회된 결과가 초기화 되는 문제가 발생하고 있음.

발생일시

2023-11-09. 오후 6시 00분

문제상황

• 데스크톱, 노트북 등에서는 정상적으로 아이콘이 작동하지만 모바일, 테블릿 환경에서 아이콘 터치 시 모달이 정상적으로 표시되지 않음.

발생일시

• 2023-11-13 오전 11 : 20

개요

• 기존에 HACCP 페이지의 상품 목록을 조회시 scroll 이벤트 기반으로 불러온 목록을 slice 메서드로 복사하여 , 이를 새롭게 불러오는 목록과 이어붙이는 방식(ex. [...old, ...new] )으로 목록을 렌더링했음
• 하지만, 이 방식의 문제점은 scroll 이벤트가 매번 발생 하였고, 렌더링 성능가 맞물려 리소스 자원 낭비가 심하다는 단점이 있었음.
• 또한, 복사된 목록을 이전 목록과 이어 붙이는 방식의 경우 불필요하게 로직이 복잡해지고, 매번 useEffect 를 사용하여 리렌더링을 계속해서 발생시킴.
• 그리고 추가적인 기능을 확장하는 부분에 있어서도 큰 불편을 경험하였음.
• 따라서 해당 문제를 개선하기 위해서 tanstack-query/react 를 사용하여 캐싱처리의 이점과 보다 유지보수성을 높이고, 개발 편의성을 개선할 수 있도록 할 필요가 있다고 판단.

문제사항

• 라우트 설정이 잘못되어 잘못된 페이지를 로드 중

문제상황

• 전통식품 조회 페이지에서 페이지네이팅을 통해 다음 페이지 이동을 하는 경우 목록을 조회하는 레이아웃의 높이가 좁아지면서 보기 좋지 못한 현상이 발생

조치방향성

• min-height 에 일정 높이를 최소 값으로 부여하여 레이아웃이 재계산 되는 폭을 최소화할 것
• 현재 페이지에서 새로운 페이지를 불러올 때 Tanstack/query-react 를 사용하고 있으므로 이전 페이지와 다음 페이지에 대해 미리 데이터를 불러와서 사용하는 방식으로 처리해도 좋을 것 같음.

발생경로 및 발견일시

• 발생경로: https://foodpick.co.kr/traditional
• 발견일시: 2024.06.14

조치 예정일

• 2024.06.14

참고 이미지

• 레이아웃 시프트 현상이 생기기 전
  

• 레이아웃 시프트 현상이 생긴 후
  

문제상황

여기서 페이지 새로고침을 하면 다음과 같은 화면이 ..

문제원인

GET 요청 시 경로와 클라이언트 측의 라우터 경로가 일치함에 따라 새로고침 시 클라이언트 측 화면을 렌더링하는 것이 아니라 서버 측 경로에 대한 요청 결과가 화면에 표시되는 것으로 보임

개요

• 2024.06.12 일자 기준으로 정상 동작하던 서버가 2024.06.13 오전 중 알 수 없는 문제로 서버 실행이 되지 않는 문제가 발생함.
• 해당 문제는 원인 파악이 끝나면 바로 처리할 것

참고 이미지

• 빌드는 성공적으로 마무리 되었으나, 서버 실행 시 해당 로그를 기록하는 실행 로그를 보면 아무런 에러가 뜨지 않고 무한 대기중인 상태에 있음
  

보다 효율적인 캐싱처리의 필요성

• 현재 레시피의 실질적인 조리법 등을 소개하는 세부 페이지에서 각 레시피별로 매칭하여 보여주기 위해 레시피의 고유 식별자와 매칭되는 목록만 전역 상태로 관리하여 사용하는 방식으로 쓰이고 있음.
• 그러나 사용자가 새로고침을 하게되면, 상태가 초기화되면서 빈페이지가 보이는 문제가 발생하여. 새로고침 이후에도 캐시된 데이터를 활용할 수 있도록 추가적인 로직 처리가 필요해짐.
• (비고) open api 를 사용하여 데이터를 외부 백엔드에서 가져오고 있고, 이를 위한 GET 요청 한도가 1000 이라는 매우 제한적인 상황에서 쓰이기 때문에, 이를 효율적으로 사용하기 위해 전역상태로 관리하였음.

참고 이미지

세부 페이지(새로고침 전) : 정상적으로 세부 페이지가 보여짐

• ※ 참고로 해당 세부 페이지의 디자인은 수정할 예정(24.05.28 기준).
  

새부 페이지(새로고침 후) : 기존 데이터가 빈 배열로 초기화되었기에 로딩 화면에서 멈춤