개인 프로젝트 - Randomly (2023.02.09 ~)

개인 프로젝트 - Randomly (2023.02.09 ~)

 

 

⬅️ 이전 개발 일지

 

https://bmy1320.tistory.com/entry/%EA%B0%9C%EC%9D%B8-%ED%94%84%EB%A1%9C%EC%A0%9D%ED%8A%B8-Randomly

개인 프로젝트 - Randomly

 

 

📖 주제

스터디를 진행하면서 필요한 기능들을 구현한 프로젝트

 

 

 

🏠 배포 주소

https://randomly.pages.dev/

React App

 

 

🛠️ 사용 기술

 

- React

- Redux

- TypeScript

- CSS in JS (Styled-Components)

- Firebase

- CloudFlare

 

 

🏠 저장소

https://github.com/soohyun-dev/Randomly

 

 

 

---

* 생각보다 프로젝트 관련한 글을 작성할 게 많아서 쌓일때마다 따로 올리겠다.

 

 

 

 

 

✔️ 2023.02.09

 

기존에 프로젝트를 정말 잘 사용하고 있는데, 이제 기능 구현이 필요한 부분이 또 생겼다.

 

바로 유저마다 등록한 질문을 관리하는 것이다.

 

거기다가 질문리스트도 여러개 가질 수 있는 기능이 필요하다.

 

 

❓왜 필요할까?

 

일단 지금은 등록된 질문리스트 하나만 모두가 써야한다.

 

모르는 사용자가 오면? 그 사람은 어떻게 할 것인가??

 

아주 큰 문제이다. 

 

처음에는 스터디 팀원끼리만 사용할 목적으로 만든 것이기에 고려를 하지 않았었는데,

 

프로젝트의 확장으로 많은 유저가 경험할 수 있게 하고 싶기 때문에 새로 고민해야될 문제가 생겨버렸다.

 

필수적으로 해결해야한다.

 

또한,  기술면접 스터디가 생각보다 잘맞아서 따로 인원을 또 구성해 일주일에 두번 진행하기로 했다.

 

새로 하는 것은 질문의 양이 훨씬 많아야하기 때문에 따로 관리가 필요하다고 느꼈다.

 

이것을 어떻게 구현할 것인지 좀 고민이 필요할것같다.... 흠

 

 

 

 

 

✔️ 2023.02.11

 

🥲 해냈다!! 

 

이제 데이터를 컬렉션내의 하위 컬렉션에 저장해서 사용하려고 구조를 짜는데 생각보다 너무 까다로웠다.

 

초반에 잘 설계를 해놔야 나중에 갈아엎어버릴 일이 없을 것이라 생각해서 조금이라도 효율적으로 짜려고 했는데, 아무래도 백단쪽도 같이 하려다보니 생각할게 이중으로 많아졌다.

 

데이터를 어떻게 저장해야 내가 나중에 꺼내다 쓸 때 편할지 이런걸 나 혼자 다 고민하고 만들어야 해서 이 부분에서 시간이 좀 걸렸다.

 

 

❓ 하위 컬렉션이 필요한 이유

 

 

 

예를 들어 게시물의 댓글같은 경우에 필요하다.

 

게시물에 달린 댓글을 외부 컬렉션으로 관리하게 되면 각 게시물에 맞는 컬렉션을 구분하기가 까다로울 것이라 생각한다.

 

따라서 각 게시물의 문서내에 컬렉션을 두어서 그 게시물에 달린 댓글은 모두 여기서 해결하는 게 편할 것이다.

 

또 다른 이유로는 필요하지 않은 데이터 로드를 줄이기 위해서다.

 

게시물에 맞는 댓글들만 가져오면되는데, 외부 컬렉션으로 분류해서 그곳에서 댓글을 모두 관리한다면 필요하지 않은 데이터를 가져오는데 더 시간을 많이 쓰기 때문이다.

 

 

 

---

 

 

어느정도 구조를 잡고 파이어베이스 컬렉션 내의 컬렉션의 데이터를 불러오려는데 생각보다 잘 안되어서

 

어제 낮시간을 거의 이거 해결하는데 다 보냈다 😑

 

 

 

어제는 이후 일정이 있어서 더 이상 진행을 못했는데 오늘 아침 문득! 어 collectionGroup으로 그냥 호출해보면 되는거아닌가 하는 생각이 들었다.

 

내가 괜히 어렵게 접근한 느낌이 들어서 바로 생각한대로 해보았다.

 

그랬더니 되지는 않았지만 어제와 다른 에러문구가 떴다.

 

컬렉션 그룹의 index 가 필요하다고 에러와 함께 컬렉션 그룹 색인 설정을 하는 페이지로 연결 시켜주었다.

 

 

들어가보니 생성하기 알림이 바로 떴고 그대로 생성을 해보니 시간이 좀 지나 밑의 예외 사항에 있는 것과 같은 항목이 생성되었다.

 

이후에 다시 데이터를 요청해보니

 

 

 

 

 

뙇!!!!!! 데이터가 잘나온다!!!

 

캬 이거지~~

 

이제 데이터도 잘 불러지고 다음 구현을 할 준비가 되었다~

 

 

 

 

✔️ 2023.02.11

 

어제 산을 또 넘었다 ! 🤭

 

하위 컬렉션 내부의 불러오는 것까지는 성공했으니 이제 하위 컬렉션도 생성하는 부분을 주 목표로 삼고 구현을 해보았다.

 

결과부터 말하자면 

 

 

 

 

이렇게 게시물을 작성하면 comment 하위 컬렉션도 같이 생성되게 만들어주었고

 

댓글을 작성하면 comment 하위 컬렉션 내부로 값이 잘 저장된다.

 

 

ㅎㅎ 이 부분이 내가 가장 중요하게 생각한 이유가 뭐냐면, 이건 게시물-댓글만의 관계만 해결된 것이 아니다.

 

 

추후 내가 목표로 삼고있는 각 유저마다 자신만의 폴더를 가지고 그 내부에서 질문들과 각자의 팀원들을 관리에

 

대한 부분까지 더 나아갈 수 있었다 생각한다.

 

 

 

그렇기에 이 부분에 대한 구현은 나한테는 꼭 넘어야할 산으로 느껴졌으며, 결국 나는 해냈다!!!

 

 

안되면 될 때까지

 

 

과정이 순탄치는 않았다.

 

며칠간 공식문서와 블로그들을 서칭하며 내 프로젝트에 맞는 코드를 구현할 수 있게 되었다.

 

 

이 로직대로 코드를 더 잘 작성하면 이제 유저 별로 질문관리, 팀원관리도 잘 구현할 수 있지 않을까 예상한다.

 

 

 

 

📌 댓글 구현

 

 

등록 순으로 잘 정렬되어서 보여진다.

 

이제 수정, 삭제 기능도 필요해서 구현해야겠다.

 

 

혹시나 궁금해 하실 분들도 있을 수 있으니 하위 컬렉션에 댓글을 어떤식으로 저장했는지 코드를 일부 올려본다.

 

하위 컬렉션으로 이어지려면 각 게시물의 id 값이 필요하다. 이 아이디를 전달 받아서 쿼리값에 넣어주고 /comment 로

 

comment 이름을 가진 하위 컬렉션에 저장해주면 된다.

 

 

 

이런식으로 값이 잘 들어간다면, 성공이다.

 

댓글은 거꾸로 이 데이터를 보여주기만 하면 된다.

 

 

 

이것에 대한 전체적인 부분은 추후 게시물을 따로 올려보겠다. 

 

처음 접하시는 분들은 이 부분에서 많이 헷갈릴 수도 있다.

 

 

 

 

🛠️  현재 시간을 구해주는 Utils 함수 구현

 

게시물과 댓글을 구현하다 보니 작성 시각에 대한 부분도 생각하지 않을 수 없었다.

 

또한 시간별로 정렬을 해줘야하니 필수적으로 들어가야했다.

 

처음에는 작성컴포넌트에서 함수 사용없이 구현을 해주었는데, 이제 여러 컴포넌트에서 사용되어서 재사용성을 생각하게 되었다.

 

따라서 Utils 폴더 내에 날짜와 시각을 구해주는 함수를 구현해두었고, 필요할 때마다 가져다 쓰는 방식을 사용하였다.

 

• getDate() : 현재 날짜를 가공해서 return 한다. (yyyy-mm-dd)
• getTime() : 현재 시각을 가공해서 return 한다. (hh-mm-ss, 24시간제)
• getDateTime() : 현재 날짜와 현재 시각을 가공해 return 한다. (데이터 저장 시 date 키의 value로 저장다.) 

 

 

 

 

time은 데이터를 불러올 때 시간 순으로 asc, desc 를 상황에 맞게 사용할 수 있어서 유용하게 쓴다. 

 

 

이런식으로 사용되고 있다.

 

댓글이나 게시물을 등록순으로 정렬할 때 되게 편하다.

 

 

 

 

 

❓ 다음 구현사항

 

앞으로 구현할 것들을 좀 정리해보자!

 

기능 구현

• 유저별 질문 관리
• 유저별 팀원 관리
• QA 게시물 수정, 삭제
• 댓글 수정, 삭제
• 마이페이지에서 작성한 글, 댓글 확인
• 다크 모드

기술적인 부분

• suspense 도입
• ErrorBoundary 
• react-query (상태 분류)
• jest Test (Utils 함수 Test or Component Test)