사내에서 처음으로 진행하는 프로젝트 쪽에 참여하게 되었습니다.
규모는 그렇게 크지 않은 토이 프로젝트 수준이었지만 처음으로 사용해보는 vue , nuxt.js 그리고 typescript의 사용 계획을 잡고 초기 세팅을 들어 가게 되었습니다.
일정
첫 미팅 - 2022.03.02 첫 미팅을 진행하면서 필요했던 점은 사실 저 본인의 typescript와 nuxt 의 러닝 커브였습니다. vue 만을 공부하던 중이었는데 nuxt 를 사용해서 라우터와 미들웨어의 코드를 최소화하는 게 편하다는 양훈 님의 의견이 있었고 vue3 에서는 nuxt의 베타버전, 즉 완전하지 않은 버전이 사용되고 있었기 때문에 당장 상용에 적용하기엔 무리가 있다고 판단 되어 vue 2.6대의 버전과 nuxt 2.15.8대의 버전을 사용하기로 결정했습니다. 그전엔 꾸준히 주말에 스터디를 진행했던 부분들이 있었지만 그 부분들은 vue의 기초들과 JavaScript ES6 관련한 지식들을 뿐이었고 제가 미쳐 확인하지 못했던 부분들인 nuxt를 통한 라우팅과 typescript를 통한 명확한 타입정의를 위해 며칠의 공부시간을 갖게 되었습니다.
후에 월요일부터 바로 해당 프로젝트를 바로 시작하려 했으나 주말에 걸려버린 코로나 이슈 덕분에 (ㅜㅜ) 1주일간 집에서 요양하게 되었고 프로젝트 기간은 1주일정도 뒤로 밀려나게 되었습니다.
프로젝트 시작일 - 2022.03.14
첫날엔 준걸님이 NUXT 기초 세팅과 SCSS 으로 잡아 놓은 basic 컴포넌트들을 기반으로 15일부터 퍼블리싱 작업을 들어가게 되었습니다. 퍼블리싱을 진행하다 보니 typescript을 vue 에서 사용하려면 두 가지 선택지가 있었습니다.
- vue.extend 문법을 사용한다.
- vue class 문법을 사용해 vue-property-decorator
그중 저희는 외부 라이브러리에 의존하는것 보다는 1번 방법인 vue.extend문법을 써서 적용하는 방법을 택했고 그대로 퍼블리싱 작업을 22일까지 진행하고 기능 개발 날짜를 23일부터 시작하기로 하였습니다.
기능개발 시작일 - 2022.03.23
login-page 개발을 시작하는데 처음으로 마주한 난관은 typescript의 타입정의 오류였습니다. 막무가내 코딩을 진행하던 저는 검색을 하면서 나오던 기존의 vue 기능들을 함부로 적용해선 안된다는 부분을 login-page를 하면서 깨달았고 일단 기능완성을 하고 typescript 타입 추론 부분은 나중에 해결하자라는 생각으로 동작이 되는 한에서 개발 진행을 하였습니다.
후에 양훈 님이 BE개발이 끝나고 FE 개발을 도와주시면서 해결이 안되던 typescirpt 에러 부분들이 해결되기 시작했습니다.
1차 개발 완료일 - 2022.04.08
개발팀 회의 때 1차 목표일을 4월 11일로 잡았고 그때까진 계속해서 페이지 개발에 몰두했습니다. 최소 일정에 큰 레이아웃과 기능들을 최대한 구현하는 것을 목표로 하고 API 을 하나씩 붙이면서 양훈 님이 정해놓은 typescript 규칙 아래에 기능들을 구현하기 시작하였습니다.
1차 QA - 2022.04.12
사내 내부 일정으로 인해 일정이 하루정도 늦춰지고 11일까지 개발을 진행한 다음에 1차 QA를 4월 12일로 잡아서 진행하였습니다. 기능 관련해서 아직 미흡한 부분이 많이 나왔고 개발팀 내부에서의 QA에서도 아직 인지하고 있는 미완성된 기능들이 많아 개발팀 QA를 진행함과 동시에 눈에 보이는 미흡한 부분들을 보완해나가는 작업을 시작하였습니다.
2차 QA 및 개발서버 배포 - 2022.04.14
개발팀 QA를 끝낸 후에 서비스팀과 디자인팀의 QA를 같이 진행하였습니다. 중간에 개발되지 않는 기능들과 수정되는 기획들 같이 QA 하는 방향을 잡았습니다.
프로젝트 최종 마감일 - 2022.04.20
서비스팀에서의 QA를 마지막으로 개발 진행이 끝나고 상용배포를 진행하였습니다.
문제점
vue프로젝트가 처음이었던 저에게는 처음에 이 부분을 잡고 들어가야지 하는 부분들이 막상 손을 대기 시작하면 비효율적으로 낭비되는 구성들과 해결하지 못하는 에러들이 너무 많았습니다. 퍼블리싱을 하면서는 몰랐지만 api 를 붙이고 데이터 바인딩을 시작하면서 생각하지 못했던 문제들을 적자면 다음과 같습니다.
- 아직 익숙하지 않은 vuex의 사용
- vue에서 사용되는 scss scoped(범위 css)
- typedscript로 따로 정의되어야 하는 vuex 의 상태관리 패턴들과 vue의 속성들
- 의미 없이 너무 많이 쪼개놓은 컴포넌트 탓에 한다리만 건너도 될 props 나 emit 이 2,3번 더 작성돼야 됏엇다는 점
- 정의되지 않으면 바로 사용할 수 없는 emit, refs 등의 vue model 관련 타입 재정의
- vue map 함수 사용
- ajax와 설정이 다른 axios 첫 사용
개인적인 러닝 커브가 조금 짧았던 탓일까, 생각보다 많은 곳에서 시간을 잡아먹는 경우가 많았습니다. node birds에서 만들던 형태와는 다른 형태의 nuxt 였고 그에 적응하는데 있어 시간이 좀 걸렸기에 대부분의 스크립트 정리와 data binding쪽은 양훈 님의 해결해주시는 부분이 많았습니다.
vue3 에서의 nuxt 사용이 가능해 진다면 개발자가 따로 vuex에서 사용하는 패턴들에 관해서 type 정의할 필요가 없어지기 때문에 그 부분에 관해서는 따로 시간을 들여 타입 재정의를 할 필요가 없어집니다. (이 부분에서 양훈 님이 주말 동안 스터디 후 지금 프로젝트에 타입들을 재정의 해 오셔서 그다음 작업들이 굉장히 수월하게 진행할 수 있었습니다.)
아쉬웠던점
입사 후 새로운 프로젝트에 투입되었던 만큼 이게 이렇게 하는 게 맞나 하고 고민을 갖었던 시간이 많았습니다. 다행히도 양훈 님께서 현재 프로젝트에서의 방향성을 잘 이끌어주셨고 그 부분에 관해서는 많은 도움을 얻을 수 있었습니다.
개인적으로 typescript 관련한 스터디가 많이 이루어져 있지 않았던 상태였기에 각각의 프레임워크에서의 typescirpt 사용법을 확인하는 것들이 필수였고 그것만 이해하는 것에 시간을 좀 많이 뺏겼다 라는 생각이 들었습니다.
vue의 장점인 돔에 직접 접근하지 않아도 된다 라는 이점을 아직 잘 사용하지 못했던 부분들인 것 같습니다. 항상 타입 추론을 어떻게 해야 한다는 고민을 하다 보니 제가 생각했던 방향으로는 잘 접근해지 못했고 그 부분들이 프로젝트를 진행하면서 제일 아쉬웠던 부분들로 남습니다.
다음 프로젝트의 방향성
이번에 진행했던 프로젝트를 잘 기준 삼아서 다음 프로젝트를 진행하기 전에 많은 부분들을 참고하여 진행을 할 예정입니다. 다음 프로젝트를 진행할 때 nuxt의 버전이 실제로 적용할 수 있는 버전이 나온다면 vuex 패턴들에 관련해서 따로 타입을 정의할 필요가 없어져서 좀 더 원활한 작업환경을 갖출 수 있을 것 같습니다.
typescript 관련 스터디를 인프런을 통해서 vue 적용하는 방법을 다시 한번 진행할 생각입니다. 이번 프로젝트에서 가장 큰 비중을 차지했던 부분인 typescript 였던 만큼 이번 프로젝트에서 어떻게 적용되고 있는지 다시 한번 코드 분석을 진행해서 다음 프로젝트를 진행할 때 문제없도록 스터디를 진행할 예정입니다.
vue styled component를 적용해볼 예정입니다. 사실 이부분도 typescript 정의가 완벽하게 돼야지 진행을 할 수 있는 부분이라고 생각합니다.
css 전처리를 javascirpt 를 통해 진행하는 부분이기 때문에 vue에서의 props를 css에서 받아서 쓸 수 있다는 장점이 있습니다. typescript의 타입정의 되는 부분만 잘 적용이 된다면 좀 더 훌륭한 퍼포먼스를 다음 프로젝트 안에서 발휘할 수 있지 않을까 하는 부분이 있습니다.
개인적으로 프로젝트 todo를 작성하며 프로젝트를 진행해야겠다고 생각했습니다. 팀에서 업무의 일정을 정하면 그 일정에 맞춰서 제 개인의 일일 업무량을 정하고 그 업무량에 맞춰서 프로젝트를 진행하는 것이 프로젝트의 진행 퍼센티지와 제 역량을 확실하게 파악 후 개발 미팅에 있어서 여러 가지 의견을 내놓을 수 있기 때문입니다. hotfix를 제외한 프로젝트의 todo를 지정하고 일정을 진행해야지 상세한 계획 없이 큰 덩어리로만 프로젝트의 계획을 설정했을 때 업무 방향성과 진행에 큰 차질이 있을 수 있다고 판단되었기 떄문입니다.
하나의 프로젝트에 다양한 기획들이 나오고 그 기획에서 구현되는 기능들은 시간들을 꽤 많이 잡아먹을 수 있다는 것을 다시 한번 경험해 볼 수 있는 좋은 시간이었던 것 같습니다. 이번 토이 프로젝트 때 경험을 바탕으로 앞으로 더 질 좋은 코드를 구현할 수 있도록 노력하도록 하겠습니다.
읽어주셔서 감사합니다 🙇♀️