Conversation
| if (loading || error || !data) { | ||
| // 로딩 중 ui | ||
| return; | ||
| } | ||
| return data; |
There was a problem hiding this comment.
data, loading, error를 함께 반환하고, UI 노출 여부 등은 useGetData를 호출하는 컴포넌트에서 결정하는건 어떨까요?
const useGetData = (url) => {
const { loading, error, data } = useAsync(url);
return { loading, error, data };
};| @@ -0,0 +1,5 @@ | |||
| const getFormatDate = (date) => { | |||
There was a problem hiding this comment.
입력과 출력이 비교적 명확/간단한 getFormatDate 같은 함수부터 타입스크립트를 적용해보는 것도 좋을 것 같습니다!
| }; | ||
|
|
||
| useEffect(() => { | ||
| if (links) { |
There was a problem hiding this comment.
조건을 만족하지 않을 때 빠르게 return하고 그 이후에 로직을 실행하는 방식으로 진행해보면 어떨까요?
if (links) {
return;
}
// 기존 코드 실행
...이렇게 조건이 충족되지 않을 때 빠르게 함수를 종료시키는 방식을 얼리 리턴이라고 하는데요, 중첩 단계를 줄이고 주요 로직에 집중할 수 있도록 도움을 주는 경우가 많습니다.
(참고: https://mkseo.pe.kr/blog/?p=2631&cpage=1)
| const { data: folders }: any = useGetData("users/1/folders") || {}; | ||
| const [selectedFolderId, setSelectedFolderId] = useState<string>(""); | ||
| const { data: folderDatas }: any = |
There was a problem hiding this comment.
folders와 folderDatas 두 변수 명을 아래와 같이 변경하면 각 변수가 어떤 데이터를 담고 있는지 조금 더 명확하고 구체적으로 나타낼 수 있을 것 같습니다.
const { data: folders }: any = useGetData("users/1/folders") || {};
const { data: folderLinks }: any = useGetData(`users/1/links?folderId=${selectedFolderId}`) || {};|
|
||
| const SharedPage = () => { | ||
| const { folder }: any = useGetData("sample/folder") || {}; | ||
| const { links } = folder || []; |
There was a problem hiding this comment.
예외 상황에 대한 처리를 꼼꼼하게 잘 해주셨네요!
| const cx = classNames.bind(styles); | ||
|
|
||
| const Profile = () => { | ||
| const { email, profileImageSource }: any = useGetData("sample/user") || {}; |
There was a problem hiding this comment.
user 데이터는 데이터 구조가 비교적 간단하네요!
이렇게 간단한 구조를 가진 api 응답들부터 타입을 작성해보면 좋을 것 같습니다.
{
"id": 1,
"name": "코드잇",
"email": "[email protected]",
"profileImageSource": "https://codeit-front.s3.ap-northeast-2.amazonaws.com/images/default_profile.png"
}| images: { | ||
| domains: [ | ||
| "codeit-front.s3.ap-northeast-2.amazonaws.com", | ||
| "codeit-images.codeit.com", | ||
| ], | ||
| } |
There was a problem hiding this comment.
Next.js에서는 Image 컴포넌트를 통해 이미지 최적화 기능을 제공합니다.
이 Image 컴포넌트를 통해 서빙하기 위한 이미지의 도메인은 모두 작성해주신 설정 파일 내 domains 목록에 포함되어야 합니다.
모든 도메인을 허용하는 방법이 있기는 한데요, 보안 상의 이유로 권장되는 방법은 아닙니다.
| <FolderToolBar | ||
| foldersData={folders} | ||
| selectedFolderId={selectedFolderId} | ||
| onFolderClick={(id: string) => setSelectedFolderId(id)} |
There was a problem hiding this comment.
onFolderClick도 다른 prop들과 같은 방식으로 전달 가능하겠네요!
onFolderClick={setSelectedFolderId}| const cx = classNames.bind(styles); | ||
|
|
||
| type AddFolderButtonProps = { | ||
| onClick: MouseEventHandler<HTMLButtonElement>; |
There was a problem hiding this comment.
이벤트 핸들러의 타입을 잘 정의해주셨네요!
MouseEventHandler, HTMLButtonElement같은 내장 타입들의 선언을 살펴보시는 것도 타입 시스템을 이해하는 데 도움이 될 것 같습니다.
VS Code 기준, 키워드(ex. MouseEventHandler)를 마우스 우클릭하면 해당 타입이 어떻게 선언되어 있는지 확인할 수 있습니다.
요구사항
기본
주요 변경사항
멘토에게