[김희진] sprint8 #111

devmanta · 2024-10-19T12:19:47Z

요구사항

기본

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

심화

any타입을 최소한으로 써주세요

devmanta · 2024-10-19T12:25:11Z

src/components/item/AddFileInputBar.tsx

+  const [preview, setPreview] = useState<string | null>(null);
+  const [error, setError] = useState<string | null>(null);
+  const inputRef = useRef<HTMLInputElement | null>(null);


초기값을 Null로 하고싶으면 이렇게 계속 | null 해줘야하는거 맞나요..?

넵 만약 File | undefined와 같은 경우라면 file?: File처럼 작성하셔도 되지만 null이라면 따로 유틸리티 타입을 만드시거나 File | null 이렇게 작성해주셔야 합니다~

devmanta · 2024-10-19T12:27:35Z

src/components/item/TagCard.tsx

  const handleOnClick = () => {
-    if (onDelete) onDelete(index);
+    if (onDelete && index !== undefined) {


index에 undefined 체크 안하면 오류나서 넣긴했는데 더 좋은방법 있을까요?

onDelete 함수의 인자값인 index가 필수값이라 빈값인지 확인을 해줘야 합니다~
다른 방식으로 작성하시고 싶으시면 아래처럼 작성할 수 있습니다.

const handleOnClick = () => { if (onDelete && index) { onDelete(index); } };

const handleOnClick = () => { if (!index) return; onDelete?.(index); };

다만 타입을 명시하니 의문이 하나 생기네요~
tagCard에 index가 없는 경우가 있을까요?
index를 필수값으로 변경하시는 것이 더 옳은 방향이 아닐까 생각이 듭니다~

devmanta · 2024-10-19T15:51:08Z

src/services/itemApi.ts

+  const queryParams = new URLSearchParams({
+    page: page.toString(),
+    pageSize: pageSize.toString(),
+    orderBy,
+  });


이부분은 이렇게 해야지 오류가 없어지긴 하던데..
이렇게 하는게 아닌것같은 느낌입니다.
혹시 다른 방법이 있을까요?

어떤 이유로 그렇게 생각하셨을까요?
URLSearchParams의 인자의 경우 string 의 형태로 넘겨줘야 하기에 page, pageSize 같은 number 값들은 변환을 해주어야 합니다~

package.json

GANGYIKIM

희진님 이번 스프린트 미션 고생하셨습니다~

GANGYIKIM · 2024-10-21T05:22:07Z

src/components/InputBar.tsx

+  type?: string;
+  label?: string;
+  inputId?: string;
+  name: string;


P2:
가능하면 필수값을 위에 두시는 것을 추천드립니다.

interface InputBarProps { name: string; type?: string; label?: string; inputId?: string; value?: string; placeholder?: string; disabled?: boolean; onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void; onKeyDown?: (event: React.KeyboardEvent<HTMLInputElement>) => void; }

GANGYIKIM · 2024-10-21T05:25:41Z

src/components/InputBar.tsx

  return (
    <section className="InputBar">
      {label && (
-        <label htmlFor={inputId} className="InputBar-label">
+        <label htmlFor={inputId || id} className="InputBar-label">


P1:
하단의 input도 inputId가 없을 시 id 값을 가지도록 변경해주세요~

GANGYIKIM · 2024-10-21T05:26:23Z

src/components/InputBar.tsx

  const eventProps = {
    ...(onKeyDown && { onKeyDown }),
    ...(onChange && { onChange }),
  };

+  const id = uuidv4();


P3:
react의 useId 훅을 사용하셔도 됩니다.

https://ko.react.dev/reference/react/useId

GANGYIKIM · 2024-10-21T05:41:27Z

src/services/itemApi.ts

+  const queryParams = new URLSearchParams({
+    page: page.toString(),
+    pageSize: pageSize.toString(),
+    orderBy,
+  });


어떤 이유로 그렇게 생각하셨을까요?
URLSearchParams의 인자의 경우 string 의 형태로 넘겨줘야 하기에 page, pageSize 같은 number 값들은 변환을 해주어야 합니다~

GANGYIKIM · 2024-10-21T05:45:31Z

src/components/item/pagination/PaginationButton.tsx

+interface PaginationButtonProps {
+  onClick?(event: React.MouseEvent<HTMLButtonElement>): void;
+  disabled?: boolean;
+  isActive?: boolean;
+  ariaCurrent?: 'page' | 'step' | undefined;
+  children: React.ReactNode;
+}
+function PaginationButton({
+  onClick,
+  disabled,
+  isActive,
+  ariaCurrent,
+  children,
+}: PaginationButtonProps) {


P3:
아래처럼도 가능합니다.
잘 정리된 글이 있어서 공유드립니다. 다만 아래처럼 작성하게 되면 children 속성은 optional이라는 것을 유의해야 합니다.

interface PaginationButtonProps { onClick?(event: React.MouseEvent<HTMLButtonElement>): void; disabled?: boolean; isActive?: boolean; ariaCurrent?: 'page' | 'step'; // ? 마크가 있으므로 undefined를 명시할 필요가 없습니다. } function PaginationButton({ onClick, disabled, isActive, ariaCurrent, children, }: PropsWithChildren<PaginationButtonProps>) {

https://www.frontoverflow.com/question/11/React%20+%20TypeScript%EC%9D%98%20PropsWithChildren

GANGYIKIM · 2024-10-21T05:58:31Z

src/components/item/Item.tsx

+interface ItemProps
+  extends Pick<Product, 'id' | 'images' | 'name' | 'price' | 'favoriteCount'> {
+  imgSize: 'small' | 'large';
+}


P3:
👍
다만 id, images, name, price, favoriteCount가 하나로 묶을 수 있다면 아래처럼 작성하셔도 좋을 것 같으니 참고해주세요~

export interface ProductBaseProps { id: number; images: string[]; name: string; price: number; favoriteCount: number; } export interface Product extends ProductBaseProps { ... }

GANGYIKIM · 2024-10-21T06:03:32Z

src/components/item/Comment.tsx

+interface CommentProps
+  extends Pick<CommentData, 'id' | 'content' | 'createdAt' | 'writer'> {}


P2:
Commnet에서 updateAt을 제외한 나머지가 필요하니 아래처럼 하셔도 좋을 것 같습니다.

Suggested change

interface CommentProps

extends Pick<CommentData, 'id' | 'content' | 'createdAt' | 'writer'> {}

interface CommentProps

extends Omit<CommentData, 'updatedAt'> {}

GANGYIKIM · 2024-10-21T06:49:26Z

src/components/item/AddFileInputBar.tsx

+  const [preview, setPreview] = useState<string | null>(null);
+  const [error, setError] = useState<string | null>(null);
+  const inputRef = useRef<HTMLInputElement | null>(null);


넵 만약 File | undefined와 같은 경우라면 file?: File처럼 작성하셔도 되지만 null이라면 따로 유틸리티 타입을 만드시거나 File | null 이렇게 작성해주셔야 합니다~

GANGYIKIM · 2024-10-21T06:52:18Z

src/components/Textarea.tsx

+interface TextareaProps {
+  label?: string;
+  inputId?: string;
+  name: string;
+  value: string;
+  placeholder?: string;
+  onChange?: (event: React.ChangeEvent<HTMLTextAreaElement>) => void;
+  disabled?: boolean;
+  heightSize?: string;
+}
+


P2:
textarea의 속성과 input의 속성 중에 공유하는 것들이 많아 이를 고려해서 타입을 선언하셔도 좋을 것 같습니다.

GANGYIKIM · 2024-10-21T06:54:14Z

src/components/PrimaryRoundButton.tsx

+interface PrimaryRoundButtonProps {
+  children: React.ReactNode;
+  type?: 'button' | 'submit' | 'reset';
+  onClick?(event?: React.MouseEvent<HTMLButtonElement>): void;
+  disabled?: boolean;
+}


P1:
아래처럼 작성하시면 더 간결하고 의도가 보일 것 같습니다.

interface PrimaryButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> { text: string; }```

그리고 button끼리 공통 타입도 만들어서 공유하면 좋겠습니다~

devmanta added 13 commits October 19, 2024 17:56

refactor: Code Review

7cd2a94

feat: Add Typescripts

ada7b77

fix: tsconfig

a0cb65e

feat: Add itemApi typescripts

9e18ea9

feat: Add typescrips on js files

e340fd3

feat: Add typescripts on common components

90de1e7

feat: Add typescripts on item

1420bf1

feat: Add typescript on ItemForm

e39f658

feat: Add typescripts on pagination components

031a07d

feat: Add typescripts on AllItems

9899a3a

feat: Add typescrips on BestItems

70394e6

feat: Add typescripts on page components

14c37b0

feat: App to tsx

f5f4e85

devmanta requested a review from GANGYIKIM October 19, 2024 12:20

devmanta self-assigned this Oct 19, 2024

devmanta added the 매운맛🔥 뒤는 없습니다. 그냥 필터 없이 말해주세요. 책임은 제가 집니다. label Oct 19, 2024

devmanta commented Oct 19, 2024

View reviewed changes

package.json Show resolved Hide resolved

GANGYIKIM approved these changes Oct 21, 2024

View reviewed changes

GANGYIKIM merged commit 1d3ae61 into codeit-bootcamp-frontend:React-김희진 Oct 21, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[김희진] sprint8 #111

[김희진] sprint8 #111

devmanta commented Oct 19, 2024

devmanta Oct 19, 2024

GANGYIKIM Oct 21, 2024

devmanta Oct 19, 2024

GANGYIKIM Oct 21, 2024

GANGYIKIM Oct 21, 2024

devmanta Oct 19, 2024

GANGYIKIM Oct 21, 2024

GANGYIKIM left a comment

GANGYIKIM Oct 21, 2024

GANGYIKIM Oct 21, 2024

GANGYIKIM Oct 21, 2024

GANGYIKIM Oct 21, 2024

GANGYIKIM Oct 21, 2024

GANGYIKIM Oct 21, 2024

GANGYIKIM Oct 21, 2024

GANGYIKIM Oct 21, 2024

GANGYIKIM Oct 21, 2024

GANGYIKIM Oct 21, 2024

GANGYIKIM Oct 21, 2024

		interface CommentProps
		extends Pick<CommentData, 'id' \| 'content' \| 'createdAt' \| 'writer'> {}

[김희진] sprint8 #111

[김희진] sprint8 #111

Conversation

devmanta commented Oct 19, 2024

요구사항

기본

심화

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

GANGYIKIM left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment