🥞 오늘 한 일
- 아웃소싱 프로젝트
- Tanstack Query 사용하여 supabase CRUD 구현 (테스트 페이지)
- 메인 페이지에서 supabase posts read 구현
- 글 작성 기능 구현 (이미지 url, 지도 api 활용 수정 필요)
- 댓글 기능 오류 해결
- 삭제 버튼 클릭 시 동시에 새 댓글 달리는 문제
- 댓글 추가 시 화면에 바로 구현되지 않는 문제
- style 관련 질문 응답
아웃소싱 프로젝트
CRUD 기능을 제작하는데에 꽤 오랜 시간이 걸릴거라 예상했으나 다행히 예상보다 일찍 끝나서, 다른 팀원분들을 많이 도와드릴 수 있었다. 두 팀원분께 style 위주로 많이 도와드렸고, 한 팀원분과는 댓글 기능을 가지고 오랜 시간 함께 머리를 맞대고 해결하는 시간을 가졌다.
또한 미리 만들어둔 CRUD 기능으로, 메인 페이지의 포스트를 가져오는(read) 기능, 게시물 작성 기능까지 빠르게 구현할 수 있었다.
import supabase from '@/supabase/supabaseClient';
export async function getPosts() {
const { data: posts, error } = await supabase.from('posts').select('*').order('created_at', { ascending: false });
if (error) throw error;
return posts;
}
export async function addPost(newPost) {
await supabase.from('posts').insert(newPost).select();
}
export async function deletePost(postId) {
await supabase.from('posts').delete().eq('id', postId);
}
export async function updatePost(updatePost) {
await supabase.from('posts').update(updatePost).eq('id', updatePost.id);
}따로 파일을 만들어 제작한 get, add, delete, update 비동기 함수들이다. 해당 함수들을 다른 파일에서 import하여 사용하도록 했다.
🍽️ 문제 해결
댓글 기능 오류
팀원분이 제작 중이셨던 댓글 기능에 두 가지 오류가 있어 둘이 함께 해결해보았다.
삭제 버튼 클릭 시 동시에 새 댓글 달리는 문제
STEP 1
처음에는 삭제 버튼을 클릭하면 내용만 사라지는 것처럼 보였다. 때문에 왜 내용만 사라지지? 하고 고민을 계속 해보았지만, 답이 역시 나오지 않았다. 삭제 로직 코드는 정말 완벽했다.
STEP 2
둘이 골머리를 앓던 도중 다른 팀원분께서 잠시 할 이야기가 있어 찾아오셨다가 같이 문제를 해결해보았다. 그 때, 댓글에 created_at이 나오게 해두었는데, 해당 값이 삭제 버튼을 누르면 계속 바뀐다는 것에 힌트를 얻어, 새로운 댓글이 동시에 추가되는 것이 아닌가 하는 가설이 나왔다. 그래서 확인해보기로 했다.
STEP 3
댓글 추가 함수에 console을 찍게 하고, 삭제 버튼을 눌러봤는데 해당 console이 떴다. 그 다음 코드를 확인해봤는데, form 안에 댓글 추가 및 삭제 버튼이 함께 있었고, 때문에 삭제와 추가가 동시에 되었던 것이다. 그래서 삭제 버튼에 type을 button으로 설정하고, 댓글 추가 버튼에는 type을 submit으로 설정하여 기능을 구별했다. 문제가 해결되었다.
아래는 해당 form의 전체 코드이고, 팀원분이 작성하신 코드에 문제만 함께 해결한 코드이다.
<StCommentFormSection onSubmit={addComment}>
{/* TODO comments 테이블에서 해당 postId의 항목 몇개인지 받아오기 */}
<p>n개의 댓글</p>
<StTextArea
type="text"
placeholder="댓글을 입력해주세요"
value={content}
onChange={(e) => setContent(e.target.value)}
/>
<StCommentSaveButton type="submit">저장</StCommentSaveButton>
<StCommentList>
<ul>
{comments?.map((comment) => {
return (
<li key={comment.id}>
{/* TODO user 닉네임 가져와야함 */}
<StCommentWriterInfo>
<p>닉네임</p>
<p>{comment.created_at}</p>
</StCommentWriterInfo>
{!commentIsEdit && editingCommentId === comment.id ? (
<input
value={newContent}
onChange={(e) => setNewContent(e.target.value)}
placeholder={comment.content}
/>
) : (
<p>{comment.content}</p>
)}
<div>
{/* TODO 버튼: 작성자 본인에게만 보여야함 */}
{!commentIsEdit && editingCommentId === comment.id ? (
<button type="button" onClick={() => updateCommentHandler(comment)}>
완료
</button>
) : (
<button type="button" onClick={() => setCommentIsEdit(true)}>
수정
</button>
)}
{commentIsEdit ? (
<button type="button" onClick={() => setCommentIsEdit(false)}>
취소
</button>
) : (
<button type="button" onClick={() => deleteCommentHandler(comment.id)}>
삭제
</button>
)}
</div>
</li>
);
})}
</ul>
</StCommentList>
</StCommentFormSection>댓글 추가 시 화면에 바로 구현되지 않는 문제
위 문제에 비해 비교적 간단한 문제가 있었다. 댓글 추가 시 화면에 바로 구현, 다시 말해 invalidateQueries 기능이 작동해야하는데 작동을 하지 않았다.
STEP 1
코드를 확인해보면서 우선 댓글 추가 로직을 훑어보았다. 특별히 문제가 없는 것이 확인되었다.
STEP 2
때문에 다시 제대로 처음부터 내 코드와 비교하며 천천히 살펴보았는데, invalidateQueries 기능을 위해서 기본적으로 있어야 할 queryClient가 없는 것을 발견했다. 때문에 추가해주었다.
const queryClient = useQueryClient();댓글을 추가할 때마다 화면에 바로바로 적용되는 것을 확인할 수 있었다. 문제가 해결되었다.
🍴 돌아보기
집단지성이 장점을 확인한 날이었다. 함께 문제를 해결하는 재미 및 쾌감이, 혼자서 해결하는 것보다 더 크기도 하다는 점을 알게 되어 기쁜 날이었다. 어릴 때부터 팀 플레이는 익히 들어온 부분도 많고 쉽지 않은 경우를 겪은 적도 많아 선호하지 않았었는데, 좋은 부분도 꽤 있는 것 같다는 생각이 드는 요즘이다.
🍳 내일 할 일
- 아웃소싱 프로젝트
- 게시글 작성 기능 이미지 구현
- 게시글 수정 및 삭제 기능 구현
