팀과제 - 뉴스피드 만들기 (1. 추가, 삭제 코드 구현)

  주특기 숙련 주차를 마무리하고 팀 과제의 시즌이 돌아왔다. 과제를 할 땐 항상 과제에 치여 TIL을 신경쓸 수 없었기 때문에 기록을 잘 못했는데, 이번엔 조금이라도 해놓자 싶어서 블로그를 쓴다. 

  격정의 포켓몬 개인과제를 지난 나는 이제 어느 정도 기능을 위한 로직을 짤 줄 알게 되었다. 추가, 삭제, 업데이트의 로직은 쉽진 않지만 검색과 질문을 겸하면 어렵지 않게 해낼 수 있는 수준이다. 따라서 나의 자신감도 많이 올랐다. 과제에 많은 파트가 있었는데 나는 미니 프로젝트 때 도전하고 싶어했으나 너무 어렵다고 해서 엄두가 안났던 '댓글 기능(추가, 수정, 삭제)'을 맡기로 했다. 팀원들하고는 기능 구현이 거의 마무리된 지금 시점에서도 크게 갈등을 겪지 않아서 기능 구현을 하기 위해 내가 어떤 노력을 했는지 서술하려고 한다. 

 

1. supabase로 insert(추가) 구현하기 

 처음 다뤄보는 supabase에 적응하기 위해 꽤나 고생을 했다. 테이블을 만드는 것 까지는 팀원들과 함께 해서 어렵지 않았으나, insert 기능을 supabase DB에 연결해서 구현하는 것은 또 다른 문제였다. 처음엔 포켓몬이나 올림픽 때 했던 방식과 같이 dev 내에서만 작동하는 로직을 짰는데, supabase는 공식 문서에서 제공하는 insert 메서드와 코드가 있다는 것을 알았고 애써 짠 코드를 다 갈아 엎었다. 입이 썼지만 배우는 과정이라고 생각하고 바로 공식 문서를 찾아봤다.

지금 보면 아주 친절하지만 처음 봤을 때는 뭔가 싶었다.

  블로그 글과 강의를 다시 보며 insert에 적용하려고 했다. 그러나 전혀 적용이 되지 않았다. 한참을 붙잡고 있다가 조 순회하러 오신 Chancellor튜터님에게 여쭤봤다. 

  문제는 supabase Table에 입력한 형식과 내가 코드에 입력한 형식이 일치하지 않았다는 거였다. supabase Table에는 날짜가 0000-00-00 형식으로 되어 있는데, 내가 입력한 new Date().get time() 메서드로는 그 형식에 일치하는 값을 반환할 수 없었다. 따라서 Date 형식을

const now = new Date();
  const formattedDate = now.toISOString().split('T')[0];

이렇게 바꿔주었더니 잘 동작했다. 이 기능 구현 하나로 supabase와 어떻게 연결하는지 감이 잡힌 것 같다. 형식 딱딱 맞춰서. 하라는 대로. 

 

2. 삭제 코드 구현하기

  삭제 코드도 공식 문서에 잘 나와 있었다. 이 코드와 filter를 써서 어렵지 않게 구현했다. 

혹시나 이 글을 보고 따라 구현하실 분을 위해 이미지 추가.