[5주차] 유세은 미션 제출합니다. #14
Conversation
There was a problem hiding this comment.
안녕하세요 세은 님, 5주차 코드 리뷰 파트너 최어진입니다.
항상 아기자기한 디자인, 그러면서도 미션 요구 기능을 잘 구현하신 결과물에서
미션에 투자하신 정성을 느낄 수 있는 것 같아요...!
부족한 시각으로 남긴 Comment들이지만 어차피 많은 부분들은
세은 님께서 이미 너무나도 잘 이해하고 계신 부분들이라고 생각해서
가볍게 스쳐 지나가면서 봐 주시면 감사드리겠습니다..ㅎ
별개로 prettier 적용이 잘 이루어지지 않은 것 같은 느낌을 잠깐 받았는데
한번 체크해 보시길 추천드립니다!!
잘 이루어졌는데 제가 헷갈린 걸 수도 있긴 하지만요...
어쨌든 정말 고생 많으셨습니다..!
다음 주에 세은 님과 민지 님께서 파운더 시너지를 통해
제출하시게 될 결과물이 벌써 기대됩니다...ㅎㅎ
조금 이따 뵙겠습니다...!
| /* | ||
|
|
||
| App | ||
| / \ | ||
| Menu CHatRoom | ||
| / \ \ | ||
| InputForm UserProfile Message | ||
|
|
||
| */ |
|
|
||
| margin:0 auto; //중앙에 박스 | ||
| margin-top: 50px; | ||
| box-shadow:3px 3px 3px 3px lightgrey; |
There was a problem hiding this comment.
box-shadow: 0 1rem 4rem hsl(0 0% 0% / 15%);
제가 자주 사용하는 자연스러운 Shadowing 방식입니다.. 참고해 보세요!!
근데 이번에 세은 님께서 꾸미신 UI 컨셉에는 세은 님께서 기존에 사용하신 방식이 분위기상 더 어울리네요!!
|
|
||
| export const MessageButton = styled.span | ||
| ` | ||
| cursor: pointer; |
| ` | ||
| width: 50px; | ||
| height: 50px; | ||
| border-radius: 30px; |
There was a problem hiding this comment.
border-radius: 50%;
제가 이미지를 원형으로 잘라내고 싶을 때 자주 사용하는 방식입니다!
그냥 TMI 정도로만 받아주셔도 괜찮습니다...ㅎ
| export const FriendContainer = styled.div | ||
| ` | ||
| display:flex; | ||
| display: inline-block |
There was a problem hiding this comment.
display: inline-block;
; 하나 빠뜨리신 것 같아서 제가 주워왔습니다ㅎㅎ...
| border-width: 5px 7px 0; | ||
| border-color: #FFFFFF transparent; |
There was a problem hiding this comment.
border-color와 border-width를 표현하는 방식을 간결하게 잘 작성해 주신 것 같습니다..!!
| ` | ||
| ; | ||
|
|
||
| const Menu1 = styled.div |
There was a problem hiding this comment.
네이밍 같은 부분들은 알고 계시지만 다른 거 수정중이셔서 잠시 놔두신 것 같아서
나중에 수정하실 때 기억하시기 쉽도록 Comment 하나만 남기고 갈게요....!!
| "roomId": 1, | ||
| "userId": 1, | ||
| "text" : "아너무 어려우어ㅓ어엉" | ||
| }, | ||
| { | ||
| "roomId": 0, | ||
| "userId": 0, | ||
| "text" : "그래서나눈누난나" |
| const onChange = useCallback((event : React.ChangeEvent<HTMLInputElement>) => {setMessage(event.target.value)},[]); | ||
|
|
||
| return { message, onChange, setMessage }; | ||
| }; |
There was a problem hiding this comment.
Hook 관련된 부분은 코멘트를 남기기보다 오히려 제가 잘 이해하지 못한 부분이라서..ㅠ.ㅠㅠ....
감사히 참고하도록 하겠습니다...!
안녕하세요 프론트 15기 유세은입니다 🥰 저번 과제에서 확장성을 고려해서 짰다고는 생각했는데 생각보다 손 볼 부분이 많아서 시간이 많이 걸렸습니다 ㅠㅠ Recoil 적용하고 css 수정하다보니까 늦게 제출하게 되었습니다 아직 수정 중입니다ㅠㅠ
배포링크
메신저
구현화면
어려운 부분
채팅,친구 목록 나를 제외한 user 따로 필터링 하기 =>
const friendList = user.filter(user => user.id !== 0) //나를 제외한 user 따로 필터링 하기계속 해결하지 못하다가 이 부분에서 위의 방법으로 filter를 이용해서 고쳤는데 혹시 다른 좋은 방법이 있을까요 ,,?
const chatLength = chatting[friend.id-1].chat.length;chat의 배열의 길이를 가져와서 해결했는데 코드가 불필요하게 길어진 부분이 생긴 것 같습니다 ㅠ
-라우팅할때 props 받기 =>
불필요한 코드가 많아지는 것 같아서 개인적으로 아쉽습니다 ㅠ
-Recoil 적용 중인데 적용 안되는 부분들 발생,,ㅠ
-단체 채팅방 만들어보고 싶은데 유저가 2명밖에 토글이 되지 않는 문제 발생,,,(아마 json을 수정해야 될 것 같아용)
고려한 부분
-px 지양 / rem 사용하기..? => 저번 과제 때 효정님이 남겨주신 채림님 코멘트에서 px vs rem을 보고 margin,padding은 rem으로 다시 style 해보았습니다(놓친 부분이 있을수도,,)
-말꼬리 풍선 만들기 말꼬리 풍선 css => 상태 메시지 길이에 따라 말꼬리 길이 조절
-Recoil 사용해보기 recoil이 useState와 근접한 방식으로 사용할 수 있는 것 같아서 Recoil을 사용해서 전역 상태 관리를 해보려고 노력중입니다..(아직 적용중) 확실히 props로 state 를 전달하는 것보다는 편한 것 같아서 개인적으로 더 공부해보고 싶습니당
-홈 페이지를 만들어보고 싶은데 시간 부족,,
-Input 에 useCallBack 함수 사용, React.memo() 사용으로 최적화 해보기
-Basic UI Component 최대한 활용하기
고쳐야 할 부분
-Recoil로 상태 관리하기
-유저가 2명 밖에 토글되지 않는 부분
참고자료
Recoil 기초
말꼬리 풍선 css
안티 패턴
웹 성능 최적화 방법 5분 완성
Key Question
Routing
SSR(서버 사이드 렌더링)
SPA(싱글 페이지 어플리케이션)
느낀 점
개인적으로 이번 과제를 하면서 컴포넌트를 처음에 분리하지 않고 나중에 분리를 하다 보니까 제가 봐도 제 코드가 어지럽고 복잡하더라구요 자잘한 css 수정 관련 커밋이 많아서 부끄럽네요 .. 🤔 css 수정하면서 눈이 너무 아팠습니다 .. 이번 과제의 중점적인 부분이 라우팅+상태 관리+최적화 라고 생각해서 최대한 그 부분을 생각하면서 코드를 짰는데 저번 코드에서 많은 부분을 수정해야 해서 어려웠습니다 ㅠ 아직 Recoil도 기초적인 부분밖에 사용하지 못해서 아쉬움이 남습니다 다른 분들 코드를 보면서 컴포넌트 설계에 대해 많이 배우는 것 같습니다 프론트 너무 어렵따,,, 부족한 부분 코멘트 남겨주세요 >.< .. 감사합니다😍