vuejs + firebase 처음 시작하기

0. 개요

회사 내부망이기도 했고, 서버리스로 빠르게 개발하고 웹사이트를 확인하고 싶어서 vue.js + firebase를 선택했다.

1. 개발환경 구축

이전에 node, vue-cli, yarnm, git까진 다 설치 되어있기때문에 설명은 패스한다. 
명령어만 간략히 남겨둔다.

//노드 버전확인 노드는 사이트에서 다운 
$ node -v 

//vue-cli 설치 & 버전확인 
$ npm i -g @vue/cli 
$ vue --version 

//yarn 설치 & 버전확인 
$ npm i -g yarn 
$ yarn -v 

//git 버전확인 git은 사이트에서 다운 
$ git --version 

1.1 vue + vuetiry

원하는 폴더에 뷰 프로젝트를 만들어주고 서버올리고 확인한다. 
뷰프로젝트 만들때의 옵션이다.

vue create test 

cd test 

yarn serve

? Please pick a preset: Manually select features 
? Check the features needed for your project: Babel, Router, Vuex, Linter 
? Use history mode for router? (Requires proper server setup for index fallback in production) Yes 
? Pick a linter / formatter config: Standard 
? Pick additional lint features: (Press  to select, to toggle all, to invert selection)Lint on save 
? Where do you prefer placing config for Babel, ESLint, etc.? In dedicated config files 
? Save this as a preset for future projects? No 

 

http://localhost:8080/ 를 확인하면 된다.

 

이런 화면이 나오면 성공! vuetify 설치 전

서버를 끄고 (컨트롤+c 누르면 꺼진다.) vuetify를 설치해야한다. vuetify 메뉴얼대로 설치하면 2.0이 깔리는데 내가 공부하고있는건 1.5버전이다. 추후에 2.0으로 올리니까 1.5로 깔았다. 

cd test 
vue add vuetify@0.5 
vue invoke vuetify 

yarn serve

 

이런 화면이 나오면 성공! vuetify 설치 후

1.2 firebase

파이어베이스 설치 전에 구글 계정이 필요하다. 
파이어베이스를 설치한다. 옵션들은 기본으로했다. 

$ npm install -g firebase-tools 
$ firebase --version 

$ firebase login 

파이어베이스 콘솔 사이트에 들어가서 프로젝트 추가한다. 

https://console.firebase.google.com/

로그인 - Google 계정

좌측 개발 메뉴에 호스팅을 클릭하면 명령어 코드가 나온다. 복붙해서 그대로 진행하면 된다. 

설치 -> 로그인 -> init -> 배포 순으로 진행하면 된다. 

중간에 옵션 설정하는 부분중 public directory를 변경해줘야한다. 폴더를 따로 만든다. 강의에 따라서 dist를 입력하고 엔터쳤다. 

배포 후 콘솔창에 나오는 url(https://***.firebaseapp.com/)을 열면 welcome to vuetify 화면이 열리면 성공!!!!!!

 

1.3 git

git의 계정이 필요하다. 예전에 깃블로그하면서 만든게 있어서 그 계정을 쓸 것이다.  

리파지토리에 New버튼으로 새 리파지토리를 만들어야한다. 리파지토리 이름은 pakage.json 상단에 있는 name과 같은 이름을 써야한다. 난 test로 했기때문에 리파지토리 이름도 test로 설정했다. 

public, private은 맘대로 설정하고 initailze this repository 어쩌구는 체크를 해제하고 만든다. 

만들고 나면 url이 보이는데 cmd창에서 이 url을 깃과 연결시켜줘야한다.

git remote add origin https://github.com/****/test.git

vscode를 사용하는데 좌특 아이콘중에 소스제어 아이콘을 클릭하면 깃 설치하면서 자동적으로 vscode에서 git을 사용할 수 있도록 세팅이 되어있다. 

스테이징하고 커밋하고 push해주면 git에 올라간다.

git push -u origin master 

+는 스테이징 V는 커밋이다. 커밋후엔 push 해줘야한다!

 

git에 push후 깃 리파지토리에 가면 이렇게 소스가 올라가있다.

* 리파지토리 사진에서 .firebase는 올라가면안됐는데 실수로 올려버렸다. 안될건없지만 소스코드 이력관리와 맞지 않기때문에 추후에 없애버릴거다.

2. 기타 끄적끄적

서버를 내가 설치 안해도 https로 사이트가 열리다니...!!!! 서버세팅하고 배포하고 설정하는거 진짜 스트레스였는데 와훙! 

펭수 굿즈 url 몇개만 붙여서 a링크처럼 연결되나 테스트해봐야겠다. 

현재 열면 app.vue에서 연결된곳의 화면이 뜬다. 나는 helloworld.vue가 뜨게 되어있었다. 

a태그처럼 링크걸린게 있길래 저거 복붙해서 끄적여봤다. v-flex태그와 같은 위치에 아래 vue소스를 추가했고, 하단 스크립트 부분에 하단 스크립트 소스를 추가했다.

<v-flex
    mb-5
    xs12
  >

    <h2 class="headline font-weight-bold mb-3">펭수 굿즈 사이트 모음</h2>

    <v-layout justify-center>
      <a
        v-for="(next, i) in pangGoodsList"
        :key="i"
        :href="next.href"
        class="subheading mx-3"
        target="_blank"
      >
        {{ next.text }}
      </a>
    </v-layout>
  </v-flex>

 pangGoodsList: [
      {
        text: '인터파크 굿즈 증정',
        href: 'http://book.interpark.com/book/genbookeventaction.do?_method=EventPlan&sc.evtNo=231345'
      },
      {
        text: '스파오 잠옷',
        href: 'http://spao.elandmall.com/goods/initGoodsDetail.action?goods_no=1912877670'
      },
      {
        text: '펭수 다이어리',
        href: 'http://www.yes24.com/Product/Goods/84434768'
      }

    ],

그럼 밑에처럼 나온다!

 

ㅋㅋㅋㅋ펭수 굿즈 사이트 모음

겨우 a태그 쓴건데 편하다. 확실히 vuejs 편하다. 거기다 vuetify쓰니까 반응형 생각 안해도 모바일에서도 제대로 잘 나오고 재밋다! 새롭다! 

일하면서 하긴 힘들긴하지만 ㅠ