실전 프로젝트
실전 프로젝트를 진행하면서 막혔던 부분에 대해서 코드 없이 간단히 써보려 한다.
우리의 주제는 레시피 공유 사이트이며, 기술적으로 삽질한 부분이 있다면 데이터 처리 였다.
우리의 데이터 구조는 대충 3 그룹이 존재한다.
레시피의 대략적인 정보(타이틀, 설명 등)
레시피의 들어가는 재료(재료카테고리, 재료명, 재료양)
레시피의 조리 과정(조리 과정명, 조리 순서, 조리 사진)
당시 우리는 리액트의 useForm과 react-hook-form을 가져다 쓰고 있었고, 컴포넌트 관리와 데이터 처리에 문제를 겪었다.
재료 관리 문제
일단 재료 관리의 문제는 컴포넌트 관리였다.
재료는 카테고리라는 큰 분류에 세부적으로 재료들의 이름과 양이 리스트 형태로 들어갔다.
주재료
- 당근 1개
- 양파 1개
소스
- 간장 10ml
- 설탕 2T
의 형태로 데이터를 가지고 있었으며, 당시에는 useForm을 가져다 사용했기에 각 Input을 register로 관리하고, 유동적으로 늘어나는 카테고리와 재료명 등을 각각 useFieldArray를 이용해 관리하려고 했다.
문제는 역식 내부적으로 인덱스가 꼬이기 시작했다는 것이다.
resource.${index}.resourceName
각 useFieldArray는 별개의 객체고, 서로 가진 index 정보도 연계하지 못했다.
useForm에 명시된 데이터 구조적 제한으로 인해 index를 곂쳐 사용하는 것이 힘들었다.
재료 관리 해결
간단하게도 우리는 그냥 useForm을 버렸다.
{category: string, [name:string, amount: string]}
의 형태로 데이터를 정의하고 그에 따라서 컴포넌트를 그려줬다.
우리는 너무 useForm이라는 라이브러리에 묶여있었고, 더 간단하게 가려했던 방법이 오히려 더 복잡해진 느낌이었다.
index와 subIndex 변수를 통해서 각자의 깊이에 맞게 요소를 찾을 수 있었고, 가지고 있던 기본기에 집중해서 문제를 해결했다.
조리 과정 문제
조리 과정에 들어가는 데이터는 image와 string이었다.
우리는 이미지를 보내기 위해 FormData에 image와 string을 같이 넣을 방법을 계속 고민했다.
FormData는 string 또는 Blob 데이터만 허용한다.
만약 데이터를 리스트 형태로 보내고자 하면 Json 방식을 활용해 String으로 변화해야 했다.
또한 Image를 리스트로 보낸다고 해도, 결국엔 서버에서 다시 Json을 꺼내고 분석하고 image와 매칭을 해줘야 했다.
조리 과정 해결
우리는 모든 데이터를 한번에 보내는 대신 레시피 정보, 재료 정보, 조리 과정 정보를 따로 API 나눠서 보내기로 했다.
그리고 조리 과정에 경우에는 한번에 리스트로 보내는 것이 아닌 하나씩 보내기로 결정했다.
멘토링 과정중에 이미지와 같은 처리는 한번에 보내면 응답이 늦어지기에 하나씩 보내면서 처리를 한다는 튜터 님의 의견을 받았고 또한 FormData로 보낼때 image, 조리과정 설명을 같이 보낼 수 있다는 장점에 하나씩 처리를 하기로 결정 했다.
실전 프로젝트 회고
역시 문제는 기획인거 같다.
기획을 계속 바꾸고, 기능을 바꾸고 하는 작업은 코드 진척도에 많은 영향을 주었다.
한주를 돌이켜 보면 결국 남은 코드는 적고, 열심히 삽질하며 바꾸기만 했던 것 같다.
이제는 어느정도 기획이 잡혀가니 빠르게 기능을 개발하는 단계인 것 같다.
