Vue 첫 걸음

Vue 하나도 모르는 상태에서 vue를 시작하면

최근 Vue 프로젝트와 API 서버 프로젝트를 번갈아가며 
기능 수정/개선 작업을 수행했다.

간단한 API 호출 코드 수정과
vue 라이브러리, 내장 v-디렉티브를 활용하여
조건과 데이터에 따라 일부 UI를 변경하는 정도까지는 할 수 있었지만 

FE 프로젝트 자체를 0부터 쌓아올린 것은 아니기에
집에서 사이드 프로젝트를 진행하며 정리하려고한다.

요즘 프로젝트 구성

global 환경

node.js - npm (or yarn)은
vue 프로젝트 환경을 구축하기 전에 설치해야 할 소프트웨어이다.

node.js는 브라우저에서만 작동할 수 있었던 JS를
자바스크립트 서버 환경에서 돌아갈 수 있게 한다.(로컬, 리모트)

크롬의 V8 자바스크립트 런타임 엔진을 기반으로 구축되었다.

vite.js

웹팩과 같이 js파일을  덩어리를 묶는 대신
네이티비ㅡ ES 모듈 임포트 기능으로 모듈을 불러오는 JS 개발 서버이다.

이전 기본 툴에는 vue cli가 있으며 웹팩을 사용한다.

vue 커뮤니티는 vue 프로젝트를 생성하고 관리하는 기본 툴로써
vue cli에서 Vite로 대체했다.

ts 문제

최신 프론트엔드 프레임워크의 프로젝트에서는
주로 Typescript와 의존성, 배포 설정 파일들이 함께 사용된다.

타이핑을 통해 체계적이고 가독성 높은 코드를 작성할 수 있는 장점이 있다.

당장 ts를 사용할 수는 없었다.

당장 npm init vue@{vue 버전}을 통해 프로젝트를 초기화해도

Cannot find module './App.vue' or its corresponding type declarations

라는 에러를 마주할 수 있는데

Typescript와 vue를 혼용해서 사용할 때
당장 처음에는 TS가 App.vue의 타입을 인식하지 못하기 때문에 발생한다.

.vue 모듈을 TS가 인식할 수 있는 타입으로 정의해 주어야 하는데
관례적으로 'shims-vue.d.ts' 라는 파일명에 정의한다.

이 파일이 어떤 역할을 하는지 궁금했는데
바로 .vue 모듈의 타입 문제를 해결하는 파일이었다.

'shims' 는 처음들어보는 용어인데
다른 환경과 호환이 되지 않을 때

호환성을 제공하기 위한 코드 조각을 말한다.

declare module '*.vue' {
    import {ComponentOptions} from 'vue'
    const componentOptions: ComponentOptions
    export default componentOptions
}

이 파일 안에 위 코드를 기입하면
.vue 확장자를 가진 vue 모듈들은 ts가 인식할 수 있다.

모든 .vue 확장자 파일들은 유효하며
Vue component의 타입으로써 타이핑된다.

마침내 컴파일

배포 타깃에 따라 정의해놓은 config에 따라

npm 명령어를 통해 vue와 TS로 작성된 파일들을 js로 컴파일한다.

주로 dist 폴더에 컴파일된 결과 파일들이 저장되는데
이 파일들을 서버에 업로드하여 배포를 마친다.