osam.kr에 대회로써 프로젝트를 진행하였다.
프로젝트 정보 : https://mof-cdc.notion.site/PX-4c48ee84d315407c90c6a809f02dab79

왜? 시작을 하였을까?

군대에 와서, 근무니, 일과니, 훈련이니, 여러 핑게로 지속적으로, 프로그래밍을 못하였고, 목표가 있어도, 일정 등이 잡혀있지 않아서, 하나를 완성하지도 못하는 코딩라이프의 연속이였다.

연등시간 2시간 안되는 시간동안 간간 히 코딩하고, 3일뒤에 코딩하고 하다보니.. 머했더라..? 등..

와중에, 후임병 한명이, 프로그래밍 너무 어렵다. 공부 도와달라 하며, 웹개발을 해보고 싶다고 하였다. 이기회에 공부에 소홀해진거, 나도 공부하는겸 해서 함 프로젝트를 진행해보자 라는 마음으로,

JavaScript 언어로 개발을 해보자 고 하였다. 또한, 기왕하는김에 나도 별로 없는 프론트 엔드를 당담해보자는 결심과 함께, 공부해보고 싶었던, Vue 프론트 엔드로 잡고 시작을 하였다.

활동은 어떻게 할까?

처음으로 내가 주도하여, 팀원과 함께 개발을 하는 프로젝트 인 만큼, 많은것을 계획하고, 도움이 되게 진행을 하고 싶어, 몇가지 규칙을 정했었다.

당초 계획은 각자 Branch 를 만들고 각자의 PR에 대하여 리뷰를 해주는 방법으로 계획을 하였다.

내가 알려주기로 한 후임병은 Git 이 무엇인지 부터 알려주는 단계부터 시작하여, Conventional Commit도 가능한 실천하자. 라는 목표를 잡았다.

이에 덜해, 이전처럼 기간을 안잡고 시작하면, 또 헤이해지겠다는 마음에 osam.kr에 출품하는 것을 목표로 진행 하게 되었다.

실제 진행은 어떻게 되었을까?

FrontEnd : Vue + vuex+TypeScript

BackEnd : JavaScript + sequelizer + mysql

최초 계획은 BackEnd도 Typescript 로 개발하는 것이였으나, JavaScript부터 똑바로 하고싶다는 의견을 반영하여, JavaScript 로 개발을 진행하게 되었다.

기획

무엇이 가장 우리에게 실용적일까, 고민하던중, 뚝근무를 4일에 한번 들어가는 나와, 6일에 한번꼴로 들어가는 파트너가 항상 px에서 원하는 물건을 살수 없었던 상황을 생각하여 px물품의 상태를 실시간으로 확인하는것을 생각하게 되었다.

• 핵심기능
  1. 원하는 물품의 재고를 실시간으로 확인
  2. 물품을 장바구니에 넣어두고, 한번에 구매하기
  3. 원하는 물품을 주문하고, 도착시 알람을 받기
  4. 원하는 물품을 신청 할 수있는 게시판 기능
  5. 물품별 선호도 모니터링을 통해, 효율적인 재고관리

TODO: 기획서 스캔본 추가하기

군대에선 사진을 찍을수 없어, 나중에 기회가 되면 찍어서 올리겠다.

FrontEnd

먼저 디자인에 시간이 많이 쓰일것으로 예상을 하였지만, 이것도 경험이겠거니, 하며 시간계획에 디자인도 집어넣었다. 기성된 템플릿은 안쓰고, scoped style 을 적용하여 개발하는것이다.

vue와 vuex의 데이터 저장및 함수 저장방식은 {}Object 안에 다 집어넣는 방식이다.

익숙하지 않아, 눈에 잘 안들어오는 이방식을 그대로 따라가면 절대로 시간내에 완성할 수가 없어보여, 먼저 이를 대체할 라이브러리들을 찾아보았다.

• vue

  1. vue-property-decorator

  2. vue-class-component

     제일 먼저 고려한것은 사용빈도가 많아 보이는 property-decorator이였다. 하지만, 기왕 vue 공부하는거 최신 버전으로 해야하지않겠는가? 하는마음에 vue3를 선택한 탓에 사용할 수가 없었다.

     알아보던중 property-decorator가 vue-class-component의 wrapper임을 알게되어, 이쪽으로 진행하기로 하였다. 다만.. 아직 vue3를 위한 문서가 작업되지 않아 걱정되었다. vue도 공부해야 하는데 해당 라이브러리에 대한 문서도 없다는것이 꽤나 큰 부담이였지만 일단 진행 하기로 하였다

• vuex vuex-module-decorators vuex-class의 선택지도 있었지만, 그냥 눈에 안들어와서 패스하였다. 선택한 라이브러리는 그냥 함수 작성하고, 앞에 @Decorator 만 추가하면 되서 간결해 보였다.
  

라이브러리도 알아보느라 시간이 많이 쓰이긴 하였지만, 코드들에 대해 직관적으로 이해할 수 있어, 빠른개발이 가능했던것 같다 향후 기회가 된다면 위의 라이브러리들을 사용하지 않고 개발해보고자 한다.

BackEnd

처음 계획은 T/S + typeorm 의 조합이였지만.. 당사자가 하고싶다고 하는것이 중요하기에, 방향을 바꾸게 되었다. DB의 schema도 직접 짜보고, api의 url을 직접 작성하게 시키며, 내가 갖고 있는 지식안에서 최대한 알려주었다.

개발

개발을 진행하며, 아쉬웠던 부분이 많이 나왔다. 실제 계획한것도 진행을 못한것도 많았다. 다음에는 조금더 잘 할 수 있었지 않았을까 하는 부분이 많았다.

내용을 얼기에 앞서 조금 변명을 해두자면, 수도 병원을 방문하면서, 당담 군의관이 확진이 되어 2주격리동안 개발을 못하였다. 이기간동안 파트너는 진행하였고, 내 진행은 늦어져서, 파트너의 진행을 세밀히 볼 기회가 되지를 못하였다. 너무 아쉬운 부분이였다.

개발하면서 프로젝트에 사용가능한 시간은 연등시간 뿐이였다. (개인정비떄 근무가있고, 주말에도 근무를 간 ㅠㅠㅠ) 4일중 3일 2시간씩 투자하여 개발을 하였다.

격리 복귀후 아하 이정도 진행을 해두었구나, 확인하고, 내것을 진행하기에 너무 바빳다. 파트너의 진행을 점검하는 부분을 빼먹은 것은 정말 반성하는 부분이다.

직접 css 를 적용하는 부분을 포기한것이 가장 아쉬웠다. 처음에는 tailwind 나 bootstrap을 안쓰는 것이 계획이였던 만큼 많이 아쉬웠다. 또한 디자인은 v-dashboard에서 따와서 개발을 진행하였다

초반에는 branch 를 최대한 나눠서 구현을 하자가 잘 지켜졌다.

시간이 지나면서 이는 점점 잘 안되었고, 서로의 일정 핑게로 리뷰도 잘 안하게 되었었다.

개발을 도움되게 진행하자 보다. 구현에 너무 급급해졌었다.

저것이 네트워크의 전부다...

상품의 정보를 불려오는 것은 동적 라우팅을 하기로 하였다.

주소에 포함된 id를 정보로 네비게이션 가드에서 정보를 가져오는 방식을 계획하였다.

beforeRouteEnter 를 사용하여, 해당페이지가 로드될때 정보를 저장하는 방법을 선택하였는데.. 호출이 안되었다.. 일단 결국 모든 page에 대하여 navigation guard를 로드되기 전에 호출하여, 페이지 정보 store을 갱신하는 식으로 구현을 하였다.

이는 나중에 자세히 찾아보니, 해당 가드는, this에 접근할 수 없는데, 접근하러 하여, 데이터가 반영이 안된것이였다.

개발과정에서, 멘토님이 결과물을 볼때, 항상 미리 수동으로 pull 당기고, 빌드 후 실행시키는 과정이 너무 반복스럽고 거슬렸다. 이에 지금이다 잡고, github-action을 통한 자동 배포 를 구성하였다

마침 항상 be측 코드가 린팅이 안되어있어, 읽기 어려웠던 부분도 있어서, 에러 뛰우면 한번 읽으라는 목적으로, lint 단계도 만들어서, 결과를 항상 볼수 있게하였다. github action을 처음 사용해보는 경험이 되었다.

프론트 엔드 작업이 어느정도 진행이 되고, api 호출하여 데이터를 가져오는 작업을 하려고 보는과정에서... backend측에서 status code 와 response 를 보내는 대신 전부 redirect 하는것을 발견하였다.

해당 내용을 수정해주면서, 로그인/권한을 확인하는 middleware도 간단하게 만들어 주었다.

처음에는 충분할것 같던 개발시간은 정말 부족하다는것을 느끼기 시작한것은 3주차 였다.

기본적인 틀들은 완성이 되었지만, 중요한 게시글 관리자 알림 등이 구현이 안되 있었다.

여기에 그러면 차라리 디자인을 매번 적용하기 보다, 게시글에 일반적인 markdown 의 css 를 적용하여 구현시간을 줄이자는 선택을 하게 되었다. marked 로 만들어진 html 텍스트를 v-html 안에 집어넣는 방향으로 진행을 하고, 해당 컴포넌트용 (일반css) 를 적용하였는데, 반영이 안되었다. v-html은 scoped style이 반영이 안된다고 한다. 전역 css로 id select로 집어넣었다

마치며

첫 프론트 엔드 개발, 첫 프로젝트 리드 등등... 많은것이 처음이였고 많은것들이 아쉬웠다.

결과물은 빈약하지만, 이번 프로젝트가 재미있었고, 정말로 많은것들을 배웠다.

반성

1. 일정관리

   일정관리리가 전혀 안되었다. 그나마 멘토님이 추천하신, 칸반보드가 있어서, 시간내에 구현못할것을 쳐내는 것이 가능했었다.

   추후에는, 세부 일정을 정하고, 각 주간에 구현할것들을 미리 정하고 구현하는 정하고 구현하는 과정을 거쳐보겠다.

2. review

   처음의 계획은 기능단위로 PR을 올리면서, 리뷰, 개발을 하는것이였다.

   나부터 지키지 못했다.

   이는 나중에, 팀원의 코드에 문제가 있는데, 수정할 시간도 충분하지 못하였던 결과를 가져왔다.

결과물

결과물은 osm.insiro.me 에서 확인 할 수있다.

id	abc0@sample.com
pwd	cdcmof

너무 이쁘지 않은 결과물이 나와버렸다... ㅠㅠ

해당 계정으로 볼 수없는 관리자 페이지는 아래처럼 되어있다

향후 과제.

1. vue 에대해 추가적인 공부

   (vue-class-component, vuex-modeule-decorator 사용안해도 가능하게..)

2. 일정관리

3. 리뷰에 익숙하기

4. 플로우 관리