제가 회사에서 처음으로 진행한 프로젝트 들부터 하나하나 차근차근 정리를 해보려 합니다.
항상 시간에 쫓기고 프로젝트에 쫓기고 내 귀찮음에 쫓겨 블로그에 내가 진행한 프로젝트들 정리를 한번을 안했었는데 이제야 정신을 차리고 첫 프로젝트부터 천천히 회고록을 작성해 나가려고 합니다. 글제주가 없어 두서가 없을수도 있으나 열심히 작성해보려 하니 잘 부탁드립니다.😀
첫 vue.js 프로젝트의 시작
vue를 1도 몰랏던 채로 회사에 들어온 상황이었습니다.
아직 인프런에서 캡틴판교의 vue수업을 듣고있는 상황이었고 팀장과 저는 일딴 토이프로젝트겸 대형 프로젝트를 진행하기전 소규모 프로젝트를 진행하면서 입지를 다지기로했습니다.
저보다 선임인 백엔드개발자분중 한분이 nuxt.js 로 몇번 개인프로젝트를 진행한 경험을 갖고계셨고 회사에선 현재 진행하는 프로젝트를 vue와 typescript 로 진행하길 원했습니다.
그래서 결론적으로 백엔드개발자분이 풀스택으로 업무를 리드하며 처리하기로 하였고 저는 프론트엔드와 퍼블리싱을 위주로 작업을 진행하기로 하였습니다.
단체문자 발송 서비스 요약
- 사용기술💻
- NuxtJS2.0 - 검색 엔진 최적화(사실 검색엔진을 최적화할 필요는 없었는데 해당 프로젝트 개발 리드 분이 NuxtJS로 프로젝트 진행을 원하셨다...), 초기 프로젝트 설정 비용 감소 및 생산성 향상, 페이지 로딩 속도와 사용자 경험 향상
- TypeScript - 높은 생산성, 버그 예방, 호환성
- sass - 작업의 효율 향상, 유지 보수성 향상
- git & github - git을 사용하여 프로젝트 관리
- 서비스 내용
- 회사 내부 서비스중 고객들에게 일괄적으로 단체 메세지를 보낼수 있게 설정하는 사이트
- 대략적으로 병원에서의 고객들에게 서비스 차원으로 문자를 보내는 서비스를 제작
- 발송 내역등도 확인 가능
- 처음으로 새로들어온 디자이너와도 같이 협업한 프로젝트
이슈 사항
해당 프로젝트를 약 한달정도 진행했는데 가장 큰 문제점은 vue2.0 nuxt2 대는 typescript 가 최적화 되어있지 않는 이슈가 있었습니다. vue3버전으로 하자는 의견을 내가 제시했었지만 아직 안정화 되지 않은것 같다는 팀장님의 이유있는 반론에 nuxt2버전으로 갓던게 큰 이슈가 됏던 것입니다.
react 보다 자유도가 좀 낮은 프레임 워크인 vue는 vue3대에서 부터 typescirpt의 명확한 지원을 시작했고 vue2는 종종 jsx문법에선 타입추론이 안되는 부분들이 있었습니다.
또한 vue가 명확한 typescript 지원을 하지 않으니 vuex에서도 typescript 를 지원하지 않아 자체적으로 tpye 을 연결 해주어야 했습니다. 그때 당시만 해도 typescript관련 러닝커브가 낮았던 나는 프로젝트 리드 선임이 따라가는 대로 따라했었는데 그때 해당 이슈를 갖고 개인적으로 재 스터디를 진행해 ppt를 만들어 발표를 했었던 기억이 있습니다.
또한 vue 관련 러닝 커브가 좀 짧다 보니 computed에서 직접 get, set 쓰는 법을 모르고 @change나 @input을 쓰는 등의 입력 바인딩이 아닌 vue의 입력 이벤트를 쓰는 방법으로 진행을 했습니다.
트러블 슈팅
vue 에서 typescript 를 직접 연결 해주는 작업은 프로젝트 선임분이 주말까지 할애하면서 해당 부분을 작업 해주셨습니다. https://heewon26.tistory.com/311 블로그를 참조하여 진행하셨던것으로 보이는데 아무래도 state의 타입을 한꺼번에 몰아서 지정하다 보니 accessToken을 보낼때 nuxt의 middleweare에서 가끔 토큰을 제대로 보내지 못하는 현상이 발생하였습니다.(이때까지만 해도 몰랏던 이슈사항...)
타입을 지정하는 문제는 해결됐지만 새로운 문제가 생겨버린것입니다. 다행히 해당 서비스는 그렇게 많은 사람들이 사용하는 서비스는 아니었고 한 컴퓨터에서 여러 계정을 동시에 쓰는 정도의 트래픽은 발생하지 않았기에 해당 서비스에선 크게 문제되지도 않았고 그 다음 서비스가 진행되기 전까지는 발견조차 하지 못했던 트러블 이었습니다.
그래서 그때 당시에는 몇페이지 안되는 부분이었더라도 러닝 커브가 짧아 제작시간이 꾀나 소요됐었고 기능 하나 만들떄마다 절절 매는 상황이 연속이었습니다. 다행히 선임분이 리드로 프로젝트는 나름 성공적으로 오픈할수 있게 되었습니다.
마무리
어찌저찌 첫 사내 토이프로젝트를 마무리 지었습니다.
진짜진짜 많은 도움을 받았고 그때 vue를 지금의 절반정도 배웠던것 같네요. 생각보다 많은 기능이 들어가 있었고 css로 트랜지션만 만들어댔던 퍼블리셔때 생각도 많이 나면서 앞으로는 프로젝트 전체의 아키텍쳐 라든가 프레임워크에 관련된 디자인 패턴또한 생각하면서 초기 프로젝트를 구성해야 겠다는 생각을 하면서 저는 그 다음 프로젝트인 닥톡 리뉴얼 프로젝트에 프론트 메인으로 참여하게 됩니다.
해당 프로젝트의 이야기는 다음 포스트에 글을 작성하도록 하겠습니다.
어쨌든 우여곡절이 많았던 단체문자 서비스 프로젝트는 현재는 점차 서비스를 접어가는 방향으로 회사에서 방향을 잡고 있지만 저에게는 vue라는 신세계를 경험하게 해준 뜻깊은 프로젝트 였던건 변하지 않을것 같네요 흑흑ㅋㅋㅋ
그래도 해당 프로젝트를 진행하면서 디벨로퍼데이때 50명 이상 인원 앞에서 발표도 해보는 영광스러운 자리도 갖게되었던...그런 프로젝트를 잘 마무리 하게됩니다
