스파르타코딩클럽 내일배움캠프 54일차

오늘 일과 간단 요약

1. 댓글 CRUD 구현 시도 (오전)
2. 댓글 수정/삭제 기능 추가
3. 프로그래머스 level 0 1문제

 

 

 

 

 

 

댓글 기능 구현하기

어제 firebase 오류 났던 걸 해결하고 나니, 로직을 제대로 짰다고 생각했는데 전혀 아니었음을 알게 되었다. ㅋㅋㅋㅋ

투두리스트 배울 때 썼던 CRUD를 비슷하게 가져왔는데, 게시글 말고 댓글이 처음이라 그런지 제한사항을 까먹고 있었다.

다른 게시글에는 다른 게시글의 댓글이 보이지 않는 걸 생각해야 하고, 로그인한 유저가 아니면 수정/삭제가 뜨면 안되고..

이런걸 생각도 안하고 있던 내가 놀라울 정도였다 ㅋㅋㅋㅋ

 

그래서 아예 어제 했던 걸 전부 지우고 처음부터 다시 시작했다.

게시글 만들 때는 그런 조건들을 생각하지 않고 만들었었는데 댓글은 그렇지 않으니까...

오히려 안 해본 기능을 해보는게 나한테 좋기는 하지만, 앞으로 기능을 구현할 때 꼭 생각으로 큰 그림을 그려본 뒤에 해야겠다는 다짐을 하게 되었다. 무작정 만들다보니 오히려 더 시행착오가 나는 듯 하다.

 

 

 

 

 

 

댓글 수정/삭제 기능 구현

내가 삽질을 하는(ㅋㅋㅋ) 동안 진수님이 댓글 create, read 부분을 해결해주셔서 오후에는 내가 만들던 걸 멈추고

진수님이 하신 코드에 덧붙여서 수정 기능과 삭제 기능을 구현했다.

 

역시 잘 안풀릴 때는 다른 사람의 코드를 보는게 훨씬 공부가 더 많이 된다.

댓글 CR을 잘 해주신 덕분에 수정과 삭제 기능은 생각보다 그렇게 오래 걸리지 않았다. 

 commet id 값을 받아올 때 그게 헷갈려서 진수님한테 질문하고 나니까 금방이었다.

 

<TouchableOpacity onPress={() => deleteComments(item.id)}>
                    <AntDesign
                      style={{ marginLeft: 10 }}
                      name="delete"
                      size={24}
                      color="black"
                    />
                  </TouchableOpacity>

 

이 부분에서 deleteComments가 발생되는 게 comment id값과 이 id 값이 같아야만 삭제가 되는 것인데, 처음에는 이 id 값을 comments.id 값으로 받아왔다.

comments는 댓글 전체를 뜻하는데 그거의 id 값을 받아오려고 했으니 콘솔에 찍어보니 계속 undefined만 나온 것이었다.

 

이걸 알아낸 후에는 저렇게 item.id 로 변경하고 삭제 기능을 완료했다. 이렇게 쉬운걸....혼자 하면 잘 보이지 않는다 ㅋㅋ

 

그 다음은 수정 기능이었는데,

수정 역시 isEdit이 true가 되어야 수정하려는 input 창이 열려야 하는데, firebase에서는 isEdit이 true로 바뀌는데 input 창이 나오지 않아서 뭐였나 했는데 이것도 금방 알아낼 수 있었다.

firebase 부분

 const editComment = async (id) => {
    await updateDoc(doc(dbService, "comments", id), {
      comment: editText,
      isEdit: false,
    });
  };

 

원래는 comment: editText 가 아닌

text: editText였었다.

그러고 실행해보니 빨간색으로 표시한 부분이 바뀌어야 하는데 text 부분이 바뀌고 있었던 것이다..!

이걸 수정하고 firebase에서 바뀌는 걸 확인하면서 알게 되어서 그 부분을 위의 코드대로 바꿨더니 제대로 수정 기능이 잘 돌아가는 걸 확인할 수 있었다.

 

이런 걸 바로 못 알아채고 계속 고민해보고 삽질한 뒤에야 깨닫다니...ㅋㅋㅋㅋㅋ

나도 참 성격 급하다 싶다.

 

어쨋든 다행히 프로젝트 마감 전에 전부 완료해서 추가 기능이었던 댓글 기능까지 구현하게 되었다.

물론 내가 다 한건 아니고 진수님과 함께 진행해서 더 빨리 구현할 수 있게 된 것 같아서 뿌듯하다...!

 

 

 

 

 

프로그래머스 level 0 1문제

댓글 기능 완료하고 잠깐 짬내서 또 1문제 성공...역시 미루는 게 나였다는 것을....ㅋㅋㅋㅋㅋ

프로젝트 중간이라서 못할 줄 알았는데 잠깐이면 되는 거였다니.

 

오늘 푼 문제는 인덱스 바꾸기였는데,

약간 내가 javascript로만 풀려고 생각해서 그런지 예전에 c언어 잠깐 배울 때 썼던 방법이 더 효율적이라는 걸 문제 다 풀고 다른 사람 풀이 보고 깨달았다.

물론 그게 c언어에서만 쓰이는 방법은 아니지만 그 때는 매번 썼던 방법인데...그걸 이제서야 깨닫다니.

splice를 써보려고 구글링해서 문제를 풀었는데 다른 방법이 더 쉬워보일때의 기분이란 ㅋㅋㅋㅋ

지금 프로젝트하느라 좀 정신없어서 그럴 수도 있긴 한데 이럴 때 가끔 좀 웃기긴 한다.

 

아무튼 여기에 그렇게 많은 시간을 쏟을 수는 없으니까 이쯤에서 문제 푼 걸로 만족하기로...ㅋㅋㅋ

 

 

 

 

 

기능 구현 완료

댓글 기능을 아까 완료한 뒤에 CSS까지 맡아서 바꿨다.

이런 식으로 스크롤을 내리면 댓글이 나오고 지금 로그인한 유저가 동일하므로 수정/삭제 버튼이 나오지만,

로그인 유저가 아니라면 수정/삭제 버튼이 나오지 않는다.

CSS만 조금 추가했는데 제법 그럴듯해졌다. 우리 조 앱....생각보다 더 귀여운걸...?ㅋㅋㅋㅋㅋ

 

그러다가 홈 화면에서 댓글이 얼마나 달렸는지도 보고 싶어서 그 기능까지 추가했다.

혼자하면 절대 못했을 거지만, 집단지성으로 짧은 시간 안에 기능 추가 완료. 사실 기능이라기보다는 읽어와서

댓글 길이를 계산하는 거지만...ㅋㅋㅋ 장시간 프로젝트 하다보니까 머리가 안돌아갔었다.

 

그래서 이런 귀여운 앱 완성....!

 

사실 이미지 업로드 부분을 merge 하기 전이라서 홈 화면의 이미지가 다 동일하지만, 이것도 곧 바꿀꺼니까...!

짧은 시간안에 react native를 배우고, 프로젝트하면서 너무 어렵지 않을까 했었는데 역시 집단 지성으로 역할을 분담하니까 생각보다 덜 어렵게(?) 프로젝트를 진행한 것 같아서 다행이다.

 

 

 

 

 

 

짧은 일기

사실 이번 프로젝트는 지난 프로젝트처럼 온전한 컨디션으로 하지 못해서 아쉬운 부분이 많다.

react native 공부도 조금 더 필요했었는데 하지 못하고 프로젝트하면서 급하게 필요한 부분들 공부하다보니 이게 맞나, 싶기도 하고...체력 관리가 필요함을 절실히 깨닫는 프로젝트 주간이었다.

 

아직 일주일 회고를 할 때는 아니지만, 앞으로는 꼭 건강 관리 잘하면서 해야겠다.

금방 다음주에 또 프로젝트가 시작이던데 그 때는 100%의 컨디션으로 하기를....ㅋㅋㅋㅋㅋ

그래도 프로젝트는 나름 성공적으로 마무리하는 것 같아서 다행이다.