채팅으로 하는 라이어게임 🤥 #4
Conversation
유저 초대 목록 표시 오류 수정
임시라우팅 삭제
useInput 에 clear 추가 , ChatBubble 컴포넌트 생성, 게임 내 채팅 구현
소켓 통신 useSocket 추가, 토스트 알람 UI 일부 수정
게임방 목록 페이지 UI 구현
Style: 채팅창 너비및 정렬 수정
Feature/#51 리드미 작성
유저 인증, 404 페이지 추가
게임 유저 수 제한 변경, 메인 페이지 게임 입장 제한 변경
Fix: ChatBubble 수정
Docs: Add README.md
Feature/#51 리드미 업데이트
TALK-21--feat/user/hostList firebase 설치 및 firebaseConfig 파일 생성
T1 14 feature/game/dictionary
게임 방 생성, 게임 방 입장, 게임 방 내 4명 입장 시 block 처리
There was a problem hiding this comment.
짧은 시간동안 과제 진행하시느라 정말 고생 많으셨습니다. 이번 프로젝트를 통해 내가 어떤 것이 부족하고 어떤 작업을 할 때 재미를 느끼시는지 느끼시는 계기가 되셨으면합니다.
전반적으로 불필요한 코드 반복, 로직의 반복, 관심사의 미분리, any 사용, 과한 주석 사용 등을 개선하며 이번 프로젝트에 대한 리뷰를 마무리 하겠습니다.
마크업에 대한 리뷰는 남기지 않았으며, 질문을 남기는 리뷰는 꼭 한 번 다시 생각해보고 리펙토링 해보는 시간을 따로 내서 다시 한 번 되새김질 해볼 수 있는 기회가 있었으면 좋겠습니다.
고생하셨습니다!
|
|
||
| interface UserResponse { | ||
| users: string[]; | ||
| joiners?: any[]; |
| const [message] = useState<Message>({ | ||
| id: "", | ||
| text: "", | ||
| }); |
| }); | ||
| const [messages, setMessages]: any = useState([]); | ||
| const messageRef = useRef<HTMLInputElement | null>(null); | ||
| const [, setUsers] = useState<string[]>([]); |
| id: "", | ||
| text: "", | ||
| }); | ||
| const [messages, setMessages]: any = useState([]); |
There was a problem hiding this comment.
any를 사용한 이유가 있으신가요? any는 최대한 지양해야 하는 나쁜 습관 중 나쁜 습관입니다. any를 사용하지 않고 타입스크립트를 작성하는 노력을 최대한 해보세요
| current, | ||
| speaking, | ||
| player, | ||
| num, | ||
| liar, | ||
| setPlayer, | ||
| setNum, | ||
| setSpeaking, | ||
| onGameInfoReceived, | ||
| setCurrent, |
There was a problem hiding this comment.
current, setCurrent, num, speaking, setNum, setSpeaking 모두 과하게 의미를 추론하기 어려운 변수명입니다. 의미를 추론할 수 있는 길더라도 명시적인 변수명을 짓는 습관을 들여보세요
| on(event: string, callback: any): void; | ||
| emit(event: string, data: any): void; |
There was a problem hiding this comment.
CreateGameModal에서 선언한 타입을 그대로 가져왔으면 됩니다. 특정 키값만 제거해서 타입을 재선언하는 방법에는 어떤 것이 있을까요?
| // 소켓 연결 | ||
| const socket = connect("617bf718-cfa1-48d2-8007-b402907e540b"); | ||
|
|
||
| useEffect(() => { |
There was a problem hiding this comment.
이 useEffect가 너무 많은 역할을 하고 있습니다. 이 useEffect는 어떤 역할이라고 딱 잘라서 말할 수 있을까요? 제어문에 따른 코드들을 함수로 추출해서 useEffect에서는 호출만 했다면 주석 한 줄 없이 어떤 코드인지 한 눈에 알아볼 수 있었을 것 같습니다.
| // 파일 선택 변경 | ||
| const handleFileChange = (event: React.ChangeEvent<HTMLInputElement>) => { | ||
| const file = event.target.files ? event.target.files[0] : null; | ||
| if (file) { | ||
| if (file.size > MAX_IMAGE_SIZE) { | ||
| // 파일 크기 초과 에러 처리 | ||
| alert("이미지는 1MB 이하이어야 합니다."); | ||
| return; | ||
| } | ||
| setSelectedFile(file); | ||
| } | ||
| }; | ||
|
|
There was a problem hiding this comment.
어디서 많이 본 함수 아닌가요? 똑같은 역할을 하는 함수를 따로 작성해서 두 번 관리하는 건 정말정말 지양해야 하는 습관입니다. 동작하게만 하는 코드를 작성하는 습관을 버리고, 관리를 이원화하지말고 한 곳에서 관리할 수 있게 그리고 관심사에 맞게 코드를 분리하는 습관을 들여보세요
| error: any; | ||
| } | ||
|
|
||
| const useFetch = ({ url, method, data, start }: Props): Return => { |
There was a problem hiding this comment.
커스텀 훅을 만드신 시도 정말 멋지다고 생각합니다.
이번 경험을 통해서 이미 잘 만들어진 라이브러리의 코드를 활용하는 것과 직접 코드를 작성해서 활용하는 것에 어떤 차이가 있는지를 react-query와의 비교를 통해 느껴보셨으면 좋겠습니다.
이 훅은 너무 많은 역할을 하고 있는데요, 패칭만 하는 역할도 아니고, url에 따른 제어 처리도 하고 post 도 하고, 상태를 4개나 관리해서 리렌더링도 강제하게 됩니다.
불필요하게 반복되는 코드들도 많고, 개선할 수 있는 것들이 정말 많은데 이번에 사용하면서 느꼈던 불편함 또는 개선점들을 가벼이 여기지말고 꼭 리펙토링하는 시간을 가져보시길 바랍니다.
There was a problem hiding this comment.
커스텀 훅 만드신 시도 정말 좋습니다! 다만, 이 훅을 만들어서 사용했다면 react-hooks-form을 사용하지 않았어야 한다고 생각합니다. 반대로 react-hooks-form 을 사용했으니 이 훅을 만들필요가 있었을까요? 어떠한 결정에도 이유는 분명해야 하고 결정을 가벼이 여기는 습관은 지양해야 합니다.
LIAR GAME
📅 개발 기간 :
23.11.06 ~ 23.11.17💁♀️ 프로젝트 소개
LIAR GAME은 주어진 제시어에 대해 거짓말을 하고 있는 사람을 찾는 게임인 소켓 기반 통신 앱입니다.채팅방에 입장하면 라이어를 제외한 인원들에게만 제시어가 주어집니다.
참가자들은 채팅으로 대화하며, 투표를 통해 제시어를 아는 척 거짓말하는 라이어를 찾습니다.
'라이어 게임' 테스트 계정 정보
👪 빼빼로조 팀원 소개
Frontend & 팀장
Frontend
Frontend
Frontend
Frontend
💻 팀원 별 구현 사항
유저 초대
초대 알림
프로젝트 전체 관리
로그인
프로필 수정
게임 목록 조회
라이어 투표
전체 UI 관리
키워드 및 카테고리 랜덤 지정
라이어 랜덤 지정
✅ 필수 구현 사항
useState또는useReducer를 활용한 상태 관리 구현Sass,styled-component,emotion,Chakra UI,tailwind CSS등을 활용한 스타일 구현react상태를 통한 CRUD 구현custom hook을 통한 비동기 처리 구현jwt등의 유저 인증 시스템 (로그인, 회원가입 기능)🛠️ 주요기능 요약
⭐ 라이어 게임
⭐ 메인 페이지 게임방 리스트, 정보 실시간 확인
⭐ 메인페이지 메인 채팅 기능, 모든 사용자 확인, 프로필 확인 및 수정
⭐ 회원가입, 로그인 기능 및 인증, 404페이지
⭐ 게임 생성 및 사용자 초대
💻 개발 스택
🌙 환경
🌙 개발
🌙 소통
🗂 디렉토리 구조
🐼 시연 영상
1. 회원가입, 로그인, 메인페이지, 프로필 변경
default.mp4
2. 게임 생성, 친구 초대, 유저 입장 퇴장 실시간
default.mp4
3. 게임 플레이
default.mp4