Gitcabinet 개발기 #1

https://gitcabinet.com/

문제를 풀면서 Git을 익힐 수 있는 프로젝트입니다. 이 프로젝트의 개발기입니다.

Gitcabinet

조금 발칙한 이유로 시작

3주 정도 회사에서 재택 기간이 주어졌습니다. 대담하게 제주도로 (몰래) 떠나서 일을 해야겠다고 생각했고, 3주 동안 혼자서도 할 수 있는 일을 고민했습니다. 강의를 주로 하니까, 강의에 도움이 되는 자료를 개발을 통해서 만들면 되겠다 싶었습니다. 대표님과 이것저것 얘기하다가 학생들이 git을 자꾸 이상하게 쓰니까, 그 부분에서 뭔가 만들면 어떻겠냐는 아이디어가 나왔습니다. 그걸 해보기로 했고, 빌미로 3주간 잠적에 성공할 수 있었습니다.

 

벤치마킹한 사이트

css의 flexbox 개념을 익히는데 많은 도움이 되었던 flexbox froggy에서 많은 영감을 받았습니다. 개념을 익히기 위한 다양한 문제를 제시하고, 내가 작성한 코드의 결과를 바로 확인할 수 있어서 저도 학습할 때 자주 사용하였던 사이트입니다. 문제 제시 - 해결 - 시각화의 흐름도 이 사이트에서 따왔습니다.

https://flexboxfroggy.com/#ko

Flexbox Froggy

 

git을 어떻게 구현하지?

두 가지 옵션이 있었습니다. 먼저 컨테이너를 띄워서 실제 git이랑 웹 페이지랑 연결하는 방법, 그리고 js로 git을 흉내 내는 방법이었습니다. 저는 후자를 선택했는데, 다음과 같은 이유가 있습니다.

• 사용자가 아무리 많아져도 서버 관리할 필요가 없다. (= 싸다. 전자의 경우는 1 사용자 = 1 컨테이너, 제가 도커를 잘 몰라서 틀릴 수도 있습니다. 양해를..ㅎㅎ) 
• git의 변화를 감지해서 시각적으로 표현해야 하는데, .git 안의 파일이 바이너리 형태여서 분석하기 무섭다. 반면에 js object는 익숙하니 무섭지 않다.

git은 class 문법을 사용해서 만들었습니다. 문제마다 다른 저장소가 존재해야 하기 때문에 그렇게 했습니다. 확장성을 위해서 최대한 실제 git이 동작하는 방식으로 구현하려고 했고, 이때 이고잉님의 git강의와 gistory가 많은 도움이 되었습니다.

 

개발환경

typescript로 알고리즘 문제를 풀어보는 정도로 맛만 봤었는데, 기억이 너무 좋아서 적용하였습니다. vue로 사이드 프로젝트를 해본 적이 없어서, 익숙한 react보다 vue를 선택하였습니다. vue3는 vue2보다 ts지원이 더 잘된다고 하여 채택하였습니다. vuex는 적용해보았는데 아직 타입 추론이 잘 되지 않아서 포기하였습니다. 아래는 경험해본 결과입니다.

• typescript 사용경험은 아주 훌륭합니다. 프로젝트 사이즈가 커지면 커질수록 ts가 js보다 많은 장점을 가진다고 느꼈습니다. js에 이미 익숙하신 분들은 꼭 ts를 사용해보기를 권합니다.
• vue3의 composition API는 확실히 options API보다 가독성면에서 뛰어납니다. data, method, computed 등을 나눠서 작성하지 않고 한 흐름에 이어서 작성할 수 있습니다.
• vue의 template은 타입 추론이 되지 않습니다. computed 등을 잘 작성한다면 크게 불편하진 않은데, 한 번은 template으로 해결이 안 되는 부분이 있어서 jsx를 중간에 도입하였습니다. vue+jsx의 조합도 나쁘지 않았습니다. 이 부분은 따로 포스팅할 예정입니다.

 

겪었던 문제와 해결 과정을 다음 글에 이어서 작성하도록 하겠습니다.