Vue 공식문서와 함께 프로젝트 실행

개요 

Vue 현재 진행중인 프로젝트에서 난 FE파트 PL을 맡게 되었다.

 

원래대로라면 Next.js로 진행하려던 프로젝트였을텐데.. 팀원들의 고민과 vue 추천으로 인해 끝내 Vue.js로 프로젝트를 작업하게 되었다.

 

물론, 프로젝트에 걸맞는 이유들이 있어 설득된 것이지만, 분명 프로젝트에서 활용될 Next의 장점들도 많다고 생각했다. 결과적으로,

 

내가 쓰고싶었던 건 Next.js였으나 사실 Next에 대해서 잘 아는 것보다 Vue.js를 잘몰라서 뭔가 팀원들에게 강하게 의견제시를 못하지 않았나 싶다.

 

단순히 한 기술에 대해서 잘 이야기할 수 있는건 단순 그 기술에대해서 정보를 나열할 때고, 대조를 하는경우 그 대조군에 대한 이해가 필요하다는 걸 깨달은 한 주 였다.

 

그럼 이제 내 친구가 될 Vue에 대해서 알아보자 혹시 모르니 Vue가 Next보다 매력적으로 다가올지

 

 

설치

Vue.js는 Next, React 처럼 npm으로 설치하면 되고, 나는 공식문서와 옵션들에 대해선 찾아보면서 진행했다.

 

간단하게  npm create vue@latest  로 프로젝트를 생성했다.

 

 

다음 같은 조건들로 프로젝트를 생성했고, 조건에 대해서는 다음과 같다.

 

1. Add TypeScript : TypeScript를 사용할지에 대한 질문 -> 사용하기에 YES
   
   
2. Add JSX Support : JSX문법을 지원하도록 할지에 대한 질문 -> React에 익숙한 팀원들이 대부분이기에 일단 YES
   
   
3. Add Vue Router for Single Page Application development : SPA를 위한 라우팅을 관리해주는 라이브러리 -> YES
   
   
4. Add Pinia for state management : 상태관리 라이브러리인 Pinia를 추가할건지에 대한 질문 -> Zustand를 사용할 예정 No
   
   
5. Add Vitest for Unit Testing :Vitest를 유닛 테스트 도구로 추가할지 여부 -> 테스팅을 써보고 싶어 일단 YES
   
   
6. Add Cypress for End-to-End testing : Cypress를 테스트 도구로 추가할지에 대한 질문 -> 위와 마찬가지로 YES
   
   
7. Add ESLint for code quality : Eslint를 사용할건지에 대한 질문 -> Eslint를 기본규칙으로 사용 할 예정 YES
   
   
8. Add Prettier for code formatting : Prettier를 사용할건지에 대한 질문 -> 없이 못산다 YES

 

 

생성 후 완료된 프로젝트 구조 은근 익숙한 구조이다.

 

 

Vue 프로젝트 실행

npm i 실행어를 통해 필요한 패키지들을 설치 후에 npm run dev로 실행을 한다.

 

참고로 Vite로도 하는 방법이 있던데 실제 프로젝트로는 Vite로 할지도 모르겠다

npm i
npm run dev

 

신기한점으로는 Next, React랑은 다르게 포트번호를 5713으로 실행시켜 보여준다.

 

 

또한, 두 개의 주소가 주어지는데 하나는 내가 만든 프로젝트 UI를 조회할 수 있는 Local과 개발에 도움되는 기능을 제공하는 DevTools인터페이스를 제공해준다.

 

두 화면을 띄우는게 번거롭다면 Mac 기준 Option+Shift+D 를 하는 경우 로컬 UI에서 작은 화면으로 확인이 가능하다.(우측)

 

실행이 잘 되는 것을 확인했다면 VScode에서 Vue를 인식하고 디버깅 및 컴포넌트 구조를 잘 보여주도록 익스텐션을 설치하자 

 

vscode에서 Vue를 검색 시 최상단에 위치하는 익스텐션 설치

 

간단한 Vue 개발준비를 마쳤으니 다음엔 Vue 기본 템플릿 문법을 사용해보면서 JSX와의 차이와 어떤 것을 주로 개발할 때 사용할지 고민해보는 시간을 가져야겠다.