SSAFY에서 Vue.js를 배웠고 실무에서 잠깐 Vue.js를 사용할 일이 생겨서 SSAFY에서 배운 내용을 복기하고 인프런에서 Vue.js의 대가 캡틴판교님의 강의를 통해 들은 내용을 토대로 토이 프로젝트를 진행해볼까 합니다.
물론 이렇다 할 주제가 떠오르지 않기 때문에 Vue.js 간단하게 UI 배치하고 Spring으로 API 만들어서 가지고 노는 것이 끝일 것 같습니다. 다만! OAuth2를 사용하여 소셜 로그인을 구현하는 것은 꼭 해보도록 하겠습니다.
이런 거창한 계획에 앞서 프로젝트 생성은 마치 공부를 하려는 학생이 책상을 정리하는 일이라고 생각합니다. 그래서 짧고 빠르게 책상을 정리해보도록 하겠습니다.
구글에 vue cli를 검색하면 가장 위쪽에 Vue CLI: Home을 제목으로 가지는 사이트가 있습니다. 그곳에 들어가보시면 가운데에 떡하니 "Get Started" 버튼이 있습니다. 버튼을 클릭해서 들어가 주시면 Vue CLI와 관련된 문서들이 있습니다. 그중 좌측에 Installation 메뉴를 선택해줍니다. 그러면 vue-cli 버전이 오래 된 사용자에게 기존 vue-cli 삭제 후 재설치를 권고하는 글도 있고요. Node 버전 요구사항도 있습니다. 공식 문서에서 요구하는 것은 해야겠죠?? Node는 설치해주셨을 거라 믿고 그냥 밑에 있는 명령어 진행하도록 하겠습니다.
npm install -g @vue/cli
# or
yarn global add @vue/cli
위 명령어를 사용하여 vue-cli를 설치해주시면 됩니다.
※ -g 옵션(global)이 있기 때문에 어느 위치에서든 저 명령어를 터미널에 입력해주시면 전역으로 설치가 됩니다.
그럼 vue-cli까지 정상적으로 설치가 됐으니, 이제 vue-cli를 사용해서 프로젝트를 생성해보도록 하겠습니다.
1. 프로젝트를 생성할 디렉토리를 만들어줍니다.
2. 해당 경로로 VS Code를 켭니다.
3. VS Code가 실행되면 VS Code에서 터미널을 실행시킵니다. [윈도우 기준 터미널 실행 단축키는 Ctrl + Shift + `(백틱) 입니다.]
4. 실행된 터미널에 다음과 같이 입력해줍니다.
vue create [프로젝트 이름]
그러면 다음과 같이 현재 설치되어 있는 Vue CLI 버전과 Vue CLI 버전이 새롭게 나왔다는 문구도 있고요, preset을 선택하라는 메뉴가 나옵니다. preset은 간단히 말해서 plugin의 집합입니다.
plugin을 일일이 선택하시지 않고 기본으로 가져가고 싶으신 분들은 Default를 선택하시면 됩니다. 다만 여기서 Vue CLI 버전이 4.5.x이신 분들은 Default([Vue 2] babel, eslint)를 선택해주셔야 합니다. 이번 포스팅에서는 plugin을 직접 선택하기 위해 Manually select features를 고르겠습니다.
Manually select features를 선택하면 위와 같은 화면이 나옵니다. 맨 위에는 이전에 어떤 항목을 선택했는지 알려줍니다. 그리고 선택하는 방법에 대한 설명도 나와있습니다. Space를 누르면 단일 선택, a를 누르면 전체 선택, i를 누르면 현재 선택되어 있는 것은 취소가, 선택되지 않았던 옵션은 선택이 되는 거꾸로의 버튼이라고 생각하시면 될 거 같습니다. 처음에는 Choose Vue version, Babel, Linter / Formatter가 선택되어 있는데요, 저희는 여기서 Unit Testing을 추가하고 넘어가도록 하겠습니다. Router나 Vuex 같은 라이브러리는 나중에 추가하는 방법을 따로 다루도록 하겠습니다. Unit Testing으로 이동하여 Space를 누른 후 Enter를 눌러줍니다.
그 이후에는 같은 방식으로 쭉 선택해주시면 됩니다. 그리고 가장 중요한 것은 Vue.js의 버전을 2.x로 해야 한다는 것입니다. 캡틴판교님께서는 아직 4.5.x에서 3.x를 상용으로 사용하기에는 무리가 있다고 말씀해주셨습니다.
그래서 옵션의 선택 순서는 다음과 같습니다. [처음부터]
- vue create [프로젝트 이름]
- Manually select features
- Choose Vue version, Bable, Linter, Unit
- 2.x
- Prettier
- Lint on save
- Jest
- In dedicated config files
- N
N을 입력한 이후에 기다리시면 Vue 프로젝트가 생성됩니다. 생성이 완료되면 생성된 프로젝트로 이동한 후에 npm run serve를 사용하여 프로젝트를 실행하라고 합니다. 이제 앞으로 여기에 여러 설정과 구현을 통해 프로젝트를 발전시켜 나아가 보겠습니다.