[김창희] sprint8

[changhui-chan]

주요 변경사항

• 리액트 기반으로 진행한 미션 코드의 타입스크립트화

스크린샷

interface FetchDataOptions {
  url: string;
  query?: Record<string, any>;
  method?: string;
  body?: any;
  headers?: Record<string, string>;
}

interface FetchDataResult {
  data: any;
  loading: boolean;
  error: any;
}

export const fetchData = async ({
  url,
  query = {},
  method = 'GET',
  body = null,
  headers = {}
}: FetchDataOptions): Promise<FetchDataResult> => {
  const queryString = new URLSearchParams(query).toString();
  let data: any = null;
  let error: any = null;
  let loading: boolean = true;

멘토에게

• type도 안썼고 interface도 React.FC<interface> 처럼 컴포넌트에 걸어줬는데 잘 쓴지도 모르겠습니다
• 작성하면서 에러 천국이라 바닐라 자바스크립트에서 진행한 미션 내용까지는 반영하지 못 했습니다
• 이전 코드 리뷰 내용은 반영하지 못 했습니다
• POSIX 표준을 조금씩 적용하려고 작성하면서 맨 끝 줄에 엔터를 넣었는데 그것 때문에 파일 체인지가 많아 보일 수 있습니다

[GANGYIKIM]

창희님 이번주차 미션 고생하셨습니다~
반복되는 사항의 경우 한번만 리뷰를 드렸으니 고치실때 다른 부분도 찾아보세요~

[GANGYIKIM]

P1:
any보다 더 적절한 타입을 쓰면 좋겠네요~

Suggested change

	body?: any;
	body?: BodyInit;

[GANGYIKIM]

P1:
query도 URLSearchParams의 값으로 넘기는 것이니 string[][] | Record<string, string>를 추천드립니다.

[GANGYIKIM]

P1:
이런경우 generic type을 이용해서 어떤 값이 응답값으로 내려오는지 알 수 있게 해주시는 것을 추천드립니다.

interface FetchDataResult<T> {
  data: T;
  ...
}

export const fetchData = async<T>({...}): Promise<FetchDataResult<T>> => {}

// 사용시
fetchData<UserInfo>()

https://www.typescriptlang.org/ko/docs/handbook/2/generics.html

[GANGYIKIM]

P2:
안쓰는 값인데 확인해보세요~

[GANGYIKIM]

P2:
AddProductProps라는 이름이 있으니 내부 속성들은 product를 빼는 것이 가독성에 더 좋을 것 같습니다.

Suggested change

	interface AddProductProps {
	productImage: string;
	productTitle: string;
	productDescription: string;
	productPrice: string;
	productTags: string[];
	}
	interface AddProductProps {
	image: string;
	title: string;
	description: string;
	price: string;
	tags: string[];
	}

[GANGYIKIM]

P3:
아래코드도 동일동작합니다.

Suggested change

	productImage: string | undefined;
	productImage?: string;

[GANGYIKIM]

P1:
commentData는 string[]이라고 선언하셨는데 comment는 string으로 선언하면 에러가 나는 이유가 뭘까요?
commnetData 가 string[]이 맞는지 확인해보시면 좋겠습니다.

[GANGYIKIM]

P3:
아래 코드도 동일 동작합니다~

Suggested change

	<hr style={{ marginTop: marginTop, marginBottom: marginBottom }} className={styles['line']} />
	<hr style={{ marginTop, marginBottom }} className={styles['line']} />

[GANGYIKIM]

P2:
가능하면 해당 파일의 any를 지워주세요 🥹🥹

[GANGYIKIM]

P1:
왜 여기서 as 가 필요할까요?
as 를 지우시고 에러가 안 나는 방향으로 코드를 변경하시는 것을 추천드릴께요~