[4주차] 권동욱 미션 제출합니다. #11

2025314242 · 2025-04-16T07:06:09Z

마치며...

Todo list

전역 상태 관리를 위해 react의 createContext, ContextProvider를 사용하였다. 추후 진행될 과제/프로젝트 등에서는 redux 라이브러리 공부를 해서 사용해보고자 한다.
해당 과제에서 라이브러리는 가능한 적게 사용하려고 하였는데, 한글 검색 (초성, 중성, 종성 포함) 의 경우 로직이 너무 복잡하다고 생각되어 부득이하게 hangul-js 라이브러리를 사용하였다.
안 읽은 메시지의 경우 로그인/회원가입 기능이 따로 구현되어 있지 않아 데이터 (local storage) 내에는 속성/값이 존재하지만 실제로 표시하지는 않았다. 추후 백엔드 파트와 협업 혹은 프로젝트를 진행하게 되는 경우 추가하고자 한다.

Error handling

모바일 상에서 웹 브라우저를 통해 접속하는 경우 컴퓨터 상에서 표시되는 것과 차이가 있어 수정하는 과정에서 애를 먹었다. 구체적으로

Case 1
❌ textarea 태그가 화면 밖으로 삐져 나왔다.
✅ width: 100%;

Case 2
❌ 모바일 화면이 작은 경우 레이아웃이 붕괴되었다.
✅ width: 100%; height: 100vh; max-width: 375px; max-height: 812px;

Case 3
❌ 디자인 상 input 태그에 입력되는 텍스트 크기가 14px인 경우 (< 16px) 자동 줌인이 발생하였다.
✅ font-size: 16px; transform: scale(0.875); transform-origin: left center;

등이 있다.

배포 링크

https://react-messenger-21th-kwondu.vercel.app/

Key Questions

React Router의 동적 라우팅(Dynamic Routing)이란 무엇이며, 언제 사용하나요?

동적 라우팅은 URL 경로의 일부를 변수처럼 다루어, 라우트 정의 시점에 정해지지 않은 여러 경로에 대응할 수 있도록 하는 방식이다.

...
<Routes>
  <Route path="/users/:userId" element={<UserDetail />} />
</Routes>
...

상단 코드와 같이 설정한 경우 /users/123로 접근했을 때 UserDetail 컴포넌트가 렌더링되며, useParams() 훅으로 userId 값을 가져올 수 있다.

import { useParams } from 'react-router-dom';
...
function UserDetail() {
  const { userId } = useParams(); 
  console.log(userId); // 123
}
...

네트워크 속도가 느린 환경에서 사용자 경험을 개선하기 위해 사용할 수 있는 UI/UX 디자인 전략과 기술적 최적화 방법은 무엇인가요?

UI/UX 디자인 전략

Skeleton UI나 로딩 바, lazy loading(사용자가 필요한 시점에만 특정 리소스 로드) 등을 통해 개선할 수 있다.

기술적 최적화 방법

데이터 압축, 브라우저 caching, lazy loading 등을 통해 개선할 수 있다.

React에서 useState와 useReducer를 활용한 지역 상태 관리와 Context API 및 전역 상태 관리 라이브러리의 차이점을 설명하세요.

지역 상태는 단일 컴포넌트 혹은 컴포넌트 트리의 일부에서 주로 사용된다.

장점: 구현이 쉽고, 불필요한 리렌더링을 피할 수 있다.
단점: 여러 컴포넌트에서 동일한 상태를 사용해야 하는 경우 props drilling (특정 상태를 하위 컴포넌트로 전달하기 위해 중간 컴포넌트를 통해 property를 내려주는 것) 이 발생할 수 있다.

전역 상태는 어플리케이션 전반에 공유해야 하는 데이터에 주로 사용된다.

장점: 여러 컴포넌트 간 상태 공유가 용이하며, 로직 모듈화에 유리하다.
단점: 러닝 커브와 Boiler Plate 코드 (별 수정 없이 반복적으로 사용되는 코드) 가 존재한다.

initialize setting, file structure, and css reset (mayer's reset)

Pretendard

Pretendard, using styled-components

icons for navigation bar (home, chat, call, plus)

tailwind css typography, color, phone grid

home, chat(list, room), home, plus

use Outlet (react router)

add indicator (black/white) to navigation bar

modify folder structrue of view components

set background color to black

display phone grid at center

add indicator, seperate with navigation bar

add status bar (with celluar, wifi, battery icons)

modify letter spacing + -> - add new font status bar

add custom hook colok (HH:MM)

grayscale-00-black

load/save data

url: /chat

using crypto

save initial chat data to local storage if and only if there are no local storage data

only1Ksy

4주차 과제 하시느라 고생 많으셨습니다!!

only1Ksy · 2025-04-28T04:14:42Z

src/assets/data/myId.json

@@ -0,0 +1 @@
+"user-me"


이렇게 하면 따로 꺼내쓸 때 편리하겠네요!! 저는 한 파일에 저장해 놓았어서 나중에 꺼내 쓰기가 번거로웠는데 배워갑니다!

only1Ksy · 2025-04-28T04:15:18Z

src/components/chat/ChatRoom/ChatRoom.utils.ts

지워도 되는 파일 같습니다!

only1Ksy · 2025-04-28T04:30:36Z

src/components/home/HomeHeader/HomeHeader.Styled.ts

+  position: absolute;
+  top: var(--statusbar-height);
+  width: 100%;
+  heigth: 46px;


Suggested change

heigth: 46px;

height: 46px;

only1Ksy · 2025-04-28T05:11:32Z

src/components/chat/ChatList/ChatList.tsx

+        {filteredNormalChats.length > 0 && (
+          <S.ChatGroup className={`${isNormalGroupTop ? 'top-group' : ''}`}>
+            {sortChatsByLastMessage(filteredNormalChats).map(([chatId, room]) => (
+              <ChatItem key={chatId} chatId={chatId} userList={userList} myId={myId} room={room} isPinned={false} />


핀 설정은 채팅창 내부에서만 할 수 있는 게 맞을까요?? 채팅 리스트 창에서는 해제만 가능한 것으로 보여서요!

넹 디자인 상에서는 해당 플로우만 짜여져 있어서 이렇게 설정했습니다!

only1Ksy · 2025-04-28T05:19:15Z

src/components/chat/ChatList/ChatItem/ChatItem.tsx

+import * as S from './ChatItem.Styled';
+import * as Types from '@/types';
+import * as Icons from '@/assets/icons/chatlist';
+import { CHATCOLOR_ITEMS } from '@/constants/chatcolor';


상수로 관리하니까 확실히 코드가 깔끔해지고 좋은 것 같아요!

only1Ksy · 2025-04-28T05:20:11Z

src/components/chat/ChatList/ChatItem/ChatItem.tsx

+        />
+      );
+    } else {
+      const colorItems = CHATCOLOR_ITEMS[memberIds.length] || CHATCOLOR_ITEMS[4];


보면 유저 원래 프로필과는 상관없이 인원수에 맞게 색만 다르게 해서 보여주는 방식인 것 같은데 맞을까요?? 그렇게 설정하신 이유가 따로 있는지도 궁금합니다!

유저 프로필 별로 적용해서 하는 게 당연히 제일 좋은데, 제가 귀찮아서 커스텀 프로필 이미지 설정을 안 했다보니 그냥 이렇게 했습니다.. 추후 개발 과정에서 적용하는 게 더 좋을 거 같네요 !

only1Ksy · 2025-04-28T06:47:30Z

src/components/chat/ChatRoom/MessageList/MessageList.utils.ts

저는 아직 어떤 함수를 util로 뺴야 할지에 대한 기준이 모호해서 혹시 어떤 기준으로 관리하시는지 궁금합니다!

저는 기본적으로
여러 컴포넌트에서 사용된다 -> utils 폴더로 분리
특정 컴포넌트에서 사용되고, state 변경이 직접적으로 일어나지 않는 선까지 -> utils.ts 파일로 분리
이렇게 사용하는 거 같습니다

only1Ksy · 2025-04-28T06:57:04Z

src/index.css

@@ -0,0 +1,129 @@
+/* http://meyerweb.com/eric/tools/css/reset/ 


코드리뷰 남겨주신 거 확인했는데 저도 다음에 적용해봐야겠네요!!

only1Ksy · 2025-04-28T07:03:22Z

src/components/chat/ChatList/ChatItem/ChatItem.tsx

+  return (
+    <S.ChatItemWrapper key={chatId}>
+      {ChatPreviewImage(chatId, memberIds, userList)}
+      <Link to={`/chat/${chatId}`} className={`chat-link`}>


이런 식으로 활용할 수 있군용 이것도 코드리뷰에 남겨주신 것 확인했는데 참고하겠습니다!!

- typing error - empty file

2025314242 added 30 commits March 26, 2025 04:10

docs: initialize readme

f34086b

feat: initialize

74dd5ba

initialize setting, file structure, and css reset (mayer's reset)

design: add local font

ce10c54

Pretendard

feat: apply font

a050f07

Pretendard, using styled-components

design: add navbar icons

2149600

icons for navigation bar (home, chat, call, plus)

design: add/apply design system

eca482a

tailwind css typography, color, phone grid

feat: add default view components

1f58923

home, chat(list, room), home, plus

feat: add default layout components

abcdd35

use Outlet (react router)

feat: route setting

cce0131

feat: apply route setting

8155b55

feat: add nav bar

bf47385

feat: add indicator

9320028

add indicator (black/white) to navigation bar

docs: add vercel url

52036b3

style: modify views structure

876788c

modify folder structrue of view components

design: set background color

b0d4aae

set background color to black

design: display phone grid

6968124

display phone grid at center

feat: add indicator

426b359

add indicator, seperate with navigation bar

design: fix home line svg

7e623c5

feat: add status bar

a2dd79a

add status bar (with celluar, wifi, battery icons)

fix: remove unreaded values

e5258dc

design: modify letter spacing and add new font

df9f255

modify letter spacing + -> - add new font status bar

feat: add clock hook

6a6b679

add custom hook colok (HH:MM)

design: clarify text color

2cfae2a

grayscale-00-black

feat: handle local storage

f33efa8

load/save data

fix: html tag #root

406aca3

feat: add chatlist component

c0d206f

url: /chat

feat: generate uuid

9d623bf

using crypto

style: add else condition

5df4642

feat: add initial chat data

03d22ec

save initial chat data to local storage if and only if there are no local storage data

fix: new JSX converting format

7ed05b0

2025314242 added 28 commits April 15, 2025 21:20

fix: add unique key

13db80e

fix: error

ec0f362

fix: no input -> return all corpus

e243fc9

feat: add create chat utility

e390d5c

fix: set userIds in alphabetical order

bdbaa4c

feat: add create chat hook to context

46e2693

feat: add new event handling

7d192de

fix: only display rooms that have messages

0706d0c

fix: remove unused property

63229ec

test: add new chat room data

1301399

fix: chat list scroll problem

fa6c53a

test: testing...

5a48954

test: testing...

ba6f22e

comment: add comment

afd69c6

fix: input width error

fef4e09

fix: input error

776325a

fix: profile height problem

9f8786e

fix: input width problem:

23bdd52

fix: css style optimization

4bc2144

test: add chat data

dc8d98e

fix: mobile zoom in problem

3e963d6

fix: mobile zoom in problem

bfdf4b4

Merge remote-tracking branch 'upstream/master' into donguk.kwon

17fb12f

docs: delete merge indicator

2db7945

fix: more strict error handling

7bd0de4

fix: apply new font

0ecf718

fix: context reset when refresh

d9ce2b9

fix: refresh error at vercel

a33d728

only1Ksy reviewed Apr 28, 2025

View reviewed changes

fix: minor errors

25f5e7d

- typing error - empty file

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

[4주차] 권동욱 미션 제출합니다. #11

[4주차] 권동욱 미션 제출합니다. #11

Uh oh!

2025314242 commented Apr 16, 2025 •

edited

Loading

Uh oh!

only1Ksy left a comment

Uh oh!

only1Ksy Apr 28, 2025

Uh oh!

only1Ksy Apr 28, 2025

Uh oh!

only1Ksy Apr 28, 2025

Uh oh!

only1Ksy Apr 28, 2025

Uh oh!

2025314242 Apr 28, 2025

Uh oh!

only1Ksy Apr 28, 2025

Uh oh!

only1Ksy Apr 28, 2025

Uh oh!

2025314242 Apr 28, 2025

Uh oh!

only1Ksy Apr 28, 2025

Uh oh!

2025314242 Apr 28, 2025

Uh oh!

only1Ksy Apr 28, 2025

Uh oh!

only1Ksy Apr 28, 2025

Uh oh!

Uh oh!

		@@ -0,0 +1,129 @@
		/* http://meyerweb.com/eric/tools/css/reset/

		@@ -0,0 +1 @@
		"user-me"

[4주차] 권동욱 미션 제출합니다. #11

Are you sure you want to change the base?

[4주차] 권동욱 미션 제출합니다. #11

Uh oh!

Conversation

2025314242 commented Apr 16, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

마치며...

Todo list

Error handling

배포 링크

Key Questions

React Router의 동적 라우팅(Dynamic Routing)이란 무엇이며, 언제 사용하나요?

네트워크 속도가 느린 환경에서 사용자 경험을 개선하기 위해 사용할 수 있는 UI/UX 디자인 전략과 기술적 최적화 방법은 무엇인가요?

UI/UX 디자인 전략

기술적 최적화 방법

React에서 useState와 useReducer를 활용한 지역 상태 관리와 Context API 및 전역 상태 관리 라이브러리의 차이점을 설명하세요.

Uh oh!

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

Uh oh!

2025314242 commented Apr 16, 2025 •

edited

Loading