[최영선] sprint9

[choi-youngsun]

요구사항

기본

• [x]
• []
• []

심화

• [x]
• []

주요 변경사항

스크린샷

멘토에게

• next브랜치로 체크아웃했다 다시 오는 과정에서 파일이 섞여서 next 관련 파일들이 같이 커밋된 것 같습니다..!
• 대부분의 파일 TS로 변환 완료했습니다!

[arthurkimdev]

이번주도 과제 제출하시느라 고생 많으셨습니다! 👍

[arthurkimdev]

영선님 이런 코드들은 Next.js에 의해 자동으로 생성된 빌드 결과물입니다. 이런 빌드 결과물은 일반적으로 Git에 포함시키지 않아요~
.gitignore 파일에 .next 을 추가해주세요.

[arthurkimdev]

1. 지금 현재 아래처럼 되어있는 파일에 아래처럼 한줄 추가해주시고

...
/node_modules
...
.next

2. 이미 .next 디렉토리가 git 커밋되어있으니, cache를 제거 후 제거된 내역을 다시 푸쉬해주시면 됩니다.

git rm -r --cached .next
git commit -m "Remove .next directory from Git"
그리고 push~

[arthurkimdev]

영선님 빌드도구(webpack) 이 ProductDetailPage 파일을 찾을 때 .ts, .tsx, .js, .jsx 순서로 찾으면서 시도하니 시스템에서 자동으로 .tsx 파일을 먼저 찾아 사용할거예요~ 그래서 별도로 지금처럼 .tsx를 작성해주지 않아도됩니다.

[arthurkimdev]

위 설명드린건 모듈 해석에 메커니즘입니다!

[arthurkimdev]

오호 제너릭 시도 좋습니다..! 👍

[arthurkimdev]

아래와 같은 방법도 있을 것 같아요!

import { AxiosError } from 'axios';

 catch (err) {
    if (axios.isAxiosError(err)) {
      // Axios 특정 에러 처리
      const axiosError = err as AxiosError;
      if (axiosError.response) {
        // 서버가 2xx 범위를 벗어나는 상태 코드로 응답한 경우
        setError(new Error(`Request failed with status code ${axiosError.response.status}`));
      } else if (axiosError.request) {
        // 요청이 이루어졌으나 응답을 받지 못한 경우
        setError(new Error('No response received from the server'));
      } else {
        // 요청 설정 중에 문제가 발생한 경우
        setError(new Error('Error setting up the request'));
      }
    } else {
      // Axios 에러가 아닌 경우
      setError(err instanceof Error ? err : new Error('An unknown error occurred'));
    }
  } finally {
    setLoading(false);
  }

[arthurkimdev]

tsconfig 설정 잘하셨습니다.
각각 어떤 의미가 있는지 공부해보면 좋겠어요. 🙂
컴파일 대상 파일들을 어떻게 변환할지 다양한 옵션들이 많거든요.

https://www.typescriptlang.org/tsconfig/

[arthurkimdev]

ChangeEvent 내부는 아래처럼 생겨서 HTMLInputElement | HTMLTextAreaElement 값이 T 제너릭 위치에 들어가게 되는 원리로 동작합니다.

interface ChangeEvent<T = Element> extends SyntheticEvent<T> {
    target: EventTarget & T;
}

[arthurkimdev]

그렇다면 아래처럼 동작이되는거겠죠!?

interface ChangeEvent< HTMLInputElement | HTMLTextAreaElement = Element> extends SyntheticEvent< HTMLInputElement | HTMLTextAreaElement > {
    target: EventTarget & HTMLInputElement | HTMLTextAreaElement;
}

[arthurkimdev]

SyntheticEvent 내부는 또 아래처럼 생겼을거구요! 이렇게 계속해서 타입을 쫒아가다보면 왜 동작하는지 이해할 수 있습니다.

interface SyntheticEvent<T = Element, E = Event> extends BaseSyntheticEvent<E, EventTarget & T, EventTarget> {}

interface BaseSyntheticEvent<E = object, C = any, T = any> {
    nativeEvent: E;
    currentTarget: C;
    target: T;
    bubbles: boolean;
    cancelable: boolean;
    defaultPrevented: boolean;
    eventPhase: number;
    isTrusted: boolean;
    preventDefault(): void;
    isDefaultPrevented(): boolean;
    stopPropagation(): void;
    isPropagationStopped(): boolean;
    persist(): void;
    timeStamp: number;
    type: string;
    ...
}

[arthurkimdev]

여기선 네이밍이 Props 가 아니라 ItemListProps가 되면 더 명시적이겠어요.