실전 프로젝트 기획

드디어 마지막 실전 프로젝트! 아이디어 회의부터 기획, API설계 중

7주간 자바스크립트부터 리액트를 거쳐 한번의 미니프로젝트, 클론 프로젝트 그리고 드디어 실전프로젝트이다.

우리는 스타트업이 아니라 개발자로 성장하고 싶어하는 사람들이기 때문에

기획의 목적은 실제 서비스를 고려하기보다는 우리 팀원들에게 도전이 될만한 기술들을 써보는 프로젝트를 기획했다.

여행계획을 참여자들이 동시에 작성하는 서비스이다. 실시간 음성채팅 + 실시간 텍스트 편집 기능을 조합해서 구현하고자 한다.

그 계획에 지도 api는 간단하게 해결하고 넘어갈생각이였는데.. 지도 api도 꽤나 어려워보인다.

무엇보다 리액트에 적용하려니 아직 응용이 안되어서 일단 자바스크립트로 코딩하고 있다.

어찌저찌 검색기능에 이벤트 추가를 해서 적절한 데이터를 쏘는 것까지 구현을 했다.

일단 우리의 목적대로 참여자가 확정한 계획을 다른 참여자들도 실시간으로 볼 수 있어야 하기 때문에 프론트쪽에서 firebase 리얼타임 DB를 공부해보기로 했다. 원래는 일정추가 버튼을 누르는 순간 서버에 데이터를 보내고 다시 response로 추가된 상태의 데이터를 받아서 화면에 뿌려줄 생각이였는데, 그럼 일정 추가를 누른 참여자(1명)만 리랜더링 되고 나머지는 여전히 빈 화면이겠지? 그리고 시간 텀을 두고 또 다른 한명이 일정추가 버튼을 눌렀을때 그제서야 다른사람이 뭔가를 추가했다는 것을 알게되겠지?

이런 문제를 해결하려면 어떤 방법이 있을까 하다가 firebase realtime database를 알아보게 되었다. 또 계획이 수정될 수도 있지만 일단 지도에서 적절한데이터를 뽑았으니 어떻게 참여자들과 실시간으로 공유할 수 있을지 공부해봐야겠다!

 

https://www.figma.com/file/Wjh5nNrreFCXo6lQKraZSU/%EC%8B%A4%EC%A0%84-%ED%94%84%EB%A1%9C%EC%A0%9D%ED%8A%B8?node-id=0%3A1 

Figma

https://www.figma.com/file/ZvHmHcZjqaikpvmZjObvl0/%EC%8B%A4%EC%A0%84-%ED%94%84%EB%A1%9C%EC%A0%9D%ED%8A%B8(%EB%84%88%EB%82%98%EB%93%A4%EC%9D%B4)?node-id=0%3A1 

Figma