토이프로젝트2_9조_Talk #8
Conversation
Fix: Merge Conflict 해결
Refactor: AuthCheck 유틸 및 회원가입 검증 수정
T29 14 - 내채팅페이지에서 1:1 채팅 기능 구현
feat: 내채팅페이지에서 채팅버튼 클릭 시 1:1 채팅 기능 구현
Feat: 유저 접속 상태 구현
Feat: 유저 접속 상태 구현
Feat: 초대하기 버튼 생성
Feat: 하단바 수정, 모달 css, send 버튼 수정
Feat: 채팅방 기본적 기능 구현(초대 제외)
T29 32 sign up sign in
Refactor: URL 변경
T29 20 user list
Create1to1chat
T1 15 feature/game/check word
|
|
||
| if (!isRightWay) { | ||
| return null; | ||
| } else { |
| password: '', | ||
| }); | ||
| const [loginFail, setLoginFail] = useState<string>(''); | ||
| const FAIL_MESSAGE = '* 아이디 또는 비밀번호가 일치하지 않습니다.'; |
There was a problem hiding this comment.
해당 부분은 상수값인거같은데 상수값은 LoginForm 이 렌더링될때마다 생성될 필요가 없기에 컴포넌트 밖에다가 선언해주시면 좋을꺼같습니다
| {formData.id === '' || formData.password === '' ? ( | ||
| <button className="submitEmptyButton">로그인</button> | ||
| ) : ( | ||
| <button className="submitFullButton">로그인</button> | ||
| )} | ||
| </div> |
There was a problem hiding this comment.
해당 부분을 보면 input 에 값이 입력되어 있지 않을때는 로그인 버튼이 비활성 되어있도록 구현해주신거같습니다
input이 비어있으니 실제로 로그인은 되지 않지만 불필요하게 api를 호출하고 있는거같습니다
input 이 비어있다면 아예 로그인 api를 호출하지 않도록 코드를 작성하는게 서버에 리소스를 줄이는 방법중에 하나 입니다
| setLoginFail(''); | ||
|
|
||
| try { | ||
| const res: ResponseBody = await instance.post('login', formData); |
There was a problem hiding this comment.
우선 해당 코드 부분은 별도의 파일로 분리해주시는걸 추천드리고 만약 분리를 한다고해도 useMutation을 적극 활용해주시는게 좋을꺼같습니다
| useEffect(() => { | ||
| const isUserAccess = getCookie('accessToken'); | ||
|
|
||
| if (isUserAccess) { | ||
| setIsRightWay(true); | ||
| } else { | ||
| setIsRightWay(false); | ||
| } | ||
| }, []); |
There was a problem hiding this comment.
코드를 계속 살펴보면 이코드가 계속 반복되는거같습니다 로그인한 유저인지 아닌지를 판단하는 코드인거같습니다
이러한 부분은 HOC 로 뺴주시거나 nextjs 를 사용하셨으니 SSR로 처리해주시면 좋을꺼같습니다
| const [selectedChat, setSelectedChat] = useState<Chat | null>(null); | ||
|
|
||
| const router = useRouter(); | ||
| const userId = typeof window !== 'undefined' ? localStorage.getItem('userId') : null; |
There was a problem hiding this comment.
userId는 이미 recoil를 사용하고 계시니 recoil에서 가져오는게 더 호율적입니다
| import { EnterChatRoomModalProps } from './chatsStore'; | ||
| import { textModalData } from './ModalTextData'; | ||
|
|
||
| const EnterChatRoomModal = ({ isOpen, onEnterClick, onCancelClick, selectedChat }: EnterChatRoomModalProps) => { |
There was a problem hiding this comment.
컴포넌트에 props는 별도의 파일로 빼기보다는 해당 컴포넌트에 선언해주시는게 유지보수할때 더 간편합니다
| }; | ||
|
|
||
| // 입장하기 버튼 눌렀을 때 채팅에 참여시키는 함수 | ||
| const onEnterHandler = async () => { |
There was a problem hiding this comment.
해당 함수를 보니깐 props로 함수가 넘겨지는거 같습니다 props로 함수가 넘겨질때는 useCallback으로 묶어주시는게 렌더링 성능 향상에 도움이됩니다
| for (let i = 0; i < users.length; i++) { | ||
| if (userId == users[i].id) { | ||
| return users[i].username; | ||
| } | ||
| } | ||
| return undefined; |
There was a problem hiding this comment.
어.. 이부분은 사실 array.find()의 코드라서 아래처럼 개선할수있을꺼같습니다
const user = users.find(user => user.id === userId);
return user ? user.username : undefined;
| }, []); | ||
|
|
||
| useEffect(() => { | ||
| const FetchMessagesInterval = setInterval(() => { |
There was a problem hiding this comment.
emit을 반복적으로 interval로 보내고 있으신거같습니다 그리고 특정 소켓이벤트가 오면 clear 해주시고 계신데
만약 서버가 이슈가 생겨서 소켓을 못보내는 상황이라면 계속 무한정 인터벌이 돌아갈꺼같습니다
이럴때를 대비해 특정 시간까지만 인터벌이 돌도록 타임아웃 코드를 작성해주시면 좋을꺼같습니다
YFE - Talk
일상 속 모든 대화를 편리하게 관리할 수 있는 채팅 앱입니다.
📌 배포 링크
📌 팀 소개
팀장 (FE)
팀원 (FE)
팀원 (FE)
팀원 (FE)
팀원 (FE)
📌 Contributor
📌 기술 스택
Environment
FrontEnd
Deploy
Communication
📌 주요 화면 및 기능
회원가입
로그인
회원정보 수정
유저 목록 페이지
채팅생성
하단 바
내 채팅 / 오픈채팅 조회
채팅방
📌 유저 플로우
📌 파일 구조
🍋 소켓 기반 채팅앱
주어진 API와 소켓을 분석해 어떤 프로젝트를 진행/완성할 것인지 팀 단위로 자유롭게 결정하고 만들어보세요.
과제 수행 및 리뷰 기간은 별도 공지를 참고하세요!
[필수 구현사항]
useState또는useReducer를 활용한 상태 관리 구현Sass,styled-component,emotion,Chakra UI,tailwind CSS등을 활용한 스타일 구현react상태를 통한 CRUD 구현custom hook을 통한 비동기 처리 구현jwt등의 유저 인증 시스템 (로그인, 회원가입 기능)[선택 구현사항]
Next.js를 활용한 서버 사이드 렌더링 구현typescript를 활용한 앱 구현storybook을 활용한 디자인 시스템 구현jest를 활용한 단위 테스트 구현📌 개발 기간 :
2주23.11.06 ~ 23.11.16