[5주차] 이효린 미션 제출합니다. #19

hyorish03 · 2024-10-10T06:54:05Z

안녕하세요 유레카 프론트엔드 1기 이효린입니다. PR 열심히 쓰고있었는데 갑자기 크롬이 렉이 걸려서 ,,,, 전부 날라가버려 처음부터 다시 쓰고있습니다 ,, 🥲 지각 제출 죄송합니다,,

저는 상태관리 라이브러리로 zustand를 사용했습니다. 이유는 로고에 있는 곰돌이가 귀여워서입니다.

📍Key question

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

SPA (Single Page Application)
하나의 페이지를 활용하는 애플리케이션 방식입니다. 서버는 클라이언트에게 하나의 HTML 파일만을 보냅니다.
MPA (Multiple Page Application)
여러 개의 페이지를 활용하는 애플리케이션 방식입니다. 여러 페이지를 생성할 수 있기 때문에 많은 수의 키워드르 타겟팅 할 수 있습니다. 덕분에 SEO에 더욱 친화적입니다.
CSR (Client Side Rendering)
클라이언트단에서 렌더링을 처리하는 방식입니다. 초기 페이지 로드시 HTML을 서버로부터 제공 받고, JS 파일을 다운로드하여 브라우저에서 애플리케이션을 실행합니다. JS가 실행되면 클라이언트 측에서 HTML을 통해 DOM 트리를 구성합니다.
장점
- 초기 로드 이후 페이지 간 전화가 빠르고, 전체 페이지를 새로 고침 없이 업데이트 되기 때문에 사용자 경험이 좋습니다.
- 대부분의 작업을 클라이언트에서 이루어지기 때문에 서버에 부담이 덜 가게 됩니다.
단점
- 초기 로드시간이 길 수 있습니다. 클라이언트에서 JS 파일을 다운로드하고 실행하는 시간이 필요하기 때문에 초기 페이지 로드가 SSR에 비해 다소 느릴 수 있습니다.
SEO 문제가 있을 수 있습니다. 초기에는 빈 화면을 가지고, JS 실행 및 DOM 트리를 생성하는 시간이 걸리기 때문에 SEO에 불리합니다.
SSR
- 서버에서 HTML을 완전히 렌더링항 클라이언트에 전달하는 방식입니다. 사용자가 웹 페이지에 접속하면 서버는 요청 받은 페이지를 렌더링하고, 완성된 HTML을 클라이언트로 전달해 해당 HTML을 브라우저에 표시하는 방식입니다.
장점
- 서버가 HTML을 사전 렌더링해서 제공하기 때문에 초기 로딩 속도가 매우 빠릅니다.
- SEO에 유리합니다. HTML이 서버에서 생성되기 때문에 검색엔진 크롤러가 페이지 내용을 쉽게 인덱싱 할 수 있습니다.
단점
- 서버 부하 증가됩니다. 매번 서버가 HTML을 생성하기 때문에 서버의 부하가 증가합니다.
- 페이지 전환이 서버 요청을 통해 이루어지면 CSR보다 느릴 수 있습니다. 하지만 초기 로딩 이후 CSR 방식을 사용하면 페이지 전환 속도를 높일 수 있습니다.

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

지역 상태관리
- useState
  함수형 컴포넌트에서 useState를 활용해 로컬 상태를 관리할 수 있습니다. 상태가 변경 될 때마다 컴포넌트가 리렌더링 됩니다.
- useReducer
  상태관련 로직이 복잡하거나 상태 업데이트가 여러 단위로 이루어질 때 useReducer 훅을 사용할 수 있습니다. Redux의 리듀서와 비슷하게 동작합니다.
전역 상태 관리 라이브러리
- Context API
  React 내장 기능으로 전역 상태를 관리할 수 있습니다. 그러나 상태가 변경될 때마다 Context를 사용하는 모든 컴포넌트가 리렌더링 되기 때문에 성능상의 문제가 있을 수 있습니다.
- Redux
  Store을 사용해 모든 상태를 관리하며, action과 reducer로 관리합니다.
서버 상태 관리
Tanstack Query (구 React Query)
서버에서 데이터를 가져와 관리하는 경우 데이터 캐싱, 동기화, 백그라운드 업데이트 등의 기능을 통해 복잡한 서버 상태를 효율적으로 관리할 수 있습니다.

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

zustand를 사용했고, 곰돌이가 귀엽다는 특징이 있습니다.
Redux 보다 경량화 되었고, 사용이 쉽습니다.
Provider가 필요 없어 앱을 래핑하지 않아도 됩니다.
Redux DevTools로 디버깅이 가능합니다.

jejukyj

안녕하세요 효린님, 이번 주차 코드리뷰를 맡게 된 고윤정입니다!
효린님의 코드를 보면서 피드백을 한다기 보단 많이 배워가는 것 같습니다
코드에서 능숙함이 보여요..👀 많이 참고하겠습니다 ㅎㅎ
이번 미션도 고생 많으셨습니다~!

jejukyj · 2024-10-14T06:40:12Z

eslint.config.js

+      '@typescript-eslint/no-unused-vars': 'off',
+      '@typescript-eslint/interface-name-prefix': 'off',
+      '@typescript-eslint/explicit-function-return-type': 'off',
+      '@typescript-eslint/explicit-module-boundary-types': 'off',
+      '@typescript-eslint/no-explicit-any': 'off',


오 이 코드 참고해서 설정해야겠어요 자잘한 오류들 스트레스..🙃

jejukyj · 2024-10-14T06:41:27Z

image.d.ts

@@ -0,0 +1,11 @@
+declare module '*.png' {


모듈들도 다 타입 지정을 해줘야하는군요..!😲 새로 배워갑니다

jejukyj · 2024-10-14T07:25:23Z

src/assets/svg/Home.tsx

+      <pattern
+        id="Home_svg__a"
+        width={1}
+        height={1}
+        patternContentUnits="objectBoundingBox"
+      >


오 svgr을 사용하신건가요?!? 정말 간편하고 좋네요..🥹👍

jejukyj · 2024-10-14T07:35:19Z

src/pages/chatIndividual/ChatItem/ChatItem.styles.ts

+  display: flex;
+  flex-direction: column;
+  background-color: white;
+  word-break: break-all;


white-space와 word-wrap은 사용해봤는데 word-break도 줄바꿈 속성이었네요! 덕분에 줄바꿈 속성 더 알고갑니다

jejukyj · 2024-10-14T07:41:46Z

src/pages/chatIndividual/stores/useAlarmStore.ts

@@ -0,0 +1,11 @@
+import { create } from 'zustand';


zustand는 recoil과 사용법이 살짝 다르긴 하지만, recoil 만큼이나 간편해보이네요!🤩

Sieonn

효린님 잘 봤습니다. Json 파일을 불러올 때나 폴더별로 정리해서 관리하기 편한 형태를 보고 따라하고 싶네요! 고생 많으셨고 앞으로도 화이팅입니다!! 🐻

Sieonn · 2024-10-10T12:24:46Z

src/components/ChatList/index.jsx

          <PartnerMessage key={index} message={item} />
        );
      })}
+      {alarmOff && (


저는 이부분 빼먹었는데 추가해야겠어요

Sieonn · 2024-10-14T07:25:42Z

src/App.tsx

-import useChat from '@hooks/useChat';
 import ChatList from '@components/ChatList';
 import { useState } from 'react';
+import { chat } from '@assets/chat';


저도 자꾸 import할 때 @이런 식으로 불러와져서 ../ 이렇게 수정해주거든요. 이거를 뭐를 설정해줘야 저렇게 import해도 될까요?

Sieonn · 2024-10-14T07:26:50Z

src/main.tsx

-    <App />
-  </StrictMode>
-);
+import moment from 'moment';


moment 사용하신거 좋네요. 저도 적용해봐야겠습니다.

Sieonn · 2024-10-14T07:28:00Z

src/utils/findPartnerInfo.ts

-import chat from '@assets/chat.json';
+import userInfo from '@assets/userInfo.json';
+export function findPartnerList(myId: number) {
+  const partners = userInfo.filter((info: UserInfo) => info.userId !== myId);


필터를 사용하셔서 구분 하신게 효율적으로 보이네요! 👍

Sieonn · 2024-10-14T07:30:26Z

tsconfig.json

 {
  "compilerOptions": {
+    "strict": true,
    "allowJs": true,


strict 옵션을 true로 설정하면 TypeScript에서 엄격한 타입 검사 모드가 활성화된다고 하는데 설정해 두신 이유가 있을까요?

Sieonn · 2024-10-14T07:32:06Z

src/Router.jsx

@@ -0,0 +1,15 @@
+import App from './App';
+import { ROUTE } from '@constants/index';


화면 폴터별로 스타일과 index로 정리해두니 이렇게 호출이 가능해서 좋네요!

Sieonn · 2024-10-14T07:34:29Z

src/assets/chat.ts

+      ],
+    },
+    {
+      roomId: 2,


저는 ID로 구분했는데 방으로 구분하니까 호출하거나 작성하기 편할 것 같아요.

Sieonn · 2024-10-14T07:38:55Z

yarn.lock

  resolved "https://registry.npmjs.org/yocto-queue/-/yocto-queue-0.1.0.tgz#0294eb3dee05028d31ee1a5fa2c556a6aaf10a1b"
  integrity sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q==
+
+zustand@^5.0.0-rc.2:


효린님이 전역상태관리를 이걸로 하신걸 보고 저도 찾아봤는데 귀엽지만 간편하고 성능이 좋네요. 저도 간단한 프로젝트 할 때 활용해볼게요

Sieonn · 2024-10-14T07:44:56Z

image.d.ts

-  const value: React.FunctionComponent<React.SVGProps<SVGSVGElement>>;
-  export default value;
+  import React = require('react');
+  export const ReactComponent: React.FC<React.SVGProps<SVGSVGElement>>;


저도 다음 리팩토링때는 icon을 직접 불러오기보다는 svg를 더 활용해봐야겠습니다.
SVG는 웹 디자인 및 개발에서 유연성, 성능, 확장성 면에서 매우 유리한 이미지 이라고 하니 직접 png나 jpg를 사용하는 것 보다 좋겠네요!

Sieonn · 2024-10-14T07:48:22Z

src/pages/chatIndividual/stores/useNewChatStore.ts

@@ -0,0 +1,19 @@
+import { chatAppData } from '@assets/chat';
+import { create } from 'zustand';


관리를 이런 식으로 하는 것이군요.! 좋아요

hyorish03 added 30 commits September 11, 2024 19:23

Chore: 기본 환경설정

73f5ca1

Chore: 프로젝트에 데이터 파일 및 필요한 PNG 에셋 추가

a7a686a

Chore: chat.json에 name 속성 추가

72db263

Chore: styled-components 설치

32e400e

Chore: 절대경로 설정

8c53950

Chore: chat.json에 image 속성 추가

f076c07

Feat: 이미지 파일 모듈화

37ec1b1

Style: index.css box-sizing 추가

d72bdb9

Fix: 절대경로 설정파일 수정

7f61915

Feat: 상수파일 생성

8a24105

Feat: Header 컴포넌트 구현

8b7a93e

Fix: 절대경로를 위한 jsconfig.json 설정 추가

0938404

Feat: 상대방 정보를 찾는 함수 구현

3e32deb

Feat: png 모듈화 파일 추가

b8d3b5e

Feat: 메시지 보내기 창 구현

b39e3c5

Feat: eslint 설정 추가

d465bdd

Feat: chat.json에 timestamp 추가

c0aaabf

Feat: 메시지 컴포넌트 구현

2180ebf

Feat: 채팅 스타일링 구현

96d95a7

Feat: useChat 훅 구현

4933321

Chore: eslint 설정 변경

ea17acf

Fix: const 내의 userId 값을 userInfo 객체로 변경

6e3386b

Feat: util 함수 수정

81c0420

Feat: 메시지 전송 기능 구현

64044e3

Feat: 메시지 렌더링 기능 구현

5c66533

Fix: useChat 호출방식 변경

c88ba8a

Feat: 스타일링 수정

743df0a

Feat: 스타일링 수정

317aefc

Feat: 빈 메시지일 경우 못 보내도록 수정

650f0d1

Feat: body에서 scroll 안 되도록 수정

9c38280

hyorish03 added 27 commits September 11, 2024 23:45

Feat: 방해금지모드 구현

604e636

Fix: body 스타일링 수정

35c2699

Chore: typescript 환경설정

01002d8

Fix: 확장자 변경 js -> ts, jsx -> tsx

7e2e358

Fix: tsconfig.json 수정

8526848

Feat: 타입 추가

cf878ac

Feat: globalStyle 추가

6adb9a9

feat: react-router-dom 적용 및 라우팅 처리

e11e670

feat: 404 페이지 추가

024fbc5

fix: 채팅 정보 및 사용자 정보 업데이트

be74036

feat: route path 상수화

09349d8

fix: 채팅 정보 업데이트

a6af55a

fix: 채팅 상대방 정보 가져오는 방법 수정

ed9cbc8

feat: 전역상태관리 라이브러리 추가

62b9527

feat: 채팅 리스트 필터링을 위한 store 구현

5654ad4

feat: App.jsx를 채팅리스트 컴포넌트로 변경

5fa8f11

feat: 채팅 리스트 페이지 구현

22937e4

feat: 채팅방 컴포넌트 구현

bcd34d9

feat: SVGR 적용 및 bottomTab에 사용하는는 svg 추가

4958df0

feat: bottomTab 구현

e527577

fix: 불필요한 주석 삭제

d006b60

feat: 채팅 리스트 스타일링 수정

c0de54d

fix: 폴더구조 변경

232e576

fix: 폴더구조 변경

903f33d

fix: alarm 전역상태로 변경

33bdde4

fix: 채팅 추가 기능 전역상태로 변경

5e576b1

fix: 라우팅 path 수정

d861007

jejukyj reviewed Oct 14, 2024

View reviewed changes

Sieonn reviewed Oct 14, 2024

View reviewed changes

		@@ -0,0 +1,15 @@
		import App from './App';
		import { ROUTE } from '@constants/index';

		@@ -0,0 +1,19 @@
		import { chatAppData } from '@assets/chat';
		import { create } from 'zustand';

[5주차] 이효린 미션 제출합니다. #19

Are you sure you want to change the base?

[5주차] 이효린 미션 제출합니다. #19

Uh oh!

Conversation

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

Uh oh!

📍Key question

Uh oh!

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

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

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

hyorish03 commented Oct 10, 2024 •

edited

Loading