2024-04~ 2024-08
문제:
파이썬의 selenium을 이용해 맛집 정보를 크롤링하고 CSV 파일로 저장하는 과정에서 웹사이트의 구조 변화나 데이터 포맷의 문제로 인해 소수의 에러가 발생했습니다. 또한, 저장된 CSV 데이터를 MySQL에 저장하는 과정에서 데이터의 불일치와 필터링 문제가 발생해 실제 맛집 랭킹과 관련 없는 항목이 포함되었습니다.
해결과정:
먼저, 에러가 발생하는 부분을 예외처리로 해결하여 크롤링 과정에서 데이터 누락 없이 완료할 수 있도록 했습니다. 저장된 CSV 파일을 MySQL에 넣는 과정에서는 Prisma를 통해 데이터베이스를 불러오고, 관련 없는 데이터를 필터링하여 실제 맛집 랭킹에 영향을 미치지 않도록 조정했습니다. 또한, 카카오 서치 API를 활용해 상세 정보를 추가로 입력하여 정확한 데이터를 제공했습니다.
얻은 점:
에러 처리와 데이터 필터링의 중요성을 배우게 되었고, 사용자에게 제공되는 정보의 신뢰도를 높이기 위해 데이터를 다루는 모든 과정에서의 세심한 처리 방법을 익혔습니다.
문제:
모바일 환경에서 네비게이션 바가 너무 많은 화면 공간을 차지해 사용자 경험이 저하되는 문제가 발생했습니다. 또한, 스크롤 이벤트가 과도하게 실행되어 성능 저하가 발생할 수 있었습니다.
해결과정:
스크롤 시 네비게이션 바가 사라지고 다시 나타나는 기능을 구현해 화면 공간을 확보했습니다. 그리고 스크롤 이벤트의 과도한 실행을 방지하기 위해 throttleHelper 함수를 사용해 성능을 최적화했습니다. 추가로 모바일 전용 하단바를 생성하여 주요 기능에 쉽게 접근할 수 있도록 개선했습니다. 반응형 사이즈와 텍스트 크기를 tailwind.config에서 조정하여 다양한 화면 크기에서 일관된 경험을 제공했고, React Native를 통해 웹뷰 기반의 APK 파일을 배포했습니다.
얻은 점:
모바일 환경에서의 UI 최적화와 반응형 디자인의 중요성을 깊이 이해하게 되었으며, 다양한 디바이스에서 일관된 사용자 경험을 제공하기 위한 세밀한 조정의 필요성을 실감했습니다.
export function throttleHelper(callback: () => void, waitTime: number): () => void {
let timerId: ReturnType<typeof setTimeout> | null = null;
return function () {
if (timerId === null) {timerId = setTimeout(() => {
callback();
timerId = null;
}, waitTime);}};}