[4주차] 안채연 미션 제출합니다 #18
Conversation
|
안녕하세요, 프론트 파트장 주효정입니다🙌 디자인 너무 깔끔한 것 같아요! 사용자 이름을 입력받는 부분도 기대가 되네요👍 한 가지 말씀드리자면 컴포넌트 분리를 더 할 수도 있지 않을까 생각이 들었습니다. 예를 들어 이번주도 수고많으셨고 스터디 시간에 뵐게요🥳 |
| @@ -0,0 +1,17 @@ | |||
| import React, { useState } from "react"; | |||
|
|
|||
| function useInput(initialText: string) { | |||
There was a problem hiding this comment.
오 input을 따로 hook으로 만드셨네요!😮 입력해야하는 부분이 중복돼서 따로 이렇게 hook으로 만드는거 좋네요 저도 다음 과제에서 input hook을 만들어봐야겠어요!
| @@ -0,0 +1,125 @@ | |||
| [ | |||
| { | |||
There was a problem hiding this comment.
이렇게 roomId 지정해주는 거 좋네요!! 전 roomId말고 from이랑 to로 나눠서 저장했는데 나중에 채팅이 많아지면 roomId 별로 구분해 놓는게 더 보기 편할 것 같네요! 한번 적용해봐야겠어요😀
| @@ -24,6 +27,9 @@ function ChatRoomHeader() { | |||
| <></> | |||
| ) | |||
| )} | |||
| <Link to="/Chat" onClick={() => setUserId(0)}> | |||
There was a problem hiding this comment.
앗 채연님 코드 리뷰하다가 닫기 버튼을 안 만든 걸 깨달았네요 ... !! !! 이 방법은 생각해보지 못했는데 저도 적용해봐야겠어요!
| copy[0].chat.concat(newChat); | ||
|
|
||
| //setChatting(chatting[room - 1].chat.concat(newChat)); | ||
| setChatting( |
There was a problem hiding this comment.
이번 과제 채팅 저장하는 부분에서 엄청 힘들었는데 채연님은 깔끔하게 잘 작성하셨네요 🤩 저도 삼항연산자를 사용해서 작성해봐야겠어요!
| @@ -22,7 +22,7 @@ function SendMessage() { | |||
| senderId: sender, | |||
| receiverId: sender === 0 ? room : 0, | |||
| text: text, | |||
| time: time.getHours() + ":" + time.getMinutes(), | |||
| time: ("0" + time.getHours()).slice(-2) + ":" + time.getMinutes(), | |||
어려웠던 점
방이 여러개가 되어서 확장되니까 각 방에 해당하는 chat을 관리하는 점이 좀 힘들었습니다 ㅜㅜ
새로운 채팅을 보냈을 때 해당 방에 해당하는 배열에 추가하도록 하는거에 시간을 많이 썼네요 ..
추가 기능
원래 맨 첫번째 페이지에 사용자 이름을 입력 받아 그 이름이 호스트가 되게끔 하고싶었는데
시간상 첫번째 페이지밖에 못만들었네요 .. ㅜㅜ 나중에라도 기능을 추가해보려구요!
그 외
저번 과제를 했을때보다는 recoil에 대한 개념을 조금 더 이해할 수 있었던 것 같습니다!
저번에는 recoil을 사용하여 단지 userId 만 저장했다면 이번에는 selector 에 대한 것, 상태 변경, 값 변경 차이 등등 조금 더 자세하게 알 수 있었던 같아요!
배포링크
https://react-messanger-16th-chaeyeon.vercel.app/
key QNA
라우팅은 사용자가 어떤 화면(view)에서 다른 화면으로 화면을 전환하는 내비게이션을 관리하기 위한 기능을 의미한다. 일반적으로 라우팅은 사용자가 요청한 URL 또는 이벤트를 해석하고 새로운 페이지로 전환하기 위해 필요한 데이터를 서버에 요청하고 페이지를 전환하는 위한 일련의 행위를 말한다. react-router-dom 라이브러리를 사용하고 보통 Link 태그를 이용하여 전환할 페이지를 나타낸다.
이전에 작성했던..!! 거 부끄럽지만 놓고갑니다
https://12yeonii.tistory.com/40
https://12yeonii.tistory.com/74
SPA
Single Page Application로, SPA는 기본적으로 단일 페이지로 구성되며 기존의 서버 사이드 렌더링과 비교할 때, 배포가 간단하며 네이티브 앱과 유사한 사용자 경험을 제공할 수 있다는 장점이 있고, 웹 애플리케이션에 필요한 모든 정적 리소스를 최초 접근시 단 한번 다운로드하기 때문에 초기 구동 속도가 상대적으로 느리다는 단점이 있다.
상태관리
(이번에 recoil 공부하면서 안 것을 적어볼게요!) 상태는 보통 state로 사용하고, 우리는 값을 변하게 하고 싶을 때 상태를 바꿔준다. 쉽게 useState를 사용하는 것을 생각하면 된다. 근데 여기서 값을 바꿔준다는게, 'state'를 변하게 하는 것이다. state, 즉 상태를 바꿔준다는 것은 말그대로 해당 변수의 상태를 바꿔준다는 것으로, recoil에 적용하면 그 변수가 다른파일에서도 바뀐다. (useRecoilState) 이와 다르게 useRecoilValue 는 해당 파일에서만 그 값을 가져오는 것이므로 상태변경이 아니다. 따라서 이 두가지를 잘 구분해주어야한다!
참고 자료: 모던 자바스크립트 deep dive