프로젝트 링크 : https://rivervue-mergi.netlify.app/
- Mergi는 프로젝트 팀원을 구하는데 어려움을 겪는 사람들을 위해 만들어진 네트워킹 플랫폼입니다.
- Git에서 브랜치를 하나로 합치는 "Merge"처럼 개발자, 디자이너, 기획자가 하나의 팀으로 결합하여 새로운 프로젝트를 만들어나가는 과정을 지원합니다.
- 다양한 분야의 취업 준비생들이 협업 경험을 쌓고, 프로젝트를 진행할 수 있으며, 스타트업 및 소규모 팀에서 신뢰할 수 있는 사람들을 빠르게 찾아 팀워크의 결속력을 높이며, 성공적인 창업을 위한 기틀을 마련할 수 있습니다.
- 또한 스터디 매칭도 지원해 원하는 주제, 원하는 기술 스택을 공부하는 스터디 그룹을 모집하여 함께 공부하고 성장할 수 있는 기회를 제공할 수 있습니다.
프로그래머스 데브코스 3차 프로젝트 2팀 한강vue
| Frontend | Frontend | Frontend | Frontend | Frontend | Frontend |
|---|---|---|---|---|---|
 |
 |
 |
 |
||
| 안지원 | 김현우 | 안민하 | 권윤지 | 이예지 | 임승현 |
| @wldnjs990 | @kodingzz | @AAminha | @yoo-nji | @y-yeji | @SeungHyeon-web |
- 🚨 Fix: [수정 대상] - [수정 내용]
- ✨ Feat: 새로운 기능 추가, 사용자 입장에서 변화가 있을 경우
- 🎉 Init: 프로젝트 초기 생성
- 📝 Chore: 그 외 자잘한 수정에 대한 커밋, 주석, 의존성 설치, 리드미 수정
- 💄 Style: CSS, styled-component 스타일 관련 변경
- 🔨 Refactor: 코드 리팩토링에 대한 커밋, 사용자 입장에서 변화가 없는 코드, 파일명 폴더명 변경 및 이동
- 🗑️ Remove: 파일을 삭제하는 작업만 수행하는 경우
- ♻️ Format: 코드 포맷팅 변경에 관련된 작업
- 🎨 improve: 코드 구조나 사용자 경험을 개선하는 경우
- 닉네임 중복 확인을 위해 모든 유저 리스트를 불러와서 일치하도록 코드를 만들었는데 유저가 많아질 시 데이터를 받고 일치 여부를 확인하는 시간이 길어질 것이라 판단되었습니다.
- 이로 인해 예상되는 문제점은
- 모든 유저 데이터를 가져옴으로써 네트워크 트래픽 급증
- 불필요한 필드까지 조회함으로써 서버 리소스 낭비
- 클라이언트에서 일치 여부를 확인해 시간이 소요되는 동안 응답 지연 발생 가능
- supabase에서 query문으로 모든 유저 리스트의 닉네임을 확인하고 중복 여부만 반환할 수 있는 function을 제작하여 일치 여부에 대한 로직을 supabase로 일임할 수 있게 했습니다.
- 이를 통해 javascript에선 해당 function을 호출하여 중복 여부를 boolean으로 확인하여 로직을 간소화할 수 있었습니다.
- 게시글 리스트 필터링 기능을 구현하는 과정에서 필터링 기능을 사용할 때 마다 네트워크 요청이 과하게 발생했었습니다.
- 이는 관련 데이터를 불러오기 위해 기존의 API 함수 내에서 또 다른 API를 호출하고 있었기 때문이었습니다.
- 한 번 API를 호출인 것 같지만 몇 배에 달하는 API 호출을 하고 있어 네트워크 트레픽이 심하게 쌓이고 supabase의 요청 한도를 넘어서는 문제까지 발생했었습니다.
- 게다가 네트워크 요청이 상당한 만큼 리스트를 렌더링 하는데 체감이 될 정도로 시간이 오래 걸리는 문제도 추가로 발생했었습니다.
- 기존의 API 함수를 supabase의 function 기능을 이용해 서버에서 필터링을 처리하도록 로직을 수정했습니다.
- 추가로 Tanstack Query를 적용해 데이터를 캐싱하여 렌더링 시간을 더욱 단축시켰습니다.
- 이미 신청된 게시물에 대해 onMounted를 사용해 게시글 신청여부 데이터를 받아와 신청취소 UI가 보이게 만드는 로직을 사용했지만 여전히 신청하기 UI가 유지되는 문제점이 있었습니다.
- 이는 onMounted가 컴포넌트가 마운트 된 이후에 실행되는 훅인데 신청여부 데이터를 받아오는 함수가 비동기적으로 실행되기 때문에 페이지가 마운트 된 시점에 데이터를 업데이트 해주지 못 해 발생한 것으로 보였습니다.
- onMounted훅을 사용하지 않고 watch 함수를 사용해 게시글 신청여부 데이터가 업데이트 됨을 감지해 UI를 업데이트 하는 로직을 사용하여 비동기적으로 데이터를 받아온 이후에도 정상적으로 신청취소 UI가 변경되도록 수정했습니다.