본 게시글은 VScode 익스텐션 개발에 대한 기술적인 내용이 담겨져 있지 않습니다. 그냥 개발자들의 의식의 흐름을 작성한것이니 혹시 익스텐션 개발에 대한 기술적인 도움을 받고싶으시다면 공식문서를 참고하시기 바랍니다.
Is-Your-Friend-Coding-Now?
너의 친구는 지금 코딩 하고 있니?
1) 개발 시작
VS Code Extension을 만들어보고자 모인 우리는 어떤 익스텐션이 재미있을지 고민하기 시작했다.
2) 첫번째 GIVE-UP!
직전에 진행한 프로젝트 회의에서 라이트/다크 테마로 고민하다가 기가 막힌 해결책을 찾아낸 우리는 테마에 꽂혀 VS코드의 컬러 테마를 익스텐션을 통해 친구와 동일하게 맞추는 기능을 만들어보기로 했다. A와 B가 연결되어 있을 때, A가 테마를 변경하면 B에게 동시에 테마가 적용되도록!
그렇지만 extension API에서 테마를 변경하는 api를 찾지 못했다. 어찌 어찌 매달리면 찾을 수 있을지도 모르지만 최소한 오늘 안에 끝내지는 못할 것 같았다. 빠르고 재미있는 개발을 위해 빠르게 GIVE-UP.
새로운 주제를 찾기 위해 api에 뭐가 있나 이리저리 뒤적이기 시작했다.
3) 로고? 회사명?
어떤 주제를 할지 고민하고 떠들다가, 재직 중인 사람들의 회사 로고 스티커와 로고 변경 이슈에 대해 이야기가 나와서 ‘본인의 회사 로고를 우측 하단에 띄워두자’ 라는 의견이 나왔다. 하지만 취준생의 소외감 이슈와 다른 사람과 연결(sync) 기능을 사용해보고 싶다는 의견으로 주제를 살짝 바꾸게 됐다.
4) 누가 코딩 하는지 안하는지 감시 해봅시다.
다른 사람과 연결된다? 근데 그게 VS코드다? 그럼 이제 그 사람이 VS코드를 보고 있는지 안보고 있는지 감시를 해보자!
그래서 시작된 게 바로 ‘Is-Your-Friend-Coding-Now?’ 프로젝트이다.
그리고 이쯤 밥을 먹고 오면서 외국계 기업의 연봉이 높다는 이야기를 나눴다. 그리고 우리도 연봉 2억을 위해 지금부터 노력하자는 취지로 영어 대화를 시작했다. 뭐, 그렇게 유창한 영어는 아니고, 그냥 우리끼리 훈민정음 게임 하는 느낌이랄까.
연봉 2억을 위하여. Let’s Go
5) 이스 서버 프리?
다른사람과 연결을 하려다 보니 백엔드가 무조건 필요했다. 하지만 우리는 돈이 없다. 가장 빠르게 무료로 할 수 있는 것을 찾아보자
•
express.js + vercel kv
•
firebase
•
mongodb cloud
•
github gist with octokit
•
…
수많은 선택지를 나열하고 분석한 뒤에
우리의 선택은 그냥 ycha 개인 서버에 띄우기.
6) 유 어 지니어스. 아임 스튜핏.
다함께 개발 하면 응당 그렇듯, 오류가 나면 내가 잘못한거고 그걸 찾아낸 옆 사람은 천재다. 오류가 났던 부분이나 해결했던 부분을 다 캡쳐해두진 않아서 세세하게 기억이 나지 않지만, 보통 많이들 흔히 하는 실수와 오류가 대부분이었다.
•
도커 포트 반대로 설정하기 (3000:8003 → 8003:3000)
•
API 클래스 잘못쓰기
•
리턴 되는 값 형태를 잘못 알기
◦
배열로 리턴되는데 객체로 받아버리기
◦
알고보니 배열이 아니라 문자열로 받아야 되는거였기
•
curl 잘못쓰기
◦
Tip: curl 쓸 때 메서드는 "대문자"로 써야함
•
axios 잘못쓰기
◦
Tip: axios 는 delete 메서드에 바디를 넣을 수 없다..
•
오타 이슈
기타 등등 수많은 에러들…
갑자기 진행된 영어로 말하기(a.k.a 훈민정음게임) 때문에 디스!! 에러!! ,엑시던트 , 오마이갓 , 노노노노노노노노(다급) , 왓 이즈 디스? , 유 어 지니어스 , 오 아임 스튜핏 …
대충 이런 단어들만 오가며 진행했다. 더 어려운 단어가 나오는 오류는 한국말로 설명하면 되는데 그걸 굳이 영어로 설명하려다가 설명을 포기하게 되는(?) 사태가 가끔 나오긴 했는데, 뭐 어찌저찌 잘 풀렸다.
7) 위 해브 노 타임!
드디어 어느정도 완성을 하고, 다른 컴퓨터에서도 같은 익스텐션을 설치해서 테스트를 돌려보려고 했는데 우리의 인싸 팀원이 갑자기 30분 뒤에 떠나야 했다.
위 해브 노 타임! 을 외치며 얼른 배포 방법을 찾아봤다. 일단 깃허브에 올리려고 하는데, 레포지토리도 안 만들고 개발을 시작해서 급히 레포지토리를 생성했다. 그리고 복사를 하려는데, vscode 에서 드래그-드롭 으로 복사를 했더니 심볼릭 링크로 복사되어서, cli로 cp -rf 로 복사했다. 그랬더니 갑자기 작업했던 src/ 폴더 내부의 파일이 전부 사라져있었다.
. 멘탈이 나간 와중에 다행히 같이 작업하던 라이브쉐어에 코드가 남아있었다. 역시 Sync는 중요하다!
패키징만 하면 vsix 파일로 로컬에 익스텐션을 설치할 수 있는데, 갑자기 패키징에서 에러가 나기 시작했다. 남은 약 10분…
겨우 이유를 찾아서 고치고 패키지 파일을 공유하자 마자 팀원을 부르는 전화벨이 울렸다. 얼른 파일을 설치하고, 이름을 입력하고, 포커싱을 하자 마자 하단에 뜨는 이름!
와우. 드디어 성공!
이제 우측 하단에 vs코드에 포커싱을 하고 있는 사용자가 뜬다. 친구가 코딩 하고 있는지 감시 가능!
8) 왓 슈드 위 두 넥스트?
아직 해야할 일이 산더미 처럼 남았다.
소캣 서버로 바꾸기
친구 추가 및 우선순위 sorting
하나의 window에서 중복 유저 생성 방지
리드미 꾸미기
로고 만들기
…
