Conversation
sobokki
requested review from
lunaticscode and
ys1008p
and removed request for
ys1008p
|
|
||
| return ( | ||
| <> | ||
| const Input = ({ |
There was a problem hiding this comment.
컴포넌트를 만들 때, 아래의 요구사항같이 외부에서 해당 Input의 Native 이벤트를 핸들링할 수 있도록 만드는 것이 좋습니다.
(ex. 회원가입 폼에서 validation(유효성 검증)을 통과하지 못한 경우, Input을 강제 포커스)
forwardRef 를 꼭 찾아보시고 적용해주세요.
| height={100} | ||
| /> | ||
| </div> | ||
| {userProfile ? ( | ||
| <div className={styles["profile-layout"]}> |
There was a problem hiding this comment.
userProfile이 유효할 때 렌더링되는 html 엘리먼트들은 별도의 컴포넌트로 생성해주세요.
const UserInfo = () => {
return (
<div>....</div>
)
}
const Nav = () => {
return (
{ userProfile && <UserInfo/> }
)
}|
|
||
| console.log("config:", config); // config 확인 | ||
|
|
||
| const response = await axios.get(`${BASE_URL}/users/{userId}`, config); |
There was a problem hiding this comment.
axois는 기본적으로 공통 파일을 하나 만들고, 해당 파일의 axios instance를 호출해서 쓰는 것이 일반적입니다.
// ./utils/api.js
import axios from 'axios';
axios.defaults.baseUrl = "http://localhost:5000";
export const api = axios.create();|
|
||
| useEffect(() => { | ||
| // 사용자 프로필을 가져오는 비동기 함수 호출 | ||
| async function getUserProfile() { |
There was a problem hiding this comment.
useEffect 내부는 항상 간결하게 작성하는 것이 좋습니다.
const getUserProfile = async () => {
// .....
}
useEffect( () => {
getUserProfile();
}, [])| watch, | ||
| formState: { isSubmitting, errors }, | ||
| } = useForm({ mode: "onBlur" }); | ||
| const watchEmail = watch("email", ""); |
There was a problem hiding this comment.
react-hook-form에서 register를 사용하게되면 Uncontrolled 상태로 폼들이 관리됩니다. 그렇게되면 사용자 입력에 따른 리렌더링이 일어나지 않게 되죠. 그런데 watch, setValue 를 사용하는 순간 Controlled 상태로 다시 전환되며 사용자가 입력을 할 때마다 리렌더링이 일어나게 되면서 성능적인 부분에서 손해를 보게됩니다.
react-hook-form 을 사용할 때는 Uncontrolled, Controlled를 선택하는 기준이 중요합니다. (굳이 Controlled 상태를 유지할 필요 없는 경우 watch, setValue는 사용할 필요없습니다.)
요구사항
기본
-[][프로젝트 전반] https://bootcamp-api.codeit.kr/docs/linkbrary/v1 문서를 참고해 https://bootcamp-api.codeit.kr/api/linkbrary/v1 api를 활용했나요?
https://docs.github.com/articles/github-community-guidelines
-[x][프로젝트 전반] api 요청에 TanStack React Query를 활용했나요?
-[x][로그인, 회원가입 페이지] 로그인은 POST ‘/auth/sign-in’ 을 활용했나요?
-[x][로그인, 회원가입 페이지] 회원가입은 POST ‘/auth/sign-up’ 을 활용했나요?
-[x][로그인, 회원가입 페이지] 이메일 중복확인은 POST ‘/users/check-email’ 을 활용했나요?
-[][링크 공유 페이지] 폴더의 정보는 GET ‘/folders/{folderId}’, 폴더 소유자의 정보는 GET ‘/users/{userId}’를 활용했나요?
-[][링크 공유 페이지] 폴더의 링크 데이터는 GET ‘/folders/{folderId}/links’ 를 활용했나요?
-[][링크 공유 페이지] 유효한 access token이 있는 경우 GET ‘/users’ 로 현재 로그인한 유저 정보를 받아 상단 네비게이션 유저 프로필을 보여 주나요?
-[x][링크 공유 페이지] 유효한 access token이 없는 경우 “로그인” 버튼을 보여 주나요?
-[][폴더 페이지] 폴더 페이지에서 현재 유저의 폴더 목록 데이터는 GET ‘/folders’ 를 활용했나요?
-[][폴더 페이지] 폴더 페이지에서 전체 링크 데이터를 받아올 때 GET ‘/links’, 특정 폴더의 링크를 받아올 때 GET ‘/folders/{folderId}/links’를 활용했나요?
-[][모달] 폴더 이름 변경은 ‘PUT /folders/{folderId}’를 활용했나요?
-[][모달] 폴더 생성은 ‘POST /folders’를 활용했나요?
-[][모달] 폴더 삭제는 ‘DELETE /folders/{folderId}’를 활용했나요?
-[][모달] 링크 삭제는 ‘DELETE /links/{linkId}’를 활용했나요?
-[][모달] 링크 생성은 ‘POST /links’를 활용했나요?
주요 변경사항
스크린샷
멘토에게
-기능 구현이라도 하려고 했지만, 유효한 엑세스 토큰 받아오는 법을 잘 모르겠습니다.
-추후 부족한 부분은 추가해 나가보겠습니다.