Vanilla Coding 1st Project

바닐라코딩에 들어와 첫번째 프로젝트

8개의 조 중에 2개 밖에 없는 2명조가 되어 시작한다.

“패트와 매트” - 우경준, 김탁현

Idea brainstroming

프로젝트에 앞서 여러가지 idea를 교환했다.

아이디어는 Web만의 장점이라고 생각하는 생산성, 접근성 높은 가벼운 게임이라고 생각하고 각 카테고리에 맞춰 아이디어를 내어보았다.

생산성

  • 개발자 디스코드
  • 전세계 뉴스 모음
  • 생활습관(챌린저스)
  • 법률 도우미(로톡)
  • 소프트웨어 review

게임

  • A dance of Fire & Ice
  • Tap Sonic
  • 포트리스
  • 크레이지 아케이드
  • 샤오샤오 공중전
  • 미로찾기

도전해보고 싶은 기술 stack

  • GraphQL
  • TypeScript
  • JsDoc
  • Three.js
  • Redux Saga
  • next.js
  • electron.js
  • phaser

최종후보

“챌린저스”와 “로톡”은 생산성을 필요로 하는 웹이 아닌 휴대성이 중요한 모바일 앱에 잘 맞기 때문에 pass~

소프트웨어 review는 도전적인 부분이 없기 때문에 pass~

게임안에서는 공통적으로 좋아하는 포트리스를 골랏다.

최종 후보

  • 개발자 디스코드
  • 포트리스

포트리스의 경우 캐릭터 모델링, 지형 모델링 등의 외적인 부분이 중요한 게임인데 모델링을 할 줄 아는 사람이 없는 관계로 pass…

개발자 디스코드는 상용 프로그램 중에는 없는 기능이고 도전적인 부분이 많기에 서로 흥미를 갖고 도전해보기로 했다!!!!😆

GitCord (가칭: 개발자 디스코드)

개발자들의 실시간 코드 협업툴이다.

기능은 간단히 말하면 Zoom 혹은 Discord 같은 실시간 영상, 음성, 채팅 + Github의 코드 수정 기능이다.

기본 에디터는 방장이 소유하고 수정한 코드를 모두에게 공유하고 그것을 각자 필요에 따라 fork를 받아 수정하고 MR을 하여 코드를 수정해 가는 방식이다.

즉, "실시간으로 코드를 수정하고 피드백이 가능한 협업툴"이다.

현재 상용 프로그램중에는 이런 기능을 가진 프로그램은 없기 때문에 새로운 것을 한다는 생각에 큰 꿈을 가지고 기획을 시작했다!!

사용 기술

  • react.js
  • redux
  • redux SAGA
  • electron.js

  • codeMirror

  • WebRTC
  • socket.io
  • express.js
  • mongoDB

  • mongoose.js

  • JWT Token
  • 암호화 툴

기획과정

현재의 기획이 나오기 까지는 여러 헛발질을 거쳐야 했다.

코드 에디터 공유

코드에디터를 모두가 동시에 공유할시에는 도저히 진전이 될것 같지 않았다… 자기가 쓰고 싶은 것을 마구잡이로 써대면 답이 없어지는…😅

따라서 snapshot을 생각했다. 방장이 쓰고 있는 코드를 복사해서 자신이 가져오고 그것을 수정하고 가지고 있다가

나중에 방장에 의해 Feedback Mode로 전환되었을 때 자기가 가진 것을 공유하는 식으로 하려고 했다.

거기에 각각의 갈라진 코드들은 단순히 저장하고 개인폴더함을 추가했다.

하지만 여러가지 mode를 가지게 되면 Real-time이라는 정체성이 훼손되는 것 같았다. 실제로 멘토님들에게 설명하기도 힘들었다.

따라서 코드 수정방식을 개발자들이 알기 쉬운 fork와 Merge Request로 바꾸었다.

코드 에디터 수정 방식…

fork와 merge Request는 기존의 것과 변한 점을 나타내는 “diff” 기능 구현의 한계로 다른 방식으로 하기로 했다.

협의 된 사항

  • 구글 Docs처럼 여러 참여자들이 하나의 Document를 수정
  • 해당 방장이 참여자들에게 수정권한을 주어 수정에 참여할 수 있도록 권한 부여

Client와 Sever의 분리

이번 프로젝트는 Client와 Server를 분리하여 개발한다.

  • 협업의 편의성

    monolith구조는 하나의 프로젝트를 둘이 붙잡고 하기 때문에 수정이 굉장히 어렵지만 서버와 클라이언트를 나누면 작업이 수월해진다.

  • 확장성

    완성된 web App을 Electron.js를 이용해 desktop app으로 동시 이식을 계획하고 있기 때문에 서버와 클라이언트를 나눴다.

Redux SAGA

Redux Thunk를 이전에 써봤기 때문에 같은 기능의 다른 구현방식인 Redux SAGA를 사용해보고자 하였다.

특히, SAGA만의 강점이 있다고 하여 그것을 직접 활용해보고 싶었다.

  • Subscribe

    Thunk와는 다르게 SAGA는 특정 state를 구독하여 state에 의해 SAGA 이벤트가 발생할 수 있도록 할 수 있다고 한다.

Redux 확장 툴과 관심의 분리

개인적으로 Redux 확장툴들은 모두 useEffect에서 구현 가능하지만 로직을 나누어 쓸 수 있는 점이 이 extention을 활용하는 이유라고 생각한다. 관심의 분리!

즉, 코드 가독성에 큰 도움을 준다.

Component 안에 business logic들이 길어지기 시작하면 가독성이 한없이 떨어지기 때문이다…😫

Electron.js

web App을 Desktop App으로 만들어주는 신비로운 앱

이번 프로젝트도 slack이나 discord, visual studio code처럼 생산성 관련 App이고 web과 함께 desktop App을 지원하는 App이기에 똑같이 Electron을 사용하여 Desktop App으로 이식해보고 싶었다.

Web App 완성품을 만들고 그대로 Electron.js를 사용하여 Desktop App으로 이식 할 계획이다.

DataBase schema 간소화

Room schema 삭제!

이유: socket 서버 내에서 충분히 관리가 가능하기 때문에 불필요하게 DB에 저장할 필요가 없었다.

  // socket 서버 내 Room 관리 (Map type)
  {
    key: socket.id,
    users: [{ userid, editAuthorization: false }]
  }

Document schema 간소화

Document의 owner 삭제

이중 reference 관계가 됨으로 불필요

scss module -> styled component

css class 이름 convention인 BEM 법칙이 있다.

특히 “_“가 아닌 “-“로 띄어쓰기 등의 문자 나눔을 해주는데 scss module에선 지원해주지 않는다.

ex) styles.adf-as -> 불가

따라서 naming convention이 자유롭고 props로 값을 전달하여 style을 줄 수 있고 scss도 가능한 styled-component를 사용하기로 했다.