[나와 닮은 못난이 농산물 똑닮안] 3. 36시간 내에 MVP 완성하기2

3. 로직 개발 단계

전역 상태 관리

전반적인 레이아웃을 잡고, 프론트 단 로직 개발에 들어갔다. 서비스 특성상 API를 연동하는 부분이 결과 페이지 하나였기에, 대부분의 상태는 프론트에서 관리되었다. 각 선택지에서 사용되는 질문들도 프론트에서 static으로 가지고 있었다. (거의 하드코딩..?)

 

(결과 페이지 전) 선지 선택  / 이미지 업로드

 

결과 페이지에 도달하기 전까지 사용자의 모든 선택을 가지고 있다가 API 호출할 때 넘겨주어야 했고, 이를 위해서는 전역 상태 관리가 필요했다. 아래와 같이 네개의 선택지 결과와 이미지 데이터를 하나의 객체로 묶어서 관리했다. (Recoil 최고다 최고 🤩)

export const selectedAtom = atom<SelectedProps>({
  key: 'selected',
  default: {
    season: '',
    weather: '',
    feel: '',
    travel: '',
    photo: '',
  },
});

 

이미지 업로드의 변천사

이미지 업로드의 경우, 처음에는 웹캠을 통해 실시간 사진을 찍을 수 있는 기능도 넣었었다. 일반적인 이미지 업로드 방식인 <input type="file" />로 기능을 구현할 경우, 모바일로 접근한다면 "사진 찍기"와 "업로드하기" 모두 가능하지만, 웹에서는 "사진 찍기"가 동작하지 않기 때문이다. 

 

react-webcam이라는 라이브러리가 있어 구현하는데 큰 어려움은 없었지만.. 추후 배포를 진행하고 확인해보니 https가 아닌 환경에서는 동작하지 않는다(http에서는 사용 불가)라는 것을 알게 되어 제거할 수 밖에 없었다. 당시에는 백엔드도 바빴고, 모바일로의 유입이 더 많을 것을 고려했기에 웹캠을 제거하고 이미지 업로드만 가져가기로 했다.

 

스포) 해커톤 이후 우리의 백엔드님께서 https 배포로 업그레이드시켜 주었다! 개인적으로는 조금 아쉬웠던 기능 제거였는데, 여건이 된다면 웹 접근과 모바일 접근을 구분해서 웹캠을 다시 넣고 싶은 욕심이 있다.

 

 

4. API 연동 단계

얼굴 인식 API 탄생

얼굴 인식 기능을 넣게 되면서 백엔드의 일도 많아졌다. 이런저런 오픈 모델을 찾아봤으나 얼굴을 기반으로 농산물을 도출하는 모델이 있을 리 만무했다. 그래서 우리는 Teachable Machine을 활용했고, 백엔드님이 이미 가지고(?) 있던 Face Detection 모델과 조합해서 똑닮안만의 얼굴인식 모델을 만들었다. (감자 닮은 사람? 주호민! 브로콜리 닮은 사람? 제네더질라! 이러면서 데이터 찾음ㅋㅋㅋ)

 

그렇게 API가 완성되자마자 프론트엔드 연동을 시작했고, 언제나 그렇듯 CORS에 마주했다! 하지만 프론트 입장에서는 크게 할 일이 없었다. API 서버는 클라우드에 올라가 있었고 이쪽에서 CORS 옵션을 추가해 해결해주었기 때문이다. 그저 "이제 되나요? 아니요.. 지금은? 아뇨ㅠ 이제 될걸요? 오 됩니다!" 테스트와 리액션을 담당했을 뿐이다. (프론트에서 API를 호출할 때 헤더 옵션 혹은 프록시 설정을 해 줄 수도 있지만, 서버에서 처리하는 것이 더 효율적인 것 같다) 

 

react-query 도입 실패

개인적인 욕심으로는 API 연동을 하면서 react-query를 도입해 로직을 깔끔하게 작성하고 캐싱도 해보고 싶었는데, 익숙하지 않은 것을 사용하기에는 시간적인 여유가 없었다. 15분정도 시도해 보다가 시간이 부족하다는 것을 깨닫고 그냥 axios로만 데이터를 불러왔다.

  useEffect(() => {
    getResult(test).then((res) => {
      setIsLoading(false);
      setResult(res);
    });
  }, [result]);

 

나중에 알고보니 post 요청이었던 API를 호출하기 위해서는 useMutation을 사용해야 했다. useQuery에 대해서만 알고 있던 당시의 나는 왜 에러가 나지? 이러고 있었다ㅠㅠ

 

스포) 리팩토링하면서 react-query 도입했다! (하지만 뭔가 부족한.. 리팩토링 편에서 자세히 다뤄볼 예정이다)

 

 

5. 결과

마지막까지 수정 사항이 있었고, 에러 처리를 하나도 못해서 페이지가 터지기도 하고, 업데이트된 디자인들도 반영하지 못했지만, 어찌 저찌 완성을 했고 무사히 발표도 마쳤다. 그리고 우리는 최우수상을 수상했다!

 

https://ddokdarman.site/

똑닮안

 

처음 만난 사람들끼리 이렇게 하나의 서비스를 만들어 가는 과정을 통해, 기획자와 디자이너 그리고 개발자가 만났을 때의 시너지를 제대로 경험할 수 있었다. 구름톤을 계기로 좋은 인연과 경험을 또 하나 쌓았다. 현생을 살다가 이따금씩 이때가 생각날 것 같다ㅎㅎ

 

짧은 시간 동안이었지만 온종일 프로젝트 하나만 생각했고, 완벽하지는 않지만 결국 완성을 해낸 경험은 나도 몰입해서 뭔가 이룰 수 있다는 자신감을 주었고, 동시에 내가 실력이 뛰어났다면 더 잘 완성할 수 있었을 텐데라는 아쉬움을 남겼다. 사소한 부분에서 막히는 것을 보며 여전히 부족한 것이 많다는 것을 깨닫고 더 많은 경험과 지식을 쌓아야겠다는 생각을 했다.

 

다음 글에서는 해커톤 이후 리팩토링을 과정을 정리할 예정이다.