Vue 3 + Vuex 로 Todo-List 만들어보기 (1)

* 리액트하다가 Vue 공부 시작한 놈이 쓰는 글입니다! 누군가 보시고 잘못된 부분이 있다면 제발 이 불쌍한 중생을 구한다 생각하시고 알려주시길 바랍니다..

 

원래 기존에 만들던 Todo list가 있었지만 cli를 잘못 해서 다시 시작.

 

내 맥의 상태

- node v16.13.2 

- yarn 이 설치되어있다.

- brew 도 있음 (의미가 있나?)

- vscode 씀

 

1) Vue CLI 설치

$ yarn global add @vue/cli

이후 vue --version 을 치고 엔터를 눌러서 버전을 확인할 수 있다.

 

2) Vue 프로젝트 생성

$ vue create 프로젝트명

난 프로젝트 명을 'todo-list'라고 했다..

그러면 터미널에 이런게 뜬다.

? Please pick a preset: (Use arrow keys)
❯ Default ([Vue 3] babel, eslint) 
  Default ([Vue 2] babel, eslint) 
  Manually select features

Default 라고 되어있는 친구들 말고 'Manually select features' 선택. 수동으로 쓸 기능들 선택하는 옵션이다. 이동키에서 아래로 내려가는거로 컨트롤하고 엔터.

 

그럼 이런게 뜬다.

? Check the features needed for your project: (Press <space> to select, <a> to t
oggle all, <i> to invert selection, and <enter> to proceed)
❯◉ Babel
 ◯ TypeScript
 ◯ Progressive Web App (PWA) Support
 ◯ Router
 ◯ Vuex
 ◯ CSS Pre-processors
 ◉ Linter / Formatter
 ◯ Unit Testing
 ◯ E2E Testing

자동으로 Babel과 Linter/Formatter이 선택되어있는게 보인다. 이미 선택된 애들은 냅두자.  그 외에는 쓰고싶은걸 선택해주면 된다.

남은것들 순서대로 타입스크립트, PWA, Router, Vuex, CSS 전처리기, Unit test, E2E Testing..

타입스크립트는 자바스크립트를 맛본 사람이면 대게 뭔지는 느낌적인 느낌으로 알지만.. (이름부터 '타입'스크립트인걸!) 몇개는 몰라서 나머지는 하나하나 설명.

 

PWA - 이거 뭔지 몰라서 찾아봤는데 모바일버전을 앱이 아닌 웹형식으로 만들 때, 어플에서 가능한 앱푸쉬(카톡알림이 핸드폰 상단에 뜨는 것  등등)나 핸드폰에 진짜 어플마냥 아이콘을 추가해 줄 수 있...다고?!!!!!!! 나중에 이걸로 실험해봐야지.

Router - 뷰 컴포넌트로 페이지를 여러개 나누었을 때 경로를 정해주는 녀석. 원페이지로 할거면 선택 안해도 됨.

Vuex - 이 게시글에서 사용할 Vue의 전역상태관리툴... 근데 요즘은 pinia 권장한다카더라

CSS Pre-processors - Sass 나 SCSS 쓸 수 있게 해주는 전처리기.. 걍 CSS 쓸거면 안해도됨

Unit Testing - 소스코드가 잘 작동하는지 확인해주는 놈

E2E Testing - 사용자 입장에서 확인해주는 놈... 잘 모르겠지만 사용자 입장이면 빌드 후에 보여지는 화면을 체크한다는 거라 추측해봄

 

일단 나는 pc 기반의 단일페이지로 만들거고 전역상태관리는 Vuex, SCSS가 편해서 전처리기랑 E2E Testing 궁금해서 써볼거임.

키보드 이동키로 컨트롤해서 원하는 위치에 > 가 있다면 스페이스바로 라디오버튼을 활성화시켜주자.

? Check the features needed for your project: (Press <space> to select, <a> to t
oggle all, <i> to invert selection, and <enter> to proceed)
 ◉ Babel
 ◯ TypeScript
 ◉ Progressive Web App (PWA) Support
 ◯ Router
 ◉ Vuex
 ◉ CSS Pre-processors
 ◉ Linter / Formatter
 ◯ Unit Testing
❯◉ E2E Testing

엔터 눌러서 다음으로 넘어가면 Vue.js 몇버전 쓸거냐고 물어보는데 제목따라 3으로 간다. 

? Choose a version of Vue.js that you want to start the project with (Use arrow 
keys)
❯ 3.x 
  2.x

위에서 CSS 전처리기 선택했으면 뭘 쓸건지 물어본다. 난 SCSS 쓸거임.

? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported 
by default): (Use arrow keys)
❯ Sass/SCSS (with dart-sass) 
  Less 
  Stylus

엔터 누르면 이제 linter 랑 formater 뭐 쓰냐고 물어본다.

? Pick a linter / formatter config: (Use arrow keys)
❯ ESLint with error prevention only 
  ESLint + Airbnb config 
  ESLint + Standard config 
  ESLint + Prettier

linter는 잘못써진거 찾아주는 놈이고 formater는 규칙에 맞게 코드를 맞춰주는 놈이다. 난 Prettier 가 익숙해서 ESLint+Prettier 선택, 엔터.

 

그럼 이제 어느때에 정렬해주고 그랬으면 좋겠냐고 물어,,보는 것같다. 확신은 안서는데 on save 라는건 아마 vscode의 확장기능 prettier의 기능 중에 저장시마다 자동정렬해주는 기능이 있는데 그런거인듯? 그럼 아래는 커밋시마다... 싫다. on save로 해준다.

? Pick additional lint features: (Press <space> to select, <a> to toggle all, <i
> to invert selection, and <enter> to proceed)
❯◉ Lint on save
 ◯ Lint and fix on commit

그리고 아까 모르는 놈을 선택해줬더니 뭔 소린지 모르겠는게 나온다.

? Pick an E2E testing solution: (Use arrow keys)
❯ Cypress (Test in Chrome, Firefox, MS Edge, and Electron) 
  Nightwatch (WebDriver-based) 
  WebdriverIO (WebDriver/DevTools based)

E2E 테스팅 솔루션을 뭘로 헐거냐고? 뭔소리냐.

Cypress 는 어쩐지 사이퍼즈같은 느낌이라 흥미가 당긴다. 설명보니 크롬이나 파폭...엣지랑 어쩌구 브라우저에서 테스트 한다는거인가? 

뭐가 좋을지 모르겠어서 npm 사이트로 들어가서 다운로드수를 보았다. 

Cypress - 3,547,104

WebdriverIO - 1,464,659

Nightwatch - 172,353

 

원래 교대역 3호선에서 2호선, 혹은 그 반대로 갈아탈 때 사람들이 우루루 가는 곳을 따라 가면 거기가 길이다.

솔직히 세개가 무슨 차이인지 아직 잘 모르겠지만, Cypress 가 다운로드수가 제일 많다는 의미는 그만큼 저걸 사용할 이유가 충분한 사람들이 많고 그만큼 쓰기 좋다는 의미 아닌가?! 물론 나중에 한번 제대로 찾아보긴 하겠지만.. 지금 당장은 그냥 궁금해서 써보는거니 대충 사람들이 많이 쓰는거 써보자.

 

엔터 누르면 이제 위에 추가한 옵션들에 대한 설정을 어따 적을지 물어본다.

? Where do you prefer placing config for Babel, ESLint, etc.? (Use arrow keys)
❯ In dedicated config files 
  In package.json

친숙한 package.json에 넣어줄거시다. config도 상관없지만 나.. 무슨 플젝이든 새로 클론받으면 package.json부터 구경하는 버릇 있어서 거따가 넣을거임. 과거의 내가 뭔 짓을 했는지 까먹을 미래의 나를 위한 보험임.

 

다음은 이 질문이다. 지금까지 한 설정을 다음 프로젝트때도 써먹을거냐는 거임.

Save this as a preset for future projects?

기본값이 N이라 걍 엔터키 눌러주면 알아서 "No" 처리된다.

 

이게 마지막 질문. 뭘로 인스톨하냐는건데 난 yarn이 좋다. 빨라서! 조아!!!!

? Pick the package manager to use when installing dependencies: (Use arrow keys)

❯ Use Yarn 
  Use NPM

바로 엔터. 이제 설치가 시작된다...두구두구두구

 

...

🎉  Successfully created project todo-list.
👉  Get started with the following commands:

 $ cd todo-list
 $ yarn serve

프로젝트 생성이 완료되었다!! 이제 프로젝트로 들어가서 실행해주자... 저기 적힌대로 프로젝트에 들어간 다음 yarn serve 치고 엔터.

" DONE  Compiled successfully in ~ " 이 뜨면 localhost:8080 으로 들어가준다. 

 

두구두구..

잘뜬다!!!!!!! 이제 기본으로 들어간 컴포넌트들을 제거하고 투두리스트에 써먹을 컴포넌트들을 생성해주면 된다.

 

vscode로 프로젝트 폴더를 열어서 들어가보니 이쁘게 생성되어있다. 그리고 cypress 로고 이쁘다. 뭐임?

 

여기서 src 폴더만 건들어주면 된다.

src/main.js 를 들어가보니 Vuex를 이용해 만들어진 store 에도 잘 연결되어있다. 와! 

import { createApp } from "vue";
import App from "./App.vue";
import "./registerServiceWorker";
import store from "./store";

createApp(App).use(store).mount("#app");

 

심지어 store/index.js 에는 vuex 스토어 기본 형태가 이쁘게 생겨있다 이거 찾아서 칠때마다 킹받았었는데..!!!!

import { createStore } from "vuex";

export default createStore({
  state: {},
  getters: {},
  mutations: {},
  actions: {},
  modules: {},
});

 

이제 기본으로 들어간 컴포넌트 지우고 todo list 용 컴포넌트 새로 생성해주고 틀을 만들어주면 되는디............시간 왜이럼? 

거의 두시간이..사라졌다. 말이 되는가.

우선 여기까지하고 commit 해서 깃허브의 내 Vue 공부용 레포지토리에 저장.

 

투두리스트 틀 짜고 Vuex 제대로 하는건..내일..아니면 회사에서 시간날때 짬짬이..! 

 

 

- 참고문서

 

Vue CLI 설명 문서. 영알못이지만 코드 보고 대충 눈치껏 쓰기 가능.

https://cli.vuejs.org/guide/installation.html

Installation | Vue CLI

npm Cypress/nightwatch/webdriverIo

https://www.npmjs.com/package/cypress

cypress

https://www.npmjs.com/package/nightwatch

nightwatch

https://www.npmjs.com/package/webdriverio

webdriverio