[Feature/BAR-2] Async Boundary 구현 #1
Conversation
wonjin-dev
force-pushed
the
feature/BAR-2
branch
from
3318cbc
to
02423e7
Compare
tsconfig.json
Outdated
There was a problem hiding this comment.
/src/* 1뎁스 폴더에 관하여 alias 작성이 필요합니다.
There was a problem hiding this comment.
@wonjin-dev
pages도 추가하면 안되나요?
There was a problem hiding this comment.
@가 root를 가리키는데 혹시 따로 필요하다고 생각하신 이유가 있을까요 ?
@/pages @pages
There was a problem hiding this comment.
@wonjin-dev
pages 폴더도 그 위치만 밖으로 나와있을 뿐 import 경로에서 사용 형태는 동일할 것으로 생각했어서
@/pages 의 형태가 아닌 @pages 형태가 되면 어떨까 했습니다!
There was a problem hiding this comment.
이후 케이스 추가가 필요합니다.
AsyncBoundary뿐 아니라 별도의 컴포넌트로 도 사용될 수 있게 분리
There was a problem hiding this comment.
예시 파일.
디자인 안이 나오면 확인하여 기본 로딩 값에 대한 컴포넌트 구현이 필요합니다
| import LoadingView from '../Loading'; | ||
|
|
||
| interface AsyncBoundaryProps { | ||
| loading?: ReactNode; |
There was a problem hiding this comment.
loadingFallback라는 prop명이 더 정확한데,,, loading으로 축약하였습니다.
There was a problem hiding this comment.
<ErrorBoundary>
<Suspense fallback={}>{children}</Suspense>
</ErrorBoundary>사용되는 곳을 고려하면, loadingFallback 또는 fallback도 나쁘지 않은 것 같아요.
| const { error } = this.state; | ||
|
|
||
| if (error) { | ||
| return <CommonErrorScreen error={error} />; |
There was a problem hiding this comment.
loading과 마찬가지로 팩토리가 필요.
추후 추가할 예정입니다 !
| type?: LoadingViewType; | ||
| } | ||
|
|
||
| const LoadingView: FC<LoadingViewProps> = ({ type = 'spinner' }) => { |
There was a problem hiding this comment.
| const LoadingView: FC<LoadingViewProps> = ({ type = 'spinner' }) => { | |
| const LoadingView = ({ type = 'spinner' }: LoadingViewProps) => {} |
React.FC는 지양하는 게 좋아서 이렇게 작성하면 어떨까요?
요기 참고하면 좋을 것 같아요!
There was a problem hiding this comment.
우선 토픽 공유주셔서 감사해요 ! 알고 있던 토픽인데 현재는 해당하지 않는 이슈입니다.
DefinitelyTyped/DefinitelyTyped#56210
컨벤션 영역이라고 생각되어서 차주 회의에 얘기해보면 좋을것 같습니다.
There was a problem hiding this comment.
요약하면 React18부터는 children을 암묵적으로 가지지 않습니다.
| import LoadingView from '../Loading'; | ||
|
|
||
| interface AsyncBoundaryProps { | ||
| loading?: ReactNode; |
There was a problem hiding this comment.
<ErrorBoundary>
<Suspense fallback={}>{children}</Suspense>
</ErrorBoundary>사용되는 곳을 고려하면, loadingFallback 또는 fallback도 나쁘지 않은 것 같아요.
| @@ -0,0 +1,20 @@ | |||
| import { Suspense, type ReactNode, type PropsWithChildren } from 'react'; | |||
| import ErrorBoundary from './components/ErrorBoundary'; | |||
| import LoadingView from '../Loading'; | |||
There was a problem hiding this comment.
Loading과 LoadingView 중 하나로 통일하는 건 어떤가요?
There was a problem hiding this comment.
Loading은 폴더명으로 도메인적 맥락을 가져갑니다!
LoadingView는 로딩 상태에 대한 뷰 컴포넌트로 팩토리 역할을 하는 컴포넌트여서 다르게 명명했습니다.
혹시 통일하는게 더 명시적일까요 ??
wonjin-dev
force-pushed
the
feature/BAR-2
branch
from
e98a315
to
75417ec
Compare
wonjin-dev
force-pushed
the
feature/BAR-2
branch
from
a6a923a
to
0e1b74e
Compare
dmswl98
changed the title
dmswl98
changed the title
Summary
To Reviewers