[ 4주차 기본/심화/공유 과제 ] 로그인/회원가입/마이페이지 #5
Conversation
| <Router> | ||
| <Routes> | ||
| <Route path="/" element={<MainPage />} /> | ||
| <Route path="/login" element={<LoginPage />} /> | ||
| <Route path="/join" element={<JoinPage />} /> | ||
| <Route path="/info/:memberId" element={<MyPage />} /> | ||
| </Routes> | ||
| </Router> |
There was a problem hiding this comment.
router 공식문서를 살펴보신 적이 있으실까요?
공식문서에서는 createBrowswerRouter 사용을 권장하고 있습니다.
한 번 살펴보세요~
| @@ -0,0 +1,8 @@ | |||
| const BASE_URL = 'http://34.64.233.12:8080'; | |||
There was a problem hiding this comment.
이런 예민한 정보들은 .env를 만들고 그 안에 넣어주시면 보안에 더 좋습니당 ㅎㅎ
| export const API = { | ||
| JOIN: `${BASE_URL}/member/join`, | ||
| INFO: `${BASE_URL}/member/info`, | ||
| LOGIN: `${BASE_URL}/member/login`, | ||
| PASSWORD: `${BASE_URL}/member/password`, | ||
| }; |
There was a problem hiding this comment.
오 이렇게 url을 따로 상수로 빼주는 것 매우 좋네요!
👍👍👍
| export function useNavigation() { | ||
| const navigate = useNavigate(); | ||
|
|
||
| const goBack = () => { | ||
| navigate(-1); | ||
| } | ||
|
|
||
| const goHome = () => { | ||
| navigate('/'); | ||
| } | ||
|
|
||
| const navigateToJoin = () => { | ||
| navigate('/join'); | ||
| } | ||
|
|
||
| const navigateToLogin = () => { | ||
| navigate('/login'); | ||
| } | ||
|
|
||
| const navigateToInfo = (memberId) => { | ||
| navigate(`/info/${memberId}`); | ||
| } | ||
|
|
||
| return { goBack, goHome, navigateToJoin, navigateToLogin, navigateToInfo }; | ||
| } |
There was a problem hiding this comment.
navigate 커스텀 훅 너무 좋습니다!
이렇게 하면 확실히 더 안전한 navigate가 가능해요.
취향의 차이일 수 있는데, 이 파일을 util에서 관리할지,
hooks 폴더를 만들고 그 안에서 관리할지 이야기 나눠보면 좋을 것 같습니다.
| const [id, setId] = useState(''); | ||
| const [password, setPassword] = useState(''); | ||
| const [idError, setIdError] = useState(''); | ||
| const [passwordError, setPasswordError] = useState(''); |
There was a problem hiding this comment.
상태들이 다른 곳에서도 쓰이는 경우가 있네요.
이럴경우에 대비해서 커스텀훅에 기능을 위임하는게 재사용성을 높이는 아주 좋은 방법입니다 ㅎㅎ!
한 번 정의해두면, 거기서 꺼내다 쓸 수 있겠죵??
| <button onClick={toggleChangePassword}>비밀번호 변경</button> | ||
| {showChangeToggle && ( | ||
| <> | ||
| <C.InputBox type="text" placeholder="기존 비밀번호" value={currentPassword} onChange={e => setCurrentPassword(e.target.value)} /> | ||
| <C.InputBox type="text" placeholder="새 비밀번호" value={newPassword} onChange={e => setNewPassword(e.target.value)} /> | ||
| <C.InputBox type="text" placeholder="새 비밀번호 확인" value={newPasswordVerification} onChange={e => setNewPasswordVerification(e.target.value)} /> | ||
| <C.Btn onClick={handleChangePassword}>비밀번호 변경</C.Btn> | ||
| </> | ||
| )} |
There was a problem hiding this comment.
html에 details 태그를 아시나요?
이 태그를 이용하면 토글을 간단하게 구현할 수 있슴다 ㅎㅎ
물론 스타일 적인 부분은 포기해야한다는 단점이 있지만 ㅠ
한 번 살펴보고 가세요~
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/details
There was a problem hiding this comment.
정안님 코드 보면서 이런 태그를 사용할 수도 있구나! 하나 알아갔는데
링크까지 주셨네요! 저도 공부해갑니다~~!
There was a problem hiding this comment.
4주차 과제 고생하셨습니다.
전반적으로 navigate를 따로 유틸로 분리하시는 것과 api 관련 코드들 모아놓는 모습을 보면서, 정말 웹만 처음이고 개발 자체를 잘하는 사람이 맞구나 느껴졌습니다.
이번 기수가 지나면 엄청난 성장을 할 지원님의 모습이 보이네요.
또한 커스텀훅으로 분리하는 연습만 조금 해보시면 너무 깔끔한 컴포넌트들이 될 것 같습니다.
다만 아쉬운점은, 공통 스타일로 분리하신 스타일 코드들을,
공통 컴포넌트로 분리하셨다면 더 좋지 않았을까 조심스레 의견을 내봅니다.
또한 타입스크립트를 사용하셨다면, 합동 세미나 전에 타입스크립트에 조금 익숙해지고
더 좋은 리뷰를 남겨드릴 수 있었을 것 같은데 그 부분이 아쉬운 점인 것 같아요 ㅠ!!
앞으로 펼쳐질 합동세미나 잘 부탁드립니다!
| `; | ||
|
|
||
| export const InputBox = styled.input` | ||
| border: 1px solid ${({error}) => (error ? 'red' : 'transparent')}; |
| <button onClick={() => setPlaying(!playing)}> | ||
| {playing ? 'Pause' : 'Play'} | ||
| </button> | ||
| {/* <S.MainImg src="./src/assets/잠만보.jpg" /> */} |
| <button onClick={toggleChangePassword}>비밀번호 변경</button> | ||
| {showChangeToggle && ( | ||
| <> | ||
| <C.InputBox type="text" placeholder="기존 비밀번호" value={currentPassword} onChange={e => setCurrentPassword(e.target.value)} /> | ||
| <C.InputBox type="text" placeholder="새 비밀번호" value={newPassword} onChange={e => setNewPassword(e.target.value)} /> | ||
| <C.InputBox type="text" placeholder="새 비밀번호 확인" value={newPasswordVerification} onChange={e => setNewPasswordVerification(e.target.value)} /> | ||
| <C.Btn onClick={handleChangePassword}>비밀번호 변경</C.Btn> | ||
| </> | ||
| )} |
There was a problem hiding this comment.
정안님 코드 보면서 이런 태그를 사용할 수도 있구나! 하나 알아갔는데
링크까지 주셨네요! 저도 공부해갑니다~~!
There was a problem hiding this comment.
이렇게 utils에 따로 코드를 분리하니 코드도 간단하고 유지보수하기도 좋겠네요! 최고입니다~! 배워가요
| `; | ||
|
|
||
| export const Info = styled.h3` | ||
| color: black; |
🧩 기본 과제
로그인 페이지
회원가입 페이지
마이페이지
🔥 심화 과제
메인페이지
로그인 페이지
회원가입 페이지
input이 비어있는 상태로 api연결 시도했을시
해당 input 테두리 색상 변경
input에 focus 맞추기
api요청 금지
전화번호 양식 정규표현식으로 자동입력되도록 설정 (숫자만 입력해도 "-"가 붙도록)
비밀번호 검증 유틸 함수 구현 (검증 통과되지 않을시 api요청 금지)
공유과제
링크 첨부(팀 블로그 링크) : https://forweber.palms.blog/week4-lint
📌 내가 새로 알게 된 부분
💎 구현과정에서의 고민과정(어려웠던 부분) 공유!
🥺 소요 시간
8h🌈 구현 결과물
https://silk-title-f5a.notion.site/4-3d257b71281f4347a55061f97a506a5b