Skip to content

Conversation

@seorang42
Copy link
Contributor

#️⃣연관된 티켓 넘버

CLAP-202

📝작업 내용

담당자 기능의 목록 조회 기능에 API를 연결하였습니다.
요청 거부의 경우 기획 상의 이유로 회의가 필요할 것 같아 기능 연결을 보류하였습니다.
목록에 결과가 없을 경우 표시될 NoContent 컴포넌트를 생성하였습니다.

🏞️스크린샷 (선택)

스크린샷 2025-02-02 오후 4 12 42 스크린샷 2025-02-02 오후 4 13 15

💬리뷰 요구사항(선택)

실수로 중간부터 깃모지를 사용하는 것을 잊어버려 깃모지가 없는 상태로 커밋되었습니다...
심지어 이전 브랜치인 CLAP-192에서 작업한 것을 중간에 인지하여 다시 CLAP-202 브랜치로 옮겨왔습니다...
다음부터는 더 신경 써서 작업하도록 하겠습니다!

@seorang42 seorang42 self-assigned this Feb 2, 2025
@seorang42 seorang42 added the ✨ Feature 기능 개발 label Feb 2, 2025
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

현재 데이터 요청하시면서 탠스택 쿼리를 쓰시는 곳에 기준이 있으실까요?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

보통 GET에는 항상 탠스택 쿼리를 사용하는 것 같습니다.
값을 캐싱해주기 때문에 불필요하게 데이터가 반복적으로 갱신되어 화면에서 깜빡 거리는 것을 최소화할 수 있고,
select 옵션을 통해 값을 가공하거나, isLoading, isPending 등 상태값을 제공해주는 것도 자주 사용하기 때문에
GET을 통해 데이터를 받아올 때에는 별다른 기준 없이 항상 사용하고 있습니다.

{ once: true }
)
const totalPage = ref(0)
const totalPage = computed(() => {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

오 watch와 computed를 사용하시는 기준이 있으신가요?
저번에 설명해주신거 같은데 기억이 안나네요 하하..
저는 주로 비동기작업이 필요하면 watch를 주로 사용하는거 같아서요

Copy link
Contributor Author

@seorang42 seorang42 Feb 2, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

제가 watch와 computed를 사용하는 기준은 '행동'이 필요한 것인가 '결과값'이 필요한 것인가로 나뉘는 것 같습니다.
말씀하신대로 비동기 작업이나 함수 호출로 인한 행동이 필요할 때는 watch를 사용하는 것 같고,
특정 값을 기반으로 하여 간단한 변환값을 도출해내야 할 때는 computed를 사용하는 것 같습니다.

computed는 값을 캐싱하여 계산에 관여하는 값이 변하지 않으면 다시 호출되지 않는다는 장점도 있는만큼 computed로 해결할 수 있는 상황에서는 watch가 아닌 computed를 사용하는 것 같습니다.
+Vue의 공식 문서에서도 computed로 처리할 수 있다면 watch보단 computed를 사용하는 것을 권장하고 있습니다!

Copy link
Contributor

@Minkyu0424 Minkyu0424 left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

고생하셨습니다 금방금방 하시네요
주로 tanstack 사용하실 때 api 페칭 함수 분리는 잘 안하시나요? 저는 주로 분리해서 사용했어서 이렇게하는 경우 재사용성이 좀 떨어지지 않을까요

물론 한 컴포넌트에서만 사용되는 경우라면 무방하다고 봅니다!

Copy link
Member

@BaekJiyeon02 BaekJiyeon02 left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

고생하셨습니다! 확인하였습니다🫡

@seorang42
Copy link
Contributor Author

고생하셨습니다 금방금방 하시네요 주로 tanstack 사용하실 때 api 페칭 함수 분리는 잘 안하시나요? 저는 주로 분리해서 사용했어서 이렇게하는 경우 재사용성이 좀 떨어지지 않을까요

물론 한 컴포넌트에서만 사용되는 경우라면 무방하다고 봅니다!

엇 저도 항상 fetch 함수를 분리해서 사용하고 있습니다.

@seorang42 seorang42 added 📬 API 서버 API 통신 and removed ✨ Feature 기능 개발 labels Feb 2, 2025
@seorang42 seorang42 merged commit 0199021 into develop Feb 2, 2025
@seorang42 seorang42 deleted the CLAP-202 branch February 2, 2025 16:13
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

📬 API 서버 API 통신

Projects

None yet

Development

Successfully merging this pull request may close these issues.

4 participants