[17팀 이재혁][Chapter 1-3] React, Beyond the Basics #2

jhlee0409 · 2024-10-06T05:59:27Z

과제 체크포인트

기본과제

심화 과제

기본과제에서 작성한 hook을 이용하여 렌더링 최적화를 진행하였다.
Context 코드를 개선하여 렌더링을 최소화하였다.

추가된 테스트

advanced.test.tsx 에만 작성

Context API 테스트
- NotificationContext API 테스트
  - NotificationContext가 Provider 내부에 있는지 확인합니다.
  - NotificationContext가 Provider 내부에 없으면 에러가 발생합니다.
- UserContext API 테스트
  - UserContext가 Provider 내부에 있는지 확인합니다.
  - UserContext가 Provider 내부에 없으면 에러가 발생합니다.
- ThemeContext API 테스트
  - ThemeContext가 Provider 내부에 있는지 확인합니다.
  - ThemeContext가 Provider 내부에 없으면 에러가 발생합니다.
  - toggleTheme이 잘 동작하는지 확인합니다.
- ProductsContext API 테스트
  - ProductsContext가 Provider 내부에 있는지 확인합니다.
  - ProductsContext가 Provider 내부에 없으면 에러가 발생합니다.
NotificationSystem 컴포넌트 테스트
- NotificationSystem 컴포넌트가 처음에는 자식이 없는 상태로 렌더링되어야 한다
- notification 추가 시 자식이 추가되어야 한다
- notification에 설정되지 않은 type이 들어올 경우 info를 기본으로 보여줍니다.
ProductAddForm 컴포넌트 테스트
- ProductAddForm 컴포넌트의 체크박스가 잘 동작하는지 확인합니다
- ProductAddForm 컴포넌트의 Input이 잘 동작하는지 확인합니다
- ProductAddForm 컴포넌트에서 submit시 product가 잘 추가되는지 확인합니다

기타

찝찝한 커버리지 100%

리뷰 받고 싶은 내용

provider/context 폴더 구조 저대로 괜찮은가? 무언가 좀 더 관리하기 좋은 구조가 있을까?
추가한 테스트 코드에서 원하는 바를 정확하게 캐치하지 못할 가능성이 있는 케이스들이 존재 하는지?

궁금한 점

커버리지 100% 도전 중 main.tsx 에 대해서만 에러가 나서 해결을 했으나 동작 방식의 의문이 듭니다.
그 이전에 main.tsx를 테스트하는 것이 의미가 있을까요?
또한 vitest provider에 v8과 instanbul 로 나눴을 때도 테스트 결과가 다르게 나오는데 차이점이나 장단점을 보아도 확실한 예제가 없어 이해하지 못했습니다.

상황

// advanced.test.tsx
const renderRoot = async () => {
  document.body.innerHTML = "<div id='root'></div>";
  await import("../main");
};
renderRoot();
document.body.innerHTML = "";

위와 같은 코드일 때 아래의 이미지와 같은 에러를 맞닥뜨립니다.

해결

이후 Unhandled 라는 키워드가 눈에 띄어서 catch 메소드 체이닝을 통해서 에러를 찍어보니 통과는 되었으나 에러를 던저는 것에서 로그를 찍는 것으로 바꿨을 뿐 근본적인 원인은 해결을 못한 상태입니다.

의문?

정확히 어떤 이유 때문일까요?
node 환경에서 client 메소드를 호출하는 것이 문제가 되었을까요? import { createRoot } from "react-dom/client";

// advanced.test.tsx
const renderRoot = async () => {
  document.body.innerHTML = "<div id='root'></div>";
  await import("../main").catch((err) => {
    console.log(err);
  });
};
renderRoot();
document.body.innerHTML = "";

과제를 수행하면서 느낀점

과제 시작 전 생각

이번에도 쉽지 않겠구나 라고 생각했습니다.

과제 제출 후 생각

코치님의 친절한? 자료들이 많아서 참고하여 원활하게 진행했습니다.

기타

과제 난이도

2.5점

soyoonJ

재혁님 이번주도 수고하셨습니다! 과제 제출 빠르게 하시고도 추가적으로 커버리지도 신경쓰시고 타입도 어떻게 하면 더 잘 선언할 수 있을 지 고민해주신 흔적이 보여서 코드리뷰 하는 내내 재밌었습니다!
equalities 파트에서 깔끔하게 구현해주셔서 제 로직도 다시 한 번 생각해보는 계기가 됐고, 호기심을 자극하는 부분이 있어서 코멘트를 몇 개 남겨두었어요! 항상 좋은 자극을 주셔서 감사합니다 :)

soyoonJ · 2024-10-10T12:57:24Z

packages/assignment/src/@lib/equalities/deepEquals.ts

+ const _objA = objA as Record<string, unknown>;
+ const _objB = objB as Record<string, unknown>;
+
+ const keysA = Object.keys(_objA);
+ const keysB = Object.keys(_objB);


objA,B를 _objA,B로 한 번 더 할당해주신 이유를 알고싶어요!

Object.keys에서 Recored로 타입까지 지정해주면 지저분해져서 그냥 별도로 분리했습니다!

soyoonJ · 2024-10-10T13:06:58Z

packages/assignment/src/@lib/hocs/memo.tsx

+ const MemoizedComponent = useMemo(
+ () => <Component {...(prevPropsRef.current as P)} />,
+ // eslint-disable-next-line react-hooks/exhaustive-deps
+ [prevPropsRef.current]
+ );


이것은 자그마한 질문인데요! memo를 사용하면 이미 다른 부분이 있을 경우에 업데이트를 하는 건데 useMemo를 추가로 사용하신 이유가 있을까요?

props의 값이 변하지 않는 한 메모라이즈된 컴포넌트가 그대로 반환이 되어야 한다고 생각해서 useMemo를 사용했습니다!

또 다른 방법이 있을까요?

ref 사용시
render time: 506.908935546875 ms
render time: 415.1611328125 ms
render time: 402.382080078125 ms
render time: 403.324951171875 ms
render time: 345.410888671875 ms
render time: 387.3798828125 ms
render time: 370.128173828125 ms
render time: 354.89892578125 ms
render time: 367.298095703125 ms
render time: 358.739013671875 ms
render time: 373.94091796875 ms
//평균 렌더링 시간은 약 389.60 ms입니다.

useMemo 사용시
render time: 476.381103515625 ms
render time: 420.4599609375 ms
render time: 415.77197265625 ms
render time: 408.4189453125 ms
render time: 387.155029296875 ms
render time: 381.88818359375 ms
render time: 402.846923828125 ms
render time: 372.149169921875 ms
render time: 374.06103515625 ms
render time: 364.540771484375 ms
render time: 388.998046875 ms
//평균 렌더링 시간의 평균은 약 399.33 ms입니다.

뭔가 측정하기 어렵군요

멘토링 시간에 같이 질문 주셔서 감사합니다!! 덕분에 궁금증이 해소됐어요 👍

soyoonJ · 2024-10-10T13:13:06Z

packages/assignment/src/pages/products/context/ProductsProvider.tsx

+
+export const ProductsProvider = ({ children }: ProductsProviderProps) => {
+ const [filter, setFilter] = useState("");
+ const [products, setProducts] = useState(() => generateItems(100000));


오 여기에서 useState(generateItems(100000));로 하지 않고 useState(() => generateItems(100000));로 작성하신 이유가 있을까요?

그렇게 되면 ProductsProvider가 리렌더링 될때마다 매번 새로 호출하여 초기값으로 할당이 됩니다.
그러나 저렇게 함수의 형태로 넘기게되면 최초 초기화 시에만 호출을 하고 이후 리렌더링 때는 무시되는 걸로 알고 있습니다!

https://react.dev/reference/react/useState#avoiding-recreating-the-initial-state

참고 공식문서입니다!

오옹! 이런 방법도 있군요!! 좋은 아이디어 공유 감사합니다 :)

오 이런 방법도 있군요,,, 공식문서 같이 공유해주셔서 감사합니다 !

Yoo2 · 2024-10-10T15:23:52Z

코드분리가 인상적이네요!

osohyun0224 · 2024-10-11T14:52:29Z

안녕하세요 재혁님 :) 페어팀으로 뵙게 된 18팀 오소현입니다~!
커버리지 100% 도전까지 bb 매우 멋지네요 코드도 간결하고 ,, 고민의 흔적이 많이보여요 ,, 😲😲😲
역시,, 금요일 이번주도 과제하시느라 고생많으셨어요 다음주도 화이팅입니다💪🏻💪🏻💪🏻

soyoonJ · 2024-10-11T15:52:21Z

packages/assignment/src/@lib/equalities/deepEquals.ts

+ if (objA === objB) {
+ return true;
+ }
+
+ if (
+ typeof objA !== "object" ||
+ typeof objB !== "object" ||
+ objA === null ||
+ objB === null
+ ) {
+ return false;
+ }


코드리뷰 한바퀴 돌고 오니 추가 공유 드리고 싶은 부분이 생겨 다시 찾아왔습니다!

Object.is()를 사용하면 null도 한 번에 처리가 가능하더라구요! 이 방법도 한번 스윽 제안해봅니다 🌟

Object.is() 관련문서 - https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Object/is

오! 감사합니다
둘이 잘 비교해서 써봐야겠네요

동등 비교 메서드 끼리 비교한 표도 있네요!!

https://developer.mozilla.org/ko/docs/Web/JavaScript/Equality_comparisons_and_sameness#%EB%8F%99%EB%93%B1_%EB%A9%94%EC%84%9C%EB%93%9C_%EB%B9%84%EA%B5%90

부호가 붙은 0과 NaN 의 비교를 제외하고는 === 와 같네요!

생각해보니 null 확인은 object type의 예외를 두기 위함이었군요! 추가 자료 공유 감사합니다 재혁님 :)

jhlee0409 added 3 commits October 5, 2024 23:34

feat: basic 구현

749d83f

feat: advanced

9a5cd53

refactor: context 구조화

2dd81d4

JunilHwang closed this Oct 6, 2024

JunilHwang reopened this Oct 6, 2024

jhlee0409 added 6 commits October 6, 2024 21:38

refactor: equals 관련 함수

961cbfb

refactor: path alias 설정

f5d51d8

refactor: 렌더링 1회 허용

8e7c63f

refactor: 프로젝트 구조 변경

3e42654

fix: import path 수정

a295135

test: coverage 98

7cffef3

soyoonJ reviewed Oct 10, 2024

View reviewed changes

test: 찝찝한 커버리지 100%

361e659

soyoonJ reviewed Oct 11, 2024

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[17팀 이재혁][Chapter 1-3] React, Beyond the Basics #2

[17팀 이재혁][Chapter 1-3] React, Beyond the Basics #2

jhlee0409 commented Oct 6, 2024 •

edited

Loading

soyoonJ left a comment

soyoonJ Oct 10, 2024

jhlee0409 Oct 10, 2024

soyoonJ Oct 10, 2024

jhlee0409 Oct 10, 2024

jhlee0409 Oct 10, 2024

jhlee0409 Oct 10, 2024

soyoonJ Oct 10, 2024

soyoonJ Oct 10, 2024

jhlee0409 Oct 10, 2024 •

edited

Loading

jhlee0409 Oct 10, 2024

soyoonJ Oct 10, 2024

osohyun0224 Oct 11, 2024

Yoo2 commented Oct 10, 2024

osohyun0224 commented Oct 11, 2024

soyoonJ Oct 11, 2024

jhlee0409 Oct 11, 2024 •

edited

Loading

jhlee0409 Oct 11, 2024

soyoonJ Oct 11, 2024

[17팀 이재혁][Chapter 1-3] React, Beyond the Basics #2

Are you sure you want to change the base?

[17팀 이재혁][Chapter 1-3] React, Beyond the Basics #2

Conversation

jhlee0409 commented Oct 6, 2024 • edited Loading

과제 체크포인트

기본과제

심화 과제

추가된 테스트

기타

리뷰 받고 싶은 내용

궁금한 점

상황

해결

의문?

과제를 수행하면서 느낀점

과제 시작 전 생각

과제 제출 후 생각

기타

과제 난이도

soyoonJ 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

jhlee0409 Oct 10, 2024 • edited Loading

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

Yoo2 commented Oct 10, 2024

osohyun0224 commented Oct 11, 2024

Choose a reason for hiding this comment

jhlee0409 Oct 11, 2024 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

jhlee0409 commented Oct 6, 2024 •

edited

Loading

jhlee0409 Oct 10, 2024 •

edited

Loading

jhlee0409 Oct 11, 2024 •

edited

Loading