[4주차] 이현영 미션 제출합니다. #19
Conversation
|
안녕하세요, 프론트 파트장 주효정입니다🙌 프로필 사진 강쥐들이 너무 귀엽네요😄 나름 재밌게(?) 과제하셨을 거라고 믿습니다ㅎㅎ 이미 고치셨을 수도 있는데, 고치고 싶은 부분에 대해 말씀드리자면 우선 이미지 깨지는 것 같은 경우에는 현재 이번주도 수고많으셨고 스터디 시간에 뵐게요~!🥳 |
| rightChild: string; | ||
| } | ||
|
|
||
| const Header = ({ leftChild, rightChild }: Props) => { |
There was a problem hiding this comment.
leftChild , rightChild가 생소해서 조금 찾아보니까 컴포넌트 재사용률을 더 높일 수 있는 방법이었네요... 덕분에 알아갑니다 하핫
| id: number; | ||
| } | ||
|
|
||
| const InputBox = ({ id }: Props) => { |
There was a problem hiding this comment.
props interface를 위에서 미리 만들어주는 거 좋은 거 같아욧~!
| <UserItemWrapper> | ||
| <UserItemWrapper | ||
| onClick={() => { | ||
| navigate(`/chatRoom/${id}`); |
There was a problem hiding this comment.
와.. 전 link로 그냥 컴포넌트를 덮어버렸는데 네비게이트가 더 좋은 거 같아요 ㅠ.ㅠ 굿굿..
| import { useRecoilValue } from 'recoil'; | ||
| import styled from 'styled-components'; | ||
|
|
||
| import { userState, chatState } from '../../recoil/recoil'; | ||
| import ChatBoxItem from './ChatBoxItem'; | ||
|
|
||
| const ChatBoxList = ({ id }: { id: number }) => { | ||
| const ChatBoxList = () => { | ||
| const { id } = useParams(); |
There was a problem hiding this comment.
오 useParams쓰셨군요..! 저도 처음에 파람스로 쓰려고 하다가
recoil로 받아오는 게 더 편해서 바꿨었는데 현영님은 두개 중 어떤게 더 편하셨나용
There was a problem hiding this comment.
안녕하세요 현영 님! 이번 주 코드 리뷰 파트너입니다 ㅎ.ㅎ
코드가 엄청 깔끔하고 저랑 다르게 작성한 부분들도 많아서 많이 배울 수 있었습니다!
코드를 되게 꼼꼼히 짜시는 것 같다고 느껴졌어욥!!
그리고 textarea 태그를 사용하면 줄바꿈이 가능한 걸로 아는데 저도 사용하려다가 시간 부족으로 input 태그 사용으로 마무리 했었거든요 ㅜㅡㅜ...
이따 개별 토론 세션 때 이 부분에 대해 같이 이야기 나눠 보면 좋을 것 같아요!!
과제하느라 수고 많으셨고 이따 스터디 시간에 봬요!! 😸
| const reset = useCallback((): void => { | ||
| setText(init); | ||
| }, [init]); | ||
|
|
There was a problem hiding this comment.
우와 useCallback되게 잘 활용하시네용... 저는 사용하지 않고 useInput 훅을 작성했었는데 배워갑니당...!!
| return ( | ||
| user.user_name !== users[0].user_name && | ||
| user.user_name.toLocaleLowerCase().includes(text.toLocaleLowerCase()) | ||
| ); |
There was a problem hiding this comment.
저는 toLowerCase()를 사용했는데 toLocaleLowerCase() 를 사용하면 영어가 아닌 다른 언어도 소문자로 바꿔 주는군용...! 저도 다음부터는 toLocaleLowerCase() 사용해야겠어요 🤩
| align-items: center; | ||
|
|
||
| gap: 2rem; | ||
|
|
There was a problem hiding this comment.
우와 저는 항상 margin-bottom 사용했었는데!! 배워갑니당... 👀
|
|
||
| input:focus { | ||
| outline: none; | ||
| } |
There was a problem hiding this comment.
우와 이렇게 한번에 초깃값을 없애는 방법 좋네요... 🤩
|
|
||
| font-size: 0.9rem; | ||
| font-weight: 500; | ||
|
|
There was a problem hiding this comment.
| word-break: break-all; |
채림님한테 배운 건데... 이렇게 하면 영어로 길게 쳤을 때도 말풍선이 깨지지 않아용!!
안녕하세요 16기 이현영입니다!
저번 과제에
recoil이 아니라context를 사용했는데,리렌더링 부분 등 확실히
recoil의 편의성에 대해 알 수 있었습니다. 사용하기 더 쉽기도 했구요!또 저번 과제를 진행하면서 user 전환을 할 때 꼭 다음 입력을 해줘야 전환이 되었는데, 클릭이벤트의 위치를 바꾸며 해결했습니다!!
코드 중복도 많고 단톡방으로 확장하려면 또다시 뜯어고쳐야겠다는 생각이 들었지만,,
기능들을 구현하면서 많이 배웠던 과제였습니다!
🔗 배포링크
핵심 기능은 구현했지만 스터디 전까지 고치고 싶은 부분입니다!
Key Questions
Routing
Router: 데이터의 경로를 실시간으로 지정해주는 것Routing: 경로를 정해주는 행위 + 과정들Page Routing: 요청에 명시되어있는 경로에 따라 어떤 페이지를 돌려줄지 결정, 반환새로고침 없이 페이지를 전환한다
SPA
SPA: Single Page Application하나의 페이지를 사용하는 어플리케이션.
서버로부터 새로운 페이지를 가져오는 것이 아닌, 하나의 페이지에서 내용을 동적으로 변경한다
CSR: Client Side Rendering 방식으로 랜더링한다상태관리
상태관리: 변화하는 데이터들을 관리하는 것.상태의 초기 값 저장, 상태의 값 읽기, 상태 업데이트 등의 행위.
상태관리를 위한 도구들:
Redux,Context API,Recoil등