[5주차] 김윤일 과제 제출합니다. by Yunil-dev · Pull Request #21 · URECA-ReCoder/react-sns

Yunil-dev · 2024-10-12T15:55:29Z

안녕하세요 유레카 프론트엔드 1기 김윤일입니다.
PR 늦게 해서 죄송하단 말씀 올리면서 시작하겠습니다. recoil과 router 등등 안 써본 거라면 겁부터 먹었었는데
직접 구현해보니 두려웠던 마음은 없어졌습니다😁
여태 배운 내용 토대로 싸-악 새로 만들어 보고 싶네요 !

💡 알게된 부분

recoil의 사용법 - atom 함수, 최상단에 RecoilRoot로 감싸주기
router로 이미지 경로와 요소 설정, path: 'message/:userId'이처럼 parameter추가해서 사용하기, Outlet으로 자식 요소 사용 가능하게 하기 등등

🏷️ 개선하고 싶은 부분

선택 사항 기능 추가하기

📖 생각해 볼 질문들

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

SPA: 하나의 페이지로 동작하고 전환이 빠르며, 초기 로딩이 느리다.
MPA: 여러 페이지로 구성되어 있으며, 각 페이지 마다 새로고침을 해줘야한다. SEO에 유리하다.
CSR: 클라이언트에서 렌더링하고 전환이 빠르며 초기 로딩 속도가 느리다.
SSR: 서버에서 렌더링하고, 초기 로딩 속도가 빠르며, SEO에 유리하다.

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

a. 지역 상태(Local State)

- 특정 컴포넌트 내부에서 관리되는 상태.
- 다른 컴포넌트들과 데이터를 공유하지 않는다.
- `input` , `selectbox` 등 사용자의 입력값을 받는 경우
- 지역 상태는 그 컴포넌트 내에서만 접근 가능하고, 상태 변경 시 해당 컴포넌트와 자식 컴포넌트들이 리렌더링 됩니다.

b. 컴포넌트 간 상태 (Cross Component State)

- 여러 가지 컴포넌트에서 관리되는 상태
- 프로젝트 군데군데에서 쓰이는 모달
- Props Drilling을 필요로 함.

c. 전역 상태(Global State)

- 프로젝트 전체에 영향을 미치는 상태
- Props Drilling 방식을 통해서 부모에서 자식으로 데이터를 전달함.

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

recoil을 사용했습니다. 기본적으로 상태를 원자(atom)라는 작은 단위로 취급을 하며 작은 상태를 조합하여 큰 상태를 만들고, 상태에서 다른 상태를 파생하거나 Selector와 같은 순수 함수를 제공하며 bottom-up 방식을 사용합니다.

🚀 배포

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

ZUITOPIA

안녕하세요 윤일님,
매 과제마다 성장하시는게 눈에 보여서 코드리뷰가 즐겁습니다 👍
이번 과제도 고생 많으셨고, 피드백 남겼으니 확인 부탁드려요 ~

ZUITOPIA · 2024-10-14T01:16:19Z

eslint.config.js

        'warn',
        { allowConstantExport: true },
      ],
+      'react/react-in-jsx-scope': 'off', // JSX에서 React 자동 import 규칙 비활성화


매번 react 오류 해결을 위해 import 해주는게 번거로웠는데 저도 사용해봐야겠어요 👍

ZUITOPIA · 2024-10-14T01:17:53Z

src/Router.tsx

+    element: <App />,
+    children: [
+      {
+        path: 'message/:userId', // userId 파라미터 추가


ZUITOPIA · 2024-10-14T01:18:58Z

src/components/Layout/ChatProfile.tsx

+      <img src={Profile} css={userProfileImage} />
+      <section css={userWrapper}>
+        {/* 이름과 아이디 */}
+        <span css={userName}>이민형</span>


이름이 하드코딩 되어있네요! 실제 데이터를 반영할 수 있도록 수정해주면 좋을 것 같아요 🤩

앗 ..! 채팅 목록 페이지에서 사용자 프로필을 컴포넌트로 따로 빼두려고 만든 파일인데
까먹고 가만히 냅뒀네요 ㅠㅠ 수정하겠습니다

ZUITOPIA · 2024-10-14T01:19:36Z

src/components/Layout/ChatProfile.tsx

+      <section css={userWrapper}>
+        {/* 이름과 아이디 */}
+        <span css={userName}>이민형</span>
+        <span css={userId}>마지막 메세지</span>


이 부분도요!

ZUITOPIA · 2024-10-14T01:21:28Z

src/components/Layout/Header.tsx

+  // 프로필, 알림 기능 있는 헤더바
+  return (
+    <div css={headerWrapper}>
+      <UserProfile userImage={userImage} userName={userName} userId={userId} />


user 정보 전체를 넘기는 것과 각각 image, username, userId를 따로 넘겨줄 때의 성능 차이가 얼마나 나는지 궁금합니다! 차이가 많이 난다면, 각각 넘겨주되 객체로 묶어 한 번에 전달해주는 것도 좋을 것 같습니다 🤩

ZUITOPIA · 2024-10-14T01:31:24Z

src/components/MessageWindow.tsx

+  // 메세지 입력창을 포함한 모든 대화창
+  const users = useRecoilValue(userState);
+  const chatData = useRecoilValue(chatState);
+  const setChatData = useSetRecoilState(chatState);


chatData에 대한 부분은 useRecoilState를 사용하여 한 줄로 작성해보면 좋을 것 같아요 👍

바로 반영해보겠습니다 !

ZUITOPIA · 2024-10-14T01:44:15Z

src/components/OtherMessageItem.tsx

+  return (
+    <div css={otherMessageItemWrapper}>
+      <img
+        src={'../../' + user.userImage}


이 부분도 수정이 필요할 것 같네요 🤩

ZUITOPIA · 2024-10-14T01:45:35Z

src/db/chatData.json

+    "messages": [
+      {
+        "id": 1,
+        "userId": "onyourM__ark",


userId는 중복이 없도록 다른 고유한 값으로 설정해주는 것이 좋을 것 같아요! 닉네임을 userId로 설정하면 중복되는 경우가 생길 것 같아서요 ~

ZUITOPIA · 2024-10-14T01:46:14Z

src/pages/NotFound.tsx

+export default function NotFound() {
+  return (
+    <>
+      <h1>404 NOT FOUND</h1>{' '}


not found 페이지까지 챙겨주셨군요 디테일 🤩

이게 다 주희님 보고 배웠습니다 ㅎ

저도 챙겨갑니다 디테일🥹

ZUITOPIA · 2024-10-14T01:47:56Z

src/App.tsx

+export default function App() {
+  const navigate = useNavigate();
+  useEffect(() => {
+    navigate('/chatList');


배포링크에서 채팅방 링크 입력으로 새로고침 시 링크 자체가 not found가 되는데, 이 부분 때문일 것 같아요! 한 번 확인해주세요 🤩

수정했습니다 !
useEffect를 삭제하고 router에서 chatList경로를 기본 경로인 ''로 수정해주니까 되더라구요👍🏻

jissssu

윤일님! 이번 미션도 수행하시느라 너무 고생많으셨어요!
윤일님 코드 보면서 디테일하게 챙기시는 부분까지 많이 배우고갑니다!
남은 미션까지 화이팅해봐요☘️

jissssu · 2024-10-14T07:23:05Z

eslint.config.js

+      'react/react-in-jsx-scope': 'off', // JSX에서 React 자동 import 규칙 비활성화
+      'no-unused-vars': ['error', { varsIgnorePattern: '^React$' }], // React 변수에 대한 미사용 경고 무시


저도 이부분 사용해봐야할 것 같아요!

jissssu · 2024-10-14T07:32:29Z

src/components/Layout/ChatProfile.tsx

+      <img src={Profile} css={userProfileImage} />
+      <section css={userWrapper}>
+        {/* 이름과 아이디 */}
+        <span css={userName}>이민형</span>


저도 주희님이랑 같은 생각입니다! props로 이름과 메세지를 전달하면 다양하게 데이터 처리가 가능할 것 같아요!

jissssu · 2024-10-14T07:38:09Z

src/components/Layout/UserProfile.tsx

+  return (
+    <div css={userProfileItems}>
+      <img src={Arrow} css={arrowLeft} onClick={handleGoToChatList} />
+      <img src={'../../' + userImage} css={userProfileImage} />


저도 저번에 이런식으로 이미지 불러와서 이미지 파일 경로가 고정되어있지 않을때 에러가 엄청 났던 것 같습니다! 전체 URL을 Prop으로 전달받아도 좋을 것 같아요!

jissssu · 2024-10-14T07:42:43Z

src/components/MessageInput.tsx

+
+      setNewMessage('');
+      textareaRef.current && textareaRef.current.focus(); // 메세지 전송 후 textarea에 포커스


onCheckEnter 함수에서 setNewMessage('')를 한 번 더 호출하는데, 이미 handleSendMessage 함수 내에서 처리되어 중복 처리 되는게 아닌지 궁금합니다!

jissssu · 2024-10-14T07:43:50Z

src/components/Layout/Header.tsx

+/** @jsxImportSource @emotion/react */
+import { css } from '@emotion/react';
+import { UserProfile } from './UserProfile';
+import { Settings } from '../UI/Settings';


저도 다음에 UI 폴더를 적용해봐야겠어요!!

jissssu · 2024-10-14T07:46:16Z

src/components/MessageList.tsx

+    messageWindowRef.current?.scrollIntoView({ behavior: 'smooth' });
+  }, [messages]); // messages가 업데이트될 때마다 실행


저번에 윤일님이 리뷰해주셨던 부분인데! 복습하고 갑니다🥹

jissssu · 2024-10-14T07:46:51Z

src/components/MessageList.tsx

+    <>
+      <div css={messageListWrapper}>
+        {messages.map((message) => {
+          const user = users.find((user) => user.userId === message.userId)!; // '!'를 추가해줌으로서 user는 반드시 존재한다.


오홍 제 코드에 알려주신 부분이 이거군요! 저도 바로 적용해보겠습니다!

jissssu · 2024-10-15T01:00:48Z

src/components/MessageWindow.tsx

@@ -0,0 +1,81 @@
+/** @jsxImportSource @emotion/react */
+import { css } from '@emotion/react';
+import { useEffect, useRef } from 'react';


오홍 useRef 사용하신 부분이 어디인지 궁금해요! 코드 어디부분인지 못찾겠어열..ㅠㅠ

수정하면서 지운다는 걸 깜빡했네요 ! 적용하겠습니당👍

jissssu · 2024-10-15T01:06:00Z

src/pages/ChatListPage.tsx

+          {users
+            .filter((user) => user.userName !== '김윤일') // 사용자 '김윤일'은 채팅 목록에서 제외
+            .map((user) => (


필터링으로 특정 사용자를 제외하셨군요! 하드코딩 값보다는 상수나 설정파일에서 관리해도 좋을 것 같아요!

jissssu · 2024-10-15T01:06:15Z

src/pages/NotFound.tsx

+export default function NotFound() {
+  return (
+    <>
+      <h1>404 NOT FOUND</h1>{' '}


저도 챙겨갑니다 디테일🥹

Yunil-dev added 30 commits September 8, 2024 15:49

Test: test commit

ce02768

Fix:react/react-in-jsx-scope 규칙 비활성화 및 React 미사용 경고 수정

82751d1

Chore: 컴포넌트 분리 및 기본 JSX 추가

1794473

Style: emotion-normalize 및 글로벌 스타일 적용

1638417

Style: 기본 메신저 스타일 적용

0d90855

Style: 기본 스타일 적용 및 버튼 이미지 삽입

7bb8177

Style: Global 스타일 추가

9897e9a

Add: 사용자와 채팅대화가 담긴 정적 JSON 파일 추가(아직 연동되지 않음)

1d72721

Refactor: MessageItem파일을 두 개의 컴포넌트로 분리(OtherMessageItem, MyMessageItem)

64bcecb

Feat: JSON 파일 불러오기

33e66ce

Feat: JSON 파일에 chatData 추가

2fb3aab

Style: header와 input이 오른쪽으로 튀어나오는 현상 수정

79c9ea6

Style: 오버 스크롤 방지 기능 추가

b7e6fc3

Refactor: 불필요한 스타일 코드 삭제

a31b063

Feat: 실시간 채팅 보내기 기능, focus 기능 추가

462bba5

Refactor: 가독성을 위해 스타일 코드 최하단으로 위치 이동

c8a6789

Design: 버튼 이미지 크기조정, 스크롤 길이 제한 수정, 테두리 색상 변경

e55168a

Chore : css import 에러처리를 위해 rules 추가

ee9e349

Chore: emotion, emotion-normalize 라이브러리 추가

8c75e69

Fix: 배포 후 이미지 경로 오류로 인한 버그 수정(assets 폴더 src 밖으로 이동)

b5dbbdd

Design: 메세지 박스 테두리 요소 수정

b2b03e5

Refactor: json 이미지 경로 수정

6d8cd76

feat: tsconfig.json 파일 추가 및 typescript 세팅

b46cfcc

fix: ts(2686)버그 발생으로 tsconfig compilerOptions 변경

431272c

fix: HTMLElement 타입 지정 버그 수정

ca42c12

feat: typescript 변환을 위한 모든 파일 확장자 변경(.jsx -> .tsx)

5bd1cd0

fix: 이미지 경로 에러를 위한 모듈 추가

94ba080

fix: 서버 실행을 위한 파일 확장자 수정

21966b9

fix: json 파일 경로 오류 수정, resolveJsonModule 옵션 추가

d0c2d25

fix: HTMLDivElement임을 명시

af048df

Yunil-dev added 21 commits September 19, 2024 01:36

fix: 타입스크립트 ref 타입 지정으로 focus 에러 해결

1080b7b

fix: props 타입 수정 및 null 가능성 제거

3da41a8

feat: 상태관리를 위한 zustand 설치 및 세팅

8f2007d

refactor: 정적 파일 구분을 위해 폴더 생성 후 이미지 경로 수정

17eac9c

refactor: 정적 파일 구분을 위해 폴더 생성 후 이미지 경로 수정

1a5d038

refactor: 재사용을 위한 사용자 json 파일의 이미지 경로 수정

0a6a4ed

refactor: 페이지 추가 구현을 위해 pages 폴더 추가 후 각 페이지 생성

75cdf20

feat: router 설정

ad5fc2c

feat: json 데이터 추가 및 중복된 인터페이스 수정을 위해 types.ts 파일 생성

e2036c2

feat: 상태관리를 위한 recoil 추가

42db91a

feat: json 데이터 세팅

de89380

feat: 채팅 목록 페이지 UI 구현

1b12719

feat: 모든 컴포넌트에서json 데이터를 불러올 수 있도록 atoms 함수 생성

fab2f9a

feat: 각 채팅방의 userId를 받아서 그에 맞는 채팅데이터를 불러오도록 구현

cd263a4

fix: 이미지 경로 수정으로 사용자 프로필 이미지 표시 문제 해결

d00f8ed

feat: 채팅 목록에서 유저가 나일 때 제외되도록 구현

6dd4615

fix: 채팅방 위로 스크롤 시 헤더에 가려지는 현상 수정

375dcf9

chore: 테스트용 테두리 스타일 제거

cf6e9e9

feat: 서버 접속 시 chatList 페이지로 넘어가게 useEffect로 경로 설정

b8f89c4

chore: 로그 확인용 코드 삭제

eea1273

chore: index.html에 앱 title 수정 및 아이콘 추가

4da9315

ZUITOPIA reviewed Oct 14, 2024

View reviewed changes

Yunil-dev added 7 commits October 14, 2024 16:40

fix: vercel 배포 후 이미지 안뜨는 현상 해결을 위해 이미지 폴더 public으로 이동

b782854

fix: vercel 새로고침 후 404 에러 뜨는 현상 수정 진행

0ba6d1f

fix: ChatListPage 경로 절대 경로에서 상대 경로로 수정하여 vercel 새로고침 후 404 에러 뜨는 현상 수정

39044ea

feat: 배포 test

5f18155

feat: vercel 배포 에러 해결을 위한 vercel.json파일 추가

6c82127

feat: 기본 경로로 ChatListPage 라우터 설정

5cf5d4b

feat: 수정한 ChatListPage 경로 navigate에 반영

904cc5b

jissssu reviewed Oct 15, 2024

View reviewed changes

		'react/react-in-jsx-scope': 'off', // JSX에서 React 자동 import 규칙 비활성화
		'no-unused-vars': ['error', { varsIgnorePattern: '^React$' }], // React 변수에 대한 미사용 경고 무시


		setNewMessage('');
		textareaRef.current && textareaRef.current.focus(); // 메세지 전송 후 textarea에 포커스

		messageWindowRef.current?.scrollIntoView({ behavior: 'smooth' });
		}, [messages]); // messages가 업데이트될 때마다 실행

Conversation

Yunil-dev commented Oct 12, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

💡 알게된 부분

🏷️ 개선하고 싶은 부분

📖 생각해 볼 질문들

🚀 배포

Uh oh!

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

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!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

Yunil-dev commented Oct 12, 2024 •

edited

Loading