[4주차] 강나연 미션 제출합니다. #15
Conversation
|
안녕하세요, 프론트 파트장 주효정입니다🙌 배포링크 들어가자마자 디자인 보고 깜짝 놀랐습니다🫢 디자이너와 협업했을 때가 기대가 되네요! 특히나 프로필 눌렀을때 뜨는 모달창은 너무 센스있고 좋은 것 같아요~! 그리고 recoil도 잘 사용하신 것 같은데요! selector 사용해서 값을 정제해준 부분도 인상적이었습니다. 다만 한가지 드리고 싶은 말씀은 전역으로 관리할 상태와 아닌 상태를 적절하게 구분하시는 것도 좋을 것 같아요! 전역 상태를 사용하면 props drilling을 방지할 수 있다는 장점이 있지만 전역으로 관리할 상태가 많아진다면 오히려 유지보수의 어려움이 있지도 않을까 하는 생각이 드네요. 앞으로 프로젝트 진행하면서도 상태관리를 적절하게 잘 사용해주시면 좋겠습니다!👍 이번주도 수고많으셨고 스터디 시간에 뵐게요🥳 +) 의도치 않은 문제로 인해서 강제로 reload하는 방법이 적절한 사이클은 아닌듯해 보이지만 어떤 문제로 reload해야만 CSS가 적용되는지는 잘 모르겠네요,,😢 더 알아보고 알려드릴게요! |
|
와 피그마까지 정말 화려한 디자인...! 증말 최곱니다 |
| <Button onClick={() => window.open("https://github.com/kongnayeon")}> | ||
| GitHub | ||
| </Button> | ||
| <Button onClick={() => window.open("https://kongnayeon.tistory.com/")}> |
There was a problem hiding this comment.
옹 저는 a 태그를 이용했는데 window.open()으로도 이동할 수 있군요...! 배워갑니다
There was a problem hiding this comment.
window.open() 사용하니까 글씨가 파란색 보라색 이렇게 바뀌는 게 없어서 좋더라구요...!!
|
|
||
| useEffect(() => { | ||
| isOn ? setIsNew("오래된 메시지 순") : setIsNew("최신 메시지 순"); | ||
| setChatData((chatRooms: ChatRoom[]) => { |
There was a problem hiding this comment.
옹 오래된 메세지, 최신메세지를 어떻게 구현하셨나 궁금했었는데 reverse로 깔끔하게 구현하셨네요!!!!
전 새로운 배열을 만들어서 거꾸로 집어넣는 것만 생각했었는데..ㅎㅎ 배워갑니다
There was a problem hiding this comment.
사실 저는 chat id값을 시간으로 받아서 그 값을 기준으로 정렬을 하고 싶었는데... 객체 배열을 특정한 기준으로 정리하는 걸 잘 못 하겠더라구요 ㅎㅎ... 그래서 뭔가 다른 기준으로 정렬해야 할 때는 사용할 수 없는 방법 같기는 해요 ^_ㅠ,,
| }>` | ||
| font-size: 0.8rem; | ||
| padding: 0.5rem; | ||
| word-break: break-all; |
There was a problem hiding this comment.
와 대박!! 안 그래도 한글 채팅은 말풍선 내에서 자동으로 줄바꿈이 되는데 영어는 안되더라구요...;; 이렇게 해결할 수 있군요 꿀팁 감사합니당
There was a problem hiding this comment.
그쵸!! 저두 채림 님이 저번에 가르쳐 주셨어요 🤩
| "roomid": 0, | ||
| "user": 1, |
There was a problem hiding this comment.
아 이런 식으로 하면 단체톡방을 만든다든지 할 때 편할 것 같아요!! 배워갑니다
There was a problem hiding this comment.
사실 단체 톡방도 만들어 보고 싶어서 이렇게 만든 건데 시간 나면 추가로 구현해 봐야겠어욥 ㅎ.ㅎ...!!
| useEffect(() => { | ||
| const filteredResult = userData[0].filter((user) => { | ||
| return user.name.toLowerCase().includes(message.value.toLowerCase()); | ||
| }); | ||
| setSearchData(filteredResult); | ||
| }, [message.value, setSearchData]); |
There was a problem hiding this comment.
앗 저는 이거 놓쳤네요 !!! 저도 리렌더링되는부분 체크하고 최적화 해봐야겠어요 〰
| const location = useLocation(); | ||
| const nowPage = location.pathname.split("/", 2)[1]; |
There was a problem hiding this comment.
헉 그렇게 하면 엄청 깔끔해 지겠네용...!! 현영 님 코드에서도 방금 보고 왔는데!! 배워갑니당... 🤩
안녕하세요 강나연입니다!
시험이 끝나고 한 3주만에 다시 코드를 봐서 그런지 제가 짠 코드인데도 남이 짠 코드를 보는 것 같았네요… 🫠
✔️ 배포링크
이번 과제는 큼직큼직한 부분들은 빠르게 끝냈는데 자잘한 부분에서 정말 시간을 많이 쏟았습니다 😇
react-router버전이 업데이트 되며 없어진 기능 들도 있었고… 검색 기능을 만들 때useState의setState가 비동기적으로 동작한다는 것도 잊고 검색하려는 값이 한 박자씩(?) 밀려서 설정되는 오류를 해결하느라 시간을 많이 썼습니다… 🥲참고 링크
게다가 vercel로 배포할 때 파일명 대소문자 오류와… 메인페이지에서 친구 목록 페이지로 라우팅 될 때 css가 아예 적용되지 않는다든지… 이런 저런 오류가 많았는데 고치는 법을 잘 모르겠어서 브랜치도 새로 파고… 친구 목록 페이지로 넘어갈 때는 무조건 새로고침을 하도록 해 봤는데 좋은 방향으로 수정한 건지 모르겠네요 ㅎㅅㅎ… 혹시 해결 방법을 아시는 분이 계시다면 조언 부탁드립니다 🥺
3주차 과제에서
Recoil로 상태 관리를 해 보니 굉장히 유용해서 이번 과제에서는 더욱 깔끔하게 사용해 보고 싶었는데 뭔가 갈수록 코드가 더러워진 것 같아요 하하 ㅎㅅㅎ…제 코드를 리뷰해 주시는 분들께 미리 사죄의 말씀을 드립니다… 😵💫
이번 과제에서 추가 기능으로는 채팅방 정렬 기능과 친구 목록에서 사용자 프로필을 클릭하면 모달창이 뜨는 기능을 구현해 봤습니다!
그리고 이번 주 과제는 페이지가 많아져서 피그마로 먼저 디자인을 해 본 뒤에 만들었는데요!!…
구경하고 싶으신 분들을 위해… 피그마 링크도 첨부합니다
많은 조언 부탁드립니다,, 🥺
Key Questions
새로운 페이지로 이동할 때 새로고침을 하지 않고 페이지를 보여 주는 기능이다. 리액트에서는 라우팅과 관련된 여러 라이브러리가 있고, 주로
react-router를 가장 많이 사용한다.SPA는 Single Page Application의 약자이다. 기존의 MPA 방식(여러 페이지를 사용하고 새로운 페이지를 로드하는 방식)과 달리 새로운 페이지를 로드하지 않고 하나의 페이지 안에서 필요한 데이터만 가져오는 방식이다.
애플리케이션의 규모가 커질수록 상태 관리 라이브러리 없이 상태 관리를 하게 되면 props drilling이 과하게 발생할 수 있다. 이를 해결하기 위해
Context API,react-redux,Recoil등을 이용해 전역적으로 상태를 관리할 수 있다.