로컬밍글은 소셜 커뮤니티 서비스입니다.
쉽고 빠르게 함께 할 수 있는 활동을 만들고 참여해보세요!!
| 구분 | 링크 | 구분 | 링크 |
 |
Local Mingle |  |
브로슈어 |
 |
FE Github | |
팀 SA |
 |
BE Github |  |
Figma |
| 소셜 로그인 | 다국어 | 채팅방 |
 |
 |
 |
| 게시글 검색 | 게시글 필터링 | 인피니티 스크롤 |
 |
 |
 |
| 김태현 | (VL) 장소영 |
|---|---|
 |
 |
| ted0729 | ddoddiworld |
| 김태현 |
- 일반회원가입 / 로그인페이지 - 소셜 로그인 - 다국어기능 - 실시간 채팅 - 게시글 상세 페이지 - 마이페이지(회원정보 수정, 작성 이벤트 관리, 참여 이벤트 관리, 회원탈퇴) CRUD |
[email protected] |
| 장소영 |
- 메인페이지(카드뷰, 게시글 검색, 게시글 샐랙터 필터링, 인피니티 스크롤) - 게시글 작성 / 수정 페이지 - 1차 개발 범위에 대한 전체화면 퍼블리싱 - gitHub 관리 - Figma 관리 |
[email protected] |
| Vite React |
CRA와 비교하자면 Vite는 기본적으로 ESM(EcmaScript Modules)을 사용하며, 더 효율적인 모듈 번들링 제공하기 때문에 빌드 시간이 매우 빠라서 생산성이 올라갑니다. 또한 타입스크립트를 지원하기 때문에 채택했습니다. |
| TypeScript |
타입스크립트는 정적 타이핑을 지원하며, 코드 작성 시 변수의 타입을 명시적으로 지정할 수 있습니다. 이는 컴파일러가 코드를 분석하여 타입 에러를 사전에 찾아내고 예방할 수 있게 해 주기 때문에 코드의 일관성을 유지할 수 있다는 장점 때문에 채택했습니다. |
| Axios |
직관적인 API를 제공하여 HTTP 요청을 손쉽게 처리할 수 있습니다. 또한 요청과 응답을 가로채는 인터셉터(interceptor)를 제공하여 요청 또는 응답을 수정하거나 에러를 처리하는 등의 다양한 기능을 제공 받을 수 있으며 사용이 간편하여 채택했습니다. |
| React Router |
React Router는 SPA(Single Page Application)에서 클라이언트 사이드 라우팅을 관리합니다. 페이지 리로드 없이 URL을 변경하고, 적절한 컴포넌트를 렌더링하여 사용자에게 매끄러운 페이지 전환 경험을 제공하기에 채택했습니다. |
| React Query |
React Query는 서버 상태 관리를 위한 툴로, 데이터 가져오기, 캐싱, 동기화 및 업데이트 과정을 쉽게 관리합니다. 이를 통해 비동기 로직을 간결하게 작성하고, 애플리케이션의 성능을 향상시킬 수 있기 때문에 채택했습니다. |
| Recoil |
상태 관리를 단순화하고 선언적으로 처리할 수 있게 해주는 효과적인 도구로 타입스크립트를 지원합니다. 특히 중앙 집중화된 상태관리를 제공하여 전역 상태관리를 일관되게 관리할 수 있다는 장점이 있었고, 즉, 여러 컴포넌트에서 같은 상태를 쓰거나 수정할 때 편리하여 채택했습니다. |
| Styled Components |
컴포넌트 단위로 정의하므로, 컴포넌트에 대한 스타일이 해당 컴포넌트의 코드와 함께 위치하게 됩니다. 또한 상태에 따라 스타일을 동적으로 변경하거나, 조건부로 스타일을 적용할 때 효과적이기 때문에 채택했습니다. |
| Socket.io |
웹 소켓(WebSocket)기반으로 동작하는 JS 라이브러리로, 채팅 기능 구현을 위해 사용했습니다. 양방향 통신을 가능하게 해 주기 때문에 서버와 클라이언트간에 데이터를 실시간으로 주고받을 수 있습니다. |
| Intersection observer |
인피니티 스크롤 구현을 위해 사용했습니다. 스크롤 이벤트를 사용하면 매 스크롤마다 이벤트 핸들러가 호출되어 성능에 부담이 될 수 있는데, 이 API를 사용하면 비동기적으로 작동하며, 뷰포트와 대상 요소 간의 교차 여부를 비동기적으로 감지합니다. 스크롤 위치와 상관 없이 요소가 화면에 나타나거나 사라질 때 이를 감지할 수 있어 웹 페이지의 부하를 감소시킬 수 있습니다. |
| i18nex |
다국어 지원을 위한 인터내셔널라이제이션(i18n) 라이브러리로 다국어 기능 구현을 위해 사용 했습니다. 유연한 플로그인 시스템을 갖고 있으며 다양한 플랫폼과 프레임워크에서 사용 가능합니다. |
| Toastify |
alert 대신 사용자에게 좀 더 부드럽고 친화적으로 안내를 하기 위해 사용했습니다. 개발자가 쉽게 토스트 메시지를 표시하고 제어할 수 있도록 도와주며, 간편하게 토스트를 구현할 수 있습니다. |
시/도 옵션 선택시 구/군의 옵션이 바로 보이지 않고 몇초 뒤에 변경됨 [소영]
- 문제의 디테일시/도 샐랙터의 옵션을 변경하면 바로 구/군이 변경되어야 하는데 바로 변경되지 않고 몇초 뒤에 변경되는 이슈가 있었습니다.
- 해결을 위한 노력
우선 시/도 옵션을 변경하면 그 값이 잘 전달되고 있다는 것을 확인 한 뒤, useQuery 훅을 사용했는데 완전히 알지 못하는 기능들이 있는지 점검을 하게 되었습니다.
- 해결 방법
useQuery에는 data, isLoading, error 외로 refetch라는 것도 있는데 refetch는 데이터를 갱신하고 다시 가져오는데 사용됩니다. 주로 사용자 행동에 응답하여 데이터를 갱신할 때 사용되는데 이를 이용해서 데이터를 새로고침 후 최신 정보를 표현하기 위해 refetch와 useEffect를 이용해서 해결하였습니다.
토큰값 로컬스토리지 저장 오류 [태현]
- 문제의 디테일로컬스토리지에 저장된 토큰값을 받아오지 못했습니다. 스토리지에 저장은 되어있는데 get이 되지않았습니다.
- 해결을 위한 노력
오타를 찾고, 로컬스토리지에는 문자열만 저장되는게 맞는것인지 의심했습니다.
- 해결 방법
토큰을 객체라고 생각해서 JSON.stringify을 사용하여 문자열로 바꿔서 로컬스토리지에 저장하려고 했습니다. 그렇게 저장하니 로컬스토리지에 “”가 붙어서, 불러오지를 못했습니다. “”가 너무 당연한것처럼 붙어있어서 알아차리는데 힘들었습니다. 토큰들은 대체로 자체적으로 문자열이라는걸 알게됬고, 결정적으로 스토리지속의 토큰이 “” 안에있다는걸 알게되서 JSON.stringify을 없애고 해결됬습니다. JSON.stringify는 객체나 배열을 저장할때만 쓰인다는걸 알았습니다.
다국어 기능을 통한 언어변경시 리다이렉트 되면서 불필요한 api의 호출반복 [태현]
- 문제의 디테일다국어버튼을 통해서 언어가 변경되는걸 전역에 적용되도록 설정했는데, 변경버튼 클릭시마다 api를 불필요하게 매번 불러오는 현상 이었습니다.
- 해결을 위한 노력
api호출을 최소화 하기위한 방법을 구상했고, 캐시유지를 해야겠다고 생각하고 로직을 구현하려고 했습니다.
- 해결 방법
API 호출 최소화: staleTime이 Infinity로 설정되면, 데이터가 절대로 'stale'(오래된 데이터)로 간주되지 않아서, 언어가 변경될 때마다 같은 API를 다시 호출하는 일이 없게 됩니다. 즉, 같은 데이터를 여러 번 불러오는 것을 피할 수 있었습니다.
캐시 유지: cacheTime을 Infinity로 설정하면, API로부터 받아온 데이터가 캐시에서 지워지지 않습니다. 이렇게 하면 사용자가 다시 같은 페이지나 데이터를 요청할 때 빠르게 응답할 수 있습니다.
백엔드에게 Params로 값을 받을 때 받는 방법에 따른 모바일 소셜로그인 오류생성 [태현]
- 문제의 디테일백엔드에서 소셜로그인시 Params값으로 토큰을 넘겨줘서, 그에 맞게 get을 하고 if문을 통해서 받고있었는데,
모바일마다 기종이나 안드로이드 iOS에 상관없이 로그인이 되는유저와 안되는 유저가 있었습니다.
로그인이 되는 유저는 토큰값이 잘 받아졌는데 로그인이 되지않는 유저들은 받아지지 않았습니다.
- 해결을 위한 노력
모바일과 pc을 연결해서 모바일 디버깅을 통해서 계속 해서 console값을 찍어보며 로그인이 되는 모바일과 안되는모바일을 비교해 가며 문제를 찾아봤습니다.
- 해결 방법
백엔드에서 소셜로그인시 Params값으로 토큰을 넘겨줘서, 그에 맞게 get을 하고 if문을 통해서 urlParams.Size ! == null 인경우을 넣었었는데, 당연히 그냥 Params에 값이 없을 경우에 실행되지않도록 넣었던 조건문이었습니다.
알고보니 https://developer.mozilla.org/en-US/docs/Web/API/URLSearchParams/size 해당 사이트에서 확인해본 결과,
size를 조건에 넣으려면 각 모바일의 브라우저 버전이 가장 최신형이어야만 조건문이 통할 수 있었던것입니다.
그래서 브라우저 업데이트가 되지않은 모바일은 로그인이 되지않았던 것이었습니다. 결과적으로 최신화 되어있지않은 모바일 브라우저 환경에서는 urlParams.Size를 지원하지 않는데 사용하려 해서 발생한 문제로 크로스 브라우징을 위해 해당 변수 없이도 원하는 조건 필터링을 할 수 있어서 제거했습니다.
게시글 필터링, 검색 안되는 이슈 [소영]
- 문제의 디테일카드에 들어가는 API 조회 시 event, guestList, hostUser에 대한 정보들이 있고 아래 데이터 값들이 카드에 사용되고 있습니다. (아래 콘솔 내용 사진 참조)
하지만 필터링관련 API들은 event에 대한 정보들만 있기 때문에 카드에 들어가야할 나머지 값들을 확인할 수 있는 방법이 없습니다. (아래 스웨거 사진 참조)
event를 제외한 나머지 데이터 값이 없으므로 카드에 필요한 데이터 값을 찾을 수 없어 필터링을 할 때마다 빈 페이지 상태로 에러가 발생합니다.
- 해결을 위한 노력
백엔드측에서 적극적으로 필터에 대한 api 레이아웃을 맞춤 작업 해 주셔서 해결 완료 했습니다. 하지만 분리된 api에서는 개별적으로 컨트롤만 가능하지 &&조건으로는 연속적인 필터링은 불가능했습니다.
- 해결 방법
api를 하나로 통일하면서 && 조건도 같이 탈 수 있도록 로직 변경이 필요합니다.
마지막으로 유저 피드백 입니다.
프로젝트에서 좋게 평가해주신 부분은 디자인과 성능이 부분이며
불편하게 느끼신 상당 부분은 유저 편의성이 좋지 않다는 것 이였습니다.
그래서 짧게 남은 프로젝트 기간 동안 피드백을 최대한 반영할 수 있는 부분이 유저 편의성 부분이라고 판단하여,
이 부분을 중점으로 피드백을 반영 하였습니다.
| Before | After |
|---|---|
|
|
| 참여자 리스트에 작성자 본인도 포함되었으면 좋겠다는 의견 |
기존에는 작성자가 게시글 생성시 참여자리스트에 포함되지 않았지만 피드백 이후 포함 되도록 수정 |
| Before | After |
|---|---|
|
|
|
헤더에 텍스트로 이루어진 부분 때문에 화면이 다소 정신없고 꽉 차보인다는 의견 |
아이콘으로 대체하여 드롭다운으로 피드백을 반영 |
| Before | After |
|---|---|
|
|
|
게시글 작성 시 제목과 본문에 대해 몇 글자까지 작성할 수 있는지 알려주면 좋겠다는 의견 |
Placeholder를 활용하여 글자 제한 안내 문구 추가 |