독학 어플 개발 day 20

오늘부터 프로젝트 개발을 시작하였다.

Kotlin 운동앱은 따로 마무리지었다.

하... 갑자기 크롬 팅겨서 다시 작성한다.

 

우선 Vue 프로젝트를 만들어주었다.

옵션들에 대해 설명하자면,

Babel : ES6+ 버전 이상의 자바스크립트나 JSX, 타입스크립트 코드를 하위 버전의 자바스크립트 코드로 변환 시켜 IE나 다른 브라우저에서 동작할 수 있도록 하는 역할을 하는 일종의 컴파일러 같은 개념의 Plugin 

[Vue.js] 바벨

TypeScript : TypeScript 지원 기능 

TypeScript 지원 — Vue.js

PWA : 프로그레시브 웹앱 지원

[PWA] Vue.js 프로젝트에 PWA 적용하기

Router : 페이지 간 이동을 가능하게 해주는 라우터 사용 옵션 

[vue.js] Vue Router 정리

VueX : Vue의 상태 관리 라이브러리

Vuex란? 개념과 예제

CSS Pre-processors : CSS 전처리기 (사실 CSS 부분을 따로 다뤄보진 않아서 아래 링크가 적합한지 잘 모르겠다.)

Vue.js에서 SCSS(SASS) 사용하기

Linter / Formatter : 코드 오류 검사 / 코드 컨벤션 유지 

EsLint Prettier 차이와 사용법 - Vue Cli를 이용하여 EsLint와 Prettier 편하게 설치하기

Unit Testing / E2E Testing : 단위 테스팅 / End to End 테스팅

단위 테스팅 — Vue.js

 

보다시피 Babel, PWA, Router, Vuex, Linter 등의 features를 골라주었고

Vue의 버젼은 2.x로 설정해주었다. (Vuetify 호환 때문에 / Vuetify는 아직 Vue 3.x를 지원하지 않는다.)

 

이후, vue add vuetify 명령어로 Vuetify를 설치해주었다.

Vuetify 설치 시, HomeView.vue에서 multi-word component 에러가 발생하여  아래 사이트를 참고,

컴포넌트 Discount 만들기 부분에러 - 코딩애플 온라인 강좌

 

위와 같이 eslint-diable-next-line를 추가해주었다.

추후 컴파일 시 오류가 발생하면 다시 수정해줄까 싶다.

그런데 어차피 삭제할 vue 페이지라 상관없을 것도 같다.

 

이후, 생성된 프로젝트 폴더를 GitHub Repository(private)에 게시하였고

 

Repository Settings로 들어가 팀원들을 프로젝트 공유자로 초대해주었다.

개발 진행은 이정도?

프로젝트에 필요한 API 자료를 조사한 뒤 프로젝트 회의를 준비하며 마무리했다.