[3주차] 강나연 미션 제출합니다. #1
Closed
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
chaaerim
reviewed
Sep 30, 2022
src/components/MessageInput.tsx
Outdated
| chatid: Date.now(), | ||
| myAccount: userAccount ? true : false, | ||
| chat: message.value, | ||
| time: moment(new Date()).format("HH:mm"), |
src/components/Header.tsx
Outdated
Comment on lines
5
to
8
| export type HeaderPropsType = { | ||
| leftChild: string; | ||
| rightChild: string; | ||
| }; |
There was a problem hiding this comment.
interface 파일이 있는데 컴포넌트 내부에 따로 타입을 지정해주신 이유가 있을까요? 또 헤더에서만 사용되는 타입인 것 같은데 export를 해주신 이유가 있을까요?!
There was a problem hiding this comment.
type과 interface에 대해 공부하다가 넣은 코드인데 고치지 않고 그대로 들어갔네요... 🫠 interface 파일에서 한번에 관리하도록 수정해 보겠습니다...!
src/components/MessageList.tsx
Outdated
| }>` | ||
| font-size: 0.8rem; | ||
| padding: 0.5rem; | ||
|
|
There was a problem hiding this comment.
한글을 입력했을 때에는 줄바꿈이 되지만 영어로 입력했을 때 사진과 같이 텍스트가 잘리는 현상이 발생합니다. word-break: break-all;을 추가해주면 이를 방지할 수 있을 것 같습니다.
src/components/MessageList.tsx
Outdated
Comment on lines
26
to
61
| <UserWrapper | ||
| key={chat.chatid} | ||
| myAccount={chat.myAccount} | ||
| userAccount={userAccount} | ||
| > | ||
| <ProfileImage | ||
| src={`${process.env.PUBLIC_URL}/images/${chat.userid}.jpg`} | ||
| /> | ||
| <div> | ||
| <NameWrapper | ||
| key={chat.chatid} | ||
| myAccount={chat.myAccount} | ||
| userAccount={userAccount} | ||
| > | ||
| <UserName> | ||
| {chat.myAccount ? "NaYeon 💭" : filteredUser!.name} | ||
| </UserName> | ||
| </NameWrapper> | ||
| <BubbleWrapper | ||
| key={chat.chatid} | ||
| myAccount={chat.myAccount} | ||
| userAccount={userAccount} | ||
| > | ||
| <Bubble | ||
| key={chat.chatid} | ||
| myAccount={chat.myAccount} | ||
| userAccount={userAccount} | ||
| > | ||
| {chat.chat} | ||
| </Bubble> | ||
| <Time>{chat.time}</Time> | ||
| </BubbleWrapper> | ||
| </div> | ||
| </UserWrapper> | ||
| ))} | ||
| </ChatWrapper> |
There was a problem hiding this comment.
현재 컴포넌트 분리가 이뤄지지 않아 새로운 채팅 입력시 모든 메세지가 렌더링됩니다. singleMessage를 컴포넌트로 따로 분리하여 React.memo를 사용해보시면 좋을 것 같아요!
There was a problem hiding this comment.
헉 채림님이 주신 자료 보고 바로 수정했어요!! 앞으로 렌더링 최적화에도 신경을 쓰며 코드를 짜야겠네요... 감사합니다 😽🫶🏻😽🫶🏻
Closed
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
안녕하세요 강나연입니다!
타입스크립트… 처음이라 그런지 정말 정말 정말 정말 어렵네요
멘탈이 아주 너덜너덜해졌습니다 ㅎㅅㅎ...🥲
나름 확장성을 고려하며 짜려고 했으나… 다음 과제 할 때 돼 봐야 잘 짠 건지 알 수 있을 거 같아요… 😇
css는 뉴진스의 포닝을 따라해 봤습니다! 📱
그리고 이번에
Recoil을 처음 써 봤는데 처음이라 아주 아주 많이 버벅이긴 했지만(^...^) 익숙해지면 정말 유용할 것 같아요!이번 과제는 어려웠던 점이 유난히 많았는데요... 그 중 몇 가지를 뽑아 보자면
interface라든지... 타입스크립트를 공부하며 새로 접한 개념들이 너무 낯설어서 코드를 짜는 도중 변수명을 계속 바꿨습니다 ㅜㅅㅜ... 커밋 단위로 코드 보는 것보다 그냥 한번에 보시는 게 편할 거예요... 🫠✔️ 배포 링크: https://react-messenger-16th-kongnayeon.vercel.app/
많은 조언 부탁드립니다... 🥺