[우재현] Sprint8 #269

Woolegend · 2024-11-16T20:19:20Z

요구사항

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

기본

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

심화

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

멘토에게

상품 등록 페이지에서 등록된 이미지를 삭제할 때 오류가 발생합니다. 기능적인 문제는 없지만 해결이 되는 대로 push하겠습니다.
셀프 코드 리뷰를 통해 질문 이어가겠습니다.

변경사항 - Item컴포넌트에서 ListItem으로 파일명 변경 - TS로 마이그레이션

kiJu2 · 2024-11-18T09:04:43Z

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

kiJu2 · 2024-11-18T09:06:40Z

.gitignore

+<<<<<<< HEAD
+=======
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+>>>>>>> cde515c40685c7ea849fcafc91354005f21c13fd


컨플릭트 해결 중 누락된 건이 있는 것 같아요 !

kiJu2 · 2024-11-18T09:06:46Z

.gitignore

+<<<<<<< HEAD
+# End of https://www.toptal.com/developers/gitignore/api/react,nextjs,sass
+=======
+# End of https://www.toptal.com/developers/gitignore/api/react,nextjs,sass
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+>>>>>>> cde515c40685c7ea849fcafc91354005f21c13fd


컨플릭트 해결 중 누락된 건이 있는 것 같아요 !

kiJu2 · 2024-11-18T09:07:37Z

src/api.ts

+  page: number = 1,
+  pageSize: number = 12,
+  orderBy: string = "recent",
+  keyword: string | undefined = undefined


다음과 같이 옵셔널 프로퍼티로 작성할 수 있습니다 ! 😊

Suggested change

keyword: string | undefined = undefined

keyword?: string = undefined

kiJu2 · 2024-11-18T09:18:41Z

src/api.ts

+export async function getProductList(
+  page: number = 1,
+  pageSize: number = 12,
+  orderBy: string = "recent",


타입 범위를 좁힐 수 있을 것 같아요 ! 😊

Suggested change

orderBy: string = "recent",

orderBy: "recent" | "liked" = "recent",

kiJu2 · 2024-11-18T09:18:56Z

src/api.ts

+
+const BASE_URL = process.env.REACT_APP_API_BASE_URL;
+
+export async function getProductList(


기본값 세팅도 정말 잘 되어있네요 ㅎㅎㅎ 👍

kiJu2 · 2024-11-18T09:21:35Z

src/components/CommentForm/CommentForm.tsx

-  const handleFeatureClick = (e) => {
-    if (e.target.classList.contains("feature")) {
-      setSelectedComment(e.currentTarget.dataset.id);
+  const [comments, setComments] = useState<CommentList | undefined>();


기본값이 빈 값으로 되어 있다면 자동으로 undefined이 추론됩니다 !

Suggested change

const [comments, setComments] = useState<CommentList | undefined>();

const [comments, setComments] = useState<CommentList>();

kiJu2 · 2024-11-18T09:22:53Z

src/components/CommentForm/CommentForm.tsx

+  const [selectedComment, setSelectedComment] = useState<string | null>(null);
+  const [isEditing, setIsEditing] = useState<string | null>(null);
+  const selectRef = useRef<HTMLUListElement | null>(null);


굳굳 ! null을 고려한 타입을 잘 설정하셨군요 ㅎㅎㅎ 👍

Suggested change

const [selectedComment, setSelectedComment] = useState<string | null>(null);

const [isEditing, setIsEditing] = useState<string | null>(null);

const selectRef = useRef<HTMLUListElement | null>(null);

const [selectedComment, setSelectedComment] = useState<string>(null);

const [isEditing, setIsEditing] = useState<string>(null);

const selectRef = useRef<HTMLUListElement | null>(null);

kiJu2 · 2024-11-18T09:23:06Z

src/components/CommentForm/CommentForm.tsx

+      alert(
+        `test : comment id ${event.currentTarget.dataset.id} 삭제 되었습니다`
+      );


사용자 알림도 너무 좋아요 ㅎㅎㅎ

kiJu2 · 2024-11-18T09:24:37Z

src/components/CommentForm/CommentForm.tsx

+  isSelected: any;
+  onClick: any;
+  onSelect: any;


다음 미션 때에는 다음과 유사하게 정의되도록 해봅시다 !

Suggested change

isSelected: any;

onClick: any;

onSelect: any;

isSelected: boolean;

onClick: (selectedId) => void;

onSelect: (selectedId) => void;

위에 작성된 코드는 검증되지 않은 타입입니다 ! 한번 확인해봐주세요 ㅎㅎㅎ 관건은 any를 쓰지 말자 ! 로 보시면 될 것같아요.

아마도, 어떤 원인이 있어서 일단은 any로 두신 것 같아요 ! 차근차근 지워봅시다 !

kiJu2 · 2024-11-18T09:25:26Z

src/contexts/DeviceTypeContext.tsx

 import useDebounce from "../hooks/useDebounce";

-const DeviceTypeContext = createContext();
+export type DeviceType = "desktop" | "tablet" | "mobile";


유니온 타입을 적절하게 설정하셨군요 ! 훌륭합니다 ㅎㅎㅎ

kiJu2 · 2024-11-18T09:27:07Z

수고 많으셨습니다 재현님 !
열심히 개발에 몰입하시고, 학습에 대한 의욕. 원활한 커뮤니케이션과 객관적인 시각을 갖추셨어요.
리스펙 드리며, 분명 빠른 시일 내에 멋진 개발자가 되실거라고 생각합니다 ㅎㅎ

그 간 정말 고생 많으셨고 앞으로도 승승장구하시길 진심으로 기원합니다 ! 🙇‍♂️🙇‍♂️

Woolegend · 2024-11-18T09:46:52Z

조건 분기를 통해 여러 경우를 한 번에 처리하는 함수가 많습니다.

AddItemPage.tsx에 있는 handleChange, handleDelete가 이에 해당됩니다.

나름 잘 만든 함수라고 생각했었는데 TS로 마이그레이션 해보니 엉망인 거 같습니다.

가장 문제가 되는 건 prev[name]에 올 수 있는 타입이 너무 많다 보니 any를 쓰는 것과 다를 바 없는 거 같습니다.

변수의 타입이 불명확하다 보니 필요할 때 마다 타입을 명시 해줘야 하고, 이로 인해 코드 또한 효율성과 가시성이 많이 떨어 져 보입니다.

그래서 이러한 부분을 개선해 아래처럼 바꿔보려고 하는데 멘토님의 고견을 듣고 싶습니다!

변환할 값의 타입에 따라 핸들러를 만듭니다. handleChange<타입>
슈퍼 핸들러를 만들어 값의 타입에 따라 알맞은 타입의 핸들러로 보내줍니다. handleChange

const handleChangeObject = (e) => { ... }
const handleChangeArray = (e) => { ... }
const handleChangeString = (e) => { ... }

const handleChange = (e) => {
  if(객체일 때) handleChangeObject(e);
  if(배열일 때) handleChangeArray(e);
  if(문자열일 때) handleChangeString(e);
  ...
}

kiJu2 · 2024-11-18T12:45:46Z

음 함수의 책임이 많아짐에따라 단일 책임원칙이 위배될 수 있고, 여러 유니온 타입 혹은 오버로딩에 의해 타입 안전성이 저하될 수 있다고 판단되기에 각각의 상태 별로 핸들러를 작성했을 것 같아요.
다만, 이렇게 한다면 코드가 상당히 길어질 수 있겠죠 ?
따라서, 커스텀 훅(use-add-item-form)을 만들어서 관리하면 어떨까 싶습니다 ! 😊

Woolegend added 23 commits October 21, 2024 17:15

docs: 비동기 처리 커스텀 훅 JSDOC 추가

8577018

feat: useAsync 개선

9a20d80

refactor: AddItemForm을 AddItemPage로 변경 및 경로 변경

d13ba4e

feat: 중고마켓 페이지 이미지 로드 실패 시 기본 이미지 표기 기능 구현

391b21c

style: 이미지 불러오기 오류 핸들러 이름 변경

addbbdc

feat: 상품 상세 컴포넌트 이미지 불러오기 오류 핸들러 추가

3dfab92

style: pending 상태명을 loading으로 변경

be3b17b

feat: setup cra ts

2ff944e

feat: typescript 셋업 완료

cde515c

feat: typescript 셋업

1b9ef2a

feat: api TS 마이그레이션

6092f8a

refactor: 환경변수 설정 및 api 이름 변경

5876cba

refactor: api.ts에서 interface 코드 다른 .ts 파일로 분할

41c812c

feat: ListItem TS 마이그레이션

4476f29

변경사항 - Item컴포넌트에서 ListItem으로 파일명 변경 - TS로 마이그레이션

feat: 디바이스 타입 콘텍스트 TS 마이그레이션

a873a88

feat: 베스트 상품 컴포넌트 TS 마이그레이션

5181b54

feat: 페이지네이션 TS 마이그레이션

13fc055

feat: 아이템 리스트 컴포넌트 TS 마이그레이션

3474bb0

feat: file input 컴포넌트 TS 마이그레이션

653cb7d

상품 상세 TS 마이그레이션

e0a4888

fix: 파일 업로드 제한 오류 해결

913e3e8

feat: 상품 상세 페이지 TS 마이그레이션

62b5a0a

feat: 상품 목록 페이지 TS 마이그레이션

266ce3e

Woolegend added 매운맛🔥 뒤는 없습니다. 그냥 필터 없이 말해주세요. 책임은 제가 집니다. 미완성🫠 죄송합니다.. labels Nov 16, 2024

Woolegend requested a review from arthurkimdev November 17, 2024 06:40

Woolegend self-assigned this Nov 17, 2024

Woolegend added 2 commits November 18, 2024 04:41

feat: 상품 등록 페이지 TS 마이그레이션

b94d4f6

feat: 질문 폼 TS 마이그레이션

626dddc

Woolegend removed the 미완성🫠 죄송합니다.. label Nov 17, 2024

Woolegend requested review from kiJu2 and removed request for arthurkimdev November 18, 2024 09:00

kiJu2 approved these changes Nov 18, 2024

View reviewed changes

kiJu2 merged commit 322d2ec into codeit-bootcamp-frontend:React-우재현 Nov 18, 2024

	keyword: string \| undefined = undefined
	keyword?: string = undefined

	orderBy: string = "recent",
	orderBy: "recent" \| "liked" = "recent",


		const BASE_URL = process.env.REACT_APP_API_BASE_URL;

		export async function getProductList(

	const [comments, setComments] = useState<CommentList \| undefined>();
	const [comments, setComments] = useState<CommentList>();

[우재현] Sprint8 #269

[우재현] Sprint8 #269

Uh oh!

Conversation

Woolegend commented Nov 16, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

요구사항

기본

심화

멘토에게

Uh oh!

kiJu2 commented Nov 18, 2024

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

다음과 같이 옵셔널 프로퍼티로 작성할 수 있습니다 ! 😊

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

기본값이 빈 값으로 되어 있다면 자동으로 undefined이 추론됩니다 !

Uh oh!

Choose a reason for hiding this comment

굳굳 ! null을 고려한 타입을 잘 설정하셨군요 ㅎㅎㅎ 👍

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

유니온 타입을 적절하게 설정하셨군요 ! 훌륭합니다 ㅎㅎㅎ

Uh oh!

kiJu2 commented Nov 18, 2024

Uh oh!

Woolegend commented Nov 18, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

kiJu2 commented Nov 18, 2024

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Woolegend commented Nov 16, 2024 •

edited

Loading

기본값이 빈 값으로 되어 있다면 자동으로 `undefined`이 추론됩니다 !

굳굳 ! `null`을 고려한 타입을 잘 설정하셨군요 ㅎㅎㅎ 👍

Woolegend commented Nov 18, 2024 •

edited

Loading