토이프로젝트2_5조_smartalk #6
Conversation
Feat: 채팅 카드 컴포넌트 제작
…-App-FE into feature/sidebar
Feat: ChatList api 연동
…-App-FE into feature/chatting
…-App-FE into feature/sidebar
Design: 전체유저조회 사이드바 레이아웃 구현
refactor: 공통 타입,상수,instance 리팩토링
…-App-FE into feature/chatting
…-App-FE into feature/sidebar
Fix: channel 관련 import 오류 수정 및 이름 변경
Feat: 채팅 메시지 보내기 기능 구현
Feat: MyChannels api연동
…-App-FE into feature/sidebar
…on-bar 네비게이션바 및 라우팅 오류를 수정한다.
Feat: add global variable
| const isValidTitle = checkChannelName(channel.title); | ||
| if (!isValidTitle.isValid) { | ||
| alert(isValidTitle.errorMessage); | ||
| return; | ||
| } | ||
|
|
||
| const channelData = { | ||
| name: createChannelNameWithCategory(channel.title, channel.category), | ||
| users, | ||
| isPrivate, | ||
| }; | ||
|
|
||
| mutation.mutate(channelData); | ||
| onClose(); | ||
| setChannel({ title: '', category: '기타' }); |
There was a problem hiding this comment.
해당 코드를 보면 무조건 mutation 이 성공한다는거를 가정한 코드인거같습니다
api 가 늘 문제가 없다면 좋겠지만 서버가 죽거나, 혹은 에러가 발생할수도있습니다 그럴때는 대비하기 위해 mutaion 자체에 error 를 잡아주시거나, 해당 함수에서 try/catch로 에러를 잡아시는게 좋습니다
또한 async 함수로 만들었다면 mutate 가 아닌 mutateAsync를 사용하시는걸 추천들비니다 해당 부분에서는 async가 불필요해 보입니다
| <Flex mt="4" align="center"> | ||
| <Stack direction="column" spacing="0" h="100vh"> | ||
| {userData.userNames.map((userName, index) => ( | ||
| <Flex key={index} mt="4"> |
There was a problem hiding this comment.
리액트에서는 엘리먼트 key를 index로 잡는것을 추천하지 않습니다, 해당 index는 컴포넌트 단위가 아닌 페이지 단위를 기준으로 잡아주시는게 좋으시고 최대한 페이지 단위에서 고유한 key를 잡으시는걸 추천드립니다
| const Chats = () => { | ||
| const { id } = useParams(); | ||
| const navigate = useNavigate(); | ||
| if (!id) return <></>; |
There was a problem hiding this comment.
id가 없을때는 fragment가 아닌 null를 리턴해주시는게 더 좋으시고
더 정확하게 구현하기 위해서는 id가 없을때는 이전 페이지로 이동하게 해주시는게 사용자 경험을 더 높일수있습니다
|
|
||
| const sendChat = () => { | ||
| if (value === '') return; | ||
| const socket = getSocket(chatId); |
There was a problem hiding this comment.
해당 부분을 보면 sendChat 를 할때마다 소켓에 인스턴스를 계속 생성하고있습니다
이부분은 조금 불필요해서 보이고 사실 해당 채팅방에 소켓에 인스턴스는 채팅방에 들어왔을때 한번만 생성을 해주고 나갈때 disconnect 와 인스턴스를 제거해주면 될꺼같습니다
| socket.emit(SOCKET.MESSAGE_TO_SERVER, value, (error: Error) => { | ||
| if (error) alert('알 수 없는 오류입니다'); | ||
| }); | ||
| if (socket.connected) socket.disconnect(); |
There was a problem hiding this comment.
또한 이부분이 약간 의문이 드는점인데 아직 채팅방에 나가지 않은 상태인데 소켓 연결을 제거하는 부분은 조금 불필요해 보이지 않을까싶습니다
| watch={watch} | ||
| setIsChecking={setIsChecking} | ||
| /> | ||
| <JoinInputBox |
There was a problem hiding this comment.
제가 테스트하면서 많이 놀랐던 부분입니다 패스워드를 입력했는데 입력한 패스워드가 바로 보여지고있습니다
이러한 실수는 절때로 하면 안되시고 이러한 사소한 부분 한두개가 서비스의 퀄리티를 낮추는거기때문에 최대한 없도록 해주시면 좋을꺼같습니다
| const navigate = useNavigate(); | ||
|
|
||
| const onSubmit: SubmitHandler<JoinForm> = (event) => { | ||
| if (isChecking === null) { |
There was a problem hiding this comment.
해당 코드는 !isChecking 으로 간소화 할수있을꺼같습니다
|
|
||
| const onSubmit: SubmitHandler<LoginForm> = async (data) => { | ||
| try { | ||
| const result: LoginResToken = await login(data); |
There was a problem hiding this comment.
해당 부분은 코드컨벤션 통일을 위해 useMutation으로 해주시면 더 좋을꺼같습니다
| localStorage.setItem('refreshToken', result.refreshToken); | ||
| alert('로그인에 성공하셨습니다'); | ||
|
|
||
| const userId = await getAuthUser(); |
There was a problem hiding this comment.
마찬가지로 이부분도 api를 바로 호출하는대신 useQuery 와 useQuery 에 select 옵션을 사용해주시면 코드의 더 깔끔해지고 관심사 분리가 될꺼같습니다
| navigate(`chats/${channelId}`); | ||
| location.reload(); |
There was a problem hiding this comment.
만약 페이지 이동시 강제로 페이지가 새로고침이 되어야 되는 상황이면 해당 두줄에 코드 보다 window.location.href 가 더 효율적입니다
smartalk
smartalk 바로가기
smartalk 깃허브 바로가기
🔖 프로젝트 소개
smartalk은 실시간 대화를 가능하게 하는 효과적인 채팅 플랫폼입니다.
사용자들은 손쉽게 채팅방을 생성하고 다른 사용자들을 초대하여 실시간으로 의견을 공유할 수 있습니다
smartalk은 사용자들의 효율적인 커뮤니케이션을 지원합니다
테스트 계정
💻 기능 소개
채팅 페이지
채팅 리스트
이전 대화 목록을 불러오고 실시간으로 사용자가 보낸 메시지를 띄웁니다
이때 실시간 메시지가 보내질 때 , 이전 대화 목록이 많을 때 스크롤이 하단으로 이동하도록 제어하였습니다
또한 채팅 메시지 input값이 빈 값일 땐 go 버튼을 disabled 시켰습니다
초대하기, 나가기
이미 참여한 사람은 제외한 나머지 전체 유저를 불러와 초대할 수 있습니다.
초대 이후에는 실시간으로 참여 목록을 볼 수 있습니다.
채팅방 내 사용자가 초대되거나 나가면 toast 알람을 띄웠습니다
나간 이후에는 나의 채팅방에서 삭제하며, 채팅방 내에서는 나간 사람이 실시간으로 사라집니다.
초대 모달
이미 참여한 사람은 제외한 나머지 전체 유저를 불러와 초대할 수 있습니다.
socket.io를 이용해서 초대 이후에는 실시간으로 참여 목록을 볼 수 있습니다.
사이드바 & toast
서버에 새로운 채팅방이 개설되거나, 타인에게 초대를 받은 경우에도 'AA방이 추가되었습니다.’라는 toast를 띄웁니다.
React-Query, socket.io를 사용해 참여하기, 초대하기, 나가기를 감지하고 실시간으로 나의 채팅방을 불러옵니다.
회원가입
react-hook-form을 이용하여 id,password,name 모두 유효성 검사를 진행하고 id는 중복 확인 버튼을 통해 중복된 아이디를 체크하였습니다
중복확인과 유효성 검사를 모두 마친 후 백엔드에게 사용자 정보를 post하는 로직으로 구현하였습니다
채팅방 목록 / 채팅방 만들기
로그인 하기
🔨기술 스택
필수 구현 사항
useState또는useReducer를 활용한 상태 관리 구현Sass,styled-component,emotion,Chakra UI,tailwind CSS등을 활용한 스타일 구현react상태를 통한 CRUD 구현custom hook을 통한 비동기 처리 구현jwt등의 유저 인증 시스템 (로그인, 회원가입 기능)📘Convention
🙋♀️Contributors
-실시간 메세지 수신/송신 구현
-이전 채팅 목록 보여주기 구현
-채팅방에 참가하거나 나간 사용자
실시간으로 보여주기
-메모이제이션을 통한 컴포넌트 렌더링 최적화
-api 호출 로직 재설계를 통해 특정 유저 조회 성능 향상
- 전체 유저 목록 조회
- 카테고리 컨테이너 구현 및
슬라이드 기능
- 카테고리 목록 선택 시
필터 기능을 통한 목록 렌더링
-서버 내 모든 채팅 및 내가 속한 채팅 리스트 보여주기
-채팅방 클릭시
해당 채팅방 이동
-채팅방 이름과 카테고리로 검색하기
채팅방 생성
-이름과 카테고리 설정
-나를 제외한 인원 추가
-socket.io로 실시간 참여 유저 목록 구현
-초대, 나가기, 참여하기
-나의 채팅방 sidebar
-실시간 내 채팅방 불러오기 구현
-메인 화면에서 새로운 채팅방 추가 toast알림
메인화면에서 카드 클릭 시 참여하기 구현
🤲느낀 점
가현
재준
재훈
은영