프론트엔드 자료

이수진·2021년 8월 31일
1

항해

목록 보기
15/15

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

개요


  • 주요 기능:
    1. 사용자 위치 정보를 토대로 주변 배달 모집글 제공하여 사용자 매칭
    2. 매칭된 사용자 간의 세부정보 협의를 위한 채팅 기능
  • 개발 언어: 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- 도배, 욕설, 비방 등)
      • 프로필 매너점수 기능
        프로필에서 상대방이 받은 매너점수, 성별, 연령대 등을 통해 유저 정보를 확인하여 신뢰도를 판단 할 수 있다.

트러블 슈팅

웹소켓 간헐적 끊김

문제 발견 과정

  1. 채팅 밀림 현상
  2. 웹 소켓 끊김 현상
  3. 로거에서 action 발생 빈도 확인

해결 과정

  1. onChange 이벤트 발생마다 빈번한 setState(state의 상태변경)와 Action로 input 입력 시 느려져, useRef로 돔 요소 접근을 시도했습니다.
  2. 그 결과 공백을 시작으로 메세지가 하나씩 밀리는 현상으로 인해 다시 과도한 이벤트의 최적화를 위해 throttle 방식으로 시도했습니다.
  3. onChange 이벤트 발생 빈도의 개선이 있었지만, throttle 타이밍 특성 상 마지막 값 송신이 불가했습니다.
    (모두 이 경우에 해당하지는 않겠지만 유저의 수만큼 다른 패턴이 늘어나므로 일정 주기가 끝나지 않으면 이벤트를 호출하지 않는다.라는 것이 좋지 않다고 판단)
  4. 함수에 실어 보낼 메세지를 저장하는 Action이 빈번하여 생기는 현상이라는 결론을 내렸고,
  5. useRef로 리덕스를 거치지 않은 채 바로 웹소켓 함수에 담아 보내는 방식으로 문제를 해결했습니다.

결과

무의미한 액션 발생을 없애는 것으로 속도 개선 및 부하를 줄일 수 있었다.

이미지 렌더링 속도 최적화

문제 발견 과정

  1. 사이즈가 큰 이미지의 경우 프로필 수정 이후 이미지 렌더링 되지 않는 현상 발생
  2. 프로필 수정 api 요청의 응답이 페이지 렌더링 속도에 미치지 못하였다.
  3. api 요청 전 페이지 이동이 되면서 수정 액션이 실행되지 않았음을 확인 하였다. (api 요청 응답 없음)

해결 과정

  1. 비동기 처리 순서에 문제가 있다고 생각해서, api 요청이 완료되기 전까지 로딩 처리를 하였고, 로딩이 완료 된 후 확인 알럿 처리를 하였다.
  2. 그럼에도 불구하고 로딩이 너무 오래 걸리는 현상이 발생하여 서버에 올려주는 이미지의 용량이 매우 큰 것이 문제라고 판단하였다.
  3. 이미지 리사이징 라이브러리를 통해 서버로 api 요청 전 리사이징 된 이미지를 넘겨주었다.

결과 및 소감

  1. 큰 용량의 이미지를 업로드 해도 최대 사이즈가 300px을 넘지 않게 되었고, 처리 속도가 향상 되었다.
  2. 이전까지 서버에서 이미지 리사이징을 해왔지만 이것을 계기로 프론트 단의 처리가 필요함을 느꼈다.

빌드가 실시간 적용이 안되는 문제

profile
# 인생은 못 먹어도 GO # 오늘의 과제에 최선을 다하는 열심 인간

0개의 댓글