다국어 지원 웹, 파이어베이스 로그인까지 #1

웹 개발자가 아니다 보니 공부한 내용을 너무 빨리 잊어서... 사내에서 공유한 부분을 정리해봤다. 그나저나 티스토리 몇년만인가... 암턴 뷰와 뷰티파이를 기반으로 다국어 파일을 지원하는 웹 사이트의 로그인 부분까지만 간단하게 만들어보자. 파이어베이스도 함께 사용한다.

 

##1. 준비

Node.js

Visual Studio Code - Code Editing. Redefined

기본적인 설치가 끝났으면 VSCode를 실행하고 단축키(CTRL+`)로 파워쉘부터 연다.

 

프로젝트 환경을 vue cli로 만들 예정이므로 글로벌(-g)하게 설치부터 한다.

> npm install -g @vue/cli

Vue CLI

프로젝트를 생성해보자.

> vue create project-name

 

Manually를 선택해서 위와 같이 세팅한다. 메뉴얼로 세팅을 시작해서 Babel, Router, Vuex를 선택하고 히스토리모드 지원을 Yes 그리고 설정 파일에 대한 부분은 package.json에 통합으로 설정하고 마지막은 해당 설정을 저장하고 다음에도 쓸래? 인데 아니오~~를 선택한다.

 

이제 프로젝트 폴더에 뷰티파이를 세팅해야한다.

> cd project-name 
> vue add vuetify

 

아까와 달리 이번에는 Default를 선택하고 확인해보자.

 

> npm run serve

 

이로서 뷰티파이를 사용하기 위한 기본적인 세팅은 끝났고 지금 생성한 프로젝트를 VSCode의 File->Add folder to Workspace... 메뉴를 통해 EXPLORER에 등록해주자.

 

아마도 위와 같을텐데 하나씩 고쳐 나갈 예정이다. 참고로 node_modules 폴더는 npm을 통해 관리되므로 건드릴 일 없고 package-lock.json 파일도 건드릴 일 없다. package.json 파일은 중요하므로 따로 공부해두는게 좋다. 지금은 패키지 관리를 위한 설정 파일이다라고 알면 된다.

 

이제 앞으로를 위해 VSCode에 몇가지 확장 플러그인을 설치하고 끝내자.

 

위 5개 항목은 개인적으로 필수로 설치해서 쓰고 있는데 취향에 따라 코드를 이쁘게 보여주는 혹은 다른 확장 기능의 기타 다른 플러그인을 써도 좋다.

 

#End.Code123 "다음장부터 본격적인 시작입니다~"