현재 프로젝트의 오류 핸들링과 리팩토링 단계에 접어들었다. 정신없이 MVP 버전을 만들때는 몰랐던 자잘한 오류나 오작동이 많았으며 코드 가독성이 떨어진다는 지적도 있어서 리팩토링할 부분도 많았다.
예를들면 이 리뷰 카드에서 리뷰에 달린 댓글 개수를 표시하는 '4'가 있다고 치면 이 리뷰페이지로 진입해서 댓글을 하나 달고 뒤로가기 버튼을 눌러서 다시 동일한 리뷰카드 보았을때 댓글 개수가 '5'로 업데이트 되는 것이 아니라 '4'로 남아있다가 새로고침을 했을때 비로소 5로 바뀌는 문제가 발생.
원인을 살펴보니 리뷰카드 컴포넌트가 의존하는 query 데이터와 리뷰가 달렸을때 invalidateQueries로 업데이트 하는 query의 queryKey 가 달랐기 때문이었다. 리뷰가 달렸을때 invalidateQueries로 둘 이상의 queryKey를 무효화 할 필요가 있었다.
지금까지 한번도 해보지 않은 시도여서 공식문서를 확인해 보았다.
import { useMutation, useQueryClient } from '@tanstack/react-query'
const queryClient = useQueryClient()
// When this mutation succeeds, invalidate any queries with the `todos` or `reminders` query key
const mutation = useMutation({
mutationFn: addTodo,
onSuccess: () => {
queryClient.invalidateQueries({ queryKey: ['todos'] })
queryClient.invalidateQueries({ queryKey: ['reminders'] })
},
})
위가 공식문서에 나와있는 예시인데 그냥 queryClient.invalidateQueries
부분을 연이어서 사용해도 문제되는 것 같지는 않았다.
이 방식을 사용하여 수정한 코드는 아래와 같다
const deleteCommentMutation = useMutation({
mutationFn: deleteComment,
onSuccess: () => {
toastSuccess('댓글이 성공적으로 삭제되었습니다!');
queryClient.invalidateQueries({ queryKey: ['comments'] });
queryClient.invalidateQueries({ queryKey: ['likes', userId] });
queryClient.invalidateQueries({ queryKey: ['reviews', userId] });
queryClient.invalidateQueries({ queryKey: ['reviews', placeId] });
},
});
invalidateQueries를 네번 사용하여 네개의 다른 queryKey를 업데이트 해주는데 다행히 의도한 대로 잘 작동하는 것을 확인하였다.
Tailwind를 쓰면 기본 설정되어 있는 색상명들이 있다. 이것들을 원하는 색상으로 재설장하는 방법을 찾아 적용해 보았다.
적용 하려는 색상은 디자이너님이 프로젝트에서 사용할 색상으로 뽑아주신 색상들이다.
이 컬러들을 프로젝트 내에서 편하게 사용하기 위해 tailwind 의 기본 색상을 위 색상을 대체하였다.
//taiwind.config.ts
module.exports = {
content: [
'./src/pages/**/*.{js,ts,jsx,tsx,mdx}',
'./src/components/**/*.{js,ts,jsx,tsx,mdx}',
'./src/app/**/*.{js,ts,jsx,tsx,mdx}',
'./node_modules/@nextui-org/theme/dist/**/*.{js,ts,jsx,tsx}',
],
theme: {
extend: {
colors: {
purple: '#7b4cff',
pink: '#ff518f',
green: '#4ff2a4',
blue: '#66b6ff',
yellow: '#ffd029',
},
backgroundImage: {
'gradient-radial': 'radial-gradient(var(--tw-gradient-stops))',
'gradient-conic':
'conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))',
},
},
},
darkMode: 'class',
plugins: [
nextui({
(후략)
위처럼 theme 내부의 extend 내부의 colors 객체 안에 사용할 색상들의 컬러코드를 입력하였다. 이렇게 함으로써 tailwind 코드를 적을때 purple 이라고 적으면 tailwind 기본 설정되어있는 purple 대신 #7b4cff 를 사용하게 된다.