[5주차] 이지수 미션 제출합니다. #16
Conversation
src/public/UserData.json
Outdated
| "id": 0, | ||
| "userName": "jisu", | ||
| "userImage": "/src/images/su.png" | ||
| }, |
There was a problem hiding this comment.
UserData와 chatData를 나누셨군요! 저도 고민했던 부분인데 관리하기 편하셨나요?
src/components/ChatApp.jsx
Outdated
| import chatData from '../public/ChatData.json'; | ||
| import userData from '../public/UserData.json'; | ||
|
|
||
|
|
There was a problem hiding this comment.
저도 이번에 좀 덩어리를 크게 잡아서 구현하고자 했는데, 이미 지수님은 실행 중이셨군요! 확실히 이렇게 하니까 확장하기 좋은 것 같습니다.
src/components/ChatInput.jsx
Outdated
| } | ||
| }; | ||
|
|
||
| // 키보드 이벤트 처리 함수 |
There was a problem hiding this comment.
키보드 이벤트를 통해서 입력되는 기능이군요! 저는 늘 못하다가 이번에 처음 구현해봤는데 간단하게 구현할 수 있네요~
| @@ -0,0 +1 @@ | |||
| export const USERID = 0; | |||
src/components/ChatApp.jsx
Outdated
| }); | ||
|
|
||
| // 상수로 분리된 사용자 ID | ||
| const MY_ID = 0; |
|
|
||
| return ( | ||
| <HeaderContainer> | ||
| <BackButton onClick={handleBackClick}>뒤로</BackButton> |
There was a problem hiding this comment.
useNavigate사용해서 -1하면 뒤로가기 기능이 됩니다. 브라우저에서 히스토리에 스택을 쌓아놓기 때문에 가능하다고 하더라구요!
| import userData from '../assets/data/UserData.json'; | ||
| import styled from 'styled-components'; | ||
|
|
||
| const ChatApp = () => { |
There was a problem hiding this comment.
함수를 선언할 때 function을 사용하고 변수 사용 시에 const를 사용하는 것이 가독성 면에도 좋은 거 같습니다!
개인적인 의견이니 한번 참고 해보셔용 😊
| <MessagesContainer> | ||
| {messages.map((message) => { | ||
| const user = users[message.userId]; | ||
| const isUser = user && user.id === USERID; |
There was a problem hiding this comment.
Optional Chaining 적용하면 user?.id === USERID로 줄일 수 있습니다 !
| font-size: 18px; | ||
| color: #333; | ||
| display: flex; | ||
| margin-left: 250px; |
There was a problem hiding this comment.
margin-left: 250px;화면 크기에 따라 레이아웃이 깨질 수 있으니 이 부분에서 justify-content:center;로 수정하면 더 유연한 레이아웃이 될 거 같아요 ~
| <BackButton>◀</BackButton> | ||
| <Title>jisu</Title> | ||
| </Header> | ||
| <SearchInput type="text" placeholder="이름 검색" /> |
There was a problem hiding this comment.
useState를 사용해서 검색 기능을 추가하는 것도 좋을 거 같아요 !
| if (userMessages.length === 0) return '메시지가 없습니다'; | ||
| return userMessages[userMessages.length - 1].text; | ||
| }; | ||
|
|
There was a problem hiding this comment.
chatData에서 메시지를 필터링하는 방식보단 userId 별로 메시지를 그룹화한 상태로 저장하면 메시지를 필터링할 때 더 효율적으로 접근할 수 있을 거 같아요.
하지만 이번주차는 recoil이 주인공이기 때문에 recoil로 관리한다면 아래 처럼 수정할 수 있을 거 같습니다😊
const users = useRecoilValue(userState);
const chats = useRecoilValue(chatState);
const getLastMessage = (userId: number) => {
const userMessages = chats.filter(message => message.userId === userId);
if (userMessages.length === 0) return '메시지가 없습니다';
return userMessages[userMessages.length - 1].text;
};
3 participants
안녕하세요! LG U+ 유레카 프론트엔드 1기 이지수입니다. 미니프로젝트 기간으로 스터디를 쉬다가 🥹😭
오랜만에 타입스크립트를 마주하니 이게 뭐였지...라는 마음에 급하게 다시 찾아보면서 이번 미션을 수행했던 것 같습니다.
이번 주에는 Routing과 상태관리에 대한 미션을 진행하면서, 새로운 페이지를 추가하고 이를 통해 Routing을 구현하는 과정에서 코드 구조의 중요성을 깨달았습니다. 또한 상태관리 라이브러리를 사용해보며, 왜 상태관리 라이브러리를 사용하는지 조금은 알게 된 것 같습니다! 상태관리에 대한 이해도를 더 높이기 위해 더 찾아보고 적용해보는 연습을 해야겠다고 느낀 이번 미션이였습니다 😂
📍알게된 부분
1.상태관리의 필요성📍Key question
1.SPA / MPA / CSR / SSR 이란 무엇인가요?
다중 페이지로 이뤄져있어 변경사항이 있을때마다 서버로 페이지를 요청
단일 페이지로 이루어져 있어 갱신될 부분에 대해서만 데이터 요청
클라이언트 측에서 렌더링을 하는것
서버로부터빈 접시(빈 HTML)와 요리 재료(JS)를 받고,요리(렌더링)를 직접 하는 방식
서버측에서 렌더링 될 페이지를 그려 클라이언트로 내려주는 방식
서버에서 요리(웹페이지 렌더링)를 완성시킨 후접시에 담아서(완성된 HTML)손님(사용자)에게 제공하는 방식
2.React에서 상태는 어떻게 관리할 수 있나요?
[상태관리라이브러리 외에 잘모르겠어서 서치하였음]
3.어떤 상태관리 라이브러리를 사용했고, 그것의 특징은 무엇인가요?
📍개선하고싶은 부분
📍결과화면