타입스크립트로 프로젝트 기본 생성하기

기본적으로 js 기반의 프로젝트들은 프로젝트 명을 작성할 때 [소문자]로만 해주는 것이 좋다.

 

리액트의 경우

npx create-react-app [project name] --template=typescript

 

뷰의 경우

vue create [project name]

 

위와 같이 지정하면 선택 메뉴가 등장한다.

 

메뉴얼을 선택해주자.

그럼 초기 설정값을 내가 선택할 수 있게 되는데, 기본적으로 Babel과 Linter만 선택되어 있다.

TypeScript, Router, Vuex 등을 추가 선택해주자.  위아래 키보드로 이동해서 스페이스바를 눌러주면 선택된다.

선택이 끝났으면 엔터를 눌러주자.

 

Vue의 버전을 선택하는 화면이 나온다.

 

3.x를 선택해 주자.

이번에는 class-style component 신텍스를 쓸건지 물어본다.

기본적으로 N 값이 셋팅되어 있는데, 현재 Vue는 Composition API를 권장하고 있고, N를 선택해야 해당 기능이 활성화 된다.

 

 

좀 어려운 질문이 등장한다.  가볍게 생각하자.

바벨과 타입스크립트를 같이 쓸건지 묻는 건데, 기본값이 Y 다.  Y로 해주는 걸 권장한다.

 

 

이번엔 history mode를 쓸건지 묻는데, 이걸 사용하게 되면 서버쪽에서 별도의 was 설정 없이도 라우트를 변경할 수 있게 해주지만, 대신 모든 라우트에 # 이 붙게 된다.

선택이지만, 나의 경우 서버쪽에서 라우트 셋팅을 해줄 생각이라 N를 선택했다.

 

코딩 스타일을 규정하는 ESLint에 대한 질문인데, 나같은 경우 첫번째항목을 선택하지만, 경우에 따라 본인에게 맞는 것을 선택하자.

 

 

이번엔 코드 검사 도구의 실행 시점을 묻는다.

저장할 경우에 실행해서 검증하는 것과, 커밋할 때 묻는 것중에 선택인데, 당연하지만 저장할 때로 하자.

 

 

이 질문은 각각의 설정값을 babel.config.js와 같이 개별적으로 저장해서 사용할 것인지, 아니면 package.json에 다 때려 넣을 것인지 묻는 것이다.

프로젝트 규모가 좀 크다면 개별로, 작다면 package.json에 그냥 다 때려넣자.

마지막 질문은 현재의 설정을 저장할 건지 묻는다.

 

 

저장해 두면, 다음에 프로젝트 생성할 때, 동일한 조건을 바로 적용할 수 있다.

 

이렇게 해서 Vue3 Composition API 프로젝트까지 생성해 보았다.