더 상세한 원문은 다음을 참고해주세요.
https://code-run.tistory.com/13
2021년 12월은 현재의 회사에 입사하기 전 붕 뜬 시간이 있어 한참 재밌는 게 없나 고민하던 시기였습니다. 그러다 우연히 알게 된 컴퓨터 공학과 동생의 추천으로 스타트업 동아리에서 잠깐 개발을 맡을 기회가 있었습니다. 물론 제 프로젝트 경력으로는 인턴쉽 기간 동안 진행한 작은 프로젝트밖에 없었지만, 인턴쉽 프로젝트를 통해서 프런트와 백엔드 모두 어느 정도 경험해봤다는 자신감을 가지고 진행했습니다..
처음에는 모든 것이 엉망이었습니다. 온라인 메뉴판 서비스(기존 서비스의 이름은 WeQ)를 제공하는 게 목적이었지만 메뉴판과 관련된 데이터의 등록은 대부분이 수동으로 이뤄졌습니다(데이터베이스에 데이터를 수동으로 하나하나 넣는 방식....). 서비스의 목표에 도달하려면 쉽게 메뉴를 등록할 수 있어야 하기 때문에 쉽게 메뉴를 등록할 수 있는 서비스를 만들자는 목표 하에 개발을 진행했습니다. 서비스는 총 2개의 컴포넌트로 구성되는데, 하나는 메뉴를 등록하는 관리자용 컴포넌트(internal)이고 다른 하나는 유저가 등록된 메뉴를 볼 수 있도록 하는 컴포넌트입니다(external). 개발 경험은 Java, Spring, Vue, AWS였지만 이번 프로젝트는 빠르게 MVP를 개발해보자는 목표가 있었기에 Javascript, Vue와 Firebase를 사용했습니다. Google의 호스팅 서비스인 Firebase를 처음 접했지만 문서가 깔끔하고 사용방법이 쉬웠기 때문에 개발 환경을 구성하는데 시간이 얼마 걸리지 않았습니다. 다만 데이터베이스가 NoSql 형태라 익숙해지기까지 시간이 좀 걸렸습니다.
인터널 컴포넌트
https://onu-menu-internal.firebaseapp.com/sign-in
익스터널 컴포넌트 (모바일로 접속해야 더 이쁩니다 ㅎㅎ...)
https://onu-menu.web.app/IAM07Ci5qBfe3Dun4yLv/store
특이하게도 Firebase는 호스팅 서비스만 제공하지 않고 Backend As A Service의 형태로 Backend의 기능도 제공합니다. Database, Realtime database, 인증 등 백엔드에서 제공할 수 있는 서비스를 쉽게 사용할 수 있도록 SDK를 제공합니다. 더 특이한 점은 API 키를 호스팅 서버에 배포하는 코드에 포함시켜서 배포하는데(즉, 클라이언트가 코드를 까보면 API 키를 볼 수 있는 형태), 이게 가능한 이유는 API 키가 firebase에 호스팅 된 서버를 식별하는 용도로만 사용하기 때문이라고 합니다. 보안 설정은 firebase 콘솔에서 설정이 가능합니다.
https://stackoverflow.com/questions/37482366/is-it-safe-to-expose-firebase-apikey-to-the-public
Vue의 UI framework로는 Vuetify를 사용했습니다. Google material design을 기반으로 제작된 UI framework라서 그런지 전반적으로 깔끔한 느낌의 컴포넌트가 많습니다. 또한 각 컴포넌트에서 다양한 기능을 제공하기 때문에 핵심 비즈니스 로직에 집중할 수 있었습니다.
Javascript를 통해 비즈니스 로직을 구현해보는 게 처음이라 다양한 에러를 경험해봤는데, 대부분이 javascript의 유연한 언어 특성을 제가 잘 이해하지 못했기 때문입니다. Javascript가 Firebase의 NoSql 데이터베이스를 함께 사용하다 보니 데이터 스키마의 유연성이 극대화돼서 코드를 짤 때 더 많이 생각하고 고민했었던 것 같습니다.
결과적으로 원했던 목표에는 달성하지 못해 프로젝트가 MVP 수준에서 멈추게 됐습니다. 하지만 프로젝트를 진행하는 과정에서 기획자와 디자이너와의 소통방법과 서로를 배려하는 방법에 대해 배울 수 있었고 새로운 기술을 습득하는 것에 대한 즐거움을 느낄 수 있었습니다. 무엇보다도 아이디어만 있으면 아이디어를 구현하기 위해서 어떻게 접근해야 하는지 저만의 방법을 조금이나마 정립할 수 있었습니다.
