[손재헌] sprint8 #239

Jaeheon96 · 2024-08-02T09:23:14Z

요구사항

기본

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

심화

심화 요구사항 없음

주요 변경사항

React 시작하며 마이그레이션하지 못했던 랜딩페이지와 로그인, 회원가입 페이지 구현
netlify 배포

멘토에게

로그인과 회원가입 페이지의 유효성 검사를 위한 onChange를 각 input이 아니라 부모 form에 달아줬더니 input에 value 프로퍼티가 있으면 onChange 없이 value를 주고 있다는 경고를 뱉어냅니다. 일단 콘솔창의 경고를 해결하기 위해 value 프로퍼티를 지웠습니다. 코드잇 강의에서 별다른 이유가 없으면 input에 value 프로퍼티를 줘서 controlled input으로 만들기를 권장한다고 해서 value 프로퍼티를 줬던건데, 이런 경우에는 value 프로퍼티가 없는게 맞는걸까요?
netlify 배포 주소: https://sprintpandamarket.netlify.app/
셀프 코드 리뷰를 통해 질문 이어가겠습니다.

…nd/8-Sprint-Mission

jyh0521

과제하느라 고생하셨습니다! 추가로 웹 개발에서 파일 내에 탭 사이즈는 2로 해주시면 좋을 것 같습니다.

jyh0521 · 2024-08-03T05:29:41Z

src/DTO/SignupFormType.ts

+export enum SignupFormProps {
+    email = "email",
+    nickname = "nickname",
+    password = "password",
+    verifyPassword = "verifyPassword",
+}


enum 활용해보신 점 좋네요!

jyh0521 · 2024-08-03T05:31:00Z

src/DTO/productById.ts

+    createdAt: string;
+    description: string;
+    favoriteCount: number;
+    id: number;
+    images: string[];
+    isFavorite: boolean;
+    name: string;
+    ownerId: number;
+    price: number;
+    tags: string[];
+    updatedAt: string;


타입을 선언해주실때, 어느정도 순서를 생각해서 작성해주셔도 좋습니다. id 같은 값이 최상위로 오고 createdAt이나 updatedAt 같은건 묶어주시는 등의 방식으로요!

jyh0521 · 2024-08-03T07:28:16Z

src/components/AddItemForm.tsx

@@ -25,18 +33,19 @@ function AddItemFormHeader({ values }) {
    )
 }

-function FileInputSection({ onChange, valuesImages }) {
+function FileInputSection({ onChange, valuesImages }: { onChange: (name: string, value: any) => void, valuesImages: string | null}) {


컴포넌트의 props 타입은 따로 선언해서 사용해주셔도 좋습니다!

jyh0521 · 2024-08-03T07:28:41Z

src/components/AddItemForm.tsx


-    const [preview, setPrieview] = useState(null);
+    const [preview, setPrieview] = useState<string | null>(null);


null 사용도 좋지만 undefined를 활용하시면 null을 사용하지 않고 타입 지정이 가능합니다.

jyh0521 · 2024-08-03T07:31:21Z

src/components/AddItemForm.tsx


-    const inputRef = useRef();
+    const inputRef = useRef<HTMLInputElement>(null);


ref를 사용하지 않고 구현하는 방법도 알고 계시면 좋을 것 같습니다.

jyh0521 · 2024-08-03T07:35:21Z

src/components/LoginShortcut.module.css

@@ -0,0 +1,30 @@
+.LoginShortcutContainer {
+    width: 100%;
+    height: 4.625rem;


rem값도 px로 변환했을때 소수점이 안나오게 작성해주시는 것을 추천드립니다.

jyh0521 · 2024-08-03T07:35:34Z

src/components/LoginShortcut.module.css

+    height: 4.625rem;
+    border-radius: 0.5rem;
+    padding: 1rem 1.5rem;
+    background-color: #E6F2FF;


컬러 변수 활용해주시면 좋을 것 같습니다.

jyh0521 · 2024-08-03T07:36:05Z

src/components/PasswordInput.tsx

+
+interface Props {
+    name: string;
+    value: string | undefined;


여기도 밑에 작성하신 것 처럼 value?: string 과 같이 작성할 수 있을 것 같아요!

jyh0521 · 2024-08-03T07:37:02Z

src/components/main/BestSection.tsx

@@ -4,8 +4,9 @@ import Card from './Card';
 import './BestSection.css';
 import useAsync from '../../hooks/useAsync';


alias path 사용해보시는 것을 추천드립니다.

jyh0521 · 2024-08-03T07:39:03Z

src/hooks/useLoginFormChange.ts

+    verifyPasswordError: '',
+}
+
+function useLoginFormChange(formValues: SignupFormType, setFormValues: React.Dispatch<SetStateAction<SignupFormType>>) {


훅에서 formValues를 받아오게 하지 않고 훅에서 선언해줘서 외부로 return 해주는 방법도 있습니다!

jyh0521 · 2024-08-03T07:42:28Z

로그인과 회원가입 페이지의 유효성 검사를 위한 onChange를 각 input이 아니라 부모 form에 달아줬더니 input에 value 프로퍼티가 있으면 onChange 없이 value를 주고 있다는 경고를 뱉어냅니다. 일단 콘솔창의 경고를 해결하기 위해 value 프로퍼티를 지웠습니다. 코드잇 강의에서 별다른 이유가 없으면 input에 value 프로퍼티를 줘서 controlled input으로 만들기를 권장한다고 해서 value 프로퍼티를 줬던건데, 이런 경우에는 value 프로퍼티가 없는게 맞는걸까요?

form 말고 각 input에다가 onInput 핸들러 함수를 작성해주시고 각 input에 value 사용해보실래요?

unknown added 6 commits August 2, 2024 17:13

GIT INIT

48a781f

chore: 배포를 위한 _redirects 추가

a8e715d

Merge branch 'React-손재헌' of https://github.com/codeit-bootcamp-fronte…

98ef103

…nd/8-Sprint-Mission

delete: 기존 브랜치를 merge하며 생긴 js 파일들 삭제

f18711e

Merge branch 'master' into React-손재헌-sprint8

61dbd81

chore: 놓친 충돌 해결

a37d924

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

Jaeheon96 self-assigned this Aug 2, 2024

Jaeheon96 requested a review from jyh0521 August 2, 2024 10:13

jyh0521 approved these changes Aug 3, 2024

View reviewed changes

jyh0521 merged commit 0b997c4 into codeit-bootcamp-frontend:React-손재헌 Aug 3, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[손재헌] sprint8 #239

[손재헌] sprint8 #239

Jaeheon96 commented Aug 2, 2024 •

edited

Loading

jyh0521 left a comment

jyh0521 Aug 3, 2024

jyh0521 Aug 3, 2024

jyh0521 Aug 3, 2024

jyh0521 Aug 3, 2024

jyh0521 Aug 3, 2024

jyh0521 Aug 3, 2024

jyh0521 Aug 3, 2024

jyh0521 Aug 3, 2024

jyh0521 Aug 3, 2024

jyh0521 Aug 3, 2024

jyh0521 commented Aug 3, 2024 •

edited

Loading


		const [preview, setPrieview] = useState(null);
		const [preview, setPrieview] = useState<string \| null>(null);


		const inputRef = useRef();
		const inputRef = useRef<HTMLInputElement>(null);

		@@ -4,8 +4,9 @@ import Card from './Card';
		import './BestSection.css';
		import useAsync from '../../hooks/useAsync';

[손재헌] sprint8 #239

[손재헌] sprint8 #239

Conversation

Jaeheon96 commented Aug 2, 2024 • edited Loading

요구사항

기본

심화

주요 변경사항

멘토에게

jyh0521 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

jyh0521 commented Aug 3, 2024 • edited Loading

Jaeheon96 commented Aug 2, 2024 •

edited

Loading

jyh0521 commented Aug 3, 2024 •

edited

Loading