[5주차] 한규진 미션 제출합니다. #11

9yujin · 2022-05-11T18:03:51Z

안녕하세요, 한규진입니다. 다음주에 있는 전공 중간고사와 과제때문에 미리미리 해서 먼저 제출합니다..

배포링크

https://react-messenger-15th-theta.vercel.app/

대부분 기능을 카카오톡 pc 앱을 보며 최대한 비슷하게 보이도록 구현했으니 같이 보시면 더욱 재밌을 것 같습니다.
저번주 과제를 할때 확장을 최대한 고려하며 한 덕분에 그나마 과제하기 편했던 듯 하네요.

카카오로그인 기능을 넣었습니다. react-kakao-login 이라는 개꿀 라이브러리가 있습니다.
로컬스토리지에 유저정보 값을 저장하고 새로고침해도 로그인이 유지되도록 했습니다.
리코일 상태를 초기화할때 애를 좀 먹었습니다. 어렵네요. 참고

과제의 핵심은 라우팅 기능이라고 생각했습니다. 조금 더 실제 프로젝트에 가깝게끔 기능을 넣었습니다.

requireAuth 컴포넌트를 통해 로그인되어있지 않은 상태일 때 메인 페이지로 리다이렉트 시킵니다.
저런 컴포넌트도 HOC라고 부르는지는 모르겠습니다. 참고
채팅방에 url로 직접 접근할때도 메인페이지로 리다이렉트합니다.
채팅방은 메인페이지를 통해서만 접근할 수 있습니다. useNavigate에서 state를 넘길수 있습니다. 참고
그 외에 따로 지정되지 않은 url로 들어올때는 not found 페이지로 넘깁니다.

리액트 라우터 돔 v6가 너무너무 익숙치 않습니다. 한줄한줄 쓸때마다 구글링을 엄청엄청 했네요.
과제를 하면서 덕분에 그나마 좀 친해진것 같습니다.

css가 제일 어렵습니다. 이거만 아니었다면 시간이 절반은 줄었을텐데요. 으악. css없는 세상에 살고 싶습니다.

Key Question

이전에는 페이지를 이동할때마다 새로 요청을 해서 받아와 페이지를 새로고침을 해야 했습니다.
SPA란 말그대로 page가 한개인 앱을 말합니다. 그 한 페이지 안에서 주소에 따라 다양한 화면을 렌더링할 수 있습니다.
그리고 그 주소에 따라 다른 화면을 보여주도록 하는것을 Routing이라고 합니다.
리액트 라우터 돔 문서가 꽤 잘되어있더군요.. 다행입니다.

서버사이드렌더링에 대해서는 직접 공부해본적이 없어 아쉽습니다.
이전에 인강을 짤막하게 듣다 만적이 있었는데, 그때 적어놓았던 부분을 올려봅니다.

sungwoo-shin

안녕하세요, 5주차 코드리뷰 파트너 신성우 입니다. 공부한다는 생각으로 꼼꼼히 봤습니다. 채팅방 스크롤바, 하단 이동 버튼을 구현하신것과 챗 버블 구현하신것을 보고 많이 배웠습니다. 코멘트는 이번주 과제인 라우팅 파트에 집중적으로 남겼습니다.

sungwoo-shin · 2022-05-14T12:22:35Z

src/styles/Container.tsx

+    background-color: #fff;
+    width: 100vw;
+    height: 100vh;
+    @media screen and (min-width: 600px) {


Suggested change

@media screen and (min-width: 600px) {

@media screen and (min-width: 768px) {

상황에 따라 적절한 값을 사용해야 겠지만, 반응형 제작 시 참고하는 모바일 디바이스 표준 width 값은 <= 768px 입니다.

sungwoo-shin · 2022-05-14T12:24:34Z

src/styles/Container.tsx

+/* export const ListContainer = styled.div`
+    padding: 0px 18px;
+`; */
+
+export const ListBody = styled.div``;


Suggested change

/* export const ListContainer = styled.div`

padding: 0px 18px;

`; */

export const ListBody = styled.div``;

sungwoo-shin · 2022-05-14T12:35:36Z

src/App.tsx

+                                    <RequireAuth>
+                                        <Router />
+                                    </RequireAuth>


Route의 children으로 들어가는 JSX 엘리먼트(중첩 라우트)를 보여줄땐 리액트 라우터에서 제공하는 Outlet 컴포넌트를 사용합니다.

sungwoo-shin · 2022-05-14T12:39:11Z

src/App.tsx

+            <GlobalStyle />
+            <RecoilRoot>
+                <BrowserRouter>


GlobalStyle, RecoilRoot, BrowserRouter는 일반적으로 src/index.tsx 에서 App을 감싸는 형태로 사용합니다.
App.tsx 리턴문 안의 컴포넌트들의 인덴팅이 과도하게 복잡해진것 같습니다.

sungwoo-shin · 2022-05-14T12:41:57Z

src/pages/Login.tsx

+    display: flex;
+    height: 100%;
+    justify-content: center;
+    align-items: center;
+    flex-direction: column;
+    background-color: #fcec5c;
+    @media screen and (min-width: 600px) {
+        border-radius: 15px;
+    }


Suggested change

display: flex;

height: 100%;

justify-content: center;

align-items: center;

flex-direction: column;

background-color: #fcec5c;

@media screen and (min-width: 600px) {

border-radius: 15px;

}

height: 100%;

display: flex;

justify-content: center;

align-items: center;

flex-direction: column;

background-color: #fcec5c;

@media screen and (min-width: 600px) {

border-radius: 15px;

}

관련 있는 CSS 코드를 분리하면 가독성에 도움이 되는것 같습니다!
(코딩 스타일 영역이라 단지 추천 입니다!)

sungwoo-shin · 2022-05-14T14:48:09Z

src/components/chatroom/SendMessage.tsx

+            if (inputRef.current) {
+                inputRef.current.focus();
+            }


저는 다른 방식으로 했는데 이렇게 하는게 효율적이네요!

sungwoo-shin · 2022-05-14T14:48:37Z

src/components/chatroom/SendMessage.tsx

+
+    const onEnter = (e: KeyboardEvent<HTMLTextAreaElement>) => {
+        if (e.key === 'Enter' && !e.shiftKey) {
+            // 우왕 : https://velog.io/@corinthionia/JS-keydown에서-한글-입력-시-마지막-음절이-중복-입력되는-경우-함수가-두-번-실행되는-경우


빅 샤랏투 프짱!

sungwoo-shin · 2022-05-14T14:58:54Z

src/components/chatroom/ChatItem.tsx

+// asdfasdfsadfasdf 와 같이 영어를 공백없이 길게 넣었을때 줄바꿈이 되지않고
+// 화면을 넘어가는 경우가 있음.
+// 왜이럴까요


이거 저도 그런데 해결방법을 모르겠네요,,

word-break: break-all을 추가해 보세요!

sungwoo-shin · 2022-05-14T14:59:39Z

src/components/chatroom/RoomBody.tsx

+    // 맨 아래로 버튼 보이기 & 스크롤바 숨기기
+    const handleScrollY = throttle(() => {
+        if (bodyRef.current) {
+            const roomBodyScrollY = bodyRef.current.scrollHeight - bodyRef.current.scrollTop;
+
+            if (roomBodyScrollY > 800 && !scrollButtonVisible) {
+                setScrollButtonVisible(true);
+            } else if (roomBodyScrollY <= 800 && scrollButtonVisible) {
+                setScrollButtonVisible(false);
+            }
+        }
+        setScrollBarVisible(true);
+        setTimeout(() => {
+            setScrollBarVisible(false);
+        }, 2000);
+    }, 300);
+
+    const goToBottom = () => {
+        if (bodyRef.current) {
+            bodyRef.current.scrollTo(0, bodyRef.current.scrollHeight);
+        }
+    };
+
+    useEffect(() => {
+        goToBottom();
+        setScrollBarVisible(false);
+    }, [chats]);
+
+    const handleClickGoToBottom = () => {
+        goToBottom();
+    };


많이 배우고 갑니당~ 🙌

sungwoo-shin · 2022-05-14T15:05:45Z

src/components/chatroom/RoomBody.tsx

+    );
+};
+
+export default RoomBody;


규진님께서 작성하신 코드는 currentUser를 토글 하는 순간 기존 메세지가 모두 리랜더 됩니다. 상태 관리 구조 개선을 통해 최적화할 수 있습니다.

감사히 뚜까맞고갑니다♥️... 특히 상태관리와 네이밍에 많이 신경을 써야겠군요..!!

뚜까팬다는 투두메이트 알림 보고 왔는데 정말 자세히 달아 주셨네요... 최고예요 👍🏻👍🏻

저는 투두메이트를 안하는데도 소식을 듣고 리뷰 봤는데 진짜 정성 대박이네요... 최곱니다.. 저도 같이 뚜까맞고 가요......

corinthionia

안녕하세요 규진 님 🙌🏻

규진 님 코드리뷰를 굉장히 오랜만에 해 드리는 것 같네요! 사실 다른 일을 하고 있다가 성우 님의 투두메이트 알림을 받고 구경을 와 봤는데요, 성우 님께서 코멘트를 너무 잘 달아 주시고, 제가 아직 자세히 보지를 못해서 (ㅠㅠ) 코멘트를 많이 못 달아 드렸네요. 시간이 남는다면 나중에 더 자세히 리뷰해 드리겠습니다...!

과제하시느라 고생 많으셨습니다!
그럼 스터디 시간에 뵐게요~

corinthionia · 2022-05-14T15:52:01Z

src/components/chatroom/ChatItem.tsx

+// asdfasdfsadfasdf 와 같이 영어를 공백없이 길게 넣었을때 줄바꿈이 되지않고
+// 화면을 넘어가는 경우가 있음.
+// 왜이럴까요


word-break: break-all을 추가해 보세요!

chaaerim

규진님 안녕하세요. 코드리뷰 파트너 김채림입니다 😇
이번주차 코드리뷰로 저를 킹받게 하는 것이 목표이셨다면 대성공하셨습니다..^6^.........(스포는 죽음뿐 ㅎㅎ......)
그렇지만 규진님 코드는 감탄만 하면서 봤네요... 진짜 디테일하게 코딩하시는 것 같아요..
앞서서 성우님이 열심히 남겨주신 코멘트 덕분에 저도 많이 공부하면서 리뷰했습니다 . .
제가 제안드리고 싶은 점은 없었고 그냥 감탄사 몇개 적어봤어요.. 그럼 스터디 시간에 뵐게요 ~ ! !

chaaerim · 2022-05-15T07:59:20Z

.eslintrc

+{
+    "root": true,
+    "parser": "@typescript-eslint/parser",
+    "plugins": ["@typescript-eslint", "no-loops"],
+    "extends": ["eslint:recommended", "plugin:@typescript-eslint/eslint-recommended", "plugin:@typescript-eslint/recommended"],
+    "rules": {
+        "no-console": 2,
+        "no-loops/no-loops": 2
+    }
+}


chaaerim · 2022-05-15T08:22:45Z

src/components/chatroom/RoomBody.tsx

+const RoomBody = ({ chats, users, currentUser }: RoomBodyProps) => {
+    const [scrollButtonVisible, setScrollButtonVisible] = useState<boolean>(false);
+    const [scrollBarVisible, setScrollBarVisible] = useState<boolean>(false);
+
+    const bodyRef = useRef<HTMLDivElement>(null);
+
+    // 맨 아래로 버튼 보이기 & 스크롤바 숨기기
+    const handleScrollY = throttle(() => {
+        if (bodyRef.current) {
+            const roomBodyScrollY = bodyRef.current.scrollHeight - bodyRef.current.scrollTop;
+
+            if (roomBodyScrollY > 800 && !scrollButtonVisible) {
+                setScrollButtonVisible(true);
+            } else if (roomBodyScrollY <= 800 && scrollButtonVisible) {
+                setScrollButtonVisible(false);
+            }
+        }
+        setScrollBarVisible(true);
+        setTimeout(() => {
+            setScrollBarVisible(false);
+        }, 2000);
+    }, 300);
+
+    const goToBottom = () => {
+        if (bodyRef.current) {
+            bodyRef.current.scrollTo(0, bodyRef.current.scrollHeight);
+        }
+    };
+
+    useEffect(() => {
+        goToBottom();
+        setScrollBarVisible(false);
+    }, [chats]);
+
+    const handleClickGoToBottom = () => {
+        goToBottom();
+    };


저도 진짜 배우고 갑니다..전 라이브러리 쓸 생각만 했는데 ..

chaaerim · 2022-05-15T08:31:42Z

src/components/chatroom/ChatItem.tsx

+
+const ChatItem = ({ chat, user, currentUser, prevChat }: ChatItemProps) => {
+    const isCurrentUser = chat.userId === currentUser.userId;
+    const isPrevSame = prevChat ? chat.userId === prevChat.userId : false;


prevChat을 props로 왜 넘겨주나 했는데 같은 사람이 여러번 채팅을 보냈을때를 위한거였군요....0o0....

9yujin added 24 commits May 2, 2022 22:34

feat : 기초 설정 & 데이터 설정

cc6896b

feat : 채팅기록 렌더링

2f4a9d8

feat : recoil setting

7eece65

feat : getuser api

0e06566

feat : api 디렉토리구조...

b5aee19

feat : sendMessage api

952997f

feat : 스타일링 & 스크롤 내리기

0fe9c05

feat : 스크롤 최하단으로 가기 버튼

ed4cb3c

feat : 채팅 말풍선 스타일

786ea32

feat : 사용자 전환 기능

d4d7379

rename : 깃에 파일 대소문자변경 반영되지 않던 오류

841006d

design : 매우자잘한.. 시간 띄어쓰기없애기

2adbab1

fix: 제출전.. 경고없애기

a8a0d70

refactor : react.memo 최적화

107b6c1

feat : 페이지 라우팅 설정, 전체 구조 디자인-설정

9a7bc20

feat : 친구목록, 채팅방 라우팅 구현

6ae7a9a

rename ChatDataType to RoomType

d258c45

feat : 채팅목록 스타일링, 구현

a6e2e82

feat : 카카오로그인 구현

c36c2c3

fix : 마지막 채팅이 긴 문자열일때 프로필사진 작아지는 오류 수정

16ad2e7

feat : 친구목록 검색기능 구현

30098a7

searchBox autoFocus

f2325b3

아맞다 border radius...

7e9aaf0

끝끝

f291fd5

sungwoo-shin reviewed May 14, 2022

View reviewed changes

corinthionia reviewed May 14, 2022

View reviewed changes

chaaerim reviewed May 15, 2022

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[5주차] 한규진 미션 제출합니다. #11

[5주차] 한규진 미션 제출합니다. #11

9yujin commented May 11, 2022

sungwoo-shin left a comment

sungwoo-shin May 14, 2022

sungwoo-shin May 14, 2022

sungwoo-shin May 14, 2022

sungwoo-shin May 14, 2022

sungwoo-shin May 14, 2022

sungwoo-shin May 14, 2022

sungwoo-shin May 14, 2022

sungwoo-shin May 14, 2022

corinthionia May 14, 2022

sungwoo-shin May 14, 2022

sungwoo-shin May 14, 2022

9yujin May 14, 2022

corinthionia May 14, 2022

chaaerim May 15, 2022

corinthionia left a comment

corinthionia May 14, 2022

chaaerim left a comment

chaaerim May 15, 2022

chaaerim May 15, 2022

chaaerim May 15, 2022

	@media screen and (min-width: 600px) {
	@media screen and (min-width: 768px) {

[5주차] 한규진 미션 제출합니다. #11

Are you sure you want to change the base?

[5주차] 한규진 미션 제출합니다. #11

Conversation

9yujin commented May 11, 2022

배포링크

Key Question

sungwoo-shin left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

corinthionia left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

chaaerim left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment