[4주차] 임채리 미션 제출합니다. #22
Conversation
|
안녕하세요, 프론트 파트장 주효정입니다🙌 확장성 고려하는게 절대 쉽지는 않은 것 같아요.. 그래도 너무 훌륭하게 잘 해주신 것 같아요~! 컴포넌트 분리도 잘 해주시고, recoil도 적절하게 잘 사용하시는 것 같아요!! 특히 interface 상속을 잘 활용하시는 것 같습니다👍 앞으로의 과제에서도 기대가 됩니다. 친구리스트 출력을 위해 map을 돌릴 때 나까지 같이 나오는 현상에 대해 말씀해주셨는데, 처음부터 내 데이터와 다른 user의 데이터를 분리해서 저장하는 방법도 있겠지만, 이번주도 수고많으셨고 스터디 시간에 뵐게요~!🥳 |
| <Link | ||
| to={`/chatroom/${Msg.roomid}`} | ||
| style={{ textDecoration: 'none', color: 'black' }} | ||
| > |
There was a problem hiding this comment.
채팅방 목록에서 나와의 채팅방으로 이동할때 경로가 "/chatroom/undefined" 이렇게 이동되어서 화면이 안뜨는데 혹시 이유가 뭘까요..! 친구목록에서 나와의 채팅방은 "/chatroom/0" 이 경로로 잘 들어가지네요!
| flex-direction: row; | ||
| margin-bottom: 10px; | ||
| `; | ||
|
|
There was a problem hiding this comment.
Li1 과 Li2 에서 사용하는 속성이 중복되는게 많은 것 같아서 flex-direction 이랑 margin-right를 props로 주어 하나의 style로 만들어주면 어떨까싶습니다!
| border-radius: 10px; | ||
| font-size: 13px; | ||
| margin-top: 10px; | ||
| `; |
There was a problem hiding this comment.
혹시 여기는 margin-top 에만 20px를 주고싶어서 margin과 margin top을 따로 써주신걸까요??
만약 그러시다면 margin: 20px 10px 10px 10px 이렇게 한번에 작성할 수 있을 것 같습니다~
참고하시라고 margin 방향 나눠서 작성하는 법 놓고가요!
margin : 위 오른쪽 아래 왼쪽 (시계방향)
margin : 상하 좌우 (Ex) margin: 10px 20px= 위아래 10px 양쪽 20px
| return ( | ||
| <ChatBoardContainer ref={chatBoardRef}> | ||
| <UserChat> | ||
| {currentChatList.map((li: any) => ( |
There was a problem hiding this comment.
저는 map을 쓸 때 옆에 타입을 지정해주지 않았는데 혹시 이거 지정해주신 이유가 있을까요??? (혹시 썼어야하는건지 잘 몰라서요 ..!! / 혹은 제가 map을 썼을 경우와 다른 점이 있나싶어서.!)
| return { ...chatList, [roomid]: newObj }; | ||
| }); | ||
| setInputText(''); | ||
| }; |
There was a problem hiding this comment.
저도 처음에 concat을 사용했다가 불변성문제 때문에 채리님처럼 spread 사용하다가 방법을 잘 모르겠어서 다른방법으로 돌렸는데 채리님은 이렇게 구현하셨군요..!! 배워갑니다 !! 👍
| padding: 10px; | ||
| `; | ||
|
|
||
| const Input = styled.input.attrs({ required: true })` |
There was a problem hiding this comment.
오 attrs 라는 것은 처음봤네요.! 궁금해서 찾아보니까 inline style로 바꾸어주고, html 태그 속성 (ex. type=text)를 재반복하지 않아도 된다는 장점이 있는 것 같은데 혹시 사용하신 이유가 무엇일까요?? (단지 궁금증..) 저도 attrs 좀 더 공부해보고 다음에는 사용해보고 싶어서요 ㅎㅎ
|
|
||
| function FriendList() { | ||
| const me = user.slice(0, 1); | ||
| const onlyfriendslist = user.slice(1, 5); |
There was a problem hiding this comment.
저는 filter 를 사용해서 나/친구 구분해줬는데 slice 사용하는 방법도 있네요! 하나 더 알아갑니다~~! 👍
안녕하세요 CEOS 16기 임채리입니다.
역시나 저번 과제 때 확장성을 고려하지 않아서 많은 어려움을 겪었습니다 🥺
recoil을 사용해보았는데 제대로 활용하지 못한 것 같아 더 보완해나가야겠다고 다짐했습니다.
가장 어려웠던 것은 input값을 저장해서 출력하는 것이었네요 ㅜㅜ
json파일 내에서 roomid에 맞는 index를 가지고 타고 타고 들어가서 저장하려다보니까 recoil로 가져온 것과 타입이 달라 문제를 겪었습니다.
더 열심히 공부해서 수정해나가야겠습니다!!!
배포링크
[Key Question]
Routing
리액트에서 routing이란 페이지 이동을 의미한다.
리액트에는 html파일이 하나밖에 없다. (SPA)
따라서 페이지 이동을 할 때 필요한 컴포넌트만 뽑아 보여준다.
리액트에서 routing 기능을 구현하는 것은 쉽지 않지만 React Router는 리액트에서 쉽게 routing이 가능하도록 도와준다.
SPA
기존의 MPA(multiple page application)는 상태 유지의 어려움과 불필요한 로딩 등의 단점이 있다.
SPA(single page application)는 페이지 간 이동 시, 페이지 갱신에 필요한 데이터만을 JSON으로 전달받아 페이지를 갱신하므로 전체적인 트래픽을 감소할 수 있고, 전체 페이지를 다시 렌더링하지 않고 변경되는 부분만을 갱신한다. 따라서 모바일 웹에 최적화 되어있다.
상태관리
리액트는 데이터 흐름이 단방향적(부모->자식)인 특징을 가지기 때문에 자식에서 부모의 상태를 바꾸려면 props를 넘겨줘야 한다. 이게 반복되면 props drilling이 심해지고 props depth가 증가해서 불필요한 리렌더링이 일어나는 등 비효율적이기 때문에 상태 관리 라이브러리를 사용할 필요가 있다!
redux, contex api,mobX,recoil 등이 있는데
이 중 recoil은 context api와 다르게 업데이트된 state 부분만 리렌더링을 한다.
[마주한 에러]
const LinkTo = styled(Link)
text-decoration: none; color: black; display: flex; flex-direction: row;;-> styled componenet로 링크를 사용하고 parameter 넣으면 에러 뜬다 -> 임시방편으로 li로 감싸서 해결했다
user data에 나를 포함해서 넣어둬서 친구리스트 출력을 위해 map을 돌릴 때 나까지 같이 나오는 현상 발생
-> 여러가지 방법을 시도해보다가 userdata 배열을 slice를 사용해서 분리했는데 좋은 방법인지 모르겠습니다 … 다들 혹시 이 기능을 구현하셨다면 조언 부탁드립니다!
이 외에도 수많은 타입에러 …
특히나 input을 recoil에 저장하는 부분에서 어려움을 겪었습니다. message.json 파일의 구조를 더 체계적으로 잡아야겠다고 생각했습니다.