[Vue] typescript 를 활용한 Vue 개발환경 구축 (vue3반영)

* 본 게시글은 상업적 용도가 전혀 없으며, 개인적인 스터디의 메모용으로 작성된 것임을 명시한다. 참고서적을 기반으로 본인의 주관적 견해가 버무려져 있으므로 해당 게시글 조회 시 참고 바람.
*2023.07 update: 가독성을 위해 게시글을 수정하던 중 vue2가 지원 종료되고, vue3로 변화됨에 따라 cli 명령 사용에 변경사항이 있는 걸 확인해 내용을 갱신했다. 현재 글은 vue3를 기준으로 수정 중.

참고 서적 : 타입스크립트, AWS 서버리스로 들어올리다.

1. vue-cli 설치

vue2: cli를 통해 project를 구축할 것이기 때문에, 작업 환경에 vue-cli가 설치되어있지 않다면 아래 명령어를 실행해 cli를 설치한다.
이때, global로 설치하지 않으면 해당 프로젝트 내 폴더에만 적용되니 참고.
vue3: cli를 통해 init 명령을 실행하면 바로 프로젝트 생성 및 perset을 설정하는 내용이 커맨드 라인에 표시된다.

# ===========================
# vue2 version
$ npm install -g @vue/cli
# OR
$ yarn global add @vue/cli

# ===========================
# vue3
$ npm init vue@latest		# npm init vue@{version}

vue3의 vue@latest 의 경우 지금까지 배포된 vue 프레임워크 중 가장 마지막 버전을 설치한다는 의미.

1-2. vue project 생성 (vue2)

cli 설치가 완료되었다면, 프로젝트를 생성하고자 하는 폴더 생성/해당 폴더로 이동 후 프로젝트 생성 명령어를 실행한다.

# vue create {project-name}
$ vue create ts-proto

2. preset 설정

이하는 vue3 프로젝트를 기준으로 작성한다. init을 진행했다면, preset을 설정할 수 있는 커맨드 라인이 노출될 것. 

? Project name: > {project-name}		# 본인이 설정 할 project name 작성
? Add TypeScript? > No / Yes			# yes (TypeScript 프로젝트를 구축하고 있으니 당연)
? Add JSX Support? > No / Yes			# No
? Add Vue Router for Single Page Application development? > No / Yes	# Yes
? Add Pinia for state menagement? > No / Yes	# No
? Add Vitest for Unit Testing ? > No / Yes	# No
? Add an End-to-End Testing Solution?		# No
>   No
    Cypress
    Nightwatch
    Playeright
? Add ESLint for code quality? > No / Yes	# Yes
? Add Prettier for code formatting? > No / Yes	# Yes

이렇게 preset을 모두 설정하고 나면 "Done. Now run: " 완료 메세지와 함께 실행할 수 있는 명령어가 터미널에 찍힌다.
JSX 이하 preset 선택 기준은 모두 주관적으로, 아래에 기술한다.

• JSX: Html이 아닌 script 선에서 html 코드를 작성해 랜더링 하는데에 사용하는 방식으로, 개인 작업 성향에 따라 선택하면 된다.
           필자는 (proto 프로젝트지만) 사용하지 않을 예정이라 No를 선택한 것 뿐.
• Vue Router:  vue router는 vue로 SPA를 구현하는데에 있어 기본 옵션이라고 생각한다. 일단 설치해둬도 나쁠 건 없다.
• Pinia: vue3 이후 추가된 상태관리 모듈이라고 한다. vuex의 역할으로, vue3에도 vuex는 존재하기 때문에, 입맛에 맞게 선택하자.
• Vitest: 이번 구축에는 Unit Test는 따로 진행하지 않으므로 선택하지 않았다.
• End-to-End: Vitest와 동일한 이유.
• ESLint: lint는 문법 검사 모듈로, 기본으로 설치 해두는게 좋다고 생각한다.
  여담으로, 이전에는 TSLint를 설치했는데, 2019년에 지원종료가 결정되고 ESLint로 함께 사용한다고 한다. (19년 이후에 나온 책인데..? 싶지만 당시 vue 설치 옵션에도 있었던 걸 감안하면 20년도까지도 쓰는 분위기였나보다)
• Prettier: ESLint 설치를 선택하면 표시되는 옵션으로, 자동 줄바꿈/들여쓰기 등 코딩 포멧을 통일시켜주는 역할. 있으면 나름 편하다.
  
  (서적 기반으로 작성한 vue2에서는 Unit Testing 모듈(Jest)과 E2E(End-to-End Testing) 모듈(Cypress)도 설정했는데, 글을 추가 수정하며 생략했다. 자기 프로젝트에 필요하다 싶으면 설정하도록 하자)
  파일 구성배치 (prefer placing config for .... In dedicated files) 는 전용파일구성(In dedicated config file) 으로 선택. package.json 이 보편적인 것 같지만 전용파일을 구성하면 기본적으로 만든 프로젝트에서 추후 자신에게 맞게 설정을 변경하기 쉬워진다고 한다.

3. 파일 분리 관리작업

이번 프로젝트에서는 SFC(Single File Component:단일 파일 컴포넌트)방식이 아닌, 개발 언어 별로 파일을 나눠서 관리하는 방식으로 진행한다. (서적에서 그렇게 진행 했으니까)

SFC가 vue의 장점이자 특색이지만, 책에서는 파일을 분리해서 관리하는 이유를 아래와 같이 나열했다.

• 하나의 파일로 코드를 관리할 경우, 코드의 가독성이 떨어짐
• 각 파일의 크기가 커지게 될 수 있음

즉, SFC 방식을 포기하고 코드의 가독성과 협업성을 얻는 방향을 선택했으며 이를 통해 IDE 지원성도 향상될 수 있다고 기술되어있다.
다만, 파일을 나눌 경우 관리해야 할 파일의 개수도 늘어난다는(당연하지만) 단점이 동반된다.

3-1. vue-template-loader 설치 및 설정

파일을 분리해서 사용하기 위해 npm 으로 vue-template-loader 를 설치한다.

npm install vue-template-loader

3-2. loader 관련 파일 설정

root와 src 폴더 아래에 각각 vue.config.js / shims-html.d.ts 파일을 생성 및 아래와 같이 코드를 작성한다.

// vue.config.js
module.exports = {
    productionSourceMap: false,		// sourcemap file 생성 제한
    configureWebpack: {
    	module: {
            rules: [{
            	test: /.html$/,
                loader: "vue-template-loader",
                exclude: /index.html/
            }]
        }
    }
}

// src/shims-html.d.ts
declare module '*.html' {
    import Vue, { ComponentOptions, FunctionalComponentOptions } from 'Vue';
    
    interface WithRender {
        <V extends Vue, U extends ComponentOptions<V> | FunctionalComponentOptions>(options: U): U;
        <V extends typeof Vue>(component: V): V;
    }
    
    const withRender: WithRender;
    
    export default withRender;
}

위 파일들은 각 아래와 같은 역할을 한다.

• vue.config.js: typescript 컴파일 시 html 을 vue-template-loader를 통해 read하는 용도
• shims-html.d.ts: html 파일을 템플릿 형태로 인식하도록 지원

vue.config.js 파일에서 productionSourceMap option에 대한 짧은 설명
vue 프로젝트를  build하는 경우 sourcemap 파일이 생성되고, 이러한 파일은 웹 페이지 디버깅을 가능하게 한다.
이러한 sourcemap 파일이 생성된 채로 production 환경, 즉, 실제 서비스에 배포하는 경우 소스코드가 노출 될 수 있다는 뜻이고, 이를 원하지 않을 경우 해당 옵션을 설정해주면 된다. (javascript 컴파일을 막음)
이외에도 sourcemap 파일 크기가 작지 않아, build 시간을 줄이기 위해 build 최적화를 진행할 때도 사용하는 듯 하다.

 

---

(이하는 기존 글 - 수정 중)

추가로 따로 파일을 생성하지 않아도 src 폴더 내에 shims-tsx.d.ts 파일과 shims-vue.d.ts 파일이 있는 것을 볼 수 있다.

shims-tsx.d.ts 파일은 JSX-style의 타입스트립트 코드를 작성하기 위해 jsx 구문 자원을 활성화 할 때 IDE 에서 .tsx 파일을 사용하는 것을 허용해준다는 것 같다.

* JSX style(구문) 은 React에서 보편적으로 사용되는 구문으로 javascript 의 일종이나, component 를 script 코드로 작성할 수 있다. html 과 비슷해보이지만(...) javascript 로 컨텐츠나 component 핸들링이 가능한 것으로 보인다. (jsx 구문이 뭔지 몰라 급하게 구글링을 해서 얻은 개인적인 견해이므로 전문성이나 신뢰도는 보장할 수 없음을 알린다.)

** JSX는 Javascript + XML 을 합쳐서 탄생한 기존 자바스크립트의 확장 문법이다. 이를 통해 개발자가 자바스크립트 내부에 마크업 코드를 작성할 수 있고, 단순히 XML 만 아니라 변수나 프로퍼티의 바인딩 기능도 제공한다. 고 책에서는 설명되어있다.

shims-vue.d.ts 파일은 IDE(Integrated Development Environment, 통합개발환경) 가 .vue 로 끝나는 파일이 어떤 파일인지 understand 하는 것을 돕는다. 즉, 수 많은 파일 중 .vue 로 끝나는 파일이 어떤 파일인지 IDE 가 판단하기 쉽게 해준다.

해당 파일 설명의 출처

https://stackoverflow.com/questions/54622621/what-does-the-shims-tsx-d-ts-file-do-in-a-vue-typescript-project

 

 

이제 파일을 분할해서 관리하기 위한 준비가 끝났으므로, 하나의 vue 파일을 각 html, ts, scss 로 분리해서 구성한다.

분리해서 구성했을 경우 해당 .vue 파일 삭제 후 import 시 '____.vue' 로 import 했던 코드줄의 파일 확장자 명을 삭제해주면 된다. 정상작동 시 분리 이전/ 이후는 동일한 화면을 표시할 것.

 

vue 컴포넌트를 나눠서 사용하는 것은 개발자의 선택으로, 필수가 아니다. .vue 형태의 단일 컴포넌트 형태와 .ts 형태의 컴포넌트를 같이 사용할 수도 있음. 응용은 개발자의 몫.

 

만든 컴포넌트는 .ts 파일에서 import 로 포함시킨 후 @Component 데코레이터를 통해 사용한다. 데코레이터 내에서 component 를 등록하는 것은 이전 .vue 파일과 동일하게 

componentes: {
	component1,
    component2,
    ...
    component00
}

형식으로 등록 후 html 파일에서 컴포넌트 이름으로(파스칼, 케밥 표기법) 사용할 수 있다.

개발환경 구축은 여기까지.. 나머지는 공부하면서 적용해봐야 할 듯