-
Notifications
You must be signed in to change notification settings - Fork 45
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
[week15] 배의진 #486
The head ref may contain hidden characters: "part3-\uBC30\uC758\uC9C4-week15"
[week15] 배의진 #486
Conversation
- next.js 템플릿에서 남아있던 파일들 완전 제거 - svg 파일을 ReactComponent 로 import 하기 위한 @svgr/webpack 라이브러리 설치 - 스타일이 적용 안되는 원인이었던 상대경로를 최상위 폴더로 수정 및 모듈 import 구문 전부 수정 - reset.css 파일을 _app.tsx 파일에서 import
모든 img 태그 Nextjs Image 로 변경
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.
고생하셨습니다!!
form 다루는건 어떠셨나요? ㅎㅎ
form을 다루는게 조금 복잡할 수 있지만 리액트를 연습하기엔 좋은 주제인것 같으니
좀 더 고민해보면서 다뤄보시면 더 좋을것 같아요!!
참고로 uncontrolled Form / controlled Form의 개념에 대해 공부해보시는것도 좋을것 같습니다 ㅎㅎ
고생하셨습니다 !!
alt: "인스타그램 홈페이지로 연결된 인스타그램 로고", | ||
}; | ||
|
||
export const logoImage = "images/linkbrary.svg"; |
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.
이....건 굳이 상수 폴더에 있을 필요는 없을 것 같고 그냥 사용하는곳에서 import해오는게 좋아보입니다!
@@ -5,6 +5,45 @@ export const route = { | |||
FAQ: "/faq", | |||
}; | |||
|
|||
export const text = { |
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.
기본적으로 상수의 네이밍 컨벤션은 상수스타일이라고
모든 문자를 대문자, 문자와 문자사이는 _
로 네이밍 하는 규칙이 일반적입니다!
ex) TEXT, KAKAO, CONSTANT_NAME, 이런식으로요!
): Promise<boolean> => { | ||
const address = "check-email"; | ||
try { | ||
const response = await axiosInstance.post(address, { email: id }); |
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.
이건 그냥
const response = await axiosInstance.post('/check-email', { email: id });
이렇게 해주시면 될 것 같습니다 ㅎ
너무 변수를 남발하는 것도 ......굳이..라는 생각이 좀 드네요 😅
const address = "check-email"; | ||
try { | ||
const response = await axiosInstance.post(address, { email: id }); | ||
return response.status === 200; |
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.
오잉..? 통신이 성공했는지 안했는지를 반환하나요?
옳은 방향...은 아닌것 같습니다 😅
response.data에 다른 정보는 혹시 오지 않는건가요?
export const checkAccountValid = async ( | ||
id: string, | ||
pwd: string | ||
): Promise<boolean> => { |
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.
Promise<boolean>
같이 Promise 타입은 꽤나 많이 사용합니다 👍👍👍👍
id: "", | ||
pwd: "", | ||
confirmPwd: "", | ||
}; |
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.
initialValue
따로 객체로 관리하는것도 좋네요 👍
}; | ||
|
||
export const Form = () => { | ||
const [input, setInput] = useState(initialValue); |
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.
input
보다는 form
이 보다 적합하지 않을까요? ㅎ
|
||
export const Form = () => { | ||
const [input, setInput] = useState(initialValue); | ||
const [message, setMessage] = useState(initialValue); |
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.
이것도 같이 form에서 개별 필드를 value와 message를 가진 객체로 만들면 굳이 상태를 2개로 나눌 필요는 없어보여요 ㅎ
const handleChange = (event: ChangeEvent<HTMLInputElement>) => { | ||
const { name, value } = event.target; | ||
setInput((prevInput) => ({ ...prevInput, [name]: value })); | ||
}; |
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.
👍👍👍
handleChange={handleChange} | ||
checkInput={checkConfirmPwdInput} | ||
/> | ||
<ModalContentButton themeColor="blue">{text.signup}</ModalContentButton> |
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.
button에 type='submit' 넣어주면 좋을것 같아요
변경사항
회원가입 페이지에서
멘토님께