[Vue.js] Vue 프로젝트 생성 방법

vue 프로젝트 생성 방법

- vue create 프로젝트 이름
- Manually select features 선택
- 프로젝트를 어떻게 구성 할 것인지 선택
   ㄴ Babel -> es6문법을 구 브라우저에서도 동작 가능하게 es5로 바꿔줌
   ㄴ TypeScript -> JavaScript를 엄격한 문법으로 교정한 정적타입 언어
   ㄴ Progressive Web App (PWA) Support -> 모바일 처럼 웹을 구현 할 수 있게 만들어줌
   ㄴ Router -> 메뉴 화면을 구성 했을때 화면이동 하게끔 만들어주는 모듈
   ㄴ Vuex -> vue의 상태를 관리하는 모듈
   ㄴ CSS Pre-processors -> CSS 전처리기 CSS 문서 작성에 도움을 주는 도구
   ㄴ Linter / Formatter -> 코딩 문법 또는 코딩 규칙을 정해서 사용하게 도움을 줌
   ㄴ Unit Testing -> 코드 테스트 할 수 있게 도와줌
   ㄴ E2E Testing -> 코드 테스트 할 수 있게 도와줌
       Babel, TypeScript, Router, Vuex, Linter / Formatter 선택

- Vue 프로젝트 버전 선택
   ㄴ 3.X
   ㄴ 2.X
       3.X 선택

- Use Class-style component syntax
   ㄴ 클래스 스타일 Vue 컴포넌트를 사용할지인데, 추천값이 Y이므로 추가한다.

- Use Babel alongside TypeScript
   ㄴ TypeScript에 babel 설정을 할 것인지 물어보는 설정이고 추천 값이 Y이므로 추가한다.

- Use history mode for router? (Requires proper server setup for index fallback in production) (Y/n)Permalink
   ㄴ router의 설정 값 인데 history mode와 hash mode가 존재한다.
   ㄴ history mode : URL이 변경될 때 페이지를 다시 로드하기에 URL에 대해서 index.html로 전달해주는 서버 설정이 필요하다.
   ㄴ hash mode : URL 해시를 사용하여 전체 URL을 시뮬레이트하므로 URL이 변경될 때 페이지가 다시 로드 되지 않는다.
   ㄴ 일딴 무조건 yes

- Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): (Use arrow keys)Permalink
   ㄴ Css 전처리기를 설정하는 부분인데, Node-sass로 선택한다.
   ㄴ 다른 옵션들도 많이 있지만 size가 가장 작은 node-sass로 선택했다.

- Pick a linter / formatter configPermalink
   ㄴ eslint와 formatter를 설정하는데, tslint는 deprecated되어 lint는 eslint만 된다.
   ㄴ formatter는 trends 분석 을 하니 prettier가 가장 다운로드 수가 높아서 선택하였다.
- Pick a linter / formatter config
   ㄴ ESLint + Airbnb config -> 에어비엔비 팀에서 에어비엔비를 개발 할때 사용한 코딩 규칙을 사용하겠니?
   ㄴ ESLint + Standard config -> 자바스크립트에서 기본적으로 가지고있는 코딩규칙을 사용하겠니?
   ㄴ ESLint + Prettier -> VSCode에서 Prettier 확장프로그램을 사용하겠니?

- Pick additional lint featuresPermalink
   ㄴ Lint on save는 저장시 lint 검사를 제공한다.
   ㄴ Lint and fix on commit는 저장시 자동으로 fix가 가능한 것은 Fix까지 해준다.
   ㄴ 따라서 두 가지 옵션을 다 추가하였다.

- Pick a unit testing solutionPermalink
   ㄴ unit test인데 test를 한번도 해보질 못해서 잘 모르기에 Mocha + Chai로 선택한다.

- Pick an E2E testing solutionPermalink
   ㄴ E2E testing으로 추후 공부를 위해서 추가한다.
   ㄴ Cypress로 선택!

- Where do you prefer placing config for Babel, ESLint, etc.?Permalink
   ㄴ 설정 값들을 config 파일로 관리할지, package.js 에서 관리할지 고르는건데, package.js로 관리하는게 편해보인다.

- Save this as a preset for future projects
   ㄴ 지금 했던 프로젝트를 vue-basic으로 저장을 하겠니?