산책 개발일지 0 : 1인 개발 계획 세우기

 

학교 선배의 창업 아이템의 서비스 개발에 참여하게 되었다.

목적 기반으로 등산지를 추천해주는 플랫폼인데, 정말 수차례의 피봇 끝에 제법 그럴싸한 아이템이 나왔다.

팀원은 선배와 나 2명으로, 내가 서비스 개발을 오롯이 도맡아 하게 되었다.

 

---

백지 상태에서 어떤 것이 가장 중요할까?

내가 건네 받은 건 피그마 파일 하나 뿐이다.

무엇을 가장 먼저 세팅해야 할까?

 

1. 기술 스택 정하기

• React : 극 초기의 창업 아이템이기 때문에 아직 프로토타입도 없는 상태라, 일단 빨리 만들어보는 것이 중요하다고 생각하여 나에게 가장 익숙한 라이브러리인 React를 사용하기로 하였다.
• Recoil : 클라이언트 데이터의 상태 관리를 위해 사용하였다. 프로젝트의 규모가 크지 않고, 특히 React를 사용하고 있기 때문에 Recoil이 적절하다고 생각했다.
• Firebase : 백엔드 개발자가 없지만, 로그인과 유저 데이터 저장 등 DB가 필요했기 때문에 이번에도 Firebase에서 제공해주는 기능들을 사용하기로 했다. (Authentication, Firestore) 그리고 특히 NoSQL을 선택한 이유로는, 초기 창업 아이템이기 때문에 기획이 수시로 바뀌는 점에 유연하게 대응하기 위함이었다.

 

2. 협업을 위한 노션 사용

비록 개발 1명, 기획 1명으로 이루어지는 작은 규모의 프로젝트이지만 협업은 협업이기에 함께 프로젝트 진행 사항을 공유할 노션 페이지를 생성하였다. 

 

• 기능 개발 : 개발 진행 상황에 대해 작성하였다. 페이지별로 만들어야 하는 기능, 데이터 형식, 사용한 API, 백로그, 그리고 업데이트 현황을 공유할 수 있는 페이지로 구성하였다.
• 기획/운영 : 서비스를 운영하는 과정에 있어서 필요한 내용들을 작성하였다.
• 질문/요청/전달 : 가장 활발하게 사용한 페이지다. 메신저로 내용을 공유하기 보다는, 사소한 부분이라도 문서로 작성하여 기록이 남게 하였으며 진행 상황을 시각화시켰다. 
• 공유 자료 : 함께 공유하는 자료들을 한 눈에 쉽게 보고 접근할 수 있도록 링크들을 정리해두었다.
• 백로그 : 지금 당장은 할 필요가 없지만, 생각나는 아이디어나 해결해야 할 사항들을 페이지 하단에 정리해두었다.

 

 

3. 폴더 구조 

• public : asset 관리를 용도에 맞게 하기로 했다. icon, image로 나누어 icon 폴더에는 icon, image 폴더에는 png 이미지 파일을 넣었다. 컴포넌트에 들어가는 이미지 외에 배너와 같은 곳에 필요한 이미지 파일들은 별도의 폴더로 관리했다.
• src
  
  • components : 전역적으로 자주 쓰이는 컴포넌트들을 관리
  • data : json 형태의 데이터 파일. 주로 데이터를 id화 하기 위하여 관리하기 위해 사용했다.
  • pages : 
  • recoil : firestore collection마다 파일을 구분하여 관리
  • utils : 전역적으로 자주 쓰이는 함수들을 관리

 

4. DB 설계하기

Firestore에서 사용할 데이터 구조를 설계하였다.

전달받은 피그마 페이지를 살펴보며, 각 기능에 필요한 데이터들을 용도 별로 나누어보았다.

 

collection : 기능 명칭 + Data  (ex. userData, reviewData)

documentaion : collection의 특성에 따라 명칭 관리

 

프로젝트 초기에 CloudFirestore가 적합한 이유

 

 

 

 

각 collection 별 field 값은 노션에 기록해두었다.

 

5. recoil 설정하기

설계한 DB를 바탕으로 recoil을 설정해주었다.

persistRecoil

 

위의 예시 사진에 나온 reviewData를 관리하는 atom은 아래와 같이 초기 설정을 해두었다.

이 때, 새로고침해도 recoil 값이 유지되게 하기 위해 recoil-persist 라이브러리를 사용했다.

import { atom } from "recoil";
import { recoilPersist } from "recoil-persist";

const { persistAtom } = recoilPersist();

export interface ReviewData {
  reviewUID: string;
  reviewDate: string;
  reviewMountain: string;
  reviewStar: number;
  reviewWhen: number;
  reviewWho: number;
  reviewMood: number[];
  reviewETC: number[];
  reviewComment: string;
}

export const reviewState = atom<ReviewData>({
  key: "reviewState",
  default: {
    reviewUID: "",
    reviewDate: "",
    reviewMountain: "",
    reviewStar: 0,
    reviewWhen: 0,
    reviewWho: 0,
    reviewMood: [],
    reviewETC: [],
    reviewComment: "",
  },
  effects_UNSTABLE: [persistAtom],
});

 

 

---

개발하면서 계속해서 생각해야 할 것들

1. 클린 코드

 

물론 나 혼자 하는 개발이지만, 어차피 나도 일주일 전 코드 보면 이해하는 데 시간이 걸린다.

내일의 나를 위해서, 그리고 혹시 모를 미래의 다른 개발자 분을 위해서 알아보기 쉬운 코드를 작성하기로 했다.

import 순서 정리라던가, 사용하지 않는 코드는 지우고 깃허브에 올린다거나...

 

 

2. 유연한 컴포넌트

가능하면 하나의 컴포넌트는 하나의 일만 할 수 있도록

기획의 변화에 빠르게 대응할 수 있도록

 

3. 사용자 경험

예를 들면 데이터 로딩 시 흰 화면만을 띄워주는 것이 아니라, 스켈레톤 또는 스피너를 통해 사용자가 로딩을 기다릴 수 있도록 하기

비동기 로딩 순서 신경쓰기