👨👩👧👧 가족 네트워킹 프로젝트 ⭐️ (FNS)
가족 단위의 네트워킹 서비스로, 가족 구성원들 간의 소통을 활성화하고 연결할 수 있는 공간을 제공합니다.
- 🚩가족의 목표를 설정하여 매주 친밀도 미션을 진행할 수 있습니다.
- (예시: “일주일에 한 번 부모님이랑 통화하기”, “한 달에 한 번 온 가족 식사하기”)
- 부가적으로💞 가족의 사진을 공유하고 관리할 수 있는 갤러리와(댓글, 좋아요 기능 포함), 가족 기념일, 모임, 여행 등 일정을 관리할 수 있는 캘린더 서비스를 제공합니다.
- 음성메시지함을 두어, 🎙가족 간의 따뜻한 잔소리를 녹음하고 기록할 수 있는 서비스도 제공합니다.
- 각각의 기능들에 따라 반응하는 실시간 알림 기능을 제공하고, 구성원들의 접속 상태도 확인할 수 있습니다.
🔔 도란도란은 반응형으로 웹과 모바일 모두 이용 가능한 서비스입니다.
- 총 기간: 2022/04/22 ~ 2022/06/03
- 배포: 2022/05/26
| 김정태🔰 | 이덕행🖌 |
|---|---|
 |
 |
Front-End |
Front-End |
로그인 회원가입 CI/CD 세팅 및 배포환경 구축(w/ AWS Route53, Amplify)
캘린더 음성메시지 알림 랜딩페이지
홈페이지 전반적인 반응형CSS 구현 갤러리 미션페이지
가족관련기능 프로필관련기능
| Name | Appliance | Version |
|---|---|---|
| React | 리액트 | 18.0.0 |
| Axios | HTTP 클라이언트 라이브러리 | 0.26.1 |
| browser-image-compression | 이미지 압축 라이브러리 | 2.0.0 |
| connected-react-router | 라우터 | 6.8.0 |
| dayjs | 날짜, 시간 출력 | 1.11.1 |
| History | 페이지 이동 | 4.10.1 |
| Immer | 불변성 유지 | 9.0.12 |
| React-calendar | 캘린더 | 3.7.0 |
| React-dom | 브라우저 렌더링 | 17.0.2 |
| React-icons | 아이콘 | 4.3.1 |
| React-mic | 녹음 | 12.4.6 |
| React-redux | 상태관리 | 7.2.8 |
| React-router-dom | 라우터 | 5.2.0 |
| React-slick | 슬라이드 | 0.28.1 |
| React-intersection-obserber | 무한스크롤 구현을 위해 사용 | 9.1.0 |
| Redux | 상태 관리 | 4.1.2 |
| Redux-actions | 액션 관리 | 2.6.5 |
| Redux-logger | 리덕스 미들웨어 | 3.0.6 |
| Redux-thunk | 리덕스 미들웨어 | 2.4.1 |
| Slick-carousel | 슬라이드 | 1.8.1 |
| Socket.io | 실시간알림 | 4.4.1 |
| Socket.io-client | 실시간알림 | 4.4.1 |
| Styled-components | CSS in JS | 5.3.5 |
녹음된 음성메시지가 IOS에서 재생되지 않는 문제
- 문제상황
- 녹음된 음성을 인코딩할때 MediaRecorder에서 지원하는 코덱중 대부분 플랫폼에서 사용가능한 vp8 코덱과 해당 코덱으로 만들 수 있는 webm컨테이너를 사용하여 음성을 인코딩하였더니, IOS에서는 재생되지 않는 문제가 발생하였습니다.
- 원인
- IOS15부터는 webm audio를 지원하지만 이전 버전은 지원하지 않는다는 사실을 알게되었습니다.
- 해결방안
- IOS에서 지원하는 포맷이 mp3, wav, ogg 라는 것을 알고 서버에서 s3로 저장할 때 mp3로 컨버팅하여 저장하기로 하였습니다.
- ffmpeg를 이용하여 저장하고자 하였고 클라이언트에서 기존에 보내줬던 blob형태로 파일을 전송할 시 변환되지 않는 이슈가 생겨 file 형태로 전달하였습니다.
- 결과
- mp3형태로 저장되어 아이폰에서는 녹음된 음성을 바로 들을 수 없지만 업로드 후 재생시킬 수 있었습니다.
캘린더에서 다음달 일정조회가 되지 않는 문제
- 문제상황
- 이번달 일정등록 후 문제없이 조회가 되는 것을 확인하고 다음달 일정을 등록하였으나 서버에는 업로드된 것을 확인하였고 뷰에서는 보여주지 못하는 문제가 발생하였습니다.
- 원인
- 개발자도구를 통해 span 태그 내에 데이터가 동적으로 변화하는 것을 감지하고 변화에 따라 페이지가 렌더링될 수 있도록 코드를 작성하였다고 생각하였으나 코드는 변화를 감지하지 못한채 처음 렌더링된 일정만을 보여주고 있었습니다.
- 해결방안
- 해당월을 나타내주는 코드를 감지해서 새롭게 렌더링시켜주는 것이 필요하겠다 생각했습니다.
- DOM의 변화를 감지해야했고 가장 적절해보이는 MutationObserver를 통해 span태그 내의 데이터 변화를 감지한 뒤 해당하는 월의 데이터를 조회할 수 있도록 하였습니다.
- 결과
-이전코드
-이후코드
-결과페이지
- 처음 렌더링되는 월에 대한 조회뿐만 아니라 화살표 클릭시 다음달 혹은 이전달의 일정데이터를 조회할 수 있게 되었습니다.
이미지가 늦게 업로드되는 문제
- 문제상황
- 이미지 업로드 및 데이터를 받을 때 시간이 너무 지연되는 현상 발생했습니다.
- 원인
- 이미지를 업로드 시 이미지의 데이터 용량 그대로 업로드하고 데이터를 받기 때문에 발생하는 것으로 판단했습니다.
- 해결방안
- 이미지를 formdata로 변환하기 이전에 압축해서 서버로 전달하기로 결정했습니다.
- 이미지 업로드 시 browser-image-compression 라이브러리를 사용하여 이미지 파일을 1MB 이하로 압축했습니다.
- browser-image-compression 라이브러리를 사용 시 File이 Blob 형식으로 변환되기 때문에 다시 File 형식으로 변환 후 FormData에 담아 서버로 전송하여 업로드 및 데이터를 받을 시 걸리는 시간을 줄였습니다.
- 추가로 사용자가 이미지가 업로드되는 상황을 인지할 수 있도록 사진 추가 버튼에 스피너를 적용했습니다.
- 결과
- 포토 페이지 조회 속도 : 파일 별 용량에 따라 약 3~4배 단축
- 이미지 업로드 속도 : 파일 별 용량에 따라 약 32% 단축
- 프로젝트 클론
$ git clone https://github.com/Jayteeee/Family_Project.git- 패키지 설치
$ cd Family_Project
$ yarn install- 환경변수 설정
// FAMILY_PROJECT 폴더 안에 .env 파일 생성 후 아래의 내용을 기입 후 저장해주세요.
REACT_APP_KAKAO_REST_API="카카오에서 받은 REST API Key"
REACT_APP_REDIRECT_URI="설정한 Redirect URI"