<div id="readability-page-1" class="page"><p><time>2020-03-14 에 작성하고, 2020-03-15 10:26:51 에 업데이트한 문서입니다. ✅</time> — <a href="/tags/serverless">Serverless</a>, <a href="/tags/netlify">Netlify</a> — <span>4 min read</span></p><section><p>때는 두달 전 쯤, 링피트에 질려하고 있던 나에게 연락이 왔다. '링피트 했는지 체크하는 모임에 들어오삼ㅎㅎ' 'ㅇㅇ' 그렇게 링피트-체커 모임을 시작했다. </p><p>카톡으로 시작된 모임은 꽤 순조롭게 진행됐는데, 운동 종료후 나오는 화면을 찍어서 카톡방에 올리면 되는 방식이었다.  다만 내게는 </p><ul><li>매주가 끝날 때마다 스터디장이 개인이 주에 4번 했는지 체크해야한다는 점</li><li>여태까지 한 운동을 모아볼 수 없다는 점
이 조금 불편했다.
'캘린더로 볼 수 있으면 완전 쉬운 일 아니야?' 라고 생각했고, 그 동안 공부 안하고 있었던 vue를 사용해서 간단하게 만들어보고자 했다. </li></ul><p>이 글에서는 vue는 너무 간단하기때문에, 구현은 다루지 않는다. 대신 fauna를 처음 사용한 기록으로서의 의의를 갖도록 한다. </p><h2>필요한 기능</h2><p>메인 기술은 vue로 정해졌다. 메인으로 구현하고 싶은 기능은 '<code>며칠에 얼마나 했는지</code> 를 보여주는 캘린더. 유저가 직접 결과를 업로드하면 저장이 되도록하는 간단한 CRUD 프로젝트가 되도록 구성한다. </p><ul><li>그날 운동한 정보를 업로드 </li><li>유저별 운동한 정보 보기 </li></ul><p>두 가지만 만들면 되는 간단한 토이프로젝트다.</p><h2>어떻게 구성하지?</h2><h3>netlify 로 배포하자</h3><p>FE 빌드 결과물만 떨어뜨리면 되는 정적 페이지라고 생각했으므로, 최근 잘 사용하고 있는 <code>netlify</code> 를 활용하기로 했다. 빌드 명령어와 github 레포지토리만 있으면 간단하게 연동이 가능하다. </p><h3>fauna 에 정보를 저장하자</h3><p>유저별로 나눠서 정보를 저장해두려면 DB와 서버가 필요했다. 하지만 필요한 정보는 간단하고, 양도 매우 적다. 이를 위해 따로 서버를 구축하고 싶지는 않았다. 어떻게 방법이 없나, 살펴보다 최근 잘 사용한 netlify와 쉽게 연동되는 fauna DB를 찾아냈다. </p><h4>fauna DB?</h4><p>fauna는 현대 클라우드와 컨테이너 중심 환경에 맞는 분산 데이터베이스. fully-featured 이므로 그냥 가입하고 바로 쿼리를 작성하기만 하면 된다고 한다. 프로젝트에서는 고도화된 feature 가 아니라 CRUD만 사용해보았고 잘 동작한다. 더 알고 싶다면 <a href="https://fauna.com/">공식 홈페이지</a> 을 참고하자.</p><h3>이미 있는 css 컴포넌트를 활용하자</h3><p>css 로 웹을 사용성이 좋게 만드는 일에는 큰 소질이 없어서, 이미 있는 컴포넌트 라이브러리를 활용하기로 했다. 모바일에서도 반응형으로 동작하는 깔끔한 라이브러리를 찾다보니, <a href="https://bulma.io/">https://bulma.io/</a> 의 vue 버전인 <a href="https://buefy.org/">https://buefy.org/</a> 가 눈에 들어왔다. 이를 사용하기로 했다.</p><h2>구현</h2><h3>vue-cli 활용해서 프로젝트 셋업하기</h3><p>프론트엔드에 익숙하지 않은 경우 무조건 vue-cli의 도움을 받는 것이 좋다.
vue-cli 3을 설치하고, init project 명령어를 입력하자. </p><p>자동으로 만들어지는 설정 파일에 감사하면서, 기술발전의 위대함에 박수를 보내자. 🙌</p><p><span>
      <span></span>
  <img alt="img" title="img" src="https://juneyr.dev/static/df2c3e32679d9a52c73bef4c83f63e8b/7d769/1.png" sizes="(max-width: 960px) 100vw, 960px" loading="lazy">
    </span>
설정을 어떻게 할지 잘 모르겠다면 표준 설정인 babel을 선택한다. </p><p><span>
      <span></span>
  <img alt="vue-cli" title="vue-cli" src="https://juneyr.dev/static/2b96e8d8ee5a7a3b7b0d820961cdb2ce/7d769/2.png" sizes="(max-width: 960px) 100vw, 960px" loading="lazy">
    </span>
가이드대로, 프로젝트 디렉토리로 이동 후 <code>npm run serve</code> 를 입력하면 기본 vue 페이지에 접속이 가능하다. 기본적인 세팅은 끝났다. </p><h3>fauna DB 와 netlify 튜토리얼 따라가기</h3><p>netlify와 친한 fauna db여서 친절한 <a href="https://github.com/netlify/netlify-faunadb-example">튜토리얼</a>이 제공되어있다. 리액트 앱을 기반으로 되어있어, 살짝 주의하면서 따라간다. </p><h4>fauna 가입하기</h4><p><a href="https://dashboard.fauna.com/accounts/register">fauna 홈페이지</a> 로 접속해서 무료 계정을 만들자. fauna는 github 계정, 그리고 netlify 계정으로도 가입할 수 있다. 나는 github 계정으로 가입하는 것을 선택했다. </p><p>가입 후 <code>new database</code>버튼을 선택하여 DB를 생성한다.
<span>
      <span></span>
  <img alt="fauna" title="fauna" src="https://juneyr.dev/static/9de7fc17ddc0b02c56341958eac49fb8/7d769/4.png" sizes="(max-width: 960px) 100vw, 960px" loading="lazy">
    </span>
이후에는 security &gt; API key를 생성한다. 이 key는 소중하게 보관해두고,</p><p>작업환경에서</p><p>로 환경변수로 지정해둔다. </p><h4>스키마 만들기</h4><p>스키마를 설정해주는 스크립트를 복사해오자. 위 튜토리얼에서 안내하는대로, 프로젝트 최상위 디렉토리에 <code>scripts</code> 라는 폴더를 만들고 <code>bootstrap-fauna-database.js</code> 파일을 만든다. 파일 내용은 <a href="https://github.com/JuneBuug/exercise-check-calendar/blob/master/scripts/bootstrap-fauna-database.js">여기</a> 를 참고하도록 한다. </p><p>이 파일을 쉽게 동작시키기 위한 준비를 한다. 프로젝트의 <code>package.json</code> 로 가서 </p><p>scripts 하위에 bootstrap 명령어를 입력해준다. 이제 터미널에서 언제든 <code>npm run bootstrap</code> 을 치면 노드 스크립트가 실행된다. </p><p>이 스크립트 내부에 나는 records라는 이름으로 스키마를 만들도록 해두었다. </p><p>위 코드에서 <code>name: 'records'</code> 에 명시해준 records가 콜렉션(일반적인  테이블에 해당)의 이름이다. 또한 인덱스도 추가 가능하다. 프로젝트에서 유저의 이름으로 레코드를 불러올 수 있어야하므로 <code>records_by_name</code> 이라는 인덱스를 추가해주었다. </p><p>어? 그럼 의문이 생긴다. 나머지 필드는 어떻게 정의하면 될까? 이 부트스트랩 단계에서는 일단 이정도만 정의해둬도 충분하다. 사실 나머지 필드는 넣는대로 생성된다 (!) 정확히는 json 형태로 저장되기 때문에, index에 정의된 필드 (name) 만 포함된다면 오류없이 돌아가는 듯하다. </p><p>이제 터미널에서 <code>npm run bootstrap</code> 을 실행하면, 아까 만들어둔 fauna 콘솔에서 records라는 콜렉션을 확인할 수 있다. </p><h4>함수 환경 세팅</h4><p>이 fauna-netlify 환경에서는 API 가 하나의 파일로 떨어진다. API 역할 함수를 저장할 폴더를 만들기 위해서 <code>functions</code> 라는 폴더를 만든다. </p><p>이후에는  <code>netlify-lambda</code>를 설치한다. Netlify lambda는 로컬에서 서버리스 함수를 모방해서 개발 환경을 만들어주고, 서버리스 함수를 번들링해주는 역할을 한다. </p><p>이제 특정 url로 요청이 전송되면, 이 값이 서버리스 함수로 전달되어야한다. 이를 위해 <code>package.json</code>에 프록시 설정을 해준다.</p><p><code>/.netlify/functions/&lt;function이름&gt;</code> 에 요청을 보내면, 이 값을 localhost:9000/&lt;function이름&gt; 으로 프록시된다. </p><p>그리고 <code>package.json</code>에 추가 명령어를 입력해준다. 최종 결과는 다음과 같다. </p><p>위 스크립트로 <code>npm run build</code> 를 할 경우 필요한 함수과 vue 앱이 동시에 빌드가 가능하도록 설정했다. </p><h4>정말로 함수 만들기</h4><p>이제 정말로 <strong>함수</strong>를 만들어보자.🙌</p><p>faunadb 를 직접 사용하기 위해서 npm에 또 한번 설치를 해준다. </p><p>그런 다음, functions 폴더를 만들고 하위에 <code>records-create.js</code> 라는 이름의 파일을 만들어준다. 이름에서 보이는 것처럼, 아까 만들었던 collection <code>records</code> 에 create 를 하는 역할이다.
이 파일의 전문은 <a href="https://github.com/JuneBuug/exercise-check-calendar/blob/master/functions/records-create.js">여기</a>를 참고.</p><p>내용은 간단하다. faunadb 모듈에서, 지정해놨던 faunadb_secret(이전의 APIkey 값)을 가지고 fauna와 통신하는 <strong>클라이언트</strong>를 가져와준다. 이 함수가 호출되는 이벤트에서 body를 가져온다. 이 값을 <code>records</code>에 넣어달라! 고 말하는 쿼리를 보낸다. </p><p>이 파일은 실제로 어떻게 사용할 수 있을까? 앞서 말한대로 vue 구현은 설명하지 않을 것이므로, vue component가 이미 존재한다고 가정하겠다. 아래 컴포넌트에서 인증버튼을 누르면 post가 날아가게 하고싶다.
<span>
      <span></span>
  <img alt="img" title="img" src="https://juneyr.dev/static/56d4fa7cdf284163a3181ff4e2005450/7d769/6.png" sizes="(max-width: 960px) 100vw, 960px" loading="lazy">
    </span></p><p>나는 <code>Cal.vue</code>라는 파일에 scripts로 다음 함수를 작성했다. </p><p>위는 명백하게, '<code>/.netfliy/functions/records-create</code> 로 post 해줘. 아, 그런데 body는 name에는 nickname을, date는 지금 현재 짜를, kcal는 입력받은 값을, 점의 갯수는 이 칼로리를 25로 나눈 값으로 넣어줘.' 라는 뜻이다. 아까 설정했듯이 저 경로는 localhost:9000 에 프록시되어 요청되므로 netlify-lambda에 의해서 처리된다. 그리고 name을 제외한 date, kcal 등의 값은 맘대로 넣으면 된다. </p><h4>get은 어떻게 해요?</h4><p>get 함수가 더 쉽다. 다만 여기서는 유저의 이름에 따라서 콜렉션을 가져오는 경우를 살펴본다. </p><p>query문이 두번 날아가는 게 보이는지? 위 코드는 record의 레퍼런스를 가져오고, 그 레퍼런스의 리스트를 돌면서 각각을 get하는 쿼리를 만들어서 다시 보낸다. 이렇게 List를 반환하는 API를 작성한다. </p><h4>더 많은 쿼리</h4><p>더 다양한 쿼리는 위의 튜토리얼에서도 제공해주지만, <a href="https://docs.fauna.com/">fauna 공식문서</a>에서 정보를 얻을 수 있다. 참고해서 다양한 쿼리를 만들어보자.</p><h2>그래서, 결과는 어때요? 🙋‍♀️</h2><p>이렇게 만들어진 링피트체커의 결과물은 다음과 같다.
<span>
      <span></span>
  <img alt="img" title="img" src="https://juneyr.dev/static/a60961a105ba5b9882dc6e1277c523e2/7d769/result.png" sizes="(max-width: 960px) 100vw, 960px" loading="lazy">
    </span></p><p>누군가 나에게 fauna 가 어떠냐고 묻는다면 ... 😮</p><p>fauna와 netlify 의 연동은 쉽고 빠르다. 기본적인 js 문법만 안다면 작성도 쉽게 가능하다. 또한 콘솔도 편리해서 DB에 직접 접속하는 일 없이 웹사이트에서 손쉽게 index를 추가하고 정보에 접근 가능하다. todos 혹은 이런 checker 정도의 토이프로젝트에는 딱이라고 말할 수 있다. 🙂 read/write operation의 수에 따라 어느 정도는 무료라는 점도 매력적이다. </p><p>다만 API를 일일히 파일로 만들어야한다는 점, 데이터에 타입을 강제하기가 어려워보인다는 점, 또 많은 양의 데이터를 다루기가 어렵다는 점이 약간 마음에 걸린다. 혹시 더 고도화된 토이프로젝트를 만들고자 한다면, 더 일반화된 db로 접근하는 것이 좋다는 생각이 들었다.</p><p>serverless 한 형태로 구성해보는 토이프로젝트는 처음이었는데, 확실히 FE 파트만으로는 프로젝트가 비어보일때 유용하다. 다음 토이프로젝트에서도 한번쯤은 고려해볼만한 옵션이라는 생각이 든다. </p></section></div>

링피트 체커를 fauna로 만들어보자

댓글