[5주차] 김윤일 과제 제출합니다. #21

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

@@ -33,6 +33,9 @@ export default [
        '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

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[5주차] 김윤일 과제 제출합니다. #21

[5주차] 김윤일 과제 제출합니다. #21

Yunil-dev commented Oct 12, 2024 •

edited

Loading

ZUITOPIA left a comment

ZUITOPIA Oct 14, 2024

ZUITOPIA Oct 14, 2024

ZUITOPIA Oct 14, 2024

Yunil-dev Oct 14, 2024

ZUITOPIA Oct 14, 2024

ZUITOPIA Oct 14, 2024

ZUITOPIA Oct 14, 2024

Yunil-dev Oct 14, 2024

ZUITOPIA Oct 14, 2024

ZUITOPIA Oct 14, 2024

ZUITOPIA Oct 14, 2024

Yunil-dev Oct 14, 2024

jissssu Oct 15, 2024

ZUITOPIA Oct 14, 2024

Yunil-dev Oct 14, 2024

jissssu left a comment

jissssu Oct 14, 2024

jissssu Oct 14, 2024

jissssu Oct 14, 2024

jissssu Oct 14, 2024

jissssu Oct 14, 2024

jissssu Oct 14, 2024

jissssu Oct 14, 2024

jissssu Oct 15, 2024

Yunil-dev Oct 15, 2024

jissssu Oct 15, 2024

jissssu Oct 15, 2024

		'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가 업데이트될 때마다 실행

[5주차] 김윤일 과제 제출합니다. #21

Are you sure you want to change the base?

[5주차] 김윤일 과제 제출합니다. #21

Conversation

Yunil-dev commented Oct 12, 2024 • edited Loading

💡 알게된 부분

🏷️ 개선하고 싶은 부분

📖 생각해 볼 질문들

🚀 배포

ZUITOPIA 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

Choose a reason for hiding this comment

jissssu 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

Yunil-dev commented Oct 12, 2024 •

edited

Loading