Conversation
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
|
크으으으 깔끔한 PR입니다 !! |
테스트 계정은 이메일:[email protected] 패스워드 :as650103 입니다넵 ! 감사합니다 :) |
오래전에 짯던 코드이기도 하고 갑자기 리액트 쿼리로 모두 바꿔야해서 정리를 못한 부분도 많고 여러모로 리팩토링이 많이 필요한 코드 같습니다 솔직히 말해서 처음부터 다시 만들고 싶은데 그러진 못했습니다 리액트 쿼리를 사용한 부분 위주로 피드백 해주시면 감사하겠습니다, 특히 tanstackquery를 공부할때 다른 부분에서 안가는 부분은 없었는데 queryKey를 어떻게 올바르게 작성하는지 궁금합니다 제 개인적으로는 리액트쿼리를 너무 막쓰고 있는 느낌이 듭니다리액트 쿼리 키... 리뷰 하다가 조언드릴게 있으면 답변드릴게요 ! |
엑세스 토큰이 없거나 있을때 페이지를 이동시키는 기능을 구현해야 했는데 올바르기 구현하는 방법이 무엇인지 궁금합니다미들웨어로 서버사이드에서 첫 |
next js의 app router를 사용했는데 적절하게 사용하고 있는건지 궁금합니다저는 |
| export const instance = axios.create({ | ||
| baseURL: "https://bootcamp-api.codeit.kr/api/linkbrary/v1", | ||
| }); | ||
|
|
||
| axios.defaults.withCredentials = true; |
There was a problem hiding this comment.
인스턴스에 설정하시는게 어떨까요?
| export const instance = axios.create({ | |
| baseURL: "https://bootcamp-api.codeit.kr/api/linkbrary/v1", | |
| }); | |
| axios.defaults.withCredentials = true; | |
| export const instance = axios.create({ | |
| baseURL: "https://bootcamp-api.codeit.kr/api/linkbrary/v1", | |
| withCredentials: true, | |
| }); |
현재 전역으로 설정되어 있습니다. withCredential을 instance에 설정해두시는게 어떨까요?
다른 axios 인스턴스를 추가로 생성하실 때에 혼동될 수 있을 것 같아서 제안드립니다 !
| } catch (error) { | ||
| console.error("Error fetching links:", error); | ||
| throw error; | ||
| } |
There was a problem hiding this comment.
굳굳 ! 해당 api 파일에서는 로그만 기록하고 throw를 던지는 군요.
계츨의 책임 분배가 확실하군요 😊👍
|
|
||
| try { | ||
| const response = await instance.get( | ||
| "https://bootcamp-api.codeit.kr/api/linkbrary/v1/links", |
There was a problem hiding this comment.
이미 baseUrl을 설정한 것으로 보입니다 !:
export const instance = axios.create({
baseURL: "https://bootcamp-api.codeit.kr/api/linkbrary/v1",
});| const response = await instance.get( | ||
| "https://bootcamp-api.codeit.kr/api/linkbrary/v1/folders", | ||
| { | ||
| headers: { | ||
| Authorization: `Bearer ${accessToken}`, // Bearer 토큰 추가 | ||
| }, | ||
| } | ||
| ); | ||
|
|
||
| return response.data; |
There was a problem hiding this comment.
다음과 같이 구조 분해 할당을 해보는건 어떨까요?:
| const response = await instance.get( | |
| "https://bootcamp-api.codeit.kr/api/linkbrary/v1/folders", | |
| { | |
| headers: { | |
| Authorization: `Bearer ${accessToken}`, // Bearer 토큰 추가 | |
| }, | |
| } | |
| ); | |
| return response.data; | |
| const { data } = await instance.get( | |
| "https://bootcamp-api.codeit.kr/api/linkbrary/v1/folders", | |
| { | |
| headers: { | |
| Authorization: `Bearer ${accessToken}`, // Bearer 토큰 추가 | |
| }, | |
| } | |
| ); | |
| return data; |
response 내에 있는 속성들을 사용하지 않는 것 같아서 제안드립니다 😊
| throw error; | ||
| } | ||
| }; | ||
| axios.defaults.withCredentials = true; |
There was a problem hiding this comment.
해당 코드는 불필요해보입니다 !
instance에 설정해두시면 해당 코드는 지우셔도 됩니다 !
| if (isLoading) { | ||
| return <div>로딩중입니다</div>; | ||
| } |
There was a problem hiding this comment.
굳굳 ! loading 중일 때는 로직을 실행하지 않고 바로 반환하는군요 !
Guard Clause 패턴을 적절히 사용하고 있습니다 ! 👍
Guard Clause ?
다음과 같이 조기에 함수를 끝내는 기법을 의미합니다:
function calculateDiscount(price, discountRate) {
// Guard Clause: 가격이나 할인율이 유효하지 않으면 함수 종료
if (price <= 0 || discountRate <= 0 || discountRate > 1) {
console.error("Invalid price or discount rate");
return;
}
// 할인된 가격 계산
const discountedPrice = price * (1 - discountRate);
return discountedPrice;
}| return <div>로딩중입니다</div>; | ||
| } | ||
|
|
||
| if (error) return <div>{error.message}</div>; |
There was a problem hiding this comment.
에러도 마찬가지로 로직이 실행되기 전 반환시키고 있군요 ! 👍
| }, | ||
|
|
||
| onSuccess: () => { | ||
| queryClient.invalidateQueries({ queryKey: ["links"] }); |
| @@ -16,13 +17,21 @@ const LinkList = ({ | |||
| setSharedUrl, | |||
| linkData, | |||
| }: LinkListProps) => { | |||
| const { data, isLoading, error } = useQuery({ | |||
| queryKey: ["links"], | |||
There was a problem hiding this comment.
쿼리 키
쿼리키는 한 곳에서 관리되는게 일반적입니다. 상수로 관리를 하거나, 쿼리키 팩토리를 만들어서 동적인 쿼리키를 보관하기도 합니다.
다음 문서를 보면 많이 도움되실 것 같습니다 😊
| }, | ||
| }); | ||
|
|
||
| console.log(selectFolderId); |
There was a problem hiding this comment.
콘솔 로그를 남기게 될 경우 추 후 디버깅에 어려움이 있을 수 있습니다 !
git add .하실 때에 git add . -p를 사용하게 되면 변경사항을 스테이징에 올릴 때 파일 내 코드 단위로 잘라서 올릴 수 있습니다 ! 스테이징에 올릴 때 한번 더 검토하여 console.log를 검토해보실 수 있어요.
상당히 유용하므로 히스토리를 신경쓰신다면 꼭 사용해보세요 😊
어떻게 사용하지?
git add . -p
|
굳굳 ! 리액트 쿼리 처음 하시지만 정말 정말 빠르게 적응하시는게 느껴져요 재훈님 ! |
kiJu2
merged commit 5fef711
into
codeit-bootcamp-frontend:part3-홍재훈
요구사항
기본
심화
주요 변경사항
추후 변경사항
스크린샷
폴더 추가, 이름 변경, 삭제 기능
폴더에 원하는 링크 추가, 기존폴더에 있는 링크 다른 폴더에 추가, 즐겨찾기 추가 , 링크 삭제 기능
폴더 링크 공유시 /shared/folderId url 클립보드에 복사, 공유용 shared 페이지 구현
멘토에게
테스트 계정은 이메일:[email protected] 패스워드 :as650103 입니다
오래전에 짯던 코드이기도 하고 갑자기 리액트 쿼리로 모두 바꿔야해서 정리를 못한 부분도 많고 여러모로 리팩토링이 많이 필요한 코드 같습니다 솔직히 말해서 처음부터 다시 만들고 싶은데 그러진 못했습니다 리액트 쿼리를 사용한 부분 위주로 피드백 해주시면 감사하겠습니다, 특히 tanstackquery를 공부할때 다른 부분에서 안가는 부분은 없었는데 queryKey를 어떻게 올바르게 작성하는지 궁금합니다 제 개인적으로는 리액트쿼리를 너무 막쓰고 있는 느낌이 듭니다
엑세스 토큰이 없거나 있을때 페이지를 이동시키는 기능을 구현해야 했는데 올바르기 구현하는 방법이 무엇인지 궁금합니다
next js의 app router를 사용했는데 적절하게 사용하고 있는건지 궁금합니다
셀프 코드 리뷰를 통해 질문 이어가겠습니다.