Vue.js TypeScript를 활용한 Stock Dashboard 포트폴리오 만들기

1. 개요

이 프로젝트는 Vue.js 심화과정입니다. TypeScript와 Composition API를 활용한 개발이며
Figma 디자인시안을 토대로 현업에선 어떻게 작업을 하는지, 어떻게 컴포넌트 관리를 하는지 등을
함께 살펴보며, 개발을 진행하도록 하겠습니다.
이 프로젝트를 통해 우리는 멋있는 프런트엔드 개발자가 Vue.js 개발자가 될 수 있습니다.

2. 프로젝트 환경 설정

Vue.js 개발을 보다 효과적으로 진행하기 위해 그리고 훗날 Nuxt.js 입문의 이해도를 높이기 위해
Vue.js Router 설정부터 Alias 설정, API 통신을 쉽고 빠르게 진행할 수 있는 플러그인 설치까지
함께 진행해보도록 하겠습니다.

• Vite로 Vue.js 세팅 : yarn create vite
• Vue Router 설치 : yarn add vue-router@4
• SASS 설치 : npm install -g sass
• SASS Dev 설치 : npm install --save-dev sass
• HTTP통신을 위한 AXIOS 설치 : npm install axios
• Date 포맷팅을 위한 Dayjs 설치 : npm install dayjs
• Type Node 설치 : npm install @types/node
• Chart.js 설치 : npm install chart.js
• Vue전용 Chart.js 설치 : yarn add vue-chartjs chart.js
yarn add vue-chart-3 chart.js
• 상태관리 라이브러리 (Store 관리) Pinia 설치 : yarn add pinia
• Tailwind CSS 라이브러리 설치 : npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p