[5주차] 고주희 미션 제출합니다. by ZUITOPIA · Pull Request #15 · URECA-ReCoder/react-sns

ZUITOPIA · 2024-10-09T07:13:34Z

안녕하세요, LG U+ URECA 프론트엔드 대면반 1기 고주희입니다.

이번 주차에서는 지난 번 과제 진행에 이어 react-router-dom 을 사용하여 페이지 이동이 가능하도록 만들고 Recoil을 사용하여 Prop drilling을 피하는 것에 집중하였습니다.

전역 상태관리 필요할 것으로 예상되는 message와 user 데이터를 atoms.ts 파일에 세팅해 둔 이후 추가 기능을 구현했으면 좋았을텐데, 기존 방식(props drilling)대로 모든 기능을 구현해 두고서야 상태관리 라이브러리를 사용하는 것이 필수 과제라는 문장을 뒤늦게 보았습니다. 그리하여 다시 recoil을 사용하는 것으로 변경하려니 시간도 더 걸리고 한참 돌아온 것 같아 아쉬웠습니다. 하지만, 이 과정을 통해 오히려 더 상태 관리 라이브러리의 필요성을 극적으로 느낄 수 있었기에 의미있는 시간이었다고 생각됩니다. 🤩

또한, 지난 과제에서는 코드 확장, 재사용을 고려하여 구현하는 것이 목표였는데 그때 고려했던 흐름 그대로 확장이 진행할 수 있어서 매우 흥미로웠습니다. 매번 큰 틀에서 작게 좁혀나가는 방식으로만 개발했었는데 작은 것에서 큰 것으로 확장하는 경험을 얻을 수 있었을 뿐더러, 추후 기능 추가가 될 것을 고려하여 더 명확한 파일 이름과 구조를 잡는 것이 왜 중요한 지 몸소 느껴볼 수 있었습니다.

구현 상황

화면 UI 구현 ✅
채팅 목록 페이지를 추가하여 Routing 구현 ✅
각각의 채팅방에서 뒤로가기 버튼을 클릭하면 채팅 목록 페이지로 이동 ✅
상태관리 라이브러리(Recoil, Zustand, Jotai 등)를 사용 ✅
(선택 사항) 채팅 목록 페이지에서 사용자의 이름 검색 ❌
(선택 사항) 채팅 목록 페이지에서 각 채팅방의 마지막 채팅을 표시 ✅
배포 ✅

📖 생각해 볼 질문들

(1) SPA / MPA / CSR / SSR 이란 무엇인가요?

SPA : 단일 페이지로 구성된 웹 애플리케이션. 페이지가 로드될 때 전체 애플리케이션이 로드됨. 페이지를 전체 새로고침하지 않고 사용자와의 상호작용이 있는 부분 콘텐츠만 동적으로 변경하여 UX 측면에서 장점이 있음. => CSR
MPA : 여러 페이지로 구성된 웹 애플리케이션. 사용자가 링크를 클릭할 때 마다 매번 전체 페이지가 새로 로드됨. 검색 엔진 최적화(SEO)에 유리함. => SSR
CSR : Client Side Rendering, 클라이언트 측에서 웹 페이지를 렌더링 함. 처음 로딩 시 기존 HTML 틀만 로드한 후 Javascript를 통해 동적으로 콘텐츠가 생성됨.
SSR : Server Side Rendering, 서버 측에서 미리 웹 페이지를 렌더링 함. 그렇기 때문에 초기 페이지 로딩 시간이 짧음.

(2) React에서 상태는 어떻게 관리할 수 있나요?

방법 1 ) 기본적으로는 useState 훅을 이용하여 지역적인 상태를 생성하고 사용함, 필요 시 자식컴포넌트에 props로 전달함.
방법 2 ) React 내장 API인 useContext API를 사용하여 전역으로 상태 관리를 할 수 있게 함.
방법 3 ) Redux나 Recoil 같은 상태관리 라이브러리를 사용.

(3) 어떤 상태관리 라이브러리를 사용했고, 그것의 특징은 무엇인가요?

Recoil : React에서 만들어졌으며 코드가 복잡한 Redux를 보완하고자 나온 라이브러리로 알고있음.

결과 화면

배포 링크

https://zuitopia-sns.vercel.app/chats

JavaScript를 TypeScript로 변경

ongheong

안녕하세요! 주희님의 5주차 미션 코드 리뷰를 맡게 된 심여은입니다!
우선 다소 늦게 리뷰해드려 죄송합니다😭 한번에 이해하지 못한 코드들이 있어 꼼꼼하게 살펴보았는데요, js의 다양한 메서드들을 잘 사용하셔서 리뷰를 하며 오히려 제가 많이 얻어갈 수 있었습니다. 또한 복잡한 json 객체에 대해서도 recoil의 useRecoilState를 잘 사용하셨어요!
이번 프로젝트 하느라 정말 고생하셨고 다음 프로젝트도 많이 기대하고 있겠습니다!

ongheong · 2024-10-10T07:30:16Z

src/Router.tsx

+export const router = createBrowserRouter([
+  {
+    path: '/',
+    element: <App />,
+    children: [
+      {
+        path: 'chats',
+        element: <Chats />,
+      },
+      {
+        path: 'chat/:roomId',
+        element: <Chat />,
+      },
+    ],
+  },
+]);


오 이런 식으로 라우터를 작성할 수 있는지 몰랐어요! 찾아보니 React Router v6에서 새롭게 도입된 API네요. 각 route에 대해 상세한 정의를 작성할 수 있어 좋은 코드인 것 같아요!

ongheong · 2024-10-10T07:36:58Z

src/components/ChatRoom/ChatHeader.tsx

+          <Img.RoundIcon
+            width="36px"
+            height="36px"
+            src={receiver?.profilePicture}
+            alt="profile"
+          />


이런 식으로 Img, Text 등 자주 사용되는 공통 style들을 따로 정리해서 놓은 점 매우 좋아요! 저도 img 컴포넌트에서 공통되는 css 코드들이 많았는데, 이렇게 정리해보도록 하겠습니다!

ongheong · 2024-10-10T07:42:09Z

src/components/Message/Message.tsx

+import { UserState } from '../../atoms';
+
+export default function Message({ message, isOwner }) {
+  const [users, setUser] = useRecoilState(UserState);


저도 고민했던 부분인데, 현재 기능 중에는 user가 새롭게 추가되거나 삭제되는 기능이 없어서, user를 상태로 관리해야 할 필요성을 잘 모르겠습니다.
users를 useRecoilValue가 아닌 useRecoilState로 초기화한 이유가 있을까요?

저도 궁금했습니다 !

ongheong · 2024-10-11T05:51:24Z

src/components/Message/MessageList.tsx

+      room.messages.some(
+        (message) =>
+          message.userId === participant.userId &&
+          message.userId !== OWNER_USER_ID
+      )


오 some() 함수를 사용하면 주어진 조건을 만족하는 user를 쉽게 구할 수 있군요! some()과 every() 함수에 대해 잘 몰랐는데 새롭게 알아갑니다!

ongheong · 2024-10-11T05:59:03Z

src/components/hooks/useInput.ts

+export default function useInput<T>(
+  initialValue: T
+): [
+  T,
+  (
+    event: React.ChangeEvent<
+      HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement
+    >
+  ) => void,
+  Dispatch<SetStateAction<T>>
+] {


react hook의 dispatch를 사용했는데, 이걸 recoil로 바꿔 적용할 수 있나요?

ongheong · 2024-10-11T06:00:18Z

src/data/messages.json

+        "isOwner": true,
+        "userId": "hijh_0522",
+        "content": "그러게",
+        "timestamp": "2024-10-03 18:09:00"


userId를 실제 아이디처럼 작성한 부분이 좋아요🥰

ongheong · 2024-10-11T06:26:39Z

src/pages/Chat.tsx

+    const participantIds = new Set(
+      filteredMessages.flatMap((msg) => msg.messages.map((m) => m.userId))
+    );


이렇게 작성하면 messages의 중첩 배열을 펼치고, userId만 추출한 후, set으로 중복 요소를 제거할 수 있네요!
이 방법도 좋고, 아니면 채팅에 참여한 userId만 정의한 배열을 Message 객체의 속성으로 추가하는 방법도 있습니다😃

Yunil-dev

안녕하세요. 주희 님 ~! 이번 주차 리뷰어 김윤일입니다 😊 이번주차 과제 빨리해 주셨는데 늦게 리뷰해 드려서 죄송합니다 ! 한창 바쁠 시기에 열심히 하시는 모습 정말 보기 좋아요 👍🏻
주희 님의 재사용성을 고려한 코드 잘 봤습니다. 개발하다 보면 시야가 좁아질 수도 있는데 항상 숲을 보면서 코딩하시는 거 같아요. 배울 점이 많습니다! 홧팅홧팅 👍🏻

Yunil-dev · 2024-10-12T17:17:55Z

src/components/Message/Message.tsx

+import { UserState } from '../../atoms';
+
+export default function Message({ message, isOwner }) {
+  const [users, setUser] = useRecoilState(UserState);


저도 궁금했습니다 !

Yunil-dev · 2024-10-12T17:21:38Z

src/main.tsx

+createRoot(document.getElementById('root') as HTMLElement).render(
+  <StrictMode>
+    <RecoilRoot>
+      <ThemeProvider theme={theme}>


테마를 전역관리로 해서 유지보수가 쉽게 해주셨군요 !
저도 활용해봐야겠어요 ~👍🏻

Yunil-dev · 2024-10-12T17:25:07Z

vite.config.js

+  build: {
+    rollupOptions: {
+      external: ['/@emotion/react/jsx-runtime'],
+    },


이 옵션은 주로 번들 크기 최적화나 특정 라이브러리를 애플리케이션 외부에서 따로 로딩하려는 상황에서 사용할 때 사용한다고 알고 있는데 주희님은 어떤 목적으로 사용하신 건가요 ?

Yunil-dev · 2024-10-12T17:29:19Z

src/components/hooks/useInput.ts

+      HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement
+    >
+  ) => void,
+  Dispatch<SetStateAction<T>>


직접 변경 하기 위해 dispatch를 사용하신 건가요 ?

Yunil-dev · 2024-10-12T17:32:35Z

src/components/styles/UI.ts

+  pointer?: boolean;
+};
+
+export const Text = {


프로젝트 규모가 크면 클수록 재사용성이 높은 게 중요하다고 생각합니다. 주희 님은 항상 재사용을 고려하면서 개발하시는 거 같아 멋있습니다!!!

Yunil-dev · 2024-10-12T17:34:57Z

src/data/messages.json

+    "roomId": 1,
+    "messages": [
+      {
+        "isOwner": false,


isOwner로 어떤 메세지가 본인인지 구분할 수 있게 해두셨군요 !
가독성 굿굿 !

corinthionia · 2024-10-14T14:07:08Z

src/atoms.ts

@@ -0,0 +1,168 @@
+import { atom } from 'recoil';
+
+interface IUser {


이렇게 인터페이스 이름 앞에 I를 붙이는 형식을 헝가리안 기법이라고 하는데, 최근에는 조금 지양하는 방법이라고 해요!
참고자료 - TypeScript의 interface와 type에 대한 컨벤션

corinthionia · 2024-10-14T14:09:22Z

src/components/ChatRoom/ChatBody.tsx

+import React, { useEffect, useRef } from 'react';
+import Message from '../Message/Message';
+
+export default function ChatBody({ filteredMessages }) {


props에 대한 type도 명시하면 좋을 것 같아요!

corinthionia · 2024-10-14T14:17:05Z

src/components/ChatRoom/ChatBody.tsx

+      {filteredMessages[0].messages.map((message, index) => {
+        return (
+          <div
+            key={index}


key 값으로는 index 말고 각 데이터의 고유한 값을 넣어 주세요!
일반적으로 데이터의 id 값을 넣어 주는데, 여기에서는 id 값이 없으니 timestamp 값을 대신 사용해도 될 것 같아요 👀

corinthionia · 2024-10-14T14:24:52Z

src/components/ChatRoom/ChatHeader.tsx

+export default function ChatHeader({ receiver }) {
+  const navigate = useNavigate();
+  const handleBackButtonClick = () => {
+    navigate('/chats');


보통 '뒤로가기'를 구현하는 경우에는 navigate(-1) 과 같은 형태로 구현합니다! 이렇게 서비스 내에 뒤로가기 버튼 외에도 브라우저의 뒤로가기 버튼이 존재하기 때문에, 브라우저 뒤로가기 버튼과 동일하게 동작하도록 하려면 navigate(-1)를 사용해야 하기 때문입니다!

corinthionia · 2024-10-14T14:33:01Z

src/components/ChatRoom/ChatInput.tsx

+      <form onSubmit={handleFormSubmit}>
+        <Style.TextAreaWrapper
+          type="text"
+          value={inputValue}
+          onChange={handleChange}
+          placeholder="메세지 보내기"
+          autoFocus
+        />
+      </form>
+      <Style.SendMessageLogoWrapper onClick={handleClick}>
+        <Img.RoundIcon
+          width="22px"
+          pointer
+          src="/images/plane.svg"
+          alt="send"
+        />
+      </Style.SendMessageLogoWrapper>


SendMessageLogoWrapper를 div가 아닌 button으로 구현하고 type="submit" 속성을 부여하면 handleClick을 별도로 구현하지 않아도 될 것 같아요!

Suggested change

<form onSubmit={handleFormSubmit}>

<Style.TextAreaWrapper

type="text"

value={inputValue}

onChange={handleChange}

placeholder="메세지 보내기"

autoFocus

/>

</form>

<Style.SendMessageLogoWrapper onClick={handleClick}>

<Img.RoundIcon

width="22px"

pointer

src="/images/plane.svg"

alt="send"

/>

</Style.SendMessageLogoWrapper>

<form onSubmit={handleFormSubmit}>

<Style.TextAreaWrapper

type="text"

value={inputValue}

onChange={handleChange}

placeholder="메세지 보내기"

autoFocus

/>

<Style.SendMessageLogoWrapper type="submit">

<Img.RoundIcon width="22px" pointer src="/images/plane.svg" alt="send" />

</Style.SendMessageLogoWrapper>

</form>

SendMessageLogoWrapper: styled.button` width: 80px; height: 36px; background-color: #445ffe; border-radius: 24px; display: flex; justify-content: center; align-items: center; `,

corinthionia · 2024-10-14T14:34:30Z

src/components/Message/Message.tsx

+export default function Message({ message, isOwner }) {
+  const [users, setUser] = useRecoilState(UserState);
+
+  const user = users.find((u) => u.userId === message.userId);


user와 같은 명시적인 이름을 써주면 좋을 것 같아요!

Suggested change

const user = users.find((u) => u.userId === message.userId);

const user = users.find((user) => user.userId === message.userId);

corinthionia · 2024-10-14T14:35:19Z

src/components/Message/Message.tsx

+
+  const user = users.find((u) => u.userId === message.userId);
+
+  const formatTimestamp = (timestamp) => {


컴포넌트의 props나 함수의 인자값은 꼭 타입을 지정해 주는 게 좋습니다!
그리고 timestamp라는 이름은 보통 1728916619 이런 형식의 Unix timestamp를 사용할 때에만 쓰는 것 같아요 😶

Suggested change

const formatTimestamp = (timestamp) => {

const formatTimestamp = (time: string) => {

corinthionia · 2024-10-14T14:39:04Z

src/components/Message/MessageList.tsx

+  const [messages, setMessage] = useRecoilState(MessageState);
+  const [users, setUser] = useRecoilState(UserState);


컴포넌트 내에서 setMessage와 setUser는 사용되지 않고 있어서 useRecoilValue를 사용해도 될 것 같아요!

corinthionia · 2024-10-14T14:42:36Z

src/pages/Chat.tsx

+  const filteredMessages = messages.filter(
+    (msg) => msg.roomId === Number(roomId)
+  );


특정 roomId를 가진 메시지 목록 하나만 찾는 것이기 때문에 find 메서드를 사용해도 좋을 것 같아요!

ZUITOPIA added 30 commits September 8, 2024 21:09

style: title 변경 및 icon 설정

c586fd8

feat: 필요한 이미지 및 데이터 json 파일 세팅

876be0b

feat: 컴포넌트 나누고 폴더에 위치

9ddbb9f

feat: 기본 기능 구현

301d127

style: 기본 스타일 구현중

298c24e

style: 채팅 디자인 진행중

c4f33c1

style: 채팅방 css -> emotion 적용

a16e310

style: Header 스타일 적용

9183d00

style: 프로필 위치 변경

d3fe3a9

feat: 헤더와 바디 다른 것처럼 분리

b655227

style: 채팅창 너비 수정

ac7e32d

style: 스크롤 관련 스타일 적용

4f60550

style: 기본 디자인 구현 완료

3b280ab

feat: isSender 값 boolean으로 변경, 디자인 추가 수정

4dad821

style: 자잘한 스타일 수정

93800c6

feat: 채팅의 가장 최신 내용부터 보여주기

094c39f

feat: 기능 구현 완료, 추후 코드 리팩토링 예정

b76abbf

feat: main 브랜치에도 기능 추가

c7c2139

fix: 빌드 에러 해결중

4ff6679

fix: 빌드에러 수정중

6b81582

style: 버튼 스타일 미세 수정

76186a7

fix: 빌드 에러 수정중

d1d1a80

fix: 빌드에러 수정중

9a32096

fix: 빌드에러 수정중

cc8d489

fix: 빌드에러 수정중

e4b8822

fix: 빌드에러 수정중

24fe063

fix: 빌드에러 수정중

b3ecef0

fix: 빌드에러 해결 시도

c6a81c7

fix: 빌드에러 수정중

97f37a0

fix: 빌드에러 해결중

69aa55f

ZUITOPIA and others added 25 commits September 18, 2024 13:17

feat: global style ts로 변경 및 글꼴 변경

7c58a3a

feat: main, App jsx에서 tsx로 변경

0c9a948

feat: ChatBody jsx에서 tsx로 변경

c79d346

feat: ChatHeader jsx에서 tsx로 변경

00a9798

feat: Message jsx에서 tsx로 변경

b025b43

feat: jsx에서 tsx로 모두 변경 완료

5d5dee9

Merge pull request #1 from ZUITOPIA/typescript-sns

d83666f

JavaScript를 TypeScript로 변경

fix: 배포 시 화면 안 나오는 현상 수정중

f48d10a

fix: 배포 안 되는 현상 해결 진행중

3c9bc2f

fix: 배포 안 되는 현상 해결중

6e69fbc

fix: 배포 안 되는 현상 해결중

7f371d1

fix: 배포 안 되는 현상 해결중

fd45857

feat: import 시 파일 형식은 빼기

cc4ad67

feat: 기능 구현 전 router 설정

0958fa3

feat: 푸터 컴포넌트 생성

7337fef

feat: 메세지 데이터 파일 수정, 대화창 리팩토링

aa7c446

feat: 이미지 경로 수정하여 프로필 뜨도록

c550b53

docs: 불필요한 import 삭제

18b7ce0

feat: 데이터 가져와서 목록으로 보이도록 구현

369c830

feat: DM 목록에서 클릭 시 해당 user와의 대화창으로 넘어가도록

8b14e05

feat: 파일 구조 재조정

4207168

feat: recoil 세팅

b0fd928

feat: 상태관리 라이브러리 도입하여 재구현

f6b50ce

feat: 새로운 메세지 입력 시 전역 데이터에 추가하는 기능 구현

20d078d

fix: vercel 배포 url 페이지 이동 시 404 뜨는 에러 해결하기 위해 json 파일 추가

dcf8579

ongheong reviewed Oct 11, 2024

View reviewed changes

Yunil-dev reviewed Oct 12, 2024

View reviewed changes

corinthionia reviewed Oct 14, 2024

View reviewed changes

고주희 and others added 2 commits March 26, 2025 18:52

update

2794f92

update

0b26e2b

		@@ -0,0 +1,168 @@
		import { atom } from 'recoil';

		interface IUser {

	const user = users.find((u) => u.userId === message.userId);
	const user = users.find((user) => user.userId === message.userId);


		const user = users.find((u) => u.userId === message.userId);

		const formatTimestamp = (timestamp) => {

	const formatTimestamp = (timestamp) => {
	const formatTimestamp = (time: string) => {

		const [messages, setMessage] = useRecoilState(MessageState);
		const [users, setUser] = useRecoilState(UserState);

Conversation

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

Uh oh!

구현 상황

📖 생각해 볼 질문들

결과 화면

배포 링크

Uh oh!

ongheong 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!

Yunil-dev 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!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

ZUITOPIA commented Oct 9, 2024 •

edited

Loading