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

 

⬅️ 이전 개발 일지

 

 

 

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

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

 

 

📖 주제

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

 

 

 

🏠 배포 주소

https://randomly.pages.dev/

React App

 

 

🛠️ 사용 기술

 

- React

- Redux

- TypeScript

- CSS in JS (Styled-Components)

- Firebase

- CloudFlare

 

 

🏠 저장소

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

 

 

---

 

 

 

 

 

 

✔️ 2023.02.13

 

내가 구현하려는 기능 부분은 다음과 같다.

 

 

🌝 이전 기능

 

1. 로그인을 한다. (로그인을 하지 않은 유저에게는 저장소에 저장된 질문이 보이지 않는다.)
2. 로그인한 유저들은 Interview 페이지에서 저장소에 저장된 질문들을 가지고 질문 연습을 할 수 있다.

 

🚫 문제점 분석

 

 

1. 보여지는 질문은 저장소에 저장된 공통된 질문이다.

 

 

처음 이 기능으로 구현이 된 이유는 이 프로젝트는 초기에 5명의 스터디원을 위해 만든 프로젝트였다. 

 

추후 확정성을 염두해두고 있었지만, 당장 필요한 기능들이 있었기에 스터디 진행을 위한 필수적인 기능들을 위주로 구현하였다.

 

따라서, firebase에 질문들이 저장되는 방식은 다음과 같았다.

 

 

 

questions 라는 최상위 컬렉션내에 모든 질문들이 관리되었다.

 

질문을 관리하는 컬렉션이 하나다 보니 다른 공간에서 별도의 질문들을 분류할 수 없다는 문제점이 있었다.

 

 

 

2. 보여지는 유저들은 저장소에 저장된 공통된 유저들이다.

 

1번과 비슷한 문제점이다.

 

 

질문들이 한 곳에서 관리되는 것처럼 유저들도 member라는 최상위 컬렉션에서 관리되어지고 있었다.

 

 

당연히 이 팀원에 속하지않는 유저들도 이 명단을 이용해서 Interview 플레이를 실행했어야 했다.

 

 

 

3. 한 유저가 여러 분류의 질문들을 관리할 수 없다.

 

1,2 번의 문제점과 합하여 이 프로그램을 만든 나조차도 별도의 질문,팀원들을 따로 또 관리할 수 가 없다.

 

 

예시를 들어보자.

 

나는 현재 A스터디에서 5명이서 20개의 질문을 관리하고 있다.

 

그런데, 다른 스터디인 B스터디에서 3명의 사람과 80개의 질문들을 가지고 프로그램을 돌리고 싶다.

 

현재의 시스템에서 B스터디에서 이 프로그램을 사용하려면 A스터디와 관련된 질문들과 팀원들을 삭제하고

 

B스터디에 관련된 질문들과 팀원들을 새로 등록해야한다.

 

이후, 다시 A스터디에서 이 프로그램을 사용하려면, 다시 B 스터디와 관련된 정보들을 삭제하고 A스터디의 정보들을 추가해야하는 매우 번거롭고 비효율적인 작업을 진행해야한다.

 

 

 

결국 근본적인 문제는 firebase 저장소에서 데이터를 비효율적으로 관리를 하고 있다는 것이다.

 

이 부분에서 개선점을 크게 느꼈고 이에 대한 부분을 구현하였다.

 

 

 

 

 

🌞 현재  및 구현해야할 기능들

 

이 부분에서 효율적으로 구조를 어떻게 짤지 고민이 많았다.

 

필요한건 유저들과 질문들을 따로 따로 관리할 수 있었으면 했다.

 

 

 

 

그래서 처음에는 위와 같은 방법으로 users 라는 최상위 컬렉션을 만들고 로그인한 유저가 폴더를 생성하면,

 

유저의 문서 내에 members와 packages 하위 컬렉션이 생성되게 만들었다.

 

두 컬렉션 내로 동일한 id 값을 주고 질문들과 팀원들을 분류하려고 하였다.

 

 

하지만, 문제점이 있었다.

 

이렇게 하면 매번 members와 packages 컬렉션을 탐색하면서 id 값이 서로 일치하는 정보들만을 뽑아내야 했었는데,

 

기능은 동작하겠지만, 불필요한 작업이 너무 많이 이뤄진다는 생각이 들었다.

 

 

이 방법도 별로 좋지 않다는 생각에 더 고민을 하던 찰나

 

그렇다면 각 유저마다 packages라는 하위 컬렉션을 하나만 가지고

 

그 컬렉션 내에서 폴더가 하나 추가될때마다 문서를 하나씩 늘려주면 어떨까?? 라는 생각이 들었다.

 

 

다시 설명하자면 유저가 폴더를 늘릴때마다 packages내에 문서도 하나씩 늘어난다.

 

이 문서 하나당 폴더 하나를 의미하고, 이 문서 내에서 팀원들과 질문들이 동시에 관리되게하는 것이다!

 

 

 

 

 

이렇게 구조를 짜보았고 결과는 위와 같다.

 

 

무릎을 탁! 쳤다!

 

이거지!! 이렇게 하면 id 값을 매번 비교할 필요도 없이 원하는 폴더내의 데이터들만 끄집어서 사용하면된다!

 

 

이 간단한걸 왜 바로 생각하지 못했을까!

 

뭔가 막힌 느낌이 뻥 ~ 뚫린 기분이다.

 

 

이렇게 하면 폴더를 선택할 때마다 그에 맞는 id값내의 정보들만 로드하면되니 벌써 편한 느낌이 든다.

 

 

 

새로 구현을 하다보니 리팩터링해야되는 코드들이 많아졌지만, 그래도 가장 근본적인 문제점을 해결했으니 그에 맞게 코드만 잘 작성하면 될 것 같다.

 

폴더마다 들어있는 질문들과 팀원들의 정보들을 CRUD 할 수 있고, 인터뷰 플레이도 잘 진행된다면 프로젝트의 사용 범위가 꽤 넓어질 것이라 기대한다!!!