-
Notifications
You must be signed in to change notification settings - Fork 79
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
[김영운] Sprint10 #687
The head ref may contain hidden characters: "Sprint10-\uAE40\uC601\uC6B4"
[김영운] Sprint10 #687
Conversation
수고 하셨습니다 ! 스프리트 미션 하시느라 정말 수고 많으셨어요. |
@@ -13,6 +13,7 @@ | |||
"next": "13.5.6", | |||
"react": "^18", | |||
"react-dom": "^18", | |||
"react-hook-form": "^7.51.5", |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
오호 리액트 훅 폼을 사용하시는군요 !
훌륭한 비제어 컴포넌트 라이브러리지요 ~! 추가로 yup
이나 joi
같은 유효성 검사 툴도 사용해보실 수 있습니다 !
리액트 훅 폼이랑 찰떡이예요 ~!
예시
import { ErrorMessage } from "@hookform/error-message";
import { useForm, Controller } from "react-hook-form";
import { joiResolver } from "@hookform/resolvers/joi";
import { Input } from "@material-ui/core";
import "./styles.css";
import Joi from "joi";
const schema = Joi.object({
username: Joi.string().min(4).message("4").max(6).message("6").required()
});
export default function App() {
const { handleSubmit, control } = useForm({
mode: "onSubmit",
defaultValues: {
username: "12345",
email: ""
},
resolver: joiResolver(schema)
});
const onSubmit = (e) => {
e.preventDefault();
console.log(e);
};
return (
<div className="App">
<form onSubmit={handleSubmit(onSubmit)}>
<Controller
name="username"
control={control}
render={({
field: { onChange, onBlur, value, name, ref },
formState: { errors }
}) => (
<div>
<Input value={value} onChange={onChange} onBlur={onBlur} />
<ErrorMessage
errors={errors}
name={name}
render={({ message }) => <p>{message}</p>}
/>
</div>
)}
/>
</form>
</div>
);
}
export interface IBoardValues { | ||
title: string; | ||
content: string; | ||
imgFile: string | null; | ||
} |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
export
가 필요할까요?
해당 페이지에서만 사용하는 것 같아요. export
가 필요할까요?
또한, 해당 페이지에서 export
가 많아진다는 것은 역할이 많아지는 것과 같아요.
page
의 역할이 무엇일까요?
라우팅과 서버 컴포넌트 자원을 내려주는 역할, 그리고 컴포넌트를 보여줄 수도 있지요.
영운님이 생각하시는 page
의 역할은 무엇인가요? 😊
<label htmlFor="title" className={styles.inputText}> | ||
*제목 | ||
</label> | ||
<input id="title" className={styles.TitleInput} type="text" placeholder="제목을 입력해주세요" /> |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
굳굳 ! label
과 input
이 잘 연결 되었군요 !
</label> | ||
<div className={styles.image_button_area}> | ||
<label htmlFor="picture"> | ||
<PlusIcon /> |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
오호 svgr
을 사용하시는군요 👍
svg는 용량이 적기에 NextJS Image를 굳이 쓰지 않아도 된다고 사료하고 있습니다.
따라서 저도 svgr
을 적극적으로 사용하는데 반갑네요 😊
.TextInput { | ||
width: 100%; | ||
height: 282px; | ||
padding: 16px 24px; | ||
background-color: #f3f4f6; | ||
border: none; | ||
border-radius: 12px; | ||
font-size: 16px; | ||
font-weight: 400; | ||
text-decoration: none; | ||
color: #9ca3af; | ||
} | ||
|
||
.image_button_area { | ||
width: 282px; | ||
height: 282px; | ||
} | ||
|
||
.button { | ||
align-items: center; | ||
background-color: #3692ff; | ||
border-radius: 8px; | ||
color: #fff; | ||
cursor: pointer; | ||
display: flex; | ||
font-size: 16px; | ||
font-weight: 600; | ||
height: 42px; | ||
justify-content: center; | ||
min-width: 88px; | ||
padding: 12px 23px; | ||
} |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
클래스 네이밍 표기법이 일관되지 않아요 !
카멜 케이스, 스네이크 케이스, 파스칼 케이스 .. 하나로 통일하는건 어떨까요 ?
<div> | ||
<button>X</button> | ||
</div> |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
X
에는 button
타입을 추가해야 할 것 같아요.
<div> | |
<button>X</button> | |
</div> | |
<div> | |
<button type="button">X</button> | |
</div> |
button
의 기본값은 submit
이므로 X
를 눌러도 form
의 onSubmit
이 실행될 수 있어요 😊
<button className={styles.button} type="submit"> | ||
등록 | ||
</button> |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
굳굳 ! 여기는 타입을 정확히 명시하였군요 !
수고 많으셨어요 영운님 !! |
요구사항
기본
심화
주요 변경사항
스크린샷
멘토에게