[4주차] 김동혁 미션 제출합니다. #14
Conversation
There was a problem hiding this comment.
indent가 4로 되어있나봐요 !!
그럴 경우 코드가 점점 복잡해지고 tag가 점점 중첩될수록 코드를 읽기 불편해져서 많이들 하는 indent size 2로 하시는 걸 추천드려요오 !!
| handleClickChat(chat.id); | ||
| }} | ||
| > | ||
| <Profile src="/icon/ChatProfile.svg" /> |
There was a problem hiding this comment.
저도 여기저기 찾아보고 챗지피티한테도 물어봤는데 svg 불러올때 img태그로 감싸도 상관없다고는 하더라고요! 그런데 동혁님처럼 같은 에러가 났어요...ㅜ 그래서 저는 그냥 이미지 배열 만들어서 불러왔는데 리팩토링하시면서 다양한 방법 찾아보시면 될 것 같아용 > <
| // { id: 2, name: '이수현', message: '안녕하세요!', time: '오전 9:20', unreadCount: 0 }, | ||
| // { id: 3, name: '박지민', message: '오랜만이에요.', time: '오후 1:45', unreadCount: 1 }, | ||
| ]); |
| {chats.map(chat => ( | ||
| <Chat1 | ||
| key={chat.id} | ||
| onClick={() => { | ||
| handleClickChat(chat.id); | ||
| }} |
There was a problem hiding this comment.
map도 마찬가지로 chat.~ 로 각 프로퍼티에 접근하고 잇는걸 그냥 프로퍼티명으로 바로 접근할 수 있는 구조분해할당 방식도 있다는거 ..! > <
chat.map((chat) => {
const {id, name, time, message} = chat;
<Chat1
key = {id}
| </NameSpace> | ||
|
|
||
| <NameSpace> | ||
| <Message>{chat.message}</Message> |
There was a problem hiding this comment.
리팩토링하면서 배열에 저장되어있는 기본 텍스트대신 가장 최근에 새로 입력한 메시지를 보이게 하는 기능을 추가해봐도 좋을 것 같아요 ㅎㅎ
| import { chatMessagesState } from '../../../context/ChatDataState'; | ||
| import type { YourFirstMessageProps } from '../../../lib/types'; | ||
|
|
||
| export default function YourFirstMessage(props: YourFirstMessageProps): JSX.Element { |
There was a problem hiding this comment.
props.~ 로 각 프로퍼티에 접근하고 잇는걸 그냥 프로퍼티명으로 바로 접근할 수 있는 구조분해할당 방식이 있다는 점도 있어요 !! 아래 한 줄 만 추가해서 쓰면 되니까 참고하세요 > <
const {isContinuous, sentTime, 등} = props;
| {!props.isContinuous && <Profile src="/ChatRoom/defaultProfile.svg" alt="profile" />} | ||
| <TextContainer> | ||
| {!props.isContinuous && <ProfileName>{props.name}</ProfileName>} | ||
| <Chat> | ||
| {props.isContinuous && <div style={{ marginLeft: '48px' }}></div>} | ||
| <ChatBox>{props.message}</ChatBox> | ||
| {!props.isContinuous && <ChatTail />} | ||
| <SentTime>{props.sentTime}</SentTime> | ||
| </Chat> |
There was a problem hiding this comment.
위에 말한 것처럼 구조분해하면 여기 props.~으로 접근하는 프로퍼티들 싹다 그냥 프로퍼티로 쓸 수 있답니다 ㅎㅎ
| // if (user === me.name) { | ||
| // setUser(opposite.name); | ||
| // setOppositeChat(me.name); | ||
| // } else { | ||
| // setUser(me.name); | ||
| // setOppositeChat(opposite.name); | ||
| // } |
There was a problem hiding this comment.
삼항연산자 쓰신거 너무 좋아요 !! 그럼 불필요한 주석을 지워주세요 ㅎㅎ
| function formatDate(dateString: string): string { | ||
| const options: Intl.DateTimeFormatOptions = { | ||
| year: 'numeric', | ||
| month: 'long', | ||
| day: 'numeric', | ||
| weekday: 'long', | ||
| }; | ||
| return new Date(dateString).toLocaleDateString('ko-KR', options); | ||
| } | ||
|
|
| export const initialChats = [ | ||
| { id: 1, opposite: { name: 'Alice' }, messages: [{ text: 'Hello!', sentDate: '2023-01-01' }] }, | ||
| { id: 2, opposite: { name: 'Bob' }, messages: [{ text: 'Hi there!', sentDate: '2023-01-02' }] }, | ||
| ]; |
There was a problem hiding this comment.
initialChats는 이번에 사용 안하시는 걸까용? 배포에서는 이 부분이 안보이네요 !!
| svg { | ||
| ${({ isActive }) => | ||
| isActive | ||
| ? css` | ||
| fill: black; | ||
| ` | ||
| : css` | ||
| fill: none; | ||
| `} | ||
| } | ||
| `; |
There was a problem hiding this comment.
svg로 불러오면 css를 다르게 줄 수 있어서 좋은거 같아요! 저도 이렇게 구현하고싶었는데 계속 오류가 나서 이번과제에는 적용하지 못했는데 배워갑니당!
There was a problem hiding this comment.
footer부분은 하나의 파일로 통일시켜도 좋을거 같아요...! 기능이 많지 않아서 하나의 컴포넌트로 줄이는게 유지보수하기에도 좋지 않을까.. 생각해봅니당ㅎㅎ
| {chats.map(chat => ( | ||
| <Chat1 | ||
| key={chat.id} | ||
| onClick={() => { | ||
| handleClickChat(chat.id); | ||
| }} |
🔗 링크
배포 링크
📌 피그마 링크
피그마 링크
📄 Key Questions
1. Rouing 이란?
2. SPA란?
3. 상태관리란?