Vue3.0 + Nuxt 프로젝트 진행 후 정리

프로젝트를 진행하며 기존에 배웠던 React.js나 React.ts가 아닌 Vue.ts를 썼다.

사실 처음부터 Vue3.0과 Nuxt를 쓰느라 Vue2와 Vue3.0의 차이, Vue와 Nuxt의 차이에 대해선 잘 모르겠다.

 

React를 사용할 때는 항상 axios를 service 폴더에서만 사용하여 백엔드와 연결했었는데, Vue를 쓰면서는 store에서 fetch를 사용하며 정보 교환을 했다.

덕분에 Pinia란 것을 처음 사용해보게 되었는데, 아직도 해당 코드를 전부 파악했다기보다는 내가 사용했던 코드는 파악한지라 계속해서 공부가 필요할 것 같다.

 

취준생인 우리들이 쓰는 차트메이커 라이브러리는 보통 chart.js나 d3.js 정도이다.

그러나 이번 프로젝트에서는 devExtreme이라는 새로운 라이브러리를 사용하게 되며 기존에 사용하던 라이브러리에만 안주하지 말고 계속해서 찾아볼 필요가 있다는 것을 실감했다.

확실히 devExtreme이 좀 더 복잡한 UI를 구성할 수 있었고, 제대로 컴포넌트화를 하면 매우 다양한 기능들을 잘 쓸 수 있었다.

 

날짜 지정하는 것엔 el-data-picker를 사용했는데, 이 경우, 내가 from과 to가 각각의 변수에 저장되는 것이 아닌 한 배열 내에 [0], [1] 인덱스로 저장된다.

기존 React와는 Vue의 사용법이 약간 달라 고생했는데, 이 컴포넌트의 사용법에 대해서는 수료를 마친 후 정리할 예정이다.

 

Vue는 React와는 컴포넌트화의 방법이 달랐다.

이 차이도 다음에 다뤄야겠다~!

아무튼 그 이유로 이번 코드에서는 내가 작성한 코드만 컴포넌트화 시키는게 가능했다.

다른 사람들의 코드가 내 코드에 달려있도록 코딩되어 프로젝트 마무리 전에는 컴포넌트화를 시키자고 얘기를 나눴었는데, 아무래도 연관된 데이터가 많아 컴포넌트화를 하려면 해당 코드를 짠 사람과 함께 해야 했다.

다만, 해당 팀원들이 발표를 맡게 되어 결국  오늘까지는 컴포넌트화에 실패했다.

남은 기간 동안 도전해 볼 예정이다.

 

각각의 변수를 한 개의 json으로 저장하고 다시 각각의 변수로 나눠 부르는 작업도 있었다.

이렇게 말하니까 굉장히 간단한 것 같은데, 나름 Vue를 처음 다뤄 store를 어떻게 쓰는건지도 몰랐다는 변명이 통하지 않을까ㅏ

 

선택 사항에 따라 다음 선택 사항을 disabled로 바꾸는 작업도 필요했다.

여기서는 알고리즘을 꽤나 열심히 생각해야 했는데, 아마 이래서 요즘은 프론트엔드도 코딩테스트를 보나보다.

 

다른 팀원이 작성한 코드를 토대로, 예를 들어 해당 팀원이 개발한 페이지에서 사용자가 입력한 것들에 대한 합계나 등등의 계산을 내가 맡은 페이지에서 렌더링해야되는 작업도 있었다.

이 작업을 하면서 타입과 에러처리의 중요성에 대해서도 알게되었다.

프론트A -> 백 -> 프론트B의 흐름인 페이지라 프론트A와 백에서 보내주는 타입이 프론트B에서 받은 때는 number가 string으로 되거나 string이 number로 되거나 하는 형식이 되어 꽤나 복잡했는데, 심지어 그 값들이 객체 안의 객체 안의 배열이라 값을 불러오는 것 자체에서도 꽤나 오류가 빈번했다.

아무튼 해결했으니 타입과 에러처리를 한 것에 대해서도 추후 정리해야겠다.

 

이번 프로젝트를 진행하며 처음으로 공통코드라는 것의 존재를 알게되었다.

처음에는 여기서만 사용하는 것인줄 알았는데, 알고보니 꽤나 많은 곳에서 사용하는 것이였다.

처음에는 백엔드가 아니라서 공통코드와 테이블 조인의 차이에 대해 잘 알지 못했고, 공통코드를 보내줘도 테이블을 조인해야 내가 쓸 수 있는 게 아닌가 싶었는데, 프로젝트의 막바지에 다다르며 공통코드를 사용함으로써 복잡한 테이블 조인을 최소화하고 보다 백엔드에서 불러오는 데이터의 양을 줄이기 위한 목적임이 아닌가 라는 생각이 들었다.

 

프로젝트를 진행하며 가장 어려웠던 작업은 리렌더링이다.

내가 맡은 코드는 복잡성이 적어 리렌더링이 비교적 쉬웠으나, 다른 팀원이 맡은 코드의 경우 테이블 3개를 한꺼번에 작업해야 했는데, 그로 인한 문제는 아니겠지만, 리렌더링이 꽤나 어려웠다.

한 표에서 변경되면 동일 페이지에 위치한 다른 페이지도 리렌더링 되어야 하는데, 새로고침을 하지 않으면 변경사항이 반영되지 않는 이슈가 있었다.

나를 포함해 프론트 3명이 모두 해당 작업에 돌입해 봤으나, watch, onMount, 함수에 할당, coumputed 등등 여러 방법을 써봐도 바뀌지가 않았다.