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

 

 

⬅️ 이전 개발 일지

 

https://bmy1320.tistory.com/entry/dd

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

 

📖 주제

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

 

 

 

🏠 배포 주소

https://randomly.pages.dev/

React App

 

 

🛠️ 사용 기술

 

- React

- Redux

- TypeScript

- CSS in JS (Styled-Components)

- Firebase

- CloudFlare

 

 

🏠 저장소

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

 

---

 

✔️ 2023.02.17

 

 

일단 저번 게시물에서 내가 하나의 필드에서 member와 questions를 객체형태로 관리하기로 했었는데,

 

데이터를 저장하는 부분까지는 크게 문제 없었다.

 

하지만, 수정, 삭제를 구현하다보니 로직이 비효율적이라고 느껴졌다.

 

값들을 수정, 삭제하려면 직접 member나 questions 객체 내에서 해당하는 값을 직접 찾아 수행해줘야했고,

 

삭제를 하게되면 인덱스 같은 경우 모두 재정렬을 해야하는 불편함이 생겼다.

 

무엇보다 배열내 객체를 다루다보니 코드가 좀 지저분해지는? 경향도 생겼다.

 

 

그러다가 아니 그러면 member랑 questions를 하위 컬렉션으로 또 만들면 되지 않나 라는 생각이 문득 들었다.

 

그래서 한 번 코드를 갈아 엎을 각오를 하고 바꿔봤다.

 

 

수정 전

 

 

 

수정 후 

 

 

 

 

 

 

아.... 이거지

 

진작 이렇게 할걸 삽질했네 라는 생각이 몰려왔다 

 

 

그래도 뭔가 이제 정말 제대로 된 방법을 찾은 것 같은 느낌!!

 

실제로 코드를 다시 구현해보니 이전에 폴더를 구분하지 않고 사용하던 로직에서 크게 벗어나지 않게 만들 수 있었다.

 

 

 

 

 

 

🛠️ 관리 페이지 기능 

 

 

 

이렇게 질문 관리페이지에서 원하는 폴더를 누르면 폴더에 등록된 질문들이 쫙 뜨게 된다.

 

폴더에 맞게 질문을 추가할 수 있고, 각 질문을 수정 삭제도 할 수 있다.

 

 

 

이번 구현 중점 중 하나인 폴더별로 관리가 잘된다 

 

 

 

 

 

스터디 팀원들도 이렇게 폴더에 맞게 관리가 잘된다.

 

 

 

🛠️ 인터뷰 페이지 기능 

 

 

 

이제 그럼 대망의 실전!!!!!

 

여태까지가 폴더에 맞게 데이터들을 firebase에 CRUD 하는 과정이었다면,

 

이제는 이번주 대망의 목표인 인터뷰 플레이 페이지에서 등록한 폴더에 맞게 인터뷰를 진행할 수 있게 구현해보았다.

 

 

 

 

 

 

인터뷰 페이지에서도 관리 페이지에서 등록한 폴더가 잘 보인다.

 

원하는 폴더를 선택하고, 질문 분배를 시작하면 된다.

 

 

 

 

 

그러면 이렇게 폴더에 데이터에 맞는 정보들을 이전처럼 잘 보여준다.

 

 

 

폴더를 변경하면 이렇게 폴더에 맞게 정보가 다시 주어지고, 질문을 재 분배 하면 된다.

 

 

 

그럼 또 등록한 정보가 잘나온다!!!!!

 

 

---

💁‍♂️ 소감

 

내가 초기에 생각했던 것보다 기능이 좀 더 많아졌다.

 

사용자가 좀 더 편하고 효율적으로 사용할 수 있도록 구현하기 위해 생각하고 노력한 한 주였다.

 

목표로 한 기능 구현이 완료되니 뭔가 뿌듯? 시원하다~

 

그래도 생각보다 금방 구현했다!

 

다른 팀플이랑 스터디를 같이 하고 있어 여기에만 몰두할 수는 없었지만 틈틈이 매일 개발을 하였다.

 

그리고 완성~!

 

 

물론 앞으로 구현할 게 산더미다 ㅋㅋ

 

공지쪽도 더 다듬어야하고 마이페이지가 지금 굉장히 마음에 안든다.

 

근데 보여주는 정보가 아직 별로 없어서 뭘로 채워볼까 고민중~

 

다크모드를 이제 구현해볼까 한다.

 

 

그리고 지금 redux를 사용하지만, 기능 구현을 우선시하다보니 state관리가 제대로 안되고 있다.

 

이부분에 대한 코드를 대대적으로 리팩터링해야해서 할 게 많다

 

 

그래도 이 정도 구현을 해두니 다른 사람들한테도 사용해보라고 할 수 있는 정도가 된 것 같다 ㅎㅎ

 

유저별로 폴더관리를 할 수 있다는 점이 서비스의 확장성을 확! 늘려준 느낌이다.

 

 

앞으로 또 어떤 기능을 추가적으로 구현할지 생각해봐야겠다~