[유선향]-sprint8 #71

grimza99 · 2025-02-24T11:49:33Z

요구사항

기본

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

심화

any타입을 최소한으로 써주세요 -1개 사용 (이부분 주석으로남겨놨습니다)

주요 변경사항

이번에도 file changed가 많습니다... 하핫
global.d.ts 파일에 전역 타입과 주석으로 된 질문이 있습니다

멘토에게

global.d.ts 파일에 주석으로 질문 남겨놓았습니다!!

…for BtnHeart

kiJu2 · 2025-02-25T03:45:53Z

스프리트 미션 하시느라 수고 많으셨어요.
학습에 도움 되실 수 있게 꼼꼼히 리뷰 하도록 해보겠습니다. 😊

kiJu2 · 2025-02-25T04:02:09Z

global.d.ts 파일에 전역 타입과 주석으로 된 질문이 있습니다

넵넵 ! 확인해보겠습니다 !

kiJu2 · 2025-02-25T04:05:48Z

src/types/global.d.ts

+    tags: Tag[];
+    images: [string];
+    description: string;
+    [key: string]: any;


(질문에 대한 답변)혹시 [key: string]: any;를 지우는건 어떨까요?

Suggested change

[key: string]: any;

string| boolean| [string]|number로 하셔도 마찬가지입니다. 어떤 리소스가 어떤 타입인지 알 수가 없어지므로 타입스크립트를 쓰는 의미가 퇴색될 것 같아요.
해당 라인([key: string]: any;)을 지우시는게 좋을 것 같아요.

kiJu2 · 2025-02-25T04:08:59Z

src/pages/AddItem/AddItem.tsx

  price: 0,
  tags: [],
 };
 const REQUIRED_INPUT = ["name", "content", "tags", "price"];


(질문에 답변을 이어서) as const를 통하여 string이 아닌 유니온 타입으로 강제해볼게요.

Suggested change

const REQUIRED_INPUT = ["name", "content", "tags", "price"];

const REQUIRED_INPUT = ["name", "description", "tags", "price"] as const;

이렇게 하면 해당 타입은 readonly ["name", "description", "tags", "price"]이 됩니다.

그리고 content라고 작성주셨는데 코드 전문을 읽어보니 description이 맞는 것 같아서 임의로 수정하였습니다 😊

이렇게 진행하시면 에러가 나지 않을 거예요 ! 😊

(참고) git diff를 통한 수정사항:

@@ -14,7 +14,7 @@ const INITIAL_DATA: ProductForm = { price: 0, tags: [], }; -const REQUIRED_INPUT = ["name", "content", "tags", "price"]; +const REQUIRED_INPUT = ["name", "description", "tags", "price"] as const; // function AddItem() { const [tag, setTag] = useState<string>(""); diff --git a/src/types/global.d.ts b/src/types/global.d.ts index bfd0b61..c120cc4 100644 --- a/src/types/global.d.ts +++ b/src/types/global.d.ts @@ -16,7 +16,7 @@ declare global { tags: Tag[]; images: [string]; description: string; - [key: string]: any; + // [key: string]: any; //원래 any 부분에 string| boolean| [string]|number 를 적었었는데, //유니온 타입에 이터러블이 아닌 값이 섞여있어서 includes랑 스프레드가 안되더라고요... ㅠㅠ //인덱스 시그니쳐를 지우면 addItem 에서 에러가 나서 방법을 찾아보다가 도저히 모르겠어서 any 로 지정했습니다! (addItem에 에러 부분 주석 남겨놨습니다!)

kiJu2 · 2025-02-25T04:16:14Z

src/api/comment.api.tsx

+export async function getProductComments({ productId }: Params, limit = 3) {
  try {
    const res = await axios.get(
      `${BASE_URL}/products/${productId}/comments?limit=${limit}`
    );
    if (!res) {
      throw new Error("리뷰 불러오기 실패");
    }
-    return res.data;
+    const data: Comment[] = res.data.list;
+    return data;


다음과 같이 제네릭을 통해서 타입을 정의할 수 있어요 !

Suggested change

export async function getProductComments({ productId }: Params, limit = 3) {

try {

const res = await axios.get(

`${BASE_URL}/products/${productId}/comments?limit=${limit}`

);

if (!res) {

throw new Error("리뷰 불러오기 실패");

}

return res.data;

const data: Comment[] = res.data.list;

return data;

export async function getProductComments({ productId }: Params, limit = 3) {

try {

const res = await axios.get<Comment[]>( // <-- 여기요 !

`${BASE_URL}/products/${productId}/comments?limit=${limit}`

);

if (!res) {

throw new Error("리뷰 불러오기 실패");

}

const data = res.data.list;

return data;

kiJu2 · 2025-02-25T04:18:37Z

src/api/comment.api.tsx

    const res = await axios.get(
      `${BASE_URL}/products/${productId}/comments?limit=${limit}`
    );


또한 axios를 사용중이시라면 instnace를 생성하셔서 사용해보실 것을 권장드립니다 !

BASE_URL을 매번 입력하셔야 하며, 각기 다른 엔드포인트와 그에 따른 설정이 필요할 때에 유지보수가 어려울 수 있어요:

어떻게 세팅하면 될까? 🤔

instance를 만들어서 export를 하고 사용해보는 것 정도로 시도해보면 좋을 것 같아요. axios-instance 파일을 만들어서 instance를 생성하고 export한 후 사용해보는건 어떨까요?
다음과 같이 만들어볼 수 있어요:

const baseURL = process.env.NEXT_PUBLIC_LINKBRARY_BaseURL; const instance = axios.create({ baseURL: baseURL, headers: { 'Content-Type': 'application/json', }, }); export default instance

axios instance

인가에 필요한 accessToken을 localStorage가 있다면 axios의 인터셉터를 활용할 수 있습니다 !

인터셉터는 혼자 해결해보시는 것을 권장드립니다. 혹시 모르시겠으면 다음 위클리 미션에 질문해주세요. 😊

사용 방법 🚀

사용 방법은 정말 간단해요. 다음과 같이 사용할 수 있습니다:

instance.get(`/user/${userId}`)

딱 보니. 마이그레이션도 정말 쉽게 할 수 있겠죠? 😊

axios API

kiJu2 · 2025-02-25T04:20:04Z

src/api/product.api.tsx

+  const order = selectedOrder === "최신순" ? "recent" : "favorite";
+  const pageSize = device === "mobile" ? 4 : device === "tablet" ? 6 : 10;
+  const query = `?orderBy=${order}&page=${page}&pageSize=${pageSize}`;


쿼리는 URLSearchParams로 손쉽게 사용할 수 있어요 !

Suggested change

const order = selectedOrder === "최신순" ? "recent" : "favorite";

const pageSize = device === "mobile" ? 4 : device === "tablet" ? 6 : 10;

const query = `?orderBy=${order}&page=${page}&pageSize=${pageSize}`;

const order = selectedOrder === "최신순" ? "recent" : "favorite";

const pageSize = device === "mobile" ? 4 : device === "tablet" ? 6 : 10;

const query = new URLSearchParams({order, page, pageSize}).toString();

URLSearchParams와 함께 객체로 손쉽게 핸들링할 수 있습니다 !
객체로 구성할 수 있어 가독성이 좋고, URL 인코딩을 자동으로 처리하여 특수 문자나 공백이 포함된 값에서도 안전하게 동작합니다 !

URLSearchParams: URLSearchParams 인터페이스는 URL의 쿼리 문자열을 대상으로 작업할 수 있는 유틸리티 메서드를 정의합니다.

쿼리를 생성하실 때에 참고해서 사용해보세요 😊

kiJu2 · 2025-02-25T04:21:22Z

src/components/CommentCard/CommentCard.tsx

+  const [EditingId, setEditingId] = useState<number>(0);
+  const [DeleteId, setDeleteId] = useState<number>(0);


(선택/의견) 초기 값이 넘버일 경우 자연스레 number 타입으로 추론됩니다 😊

Suggested change

const [EditingId, setEditingId] = useState<number>(0);

const [DeleteId, setDeleteId] = useState<number>(0);

const [EditingId, setEditingId] = useState(0);

const [DeleteId, setDeleteId] = useState(0);

kiJu2 · 2025-02-25T04:21:50Z

src/components/CommentCard/CommentCard.tsx

+interface Props {
+  data: Comment;
+}
+export default function CommentCard({ data }: Props) {


굿굿 ~ props의 타입을 잘 설정하셨군요 👍

kiJu2 · 2025-02-25T04:24:06Z

src/components/ItemsList/ItemsList.tsx

+interface Prop {
+  value: string;
+  items: Item[];
+}
+interface ListItemProps {
+  value: string;
+  item: Item;
+}
+function ListItem({ value, item }: ListItemProps) {
+  const navigate = useNavigate();
+  const device = useWindowSize();
+  return (
+    <S.Item onClick={() => navigate(`./${item.id}`)}>
+      <S.ProductImg
+        value={value}
+        $device={device}
+        src={item.images[0]}
+        alt="이미지"
+      />
+      <S.FlexContent>
+        <S.Title>{item.name}</S.Title>
+        <S.Price>{item.price} 원</S.Price>
+        <BtnHeart $items value={item.favoriteCount} />
+      </S.FlexContent>
+    </S.Item>
+  );
+}
+//
+export default function ItemsList({ value, items, ...props }: Prop) {


(제안/주관적 의견) 관련된 타입은 사용될 코드와 가까이 두는게 어떨까요?

Suggested change

interface Prop {

value: string;

items: Item[];

}

interface ListItemProps {

value: string;

item: Item;

}

function ListItem({ value, item }: ListItemProps) {

const navigate = useNavigate();

const device = useWindowSize();

return (

<S.Item onClick={() => navigate(`./${item.id}`)}>

<S.ProductImg

value={value}

$device={device}

src={item.images[0]}

alt="이미지"

/>

<S.FlexContent>

<S.Title>{item.name}</S.Title>

<S.Price>{item.price} 원</S.Price>

<BtnHeart $items value={item.favoriteCount} />

</S.FlexContent>

</S.Item>

);

}

//

export default function ItemsList({ value, items, ...props }: Prop) {

interface ListItemProps {

value: string;

item: Item;

}

function ListItem({ value, item }: ListItemProps) {

const navigate = useNavigate();

const device = useWindowSize();

return (

<S.Item onClick={() => navigate(`./${item.id}`)}>

<S.ProductImg

value={value}

$device={device}

src={item.images[0]}

alt="이미지"

/>

<S.FlexContent>

<S.Title>{item.name}</S.Title>

<S.Price>{item.price} 원</S.Price>

<BtnHeart $items value={item.favoriteCount} />

</S.FlexContent>

</S.Item>

);

}

//

interface ItemsListProps {

value: string;

items: Item[];

}

export default function ItemsList({ value, items, ...props }: ItemsListProps) {

기존 Props이라는 타입은 ItemsList의 props에만 사용되는 것 같아요. 관련된 컴포넌트 바로 위에 선언하여 가독성을 좋게하고, 해당 코드에는 두 props 타입이 존재하므로 이름을 명확히하는게 어떨까 제안드립니다 !

kiJu2 · 2025-02-25T04:24:53Z

src/components/PageNation/pageCount.tsx

+type PageCountProps = Omit<Props, "onClick"> & {
+  onClick: (btn: number) => void;
+};


유틸리티 타입을 정말 잘 활용하시네욤 ㄷㄷㄷ 👍

kiJu2 · 2025-02-25T04:30:14Z

src/components/common/Button/Button.tsx

+interface Props extends S.ButtonProps {
+  onClick: onClick;
+  children: ReactNode;
+  disabled?: boolean;
+}
+export default function Button({ onClick, children, ...props }: Props) {
+  return (
+    <>
+      <S.Button onClick={onClick} {...props}>
+        {children}
+      </S.Button>
+    </>
+  );
+}


(제안) React에서 이미 선언된 기본 HTML 타입을 사용해보실 수도 있어요. 😉

Suggested change

interface Props extends S.ButtonProps {

onClick: onClick;

children: ReactNode;

disabled?: boolean;

}

export default function Button({ onClick, children, ...props }: Props) {

return (

<>

<S.Button onClick={onClick} {...props}>

{children}

</S.Button>

</>

);

}

import * as S from "./Button.style";

import { ButtonHTMLAttributes } from "react";

interface Props extends ButtonHTMLAttributes<HTMLButtonElement> {

children: React.ReactNode;

}

export default function Button({ children, ...props }: Props) {

return (

<>

<S.Button {...props}>{children}</S.Button>

</>

);

}

만약 html 버튼에 있는 type, onBlur, clssName 등이 필요하게 button.tsx를 새로운 props가 필요할 때 마다 지속적으로 수정해야 될거예요. 만약 협업중이었다면 공통 컴포넌트이니 만큼 다른 개발자들도 사용하고 있으므로 충돌이 날 수도 있지요 !

기존 onClick을 지웠어요. 전달 역할만 수행하며 별도의 추가 로직이 없기에 ...props 내에 onClcik이 전달될거예요 😊

kiJu2 · 2025-02-25T04:31:56Z

크으... 정말 빠릅니다 선향님.
과제 달성률 1등이십니다 🏃‍♀️🏃‍♀️🏃‍♀️
질문에 대한 답변 남겼으니 확인해보세요 😉😉

타입 스크립트도 멋지게 해내셨군요. 특히 유틸리티 타입을 사용하시는 것 보면 배우신 것들을 정말 요목조목 잘 사용하시는 것 같아요.
훌륭합니다. ㅎㅎㅎ 미션 수행하시느라 고생 많으셨습니다 선향님.

추가로 declare 파일을 활용하여 앱의 전반에서 사용되는 리소스들을 글로벌 타입으로 정의하신 점 흥미롭네요 😊😊

nerte added 30 commits February 19, 2025 04:59

[Refactor] ItemsList style 분리

8d73d8c

[Chore] ItemsList 폴더 이동, HomePage->ItemsPage로 이름변경

409ee54

[Chore] globalstyles 분리

78c3078

[Refactor] ItemsPage mobile 반응형 수정

86e69a5

[Style] 이전 작업 style.jsx font 적용

930dba9

[Refactor] edit heartBtn

addb51f

[Refactor]edit pageCount

fecbd64

[Style]ItemList style edit

f8d651c

[Chore]i typescript and edit tsconfig.json options

b87b91b

[Chore] i types/styled-compoenents

46d3ce6

[Types] add declaration file for SVG imports and select componenet type

1cb5a08

[Type] button componente type

167dcc0

[Type] input component type

212edd8

[Type] BtnHeart type

a04e631

[Type] Convert JSX to TSX and add type for AddItem

3210bd4

[Type]Convert JSX to TSX and add type for Tag

9dac8e0

[Type] edit type AddItem and Tag

8f838ca

[Type]Convert JSX to TSX ItemsList and ItemsList.style and edit type …

b960234

…for BtnHeart

[Type] add type for ItemsPage and ItemsPage.style

7bb8e24

[Type]Convert JSX to TSX CommentCard , Comment, Product

3f77bf3

[Type] add type for Comments

ef38e4e

[Type] add type for Product

a1639f6

[Type] add type for CommentCard

3731caa

[Type]Convert JSX to TSX ProductInfo

5fdcc0e

[Chore] global.d.ts created

0c34f84

[Type] global.d.ts에 타입이랑 interface 싹다 모음

a8fd50d

[Type] create global type Params and ProductInfo

8186da1

[Type] add type for pageCount

c5fea26

[Type] create Item type with Omit

de53246

[Type] Comment interface 전역 타입 설정

6352933

nerte added 8 commits February 24, 2025 18:32

[Type] onClick type 생성

d0b343e

[Refactor] fetch ->axios

7e56e15

[Type] product.api interface

a4011fe

[Chore] 단순 오타 에러 수정

3ee9850

[Chore] type items -> item 으로 이름 변경

6dc1fab

[Chore] 잘 모르겠는 부분 주석 남김

b4c2a29

[Chore] npm run start 에러 경로문제 수정

b562007

[Fix] 개발 환경 실행시 이벤트 핸들러 동작 오류 수정

cd7f584

grimza99 self-assigned this Feb 24, 2025

grimza99 added the 매운맛🔥 뒤는 없습니다. 그냥 필터 없이 말해주세요. 책임은 제가 집니다. label Feb 24, 2025

kiJu2 approved these changes Feb 25, 2025

View reviewed changes

kiJu2 merged commit 51dd3c4 into codeit-bootcamp-frontend:React-유선향 Feb 25, 2025

	const REQUIRED_INPUT = ["name", "content", "tags", "price"];
	const REQUIRED_INPUT = ["name", "description", "tags", "price"] as const;

		const [EditingId, setEditingId] = useState<number>(0);
		const [DeleteId, setDeleteId] = useState<number>(0);

[유선향]-sprint8 #71

[유선향]-sprint8 #71

Uh oh!

Conversation

grimza99 commented Feb 24, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

요구사항

기본

심화

주요 변경사항

멘토에게

Uh oh!

kiJu2 commented Feb 25, 2025

Uh oh!

kiJu2 commented Feb 25, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

global.d.ts 파일에 전역 타입과 주석으로 된 질문이 있습니다

Uh oh!

Choose a reason for hiding this comment

(질문에 대한 답변)혹시 [key: string]: any;를 지우는건 어떨까요?

Uh oh!

Choose a reason for hiding this comment

(질문에 답변을 이어서) as const를 통하여 string이 아닌 유니온 타입으로 강제해볼게요.

Uh oh!

Choose a reason for hiding this comment

(참고) git diff를 통한 수정사항:

Uh oh!

Choose a reason for hiding this comment

다음과 같이 제네릭을 통해서 타입을 정의할 수 있어요 !

Uh oh!

Choose a reason for hiding this comment

또한 axios를 사용중이시라면 instnace를 생성하셔서 사용해보실 것을 권장드립니다 !

어떻게 세팅하면 될까? 🤔

사용 방법 🚀

Uh oh!

Choose a reason for hiding this comment

쿼리는 URLSearchParams로 손쉽게 사용할 수 있어요 !

Uh oh!

Choose a reason for hiding this comment

(선택/의견) 초기 값이 넘버일 경우 자연스레 number 타입으로 추론됩니다 😊

Uh oh!

Choose a reason for hiding this comment

굿굿 ~ props의 타입을 잘 설정하셨군요 👍

Uh oh!

Choose a reason for hiding this comment

(제안/주관적 의견) 관련된 타입은 사용될 코드와 가까이 두는게 어떨까요?

Uh oh!

Choose a reason for hiding this comment

유틸리티 타입을 정말 잘 활용하시네욤 ㄷㄷㄷ 👍

Uh oh!

Choose a reason for hiding this comment

(제안) React에서 이미 선언된 기본 HTML 타입을 사용해보실 수도 있어요. 😉

Uh oh!

kiJu2 commented Feb 25, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

grimza99 commented Feb 24, 2025 •

edited

Loading

kiJu2 commented Feb 25, 2025 •

edited

Loading

(질문에 대한 답변)혹시 `[key: string]: any;`를 지우는건 어떨까요?

(질문에 답변을 이어서) `as const`를 통하여 `string`이 아닌 유니온 타입으로 강제해볼게요.

(참고) `git diff`를 통한 수정사항:

또한 `axios`를 사용중이시라면 `instnace`를 생성하셔서 사용해보실 것을 권장드립니다 !

쿼리는 `URLSearchParams`로 손쉽게 사용할 수 있어요 !

(선택/의견) 초기 값이 넘버일 경우 자연스레 `number` 타입으로 추론됩니다 😊

굿굿 ~ `props`의 타입을 잘 설정하셨군요 👍

kiJu2 commented Feb 25, 2025 •

edited

Loading