Feature2 #4
Feature2 #4
Conversation
|
고생하셨습니다~~
SignUp.js
|
src/components/SignUp.js
Outdated
| validateInput(name, value); | ||
| }; | ||
|
|
||
| const validateInput = (key, value) => { |
There was a problem hiding this comment.
하나의 함수가 맡고 있는 기능이 너무 많은 것 같습니다!
key 에 따라 분리 하면 좋을 것 같아요.
validate하는 함수는 결과만을 return 하면 좋을 것 같아요.
그 결과에 대한 것도 type을 지정하면 좋을 듯 하네요 (는 js를 쓰고 계시는군요 호호)
validate의 결과를 render하는 함수는 분리되어 있으면 좋을 듯 해요!
const aliasTest = {
checkFirstCharacter: (value) =>
JOIN.ALIAS_FIRST_CHARACTER_REGEX.test(value),
checkAllowedCharacter: (value) =>
JOIN.ALIAS_ALLOWED_CHARACTER_TYPE_REGEX.test(value),
};
const validateAlias = (key, value) => {
if (!aliasTest.checkFirstCharacter(value)) {
setIncorrectResult(key, JOIN.ALIAS_GUIDE_START_WITH_ENGLISH);
return;
}
if (!aliasTest.checkAllowedCharacter(value)) {
setIncorrectResult(key, JOIN.ALIAS_GUIDE_UNION_ENGLISH_AND_NUMBER);
return;
} else {
setCorrectResult(key);
}
};
const setIncorrectResult = (key, guide) => {
setValidation((prev) => ({
...prev,
[key]: guide,
}));
setIsColor((prev) => ({ ...prev, [key]: true }));
};
const setCorrectResult = (key) => {
setValidation((prev) => ({
...prev,
[key]: JOIN.CORRECT_SIGNUP_INPUT,
}));
setIsColor((prev) => ({ ...prev, [key]: false }));
}; |
gyofeel
left a comment
gyofeel
left a comment
There was a problem hiding this comment.
고생 많았어요~~
alias path 관련
craco-alias 모듈 적용된 걸 봤어요. 이 모듈에 대해서 잘모르지만 Webpack 환경에서 적용된다는 설명이 있는 걸 보니 그 맥락은 Webpack에서 적용하는 것과 동일하게 내부적으로 처리되는게 아닐까 싶네요. 링크는 웹팩에서 configure 파일 내에서 적용하는 문서 링크입니다. https://webpack.js.org/configuration/resolve/
rerendering 관련
react와 react hooks를 이용한 rendering 최적화에 대해서는 잘몰라서... 공부를 해보니 재밌네요. React.memo를 사용한 것과 useState의 함수형 업데이트라는 개념을 접했는데 지금 프로젝트에는 모두 적용되어 있는 걸 확인했어요.👍 추가로, 재사용되는 함수에 useCallback을 적용했을때 최적화 효과를 볼 수 있다는 글도 봤는데, 이벤트 리스너 콜백으로 사용되면서 하위 컴포넌트에 props로 전달되는 handleOnChange가 대상이 될 수도 있는 것 같은데. 이 부분에 대한 확신은 없네요.(리액트 고수 태상님이 더 많은 조언을 해주실 수 있을 듯 ㅎㅎㅎ)
정규식 유효성 검사 로직 앱 전체 utils 관리 관련
앱 다른 페이지에서 동일한 유효성 검사를 할땐 constants로 관리되는 정규식을 그냥 가져다 사용하면 될 것 같네요. 무시해주세용.
| } | ||
| }, [signUpInput.phone]); | ||
|
|
||
| const handleOnChange = (name, value) => { |
There was a problem hiding this comment.
key 하나 씩 분리되어 있지 않으면, 결합성이 높아져서 나중에 수정하는데 어려울 수도 있어요~
ex) 지역 정보가 추가 되어야 한다, 혹은 두 페이지로 나뉘어져서 (첫 페이지는 id, pw. 두 번째 페이지에서 나머지) 등등...
그렇다고 모든걸 atomic 하게 분리하는게 정답은 아니에요!
가장 적절한 방법을 선택하면 될 듯해요!
There was a problem hiding this comment.
한 곳에서 관리하는게 좋은 줄 알고 object형태로 관리하려고 했는데 오히려 더 복잡해 질 수 있군요!
There was a problem hiding this comment.
만약 제가 구현한다면,
SignUpContext 를 하나 만들 것 같아욤~
There was a problem hiding this comment.
오호,, context api는 전역으로 값을 관리할때 사용하는 것으로 알고 있는데요. 회원가입 관련 input들을 전역으로 관리하는게 좋기 때문에 사용하라는 것일까요??
There was a problem hiding this comment.
몇개의 컴포넌트들의 전역일 수 있을듯해요!
ex)
<GlobalContextProvider>
<Navbar/>
<Container>
<SignUpContextProvider>
<NameInput/>
<PasswordInput/>
</SignUpContextProvider>
</Container>
</GlobalContextProvider>
There was a problem hiding this comment.
SignUpContext를 만들어보려고 했는데, 아래와 같이 작성하는게 맞을까요?
signUpInput을 object로 만들지 않고 key별로 분리하고 싶은데 방법을 못찾아서 결국 다시 객체형태로 밖에 사용을 못하겠습니다ㅠㅠ
<SignUpContext.Provider value={signUpContextValue}>에서 객체형태가 아니어도 value에 여러 값을 한번에 담을 수 있는 방법이 있나요??
const signUpInput = {
alias: '',
pwd: '',
pwdCheck: '',
name: '',
email: '',
phone: '',
handleOnChange: () => {},
};
export const SignUpContext = createContext({ signUpInput });
const SignUpContextProvider = ({ children }) => {
const [signUpInput, setSignUpInput] = useState({
alias: '',
pwd: '',
pwdCheck: '',
name: '',
email: '',
phone: '',
});
const handleOnChange = (e) => {
const { name, value } = e.target;
setSignUpInput((prev) => ({ ...prev, [name]: value }));
};
const signUpContextValue = { signUpInput, handleOnChange };
/* const debouncedInput = useDebounce(key, 500); ?? */
useEffect(() => {}, [debouncedInput]);
return (
<SignUpContext.Provider value={signUpContextValue}>
{children}
</SignUpContext.Provider>
);
};
export default SignUpContextProvider;There was a problem hiding this comment.
const [name, setName] = React.useState('')
const [pw,setPw] = React.useState('')
return (
<SignUpContext.Provider value={
name,
setName,
pw,
setPw
}
>
{children}
</SignUpContext.Provider>
)
value에 object를 넣으면 여러가지를 담을 수 있어욤!
| phone: validatePhone, | ||
| }; | ||
|
|
||
| signUpItems |
There was a problem hiding this comment.
지금은 문제는 없어보이는데, onChange가 일어날 때 바로 validation체크를 하는게 나중에는 헤비한 로직이 될 수 있어요~
그럴땐, change 일 때는 pending 상태로 취급하고 (vaildation 중... 정도의 state?)
debounce 를 사용해서 일정 시간 입력이 없어졌을 때 validation을 하면 change가 일어날 때 마다 validation 로직이 실행되지 않아서서 좋을 듯 해요~
There was a problem hiding this comment.
ex) 대충 이런느낌의 코드가 될것같아요
const [emailValidated, setEmailValidated] = React.useState<'success'|'pending'|'error'>('pending')
const [email, setEmail] = React.useState('')
const debouncedEmail = useDebounce(email, 500)
const onChangeEmail = (e) =>{
setEmail(e.target.value)
setValidated('pending')
}
useEffect(()=>{
const resultOfValidateEmail = setEmailValidated(debouncedEmail)
setEmailValidated(resultOfValidateEmail)
},[debouncedEmail])
There was a problem hiding this comment.
debounce나 throttle을 들어본 적 있는것 같아요! 적용해보겠습니다~
| @@ -0,0 +1,37 @@ | |||
| export const ALIAS_FIRST_CHARACTER_REGEX = /^[a-zA-Z]/; | |||
There was a problem hiding this comment.
저도 예전엔 이렇게 파일로 구분을 많이 지었었는데요,
지금은 이렇게 하고 있습니다.
NameInputForSignIn.tsx
PasswordInputForSingIn.tsx
이런식으로 파일을 만들고, 그 파일 안에 필요한 const, regex, validation 코드 작성 등을 하는식으로요~
생각보다 범용적인 코드는 작성하기 어렵고, 파일이 많아지면 디펜던시가 다양하게 얽히면서 관리가 어려워 지더라구요.
코드를 중복으로 작성하게 되는것에 저도 알레르기가 있었어서 이런식으로 많이 했었는데,
뭔가 그런 관념에 갇힐 필요는 없는것같아요!
|
useMemo, useCallback에 대해서 교필이가 언급한게 있는데, |
|
form 쪽이 노가다가 많잖아? |
개요
작업 사항
기타
계획이 변경됨에 따라 state관리는 context API를 이용하고 서버 통신은 axios로 할 예정입니다 ㅎㅎ