[현명] 로그인 과제 제출 #8
Open
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
feat: 타입스크립트로 전환 + 이전파일 이동
타입스크립트 전환
로그인 페이지 UI구현
로그인 기능 리팩터링
-버튼 가운데 정렬
main 브랜치에 merge
Refactor
메인 브랜치 병합
테스트시 에러메세지 alert
Protected router 구현
Refatoring
refactor: useInput 커스텀훅 구현
Member
kwakseongjae
left a comment
kwakseongjae
left a comment
There was a problem hiding this comment.
커스텀훅 시도 너무 좋았다.
왜 잘 해 ??
나 무서워 ,,
합격 !! 😎✌
Comment on lines
+19
to
+22
| {/*로그인 유저만 접근가능 */} | ||
| <Route element={<ProtectedRouter />}> | ||
| <Route path="/mypage" element={<MyPage />} /> | ||
| </Route> |
| import axios from "axios"; | ||
|
|
||
| const AuthApi = axios.create({ | ||
| baseURL: "http://localhost:8000/auth", |
Member
There was a problem hiding this comment.
막히면 레퍼런스 물어봐 !
생각보다 적용하기 쉬워 !
https://i-ten.tistory.com/256
| @@ -0,0 +1,23 @@ | |||
| import styled, { css } from "styled-components"; | |||
|
|
||
| const [errorMsg, decideErrorMsg] = useErrorMsg(); | ||
| const location = useLocation(); | ||
| const from = location?.state?.redirectFrom?.pathname || "/"; |
Member
There was a problem hiding this comment.
좋은 레퍼런스 찾았나보네 👍👍
자주 사용되니까 꼭 외워둬 !
Comment on lines
+45
to
+50
| <label htmlFor="email">이메일</label> | ||
| <input | ||
| name="email" | ||
| placeholder="ssafe11@gmail.com" | ||
| onChange={handleEmailChange} | ||
| /> |
Comment on lines
+179
to
+181
| <Button active={isActive} onClick={handleBtnClick}> | ||
| 회원가입 | ||
| </Button> |
Member
There was a problem hiding this comment.
onClick, handleSubmit, handleSignup 등의 좋은 변수명도 많습니당 :)
handleBtnClick은 저는 잘 안쓸거같네용
Comment on lines
+99
to
+107
| <Link to="/signup"> | ||
| <Button>회원가입</Button> | ||
| </Link> | ||
| <Link to="/login"> | ||
| <Button>로그인</Button> | ||
| </Link> | ||
| <Link to="/mypage"> | ||
| <Button>마이페이지</Button> | ||
| </Link> |
Member
There was a problem hiding this comment.
NavLink를 아시나요 ?
https://velog.io/@seong-dodo/React-Link%EC%99%80-NavLink
Comment on lines
+9
to
+13
| {accessToken ? ( | ||
| <Outlet /> | ||
| ) : ( | ||
| <Navigate to="/login" state={{ redirectFrom: currentLocation }} /> | ||
| )} |
Member
There was a problem hiding this comment.
시도는 좋은데 조금 더 컨벤션을 찾아보면 좋을거같다는 생각 !
제로 베이스로 떠올린거면 꽤 준수하넹
if문이랑 return이 있는 레퍼런스 한번 찾아봐 !
보통은 그렇게 많이 작업해 !
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
SSAFE 4차 MISSION: 타입스크립트와 API를 이용한 회원가입&로그인
2주차 구현 내용
1️⃣ [Protected Router 적용]
Protected Router 코드
2️⃣ [회원가입 Input에 reducer적용]
Reducer 코드
3️⃣ [로그인 Input에 커스텀훅 적용(useInput)
커스텀훅 코드
ProtectedRouter 작동 영상
2024-03-14.10.16.36.mov
✏️ 파일 구조
입력과유효성 검사를 담당하는 컴포넌트시도했지만 실패
커스텀훅을 다른 곳에서도 사용
환경변수로 baseURL을 설정
마이페이지를 로그인 시에만 보이도록