Vue와 Firebase로 모던웹사이트 만들기 소개

Vue & Firebase에 대해 간단히 소개합니다.

개요

웹사이트는 브라우저만 있으면 어디서든 동작하기 때문에 현존 최고의 접근성을 가지고 있습니다.

그래서 누구나 웹서비스를 하고 싶지만 쉽게 만들 수 없는 이유는 크게 세가지입니다.

1. 서버
2. 보안
3. 학습

예를 들어 보겠습니다.

사내 재고관리 데스크탑 프로그램을 제작하던 개발자는 회사 규모가 커지게 되자 지사등에서도 사용할 수 있도록 웹 프로그램으로 만들고 싶습니다.

우선 서버가 있어야 무엇이라도 할텐데.. 서버를 무엇을 구매해야 할지 어디 놓아야할지 결정이 어렵습니다.

웹사이트는 어디서나 접속이 가능하기 때문에 최고의 접근성을 가지지만 반대로 최악의 보안 상태가 됩니다.

그래도 도전 해보지만.. 각종 언어들과 디자인, UX등까지 다해야하기 때문에 너무 장황한 학습이 요구 됩니다.

이렇듯.. 엄두가 안나던 과거와는 달리 다행하게도 최근 기술들은 모든 면에서 개발하기 수월해 졌습니다.

개발의 변화

웹시장의 가장 큰 변화로는 역시 클라우드의 대중화와 개발플랫폼의 발전이 큰 것 같습니다.

클라우드 그리고 서버리스(Serverless)

다국적 공룡기업들(google, aws등)이 사람이 하던 일들을 너무도 많이 자동화 시켰습니다.

서버리스라고 해서 정말 서버가 없는 것은 아니고 클라우드 플랫폼에서 대신 돌려주는 것입니다.

이제는 소스만 올리면(deploy) 알아서 돌아가기 때문에 리눅스, 윈도우서버등의 지식은 필요도 없어졌습니다.

웹개발플랫폼 삼대장(angular, react, vue등)의 성장

최근 웹생태계를 주름잡는 삼대장들이 한목소리로 이야기하는 것은 한가지 입니다.

무대를 만들어 줄테니 스토리만 넣어라!

초고수들이 만든 골격(스캐폴딩된 디렉토리, 설정, 파일 구조)에 생산적인 파일, 코드만 추가하게 되어 있는 것이 그런 의미입니다.

현대적인 웹(모던 웹)이라고 생각되는 장점은 아래와 같습니다.

• 반응형(responsive): 단일코드로 모든 기기(모바일,태블릿,데스크탑)에 대응됩니다.
• 싱글페이지(SPA): 페이지 하나로 여러 페이지를 구동시키기 때문에 서버 부하가 적으며 매우 부드럽습니다.

삼대장은 모두 훌륭하기 때문에 아무거나 골라서 가이드보고 시작하기에 무리가 없습니다.

하지만 vue를 선택한 이유는 react, angular는 typescript를 익혀야하지만 vue는 javascript 하나면 끝나기 때문입니다.

뷰(vue.js)와 파이어베이스(firebase)

구조

• 인증: 모두가 고민하는 인증 부분을 구글의 안전한 인증 방법으로 쉽게 풀 수 있습니다.
• 호스팅: 뷰로 만든 정적인 파일들은 여기서 서비스 됩니다.
• 데이터베이스: 파이어스토어라는 NoSQL 데이터베이스를 사용합니다.
• 함수: 호스팅에는 정적인 파일들이 있지만 안의 내용은 이 함수(api)와 소통하여 내부를 변경합니다.
• 저장소: 이미지나 동영상 같은 큰 파일들을 저장해 놓습니다.

위의 기능을 쓰지 않더라도 모바일 푸시(FCM)등의 서비스 때문에 파이어베이스는 알아두면 좋습니다.

가격

파이어베이스 가격: https://firebase.google.com/pricing

이 모든 것이 모두 무료입니다. 물론 사용량이 많아지면 과금이 될 수 있습니다.

그 사용량이라 하는 것은 엄청난 것이기 때문에 두려워할 필요 없습니다.

예를 들어 클라우드 함수는 125,000만건 까지는 무료고 그 이후 백만건 마다 $0.4 가 들어갑니다.

개발자와 스타트업등을 쉽게 플랫폼에 들어오게 하고 커지면 돈내라는 취지일 것 같습니다.

학습

이 모든 것을 구현할 때 사용되는 언어는 자바스크립트(ecmascript) 하나 뿐입니다.

서버, 디비등이 전부 서버리스가 되어버려서 정말 화면(front-end) 구성이 중요한 시대입니다.

데이터베이스, 함수 등을 사용하는 배우는 고생은 거의 없고 안의 내용을 구성하는 뷰(vue)만 잘 다루면 됩니다.

구성요소 설치하기

플랫폼 설치 부터 배포까지 30분이면 충분합니다.

물론 30분 안에 만들어지는 웹은 아무 쓸모도 없을 수 있지만, 실제 되는 것을 느끼고 조금만 바꾸면 “나도 만들 수 있을 것 같다” 라고 생각하는 것이 중요합니다.(선구현후개선)

먼저 주욱 따라서 구현해보고 각 기능들이 무엇인지 알아보면 됩니다.

노드(node) 설치

먼저 노드를 설치해 줍니다.

https://nodejs.org

다운 받고 다음 다음만 눌러서 기본설치해주면 충분합니다.

항상 설치 확인이 필요합니다.

대부분 설치 확인은 버전으로 확인합니다.

$ node -v
v10.16.0

노드를 깔았기 때문에 노드 패키지 매니저(npm)이 자동으로 깔려있습니다.

yarn 설치

npm의 경쟁자인 yarn을 전역(-g)으로 설치합니다.

혹은 https://yarnpkg.com/lang/en/ 에서 직접 설치해도 무방합니다.

$ npm i -g yarn
$ yarn -v
1.17.3

vue-cli 설치

뷰의 골격을 만들어 주는 역할을 할 모듈을 전역(-g)으로 설치합니다.

$ npm i -g @vue/cli
$ vue --version
3.9.2

git 설치

맥에는 기본으로 설치되어 있으므로 윈도우 사용자만 설치하면 됩니다.

다운로드: https://git-scm.com/downloads

환경변수 문제로 컴퓨터 껏다 켜야 작동될 수 있습니다.

$ git --version
git version 2.22.0.windows.1

파이어베이스 설치

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

에디터 설치

vscode다운로드: https://code.visualstudio.com

에디터는 아무거나 써도 무방하지만..

그냥 vscode 쓰세요.. 두번쓰세요.. 점유율에는 이유가 있습니다.

파이어베이스 프로젝트 만들기

당연히 구글계정이 있어야합니다~

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

콘솔 사이트로 이동해서 프로젝트를 추가합니다.

파이어베이스 로그인

$ firebase login
? Allow Firebase to collect anonymous CLI usage and error reporting information? Yes

자동으로 브라우저에 연결해서 구글 로그인하면 끝입니다.

파이어베이스 초기화

$ firebase init
? Are you ready to proceed? Yes
? Which Firebase CLI features do you want to set up for this folder? Press Space to select features, then Enter
? Select a default Firebase project for this directory:
vf-hello-test (vf-hello-test)
? What do you want to use as your public directory? dist
+  Firebase initialization complete!

아무 곳이나 디렉토리를 만들고 그안에 들어가서 firebase init을 해주면 됩니다.

그리고 만들었던 프로젝트(vf-hello-test)를 선택하면 됩니다.

여기서 중요한 것은 public directory를 dist로 정해주면 편합니다.(물론 나중에 다 변경 가능합니다.)

vscode에서 열어보기

시꺼먼 화면(cmd)에는 역시 너무 답답합니다.

에디터에서 열어봅니다.

Terminal -> New Terminal을 눌러서 파워셸(cmd대용)도 띄어 놓습니다.

파이버베이스 서버에 올리기

$ firebase deploy
Hosting URL: https://vf-hello-test.firebaseapp.com

해당 프로젝트를 vscode로 열어서 작업하면 더욱 직관적입니다..

이것으로 첫번째 배포가 완료된 것입니다.

수정하고 올려보기

글자를 수정하고 다시 firebase deploy를 하면 잘 작동하는 느낌을 받을 수 있습니다.

하지만 목적은 단순 html파일 수정이 아니죠.

뷰로 구현하기

바로 vue로 만들어진 결과물을 dist폴더에 넣어주는 것이 중요한 것입니다.

vscode를 닫고 앞서 만들었던 프로젝트를 과감하게 지우고 다시 만들어봅니다.

뷰 프로젝트 생성

$ vue create vf-hello-test
? Please pick a preset: Manually select features
? Check the features needed for your project:
 (*) Babel
 ( ) TypeScript
 ( ) Progressive Web App (PWA) Support
 (*) Router
>(*) Vuex
 ( ) CSS Pre-processors
 (*) Linter / Formatter
 ( ) Unit Testing
 ( ) E2E Testing

매뉴얼로 선택하고 싱글페이지와 확장성을 위해 Router와 Vuex를 추가해줍니다.

? Pick a linter / formatter config:
  ESLint with error prevention only
  ESLint + Airbnb config
> ESLint + Standard config
  ESLint + Prettier

ESLint는 코드를 예쁘게 정리해줍니다. 기호에 맞는 것으로 3중 하나를 고르면 되지만 잘 모르니 그냥 Standard로 골라봅니다.

나머지는 모두 엔터를 쳐서 기본값으로 설치합니다.

내컴퓨터(로컬)에서 돌려보기

이제 에디터에서 열어봅니다.

그리고 확인해봅니다.

$ yarn serve # or npm run serve
# 끌 때는 ctrl+c

드디어 첫번째 뷰로 만든 앱을 확인할 수 있습니다.

우아하게 꾸미기

뷰로 만들어진 첫번째 웹은 미려하지가 않습니다.

그래서 css framework라는 것들(vuetify, buefy, bootstrap등)로 치장할 수 있습니다.

그 중 머터리얼 디자인의 뷰티파이를 골랐습니다.

뷰티파이: https://vuetifyjs.com/ko/

$ vue add vuetify

플러그인 형태(vue add)로 설치가 가능합니다.

엔터를 쳐서 모두 기본값으로 설치합니다.

설치 후 로컬에서 다시 가동시켜봅니다.

$ yarn serve

뷰+뷰티파이로 만든 첫번째 웹입니다.

바꿔보기

yarn serve 상태에서 App.vue에서 이것 저것 수정하면 즉각 화면이 갱신되는 것을 감상할 수 있습니다.

디자인하기에 정말 좋은 환경입니다.

배포하기

지금까지는 로컬에서만 실행한 것입니다.(yarn serve)

이제 서버에 올려 볼 차례입니다.

$ firebase init
? What do you want to use as your public directory? dist

위에서 했던 것 처럼 다시 파이어베이스 초기화를 해줍니다.

그리고 빌드를 하면 dist 디렉토리의 파일들이 vue가 만들어준 파일로 교체된 것을 확인할 수 있습니다.

$ yarn build

SPA답게 index.html 파일 하나만 있는 것을 확인할 수 있습니다.

이제 서버에 전송해서 확인해봅니다.

$ firebase deploy

서버에 잘 올라간 것을 확인할 수 있습니다.

기존 강좌와의 비교

NEMV 강좌: Node.js Express.js MongoDB Vue.js

와는 사실 2가지만 다릅니다.

• 서버 X
• 몽고디비 -> 파이어스토어

파이어스토어는 다량의 데이터 처리에 적합하지 않기 때문에 용도에 맞는 선택을 하는 것이 중요합니다.

무료 플랜이 50000 r/w 정도 뿐이기 때문입니다.

파이어스토어는 몽고디비와는 게임이 안될 정도로 불편한 디비이지만.. 무료고 강좌에 적합한 난이도라 선택했습니다.

강좌에 대해

30분 안에 만든다는 제목은 쉽게 만들고 가까이에 있다는 느낌을 주기 위해서였습니다. 여기까지 진입장벽을 넘어서 무언가를 만들 수 있다는 것을 보였다면 이제부터는 안의 내용을 채워야겠죠..

강좌는 영상과 글로 같이 만들고 있습니다.

가급적 밤에 자기전에 한편씩 만들고 있습니다~

강좌의 목적

1. 단순 강좌용 잡스러운 웹이 아닌 조금 다듬으면 다른 용도로 사용할 수 있도록 품질이 되는 웹을 만드는 것이 목적입니다.

2. 혹시 진로에 대해 고민하고 있는 분들에게 도움이 되었으면 합니다.

꼭 웹개발자가 목표가 아니더라도 “프로그래밍이란 것이라는 것이 이런거구나” 라는 것을 느끼는 것이 중요하다고 생각합니다.

그래야 적성에 맞는지 아니면 다른 길을 모색해야하는 지 알 수 있기 때문입니다.

참고: 최근 개발 흐름 따라가보기

깃사용법

매 강좌는 깃허브에 공개되어 있습니다.

깃허브 주소: https://github.com/fkkmemi/vf

강좌용이라 현재는 별볼일 없는 소스이지만 튼실하게 내용을 채워가려합니다.

소스 다운로드

아무곳이나 원본을 받아둡니다.

$ git clone https://github.com/fkkmemi/vf.git

소스 위치 이동

매 화마다 태그를 만들어 두었기 때문에 해당 소스로 이동됩니다.

$ git checkout 13 # 13화로 이동
$ git checkout master # 마지막으로 이동
$ git checkout . # 혹시나 낙서했을 때 원본으로 돌아가기

강좌

VF 강좌