incodevelop

🚨  TroubleShottingWhy(이유) ?팀프로젝트 중 코드리뷰 시간에1. useQuery / useSuspenseQuery를 사용할 때 useMemo를 꼭 사용해야하나? 2. useSuspenseQuery를 사용하는 곳들이 많은데 useSuspenseQueries로 한번에 가져오면? 이라는 의문이 들어 팀원들과 회의를 했다.1st How(과정) (1) useMemo는 언제 쓰이는지 부터 다시 생각해봤다.useMemo는 "value"에 대한 memoization이다.여기서의 value는  1) 함수가 return하는 값  2) 또는 값 자체를 뜻한다. 그럼 왜 memoization을 하나? 복잡한 연산이 re-렌더링 될 때마다 실행되는 것을 방지하기 위함이다.(2) 즉, useQuery로 가져온..

📌 Task TODOLIST- [x] 채팅방 나가기 버튼- [x] 채팅방 나갈 시 처리("chattng_room" 테이블 변경, "room" 테이블 변경, "participants" 테이블 변경, "remember_last_msg" 테이블 변경, storage에서 해당 유저의 이미지들 삭제)- [x] 남아있는 사람들에 대한 처리✨ 개발 내용1. 채팅방 나갈 시 처리- "chattng_room" 테이블 변경- "room" 테이블 변경- "participants" 테이블 변경- "remember_last_msg" 테이블 변경- storage에서 해당 유저의 이미지들 삭제 Why(이유) ?한 명이 채팅방을 나가면 해야할 처리들이 정말 많다. 나열해보자면- "chatting_room" table에서 해당 채팅..

📌 Task TODOLIST- [x] 마지막 메세지 저장하는 table 만들기- [x] 컴포넌트 mount 시 이전 마지막 메세지 강조처리- [x] 컴포넌트 unmount 시 마지막 메세지 기억✨ 개발 내용1. 마지막 메세지 저장하는 table 만들기 Why(이유)기존 채팅과 관련된 messages와 chatting_room 이라는 2개의 table이 있었지만,마지막 메세지는 유저마다 고유하고 다른 데이터이기 때문에 새로운 table을 생성하는 게 낫다는 판단 what(결과) remember_last_msg라는 table을 만들고 구성요소와 각 type은 다음과 같이 구성했다.  2. 컴포넌트 mount 시 이전 마지막 메세지 강조처리Why(이유)마지막 메세지가 무엇인지 그 메세지에 배경색 입히기 + ..

📌 Task TODOLIST- [x] 스크롤할 div 선정하기- [x] ref 부여하기- [x] onScroll props로 스크롤 함수 넣기- [x] 스크롤 다운하기✨ 개발 내용1. 스크롤할 div 선정하기2. ref 부여하기3. onScroll props로 스크롤 함수 넣기 How(과정) ?(1) 스크롤에 관여하는 요소들이 몇 가지 있었는데, scrollBox를 scrollRef 를 준 것의 current 값, 즉 scrollRef.current라고 할때, scrollBox.scrollTop - 스크롤 바가 현재 제일 최상단으로부터 얼마나 떨어져 있는지scrollBox.scrollHeight- 스크롤 가능한 영역의 전체 높이- 내용이 스크롤 밖으로 넘치는 경우 뷰포트의 길이보다 커질 수 있음 / 항..

📌 Task TODOLIST- [x] middleware 를 통한 라우트 보호- [x] 여러 라우트 보호가 필요하기 때문에 chain 만들기✨ 개발 내용Why(이유) ?컴포넌트 단에서 라우트 보호를 할 지(ex. (auth) / (nonAuth) 로 폴더를 나누어서),middleware에서 라우트 보호를 할 지 팀원들이랑 상의를 했는데 미들웨어가 당첨됐다.이유는1. 일단 각 컴포넌트에서 써야 할 보일러 플레이트가 줄어든다!권한이 없으면 router.push를 해주어야 한다든지, alert("로그인 후 이용가능 합니다") 등의 alert를 매 컴포넌트들에서 마다 처리를 해줘야 하는 것을미들웨어에서 아예 접근하지 못하게 처리하기로 했다. 2. 이번 기회로 middleware를 제대로 활용해보고 싶었다. H..

📌 Task TODOLIST- [x] 검색창을 열지 말지 결정하는 searchMode 상태 생성- [x] 검색기능 input창 + 검색 버튼 + 위/아래 버튼 생성- [x] 스크롤 중인지 여부에 따라서 absolute 값 주기- [x] 현재 보이는 메세지들 중 원하는 검색어 검색 시 일치하는 결과 배열 생성 - [x] 위/아래 버튼 누를 시 검색횟수 기반으로 up/down count state 생성- [x] 해당요소 찾아서 스크롤- [x] 색 칠하기(강조처리)- [x] 유효성 검사- [x] 검색종료 시 이전까지 검색하던 거 모두 clear✨ 개발 내용1. 검색창을 열지 말지 결정하는 searchMode 상태 생성2. 검색기능 input창 + 검색 버튼 + 위/아래 버튼 생성3. 스크롤 중인지 여부에 따..

📌 Task TODOLIST- [x] 채팅방에 참여 중인 멤버들 프로필 조회- [x] 채팅방에 실시간 online 멤버 표시✨ 개발 내용1. 채팅방에 참여 중인 멤버들 프로필 조회 Why(이유) ?현재 채팅방에 참여 중인 멤버들이 어떤 사람들인지 알 수 있어야 채팅을 할 때"그래서 이 사람이 어떤 사람이더라?" 할 유저들의 마음에 감정이입을..  How(과정) ?  (1) 현재 채팅방에 참여 중인 사람들의 정보를 불러온다.   (2) 채팅방 헤더에 참여 중인 사람들을 나열한다.  (3) 그 중에서 실시간으로 채팅방에 참여 중인 사람들은 컬러처리, 실시간 참여 중이 아닌 사람들은 blur 처리해야겠다.  what(결과) ? export const useParticipantsQuery = (roomId: ..

📌 Task TODOLIST- [x] user 데이터 전역관리✨ 개발 내용1. user 데이터 전역관리 Why(이유) ?user 데이터를 사용하는 컴포넌트가 많기 때문에, 전역적으로 관리할 필요가 있었다. How(과정) ?  (1) RootLayout.tsx에서 모든 컴포넌트들의 가장 상단에 InitUser.tsx 컴포넌트 생성   (2) useEffect 내에 userData를 받아오는 비동기로직 + 그 데이터에 따라 로그인 상태까지  (3) userData와 isLoggedIn 상태 모두 Zustand로 전역관리 what(결과) ? const InitUser = () => { const { isLoggedIn, setIsLoggedIn, setUser } = userStore((state) => ..

📌 Task TODOLIST- [x] 불필요한 서버 요청 줄이기- [x] TTV 줄이기🚨  TroubleShottingTTV를 줄이고자 초기에 가장 최신 메세지 10개만 가져오도록 했던 야무진 소망은.. 거꾸로 돌아가고 있었다.불필요한 서버요청과 TTV를 줄이자.Why(이유)?- 초기에 allMsgs(최신 10개의 메세지)를 서버에서 호출 후, 가장 최상단 CSR 컴포넌트 InitChat.tsx에 props로 받아서  setQueryData()로 초기 메세지를 호출함으로써 -> 호기롭게 TTV를 줄이고자 했으나,다른 곳에서 useMsgsQuery() (= useSuspenseQuery)를 호출하고 있어서 아무리 최상단 컴포넌트에서 set을 한들 다른 곳에서 useSuspenseQuery로 DB에 새로..

📌 Task TODOLIST- [x] 이전 메세지 더보기 기능 - [x] 더보기 버튼 만들기- [x] 가져올 메세지가 가져오고 싶은 메세지의 갯수보다 적으면? 더보기 버튼 안보이게  ✨개발 내용1. 이전 메세지 더보기 기능Why ?  처음부터 모든 메세지를 다 불러오면 많은 양의 데이터를 초기에 불러와야 해서 초기 로딩 시간이 길어질 거라고 판단.How ?  (1) 아예 처음에는 11개의 메세지만 서버로부터 받아서 CSR 페이징에서 hydration함으로써 초기 로딩 속도 줄이기  (2) 그 이후 이전 메세지를 더 보고 싶다면, 더보기 버튼 누르기 -> 이전 10개의 메세지 불러오기what ? 불러올 메세지 수 상수화export const ITEM_INTERVAL = 10;더보기 횟수에 따른 불러올 메..