Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[염정훈] Sprint8 #244

Conversation

dang-96
Copy link
Collaborator

@dang-96 dang-96 commented Aug 2, 2024

요구사항

  • Github에 PR(Pull Request)을 만들어서 미션을 제출합니다.
  • 피그마 디자인에 맞게 페이지를 만들어 주세요.
  • �Typescript를 사용합니다

기본

  • 스프린트 미션 1 ~ 7에 대해 typescript를 적용해주세요

주요 변경사항

  • 기존 코드에 typescript 적용했습니다.

멘토에게

  • 기존 코드에 타입을 어느 부분에 어떤식으로 적용을 해야할지 감이 잘 잡히지 않아서 일단 .ts와 .tsx로 확장자를 변경하여 에러가 나는 부분 위주로 타입을 지정해 봤습니다.
  • 코드 리뷰 전까지 가능한 만큼 타입 스크립트를 지정해 보겠습니다!

@dang-96 dang-96 requested a review from wlgns2223 August 2, 2024 12:59
@dang-96 dang-96 self-assigned this Aug 2, 2024
@dang-96 dang-96 added 매운맛🔥 뒤는 없습니다. 그냥 필터 없이 말해주세요. 책임은 제가 집니다. 미완성🫠 죄송합니다.. labels Aug 2, 2024
Comment on lines +9 to +11
"@types/jest": "^27.5.2",
"@types/react": "^18.3.3",
"@types/react-dom": "^18.3.0",
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@types 관련 의존성들은 devDependancy에 설치를 해주세요.
devDependency에 설치된 의존성 파일들은 최종 빌드시에 포함되지 않아 번들 사이즈가 줄어듭니다.

Comment on lines +3 to +8
interface FormData {
name: string;
info: string;
price: string;
tag: string;
}
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

👍

Comment on lines +22 to +30
interface Product {
id: number;
name: string;
info: string;
price: number;
tag: string;
images: string;
favoriteCount: number;
}
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

API 문서에 나와 있는 Product의 데이터 구조를 그대로 작성해주시는것이 좋을 것 같습니다.
아래의 구조를 따라서 Product의 데이터 타입을 완성해주세요.
특히 tag는 string 타입이 아니라 string의 배열타입이네요 ~

{
      "createdAt": "2024-08-05T08:25:27.138Z",
      "favoriteCount": 0,
      "ownerId": 1,
      "images": [
        "https://example.com/..."
      ],
      "tags": [
        "전자제품"
      ],
      "price": 0,
      "description": "string",
      "name": "상품 이름",
      "id": 1
    }

Comment on lines +19 to +27
interface Product {
id: number;
name: string;
info: string;
price: number;
tag: string;
images: string;
favoriteCount: number;
}
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

AllProduct에서 Product 타입을 정의를 했으니까 그 타입을 재사용해야합니다. AllProduct에서 정의한 타입을 가져와서 재사용해주세요.

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Writer, Product, Comment 꼼꼼한 타입지정 잘 하셨네요. UI를 구성하기 위한 객체는 왠만하면 다 타입지정을 해주시는게 좋습니다. 다만 Product타입은 다른 페이지에서 많이 사용되고 있으니 재사용을 해주세요.

Comment on lines +33 to +40
const [products, setProducts] = useState<Product[]>([]);
const [page, setPage] = useState<number>(1);
const [pageSize, setPageSize] = useState<number>(10);
const [order, setOrder] = useState<string>(RECENT);
const [dropArrow, setDropArrow] = useState<string>("");
const [dropDisplay, setDropDisplay] = useState<string>("none");
const [orderTxt, setOrderTxt] = useState<string>("최신순");
const [pagesNum, setPagesNum] = useState<number[]>([1, 2]);
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

useState에 상태들의 꼼꼼한 타입 명시 좋습니다 !!

@wlgns2223
Copy link
Collaborator

스프린트 미션 수고하셨습니다. 전반적으로 타입을 잘 만드셨고, 타입 재사용을 좀 더 적극적으로 하시면 될 것 같습니다 !

@wlgns2223 wlgns2223 merged commit 988a542 into codeit-bootcamp-frontend:React-염정훈 Aug 5, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
매운맛🔥 뒤는 없습니다. 그냥 필터 없이 말해주세요. 책임은 제가 집니다. 미완성🫠 죄송합니다..
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants