1. 프론트엔드 자료
밀착 MealChak - FrontEnd🍙
MealChak Link : https://mealchak.com/
FrontEnd Github : https://github.com/hanghae99-MEALCHAK/MEALCHAK-client-application
BackEnd Github : https://github.com/hanghae99-MEALCHAK/MEALCHAK-server-application
🍽프로젝트 소개
점심을 시켜먹고 싶은데 , 배달업소에 최소 주문 금액이 높아 1인분만 시킬 수가 없어서,
때론 배달비가 아깝거나 가격이 비싸서, 때론 양이 너무 많아서
메뉴를 바꾸거나 망설인적이 있으신가요?
그런 분들을 위한 배달 모임 서비스 밀착🍙입니다!
밀착으로 같이 배달을 시킬 친구👭를 찾아 보세요.
🎯Target
- 최소 주문금액 때문에 먹고 싶은걸 포기하는 모든 이들
- 배달비가 부담스러운 사회 초년생과 대학생
- 혼자 밥먹는게 싫은 1인 가구
🎈기획 배경
우리는 코로나 이후에 배달 음식을 더 많이 주문하게 되었습니다.
그래서 옆에 철수와 내가 같은 곳에서 떡볶이를 따로 시킨다면 배달비도 2배로 들고 환경적으로도
불합리적이다 라는 생각이 들었습니다.
그래서 우리가 오토바이를 직접 이용하는 서비스에서 탄소 배출량을 줄인다면
환경 이슈에서도 큰 도움을 줄 수 있습다.
밀착이란 서비스는 일석이조 입니다, 고객은 배달료도 아끼고 탄소배출량도 줄일 수 있으니까요!
밀착 팀 소개
👨👨👦👦 팀원( 노션 링크 넣기)
- Frontend : 김건우, 이수진, 윤정현
React
- Backend : 박응수, 박강희, 이태경, 하연후
SpringBoot
- Designer : 박수진, 하유진
UX/UI
📅 진행 기간
- 21.07.23(금) - 21.08.31(화)
🎥 시연 영상
🗣 커뮤니케이션 툴
Github, Slack, Gather
개요
- 주요 기능:
- 사용자 위치 정보를 토대로 주변 배달 모집글 제공하여 사용자 매칭
- 매칭된 사용자 간의 세부정보 협의를 위한 채팅 기능
- 개발 언어: JavaScript
- 개발 라이브러리: React.js
- 형상 관리 툴: git
사용 패키지
- Redux (redux-actions, immer)
- connected-react-router, history
- axios
- swiper
- react-image-file-resizer
- 이미지 업로드 최적화를 위한 image resizer
- sockjs-client, stompjs
- moment
- react-daum-postcode
- styled-components
프로젝트 기능
-
소셜 로그인
- OAuth2.0 kakao 소셜로그인을 이용하여, jwt token을 서버로부터 받은 후 사용자 정보를 활용 함. 이때 성별, 연령 정보를 수집하여 사용자들의 신뢰도 향상을 도모 하였다.
-
모임 만들기
- step 1 - 주소 설정
- 유저가 최초 회원가입 및 로그인 시, 메인 화면 상단의 주소 설정 메뉴를 통해 내 지역을 설정하고, 내 위치를 기준으로 주변의 게시글을 확인 한다.
- 상대방의 게시글에 참가 신청을 하거나 원하는 게시글이 없다면 원하는 음식을 함께 주문하기 위한 모임을 만든다.
- step 2 - 배달 식당 지도 검색
제목, 내용, 만날 장소 등 정보를 입력하고 지도 상에서 특정 키워드(ex- 강남구 맛집, 써브웨이 신사점 등)로 검색해 배달 식당을 지정할 수 있다. 추후 게시글에서 식당 정보를 확인할 수 있다.
- step 3 - 모집글 작성
내가 원하는 음식을 함께 주문하기 위한 정보와 모집 기한을 입력 후 모집글을 올릴 수 있다.
-
채팅
-
채팅 시작하기 기능
-
모임에 참가하기 원하는 사람은 메인 화면 게시글에서 모집 인원, 만날 장소, 배달 식당 등을 확인 후 채팅 시작하기를 눌러 모임에 참가한다.
-
사용자들은 채팅 탭을 통해 참여 중인 채팅방, 요청 대기 중인 채팅 방을 확인 할 수 있으며, 자신에게 들어온 승인 요청을 거절 또는 수락 할 수 있다.
-
함께 배달할 모집원이 모인 경우
- 채팅방 안에서 자유롭게 메세지를 주고 받으며, 게시글에서 다 전달하지 못한 세부 내용 및 장소 협의 등을 정할 수 있다.
-
악성 유저를 대처하기 위한 기능
- 강퇴기능
채팅방에 참여 중인 사용자들 중 악성유저로 판단 되는 경우 방장에게 강퇴 권한을 부여하여, 해당 악성유저를 내보낼 수 있는 기능이 있다. (ex- 도배, 욕설, 비방 등)
- 프로필 매너점수 기능
프로필에서 상대방이 받은 매너점수, 성별, 연령대 등을 통해 유저 정보를 확인하여 신뢰도를 판단 할 수 있다.
트러블 슈팅
웹소켓 간헐적 끊김
문제 발견 과정
- 채팅 밀림 현상
- 웹 소켓 끊김 현상
- 로거에서 action 발생 빈도 확인
해결 과정
- onChange 이벤트 발생마다 빈번한 setState(state의 상태변경)와 Action로 input 입력 시 느려져, useRef로 돔 요소 접근을 시도했습니다.
- 그 결과 공백을 시작으로 메세지가 하나씩 밀리는 현상으로 인해 다시 과도한 이벤트의 최적화를 위해 throttle 방식으로 시도했습니다.
- onChange 이벤트 발생 빈도의 개선이 있었지만, throttle 타이밍 특성 상 마지막 값 송신이 불가했습니다.
(모두 이 경우에 해당하지는 않겠지만 유저의 수만큼 다른 패턴이 늘어나므로 일정 주기가 끝나지 않으면 이벤트를 호출하지 않는다.라는 것이 좋지 않다고 판단)
- 함수에 실어 보낼 메세지를 저장하는 Action이 빈번하여 생기는 현상이라는 결론을 내렸고,
- useRef로 리덕스를 거치지 않은 채 바로 웹소켓 함수에 담아 보내는 방식으로 문제를 해결했습니다.
결과
무의미한 액션 발생을 없애는 것으로 속도 개선 및 부하를 줄일 수 있었다.
이미지 렌더링 속도 최적화
문제 발견 과정
- 사이즈가 큰 이미지의 경우 프로필 수정 이후 이미지 렌더링 되지 않는 현상 발생
- 프로필 수정 api 요청의 응답이 페이지 렌더링 속도에 미치지 못하였다.
- api 요청 전 페이지 이동이 되면서 수정 액션이 실행되지 않았음을 확인 하였다. (api 요청 응답 없음)
해결 과정
- 비동기 처리 순서에 문제가 있다고 생각해서, api 요청이 완료되기 전까지 로딩 처리를 하였고, 로딩이 완료 된 후 확인 알럿 처리를 하였다.
- 그럼에도 불구하고 로딩이 너무 오래 걸리는 현상이 발생하여 서버에 올려주는 이미지의 용량이 매우 큰 것이 문제라고 판단하였다.
- 이미지 리사이징 라이브러리를 통해 서버로 api 요청 전 리사이징 된 이미지를 넘겨주었다.
결과 및 소감
- 큰 용량의 이미지를 업로드 해도 최대 사이즈가 300px을 넘지 않게 되었고, 처리 속도가 향상 되었다.
- 이전까지 서버에서 이미지 리사이징을 해왔지만 이것을 계기로 프론트 단의 처리가 필요함을 느꼈다.
빌드가 실시간 적용이 안되는 문제