[개발일지] 하이디라오 훠궈 소스 백과사전

아이디어

나는 (한식 제외) 향신료가 들어간 음식들을 그다지 좋아하지 않아 훠궈를 먹어본 적이 없었다. 하지만 요새 내 주변 친구들은 '하이디라오'라는 식당을 매우 좋아하는 데, 이 곳은 다른 훠궈 식당과는 다르게 직접 소스를 만들어먹을 수 있는 소스바가 있다. 소스 재료 종류가 정말 다양하기 때문에 이들을 조합할 수 있는 레시피 또한 아주 많다. 하지만 식당에는 4~5가지의 소스 제조법만 적혀있었다. 인터넷에서 내가 본 소스 레시피는 더 많았는데! 그래서 이 레시피들을 모아서 한 곳에서 확인할 수 있다면 정말 편할 것 같다는 생각이 들었다.

---

버전 1 개발

이 때 당시에는 내가 막 HTML/CSS 그리고 자바스크립트 조금 적응해가던 때였기 때문에 데이터베이스같은 고오급 기술을 생각할 여력이 없었다. 레시피는 인터넷에 있는 몇가지를 가져와서 사용하였기 때문에 데이터 양도 그다지 많지 않았기 때문에 모든 내용을 그냥 HTML 페이지에 적는 아주 무식한 개발을 해버렸다. 이게 훠궈 소스 백과사전 버전 1이다.

 

버전 1 배포 후 

다행히 사용자들이 많이 있었고, 그들로부터 레시피를 더 제보 받아 데이터를 늘려갔다. 하지만 나는 데이터베이스를 사용하고 있지 않았기 때문에 계속해서 레시피를 업데이트 하기에 불편함을 느꼈다. 이래서 데이터베이스가 필요하구나!

---

버전 2 리팩터링

프론트엔드는 리액트, 백엔드는 파이어베이스를 사용하여 리팩터링을 하기로 결심했다. UI와 디자인은 버전 1과 비슷하게 가되, 디자인 잘 하는 친구에게 넘겼다. 아무래도 내가 하는 것보다는 훨씬 나을 것 같아서! 리액트를 쓰다 보니 불필요한 파일의 개수를 줄일 수 있어 개발하는 데 한결 편리해졌다. 그리고 이 리팩터링의 가장 큰 원인이었던 데이터베이스! 파이어베이스가 제공하는 firestore에 레시피들을 저장해두고 페이지에 따라 불러오니 아주 편했다. 그리고 새로 레시피를 추가할 때도 아주 편리했다. 그리고 검색 버튼과 인기 소스 버튼을 만들어서 사용자들이 더 편리하게 소스 레시피들을 살펴볼 수 있게 하였다. 배포도 파이어베이스의 호스팅 서비스를 통해 쉽게 진행할 수 있었다. 감사하게도 일평균 100~200명 정도의 이용자들이 사이트를 방문해주고 있다.

 

---

추가 개발해야 할 것들

- 관리자 화면 : 지금은 관리자 화면이 없어서 새로운 레시피를 등록하려면 직접 파이어베이스 콘솔 창에 들어가 입력해야 한다.