[4주차] 김선영 미션 제출합니다.#20
Conversation
|
안녕하세요, 프론트 파트장 주효정입니다🙌 항상 생각한 거지만 중첩 라우팅도 사용하시고 코드를 효율적으로 잘 짜시는 것 같아요! 그리고 Key Question에 대한 답도 너무 깔끔하게 잘 작성해주셨네요~! 한 가지 말씀드리고 싶은 점은 변수/함수를 선언할 때 컴포넌트 내에 있어야 하는 것과 컴포넌트 밖에 있어도 되는 것을 구분하는 것에 대해 학습해봐도 좋을 것 같아요. 예를 들어 이번주도 수고 많으셨고 스터디 시간에 뵐게요🥳 |
ch9eri
left a comment
ch9eri
left a comment
There was a problem hiding this comment.
안녕하세요 이번주 코드리뷰 파트너 임채리입니다!
선영님 과제를 보면 항상 제가 생각하지 못했던 것들을 고려하신 흔적이 느껴져요!
항상 많은 걸 얻어갑니당🥰
| <Route element={<Layout />}> | ||
| <Route path="/" element={<FriendPage />} /> | ||
| <Route path="/chatrooms" element={<ChatroomPage />}> | ||
| <Route path=":id" element={<Chatroom />} /> |
| onConcat(value); | ||
| setValue(""); | ||
| // 엔터로 전송, shift+엔터로 줄바꿈 | ||
| const handleEnter = (e: React.KeyboardEvent<HTMLTextAreaElement>) => { |
There was a problem hiding this comment.
우와 shift 엔터 줄바꿈 기능은 생각을 못했는데 ...! 이렇게 구현하는 것이군요!!!! 배워갑니당
AlmondBreez3
left a comment
AlmondBreez3
left a comment
There was a problem hiding this comment.
안녕하세요 선영님! 안아줘요 캐릭터가 너무 귀여워서 지난 과제부터 너무 기대됬는데 안워줘요 캐릭터들이 더 추가가되었네요 ㅎㅎ...
일단 recoil을 안쓰시고 오로지 배열을 활용하신 부분이 대단한것 같습니당...
저는 오히려 배열로 여러 상태를 처리하는 부분에서 막혀 가지고 recoil사용이 큰 도움이 됬습니다! recoil을 쓰지 않고 처리하시는 부분이 너무 깔끔해서 구현하신 코드들 보면서잘 배우고 갑니다!
이따 저희 스터디 때 뵈요 ㅎㅎ
| const App = () => { | ||
| return ( | ||
| <> | ||
| <GlobalStyle /> |
There was a problem hiding this comment.
app.js에 routing을 하셨네용 전 index.tsx에서 해서 app.tsx에서 하는법을 알고 싶었는데 이 기회를 통해 보고 갑니다! globalstyle적용을 아직 안했는데 선영님은 하셨군요!
| const roomMembers: User[] = []; | ||
| chatrooms[roomId].users.map((memberId) => roomMembers.push(users[memberId])); | ||
| if (!includeCurUser) { | ||
| roomMembers.shift(); |
There was a problem hiding this comment.
배열 맨 앞에있는요소를 삭제하는게 shift라는것을 처음 알았어요! 다음에 코드 짤때 써먹어야 겠어용
| curUser: number; | ||
| chats: Chat[]; | ||
| users: User[]; | ||
| } |
There was a problem hiding this comment.
interface선언 파일이 따로 있는데 여기다가 인터페이스를 선언한 이유가 따로 있으신가요???
| if (value.length == 0) { | ||
| return; | ||
| } | ||
| e?.preventDefault(); // 버튼을 통한 제출이라면 새로고침 방지 |
There was a problem hiding this comment.
저도 선영님이랑 비슷한 코드를 짯고 form에 onSubmit했는데 버튼을 통한 제출일때랑 그냥 엔터일때랑 구분을 안하고 짜도 제대로 작동하더라고요! 버튼을 누르면 새로고침이 되는 문제는 없었어요! 그런데 위에 handleEnter라는 함수를 선언하셔서 이런 예외처리가 필요해진건가요??
4 participants
https://react-messanger-16th-ebon.vercel.app/
Routing
: 웹 애플리케이션에서 라우팅이라는 개념은 사용자가 요청한 URL에 따라 알맞는 페이지를 보여주는 것
SPA
: 한 개의 페이지로 이루어진 애플리케이션
상태관리
Props는 컴포넌트간 전달 되는 데이터State는 컴포넌트 안에서 관리 되고 시간이 지나면서 바뀌는 동적인 데이터지역 상태전역 상태UI 상태서버 캐시 상태Form 상태URL 상태