[5주차] 임시언 미션 제출합니다. #18

Sieonn · 2024-10-09T21:23:43Z

안녕하세요. LG U+ 유레카 프론트엔드 1기 임시언 입니다.
오랜만에 과제라 많은 어려움이 있었습니다.
저는 이번에 다시 구성해보려고 처음부터 다시 만들었는데요. 괜히 했다 싶긴합니다. 아예 프로젝트 생성부터 다시 했습니다. 실제 프로젝트하면서 그래도 익숙해진 것 같아 전보다는 깔끔해진 모습이 좋습니다.
좀 더 수정이 필요하겠지만 더 추가하고 더 공부하겠습니다.

미션

🎯 미션 목표

TypeScript를 이용한 개발 방식에 익숙해집니다. 🫤(미숙)
React에서 사용하는 상태 관리 방법에 익숙해집니다. 🫤(미숙)
코드를 확장/재사용/리팩토링하는 과정을 경험합니다. ✅

✅ 필수 요건

결과 화면의 기능을 구현합니다. ✅
채팅 목록 페이지를 추가하여 Routing을 구현합니다. ✅
각각의 채팅방에서 뒤로가기 버튼을 클릭하면 채팅 목록 페이지로 이동합니다. ✅
상태관리 라이브러리(Recoil, Zustand, Jotai 등)를 사용해 봅니다. 🫤(미숙)

🏷️ 선택 사항

채팅 목록 페이지에서 사용자의 이름을 검색할 수 있습니다. ✅
채팅 목록 페이지에서 각 채팅방의 마지막 채팅을 표시합니다. 🫤(미숙)

⏰ 제출 기한

미니 프로젝트 기간으로 인해 스터디 일정이 변경되었습니다
2024년 10월 8일 화요일 23시 59분

📖 생각해 볼 질문들

SPA / MPA / CSR / SSR 이란 무엇인가요?
React에서 상태는 어떻게 관리할 수 있나요?
어떤 상태관리 라이브러리를 사용했고, 그것의 특징은 무엇인가요?

구현

https://react-sns-six.vercel.app/

jissssu

시언님! 이번과제도 하느라 수고 많으셨어요! 시언님 코드 보면서 폴더구조라던지, 저도 적용해보고 싶은 메소드도 다시한번 공부할 수 있는 시간이였던 것 같아요🥹 다음 미션도 화이팅!

jissssu · 2024-10-10T05:36:12Z

public/data/chatData.json

+{
+  "me": {
+    "id": "eonny",
+    "name": "임시언",
+    "profileImage": "/images/Me.png"
+  },
+  "users": [
+    {


저도 me와 users를 나눠서 json 파일 정리해야할 것 같아요!
참고해서 정리해보겠습니다!

아무래도 채팅방을 보여줘야하는데 이거를 하나의 파일에서 관리할 수 없을까 고민하다가 채팅이 1:1대화니까 나와 다른 유저들이라고 분리해서 생각했습니다!

jissssu · 2024-10-10T05:39:53Z

src/components/form/ChatInput.tsx

+
+interface ChatInputProps {
+  onSendMessage: (message: string) => void;
+  isMuted: boolean; // 뮤트 상태를 나타내는 prop 추가


뮤트 상태라는게 정확히 무엇인가요?
저도 찾아보고 적용해보고싶어요!

지나가면서 얘기해보자면 방해금지모드를 이야기 하는 것 아닐까요 ?! 만일 방해금지모드라면 input이 비활성화 되어야 하기 떄문에,,

넵 맞습니다!. 이게 알람 아이콘이길래 뮤트가 음소거라는 뜻인디 그렇게 사용하게 되었네요! 다른 분들도 쉽게 알아볼 수 있도록 저만 아는 표현은 지양하겠습니다.

jissssu · 2024-10-10T05:42:17Z

src/components/form/ChatInput.tsx

+  }
+  &:disabled {
+    cursor: not-allowed;
+    background-color: transparent; /* 배경색을 투명하게 설정 */


배경 투명하게 설정하는 방법 덕분에 알아갑니다!

jissssu · 2024-10-10T05:45:45Z

src/components/form/ChatItem.tsx

+
+const ChatItem: React.FC<ChatItemProps> = ({ profileImage, name, status,onClick }) => {
+  return (
+    <ChatItemContainer className="chat-item" onClick={onClick}>


ChatItemContainer에 클래스 이름을 추가한 이유가 궁금합니다!

ClassName은 사실 이번에 기존 css처럼 ClassName으로 불러오는 형식으로 할까 고민을 하다가 결국엔 다시 편한 방식으로 돌아갔습니다. 리액트를 공부하면서 css를 적용하는 방법이 다양해서 하나씩 해보려고 하는 편입니다.

jissssu · 2024-10-10T05:46:43Z

src/components/form/ChatItem.tsx

+      <img
+        src={profileImage}
+        alt={`${name} profile`}
+        style={{ width: '50px', height: '50px', borderRadius: '50%', marginRight: '10px' }}
+      />


인라인 스타일을 사용하신 이유가 있는지 궁금합니다!

이번에 빨리 빨리 쳐내려고 하다 보니까 우선 구조를 만들고 정리하고 이런 식으로 진행했습니다.

jissssu · 2024-10-10T06:09:58Z

src/components/form/Header.tsx

+  const handleBackClick = () => {
+    navigate(-1);
+  };


이렇게 하면 이전 페이지로 이동이 가능하군요!

넵! 미니 프로젝트 하면서도 이 방식을 적용 했습니다. 브라우저의 히스토리 스택에 의존해서 사용자가 웹 사이트를 탐색할 때 각 페이지 이동이 히스토리 스택에 저장이 되어서 한 단계 전으로 이동할 수 있다고 합니다. 이 방법을 권장하는지는 더 공부해봐야 할 것 같습니다!

jissssu · 2024-10-10T06:14:18Z

src/components/pages/ChatLists.tsx

+  useEffect(() => {
+    fetch('/data/chatData.json')
+      .then((response) => response.json())
+      .then((data) => setChatData(data))
+      .catch((error) => console.error('Error fetching chat data:', error));
+  }, []);


URL(/data/chatData.json) 부분도 상수 분리가 가능할 것 같아요!
[예시]
// constants.ts
export const API_URL = '/data/chatData.json';
export const DEFAULT_HEADER_TITLE = '채팅 목록';

바로 리팩토링 해보겠습니다.

jissssu · 2024-10-10T06:20:04Z

src/components/pages/ChatScreen.tsx

+  const handleBellClick = () => {
+    setIsMuted((prev) => !prev);
+  };


뮤트 상태를 이런식으로 활용할 수 있군요!

jissssu · 2024-10-10T06:22:29Z

src/components/pages/ChatScreen.tsx

+  }, [userId]);
+
+  useEffect(() => {
+    messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' });


scrollIntoView 저도 스터디하면서 알게된 메소드인데! 다른분들도 다 이거 사용하시는군요!

넵 처음에 적용할 때 아마 제가 마지막 메시지의 좌표를 찾아 가는 메소드를 사용했었는데 스크롤을 사용하는법을 보고 적용했습니다.

jissssu · 2024-10-10T06:28:57Z

src/components/pages/ChatScreen.tsx

+          <ChatMessage
+            key={`chat-${index}`}


각 채팅 메시지 항목을 구분하기 위해 간단한 인덱스를 이용하셨군요! 저도 이렇게 바꿔야겠어열!

JSON 파일을 구성하는게 좀 머리 아팠습니다. 유저마다 하나의 json 파일을 만들어주는 것이 너무 비효율 적인 것 같아가지고..

hyorish03

역시 성실하신 시언님 !! 이번주차도 고생 많으셨습니다 !!

hyorish03 · 2024-10-10T07:22:58Z

src/components/pages/ChatLists.tsx

+
+  // 특정 아이템을 클릭했을 때 호출되는 함수
+  const handleChatItemClick = (userId: string) => {
+    navigate(`/chat/${userId}`); // 해당 사용자의 chat screen으로 이동


라우팅 path도 상수로 분리하면 좋을 것 같습니다.

path를 상수로 분리! 적용하겠습니다.

hyorish03 · 2024-10-10T07:25:55Z

public/data/chatData.json

+      "chats": [
+        {
+          "index": 1,
+          "id": "dlwlrma",


users와 chats이 분리되어 있으면 chats안에있는 users 정보도 분리해도 될 것 같습니다 ~
index는 무슨 용도인걸까요 ? 단순히 렌더링시 나와 상대를 분리하기 위함이라면 index가 아닌 userId를 넣어 구분해도 좋을 것 같습니다.

맞습니다. 제일 초반 미션 때 1과 2로 분리를 했었는데 아예 User랑 Me로 구분을 해서 그렇게 구분하는 것이 좋을 것 같네요!

hyorish03 · 2024-10-10T07:26:03Z

public/data/chatData.json

+          "time": "오후 08:48"
+        },
+        {
+          "indexex": 2,


오타발견 ! ㅋㅋㅋㅋ

바로 수정했슴다!

hyorish03 · 2024-10-10T07:28:36Z

src/components/pages/ChatScreen.tsx

+        setNewChats(savedChats);
+      })
+      .catch((error) => console.error('Error fetching chat data:', error));
+  }, [userId]);


여기 useEffect 부분은 커스텀훅으로 분리하셔도 좋을 것 같습니다 !

corinthionia and others added 12 commits October 7, 2024 09:43

docs: update README.md

6d89463

feat: update README.md

944dfab

feat: Create ChatList Components

3f486ad

feat: retry

86e7f34

feat: retry

0475cca

Merge branch 'main' of https://github.com/Sieonn/react-sns

c303c60

feat: retry

7f8c803

fix: ChatList

a05375f

feat: 채팅방 구현 및 유저 프로필 연동

765394b

feat: InputStyle 정의

927b5c9

feat: input 기능 추가

52c564a

feat: 검색기능 추가

8fbfa8a

Sieonn changed the title ~~feat: 검색기능 추가~~ [5주차] 임시언 과제 제출합니다. Oct 9, 2024

Sieonn changed the title ~~[5주차] 임시언 과제 제출합니다.~~ [5주차] 임시언 미션 제출합니다. Oct 9, 2024

feat: mute 기능 추가

d18136e

jissssu reviewed Oct 10, 2024

View reviewed changes

hyorish03 reviewed Oct 10, 2024

View reviewed changes

[5주차] 임시언 미션 제출합니다. #18

Are you sure you want to change the base?

[5주차] 임시언 미션 제출합니다. #18

Uh oh!

Conversation

Sieonn commented Oct 9, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

미션

🎯 미션 목표

✅ 필수 요건

🏷️ 선택 사항

⏰ 제출 기한

📖 생각해 볼 질문들

구현

Uh oh!

jissssu left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

hyorish03 left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Sieonn commented Oct 9, 2024 •

edited

Loading