[임건우] Week15

[gw-lim]

요구사항

기본

• [링크 공유 페이지] 링크 공유 페이지의 url path를 ‘/shared’에서 ‘/shared/{folderId}’로 변경했나요?
• [링크 공유 페이지] 폴더의 정보는 ‘/api/folders/{folderId}’, 폴더 소유자의 정보는 ‘/api/users/{userId}’를 활용했나요?
• [링크 공유 페이지] 링크 공유 페이지에서 폴더의 링크 데이터는 ‘/api/users/{userId}/links?folderId={folderId}’를 사용했나요?
• [폴더 페이지] 폴더 페이지에서 유저가 access token이 없는 경우 ‘/signin’페이지로 이동하나요?
• [폴더 페이지] 폴더 페이지의 url path가 ‘/folder’일 경우 폴더 목록에서 “전체” 가 선택되어 있고, ‘/folder/{folderId}’일 경우 폴더 목록에서 {folderId} 에 해당하는 폴더가 선택되어 있고 폴더에 있는 링크들을 볼 수 있나요?
• [폴더 페이지] 폴더 페이지에서 현재 유저의 폴더 목록 데이터를 받아올 때 ‘/api/folders’를 활용했나요?
• [폴더 페이지] 폴더 페이지에서 전체 링크 데이터를 받아올 때 ‘/api/links’, 특정 폴더의 링크를 받아올 때 ‘/api/links?folderId=1’를 활용했나요?
• [상단 네비게이션] 유효한 access token이 있는 경우 ‘/api/users’로 현재 로그인한 유저 정보를 받아 상단 네비게이션 유저 프로필을 보여주나요?

심화

• [심화] 리퀘스트 헤더에 인증 토큰을 첨부할 때 axios interceptors 또는 이와 유사한 기능을 활용 했나요?

주요 변경사항

• react-hook-form을 적용했습니다
• access token을 활용하여 api을 받아오도록 했습니다.

배포주소

https://linkbrary-gw-lim.vercel.app/

멘토에게

• react-hook-form을 사용한 input 컴포넌트의 구조가 알맞게 나뉘어져 있는지 확인해주시면 감사하겠습니다.
• /folder 페이지에서 다른 폴더로 이동할 때 페이지 전체 새로고침이 일어나는데, 이를 방지할 방법이 있을지 궁금합니다.
• 지난 주 주신 코드 리뷰를 모두 적용시키지 못했습니다... 이번 주 리팩토링과 함께 수정해보도록 하겠습니다.
• 이번 주도 잘 부탁드리도록 하겠습니다.

[dev-kjy]

**

1.react-hook-form을 사용한 input 컴포넌트의 구조가 알맞게 나뉘어져 있는지 확인해주시면 감사하겠습니다.

**
해당 컴포넌트 파일 내에서 피드백 드릴게요~
react-hook-form 문법이 처음에 생소할 수 있는데 적용하느라 수고 많으셨어요 🤗

[dev-kjy]

**

/folder 페이지에서 다른 폴더로 이동할 때 페이지 전체 새로고침이 일어나는데, 이를 방지할 방법이 있을지 궁금합니다.

**

로컬 실행으로 확인하고 싶은데 실행이 안되네요. (로그인 이후 오류) 🥲

[dev-kjy]

import 문 정렬 좋습니다. importOrderSortSpecifiers 옵션의 경우 협업 시에도 많이 도움이 되서 이번 프로젝트에 쓰셔도 좋을 것 같네요!

[dev-kjy]

공통 부분은 변수화 해주시는 것이 좋아보이네요!

Suggested change

	getFolders({ headers: { Authorization: `Bearer ${accessToken}` } });
	getLinks({ headers: { Authorization: `Bearer ${accessToken}` } });
	const headers = { Authorization: `Bearer ${accessToken}` }
	getFolders({ headers });
	getLinks({ headers });

[dev-kjy]

현재 formData를 통신 요청 시 전달하기 위해 watch를 사용해 필요한 값들을 상태로 관리하고 있습니다.
저번 멘토링에서 설명드린 것처럼 react-hook-form은 기존에 상태를 이용해 form의 값을 관리하는 제어 컴포넌트 대신에 비제어 컴포넌트로 관리할 수 있다는 것이 가장 큰 장점입니다.

가능하면 제가 아래 코드에 작성해 둔 것처럼 onSubmit의 인자로 받는 것이 가장 react-hook-form 다운 방식입니다.
요구사항에 따라서는 watch가 반드시 필요한 경우도 있으나 되도록이면 비제어 컴포넌트로 관리하는 방식을 추천드립니다.

Suggested change

	const onSignup = async () => {
	const onSignup = async (formData: FormValues) => {
	const { email, password, passwordCheck } = formData;

[dev-kjy]

다만, 이 부분을 변경하게 되면 이 코드에서 많은 부분이 바뀌어야 하므로 시간 여유가 되시는 경우에 반영하시면 좋을 것 같아요!

[dev-kjy]

예를 들면 이메일, 비밀번호 등에 대한 validation이 onSignup 내에서 이루어져야 한다는 변경 사항이 필요해 보이네요.

[dev-kjy]

대신 비제어 컴포넌트의 경우 코드의 복잡도가 감소하고, 성능적인 이점이 있다는 장점이 있으니 꼭 다른 구현 시에서라도 활용하시는 것을 추천드립니다! 🤗🤗