공부방

트러블

클라이언트쪽에서 원래 보내던 데이터에 추가해서 객체가들어간 배열을 보내줄일이 생겼다.

처음에는 formData에 배열을 바로 직렬화해서 보냈는데 서버에서 데이터를 배열로받을수가없었다.

javaScript코드

const getIngredientsData = () => {
    const ingredientData = [];
    Array.from(ingredientRows.children).forEach((row) => {
        const ingredientName = row.children[0].value;
        const volume = row.children[1].value;
        const unit = row.children[2].value;

        ingredientData.push({
            name: ingredientName,
            volume: volume,
            unit: unit
        });
    });
    return ingredientData;
} //배열을만들고 요소를모아서 객체를만들어 배열에 push
// 만든 배열을 return해주는 함수

formData.append(`ingredients`, JSON.stringify(ingredientData[i]));

이렇게 클라이언트에서 보내주면 서버에서는 ingredients 필드에서 받아야하는데 

@Data
@Builder
public class CockTailRequest {
    private List<CocktailIngredientRequest> ingredients;
}

@Data
public class  CocktailIngredientRequest {
    private String name;
    private Integer volume;
    private String unit;
}

에러가 발생한다 String을 List타입으로 컨버트할수없다는에러가..

해결

그래서 찾아보니 formData에서 배열을 보내는방법이있었다. 같은필드이름에 인덱스를 달아서 보내주면 

자동으로 배열로 넘어간다고 한다.

그래서 클라이언트쪽 코드를 변경해줬다. 

const getIngredientsData = () => {
    const ingredientData = [];
    Array.from(ingredientRows.children).forEach((row) => {
        const ingredientName = row.children[0].value;
        const volume = row.children[1].value;
        const unit = row.children[2].value;

        ingredientData.push({
            name: ingredientName,
            volume: volume,
            unit: unit
        });
    });
    return ingredientData;
} //배열을만들고 요소를모아서 객체를만들어 배열에 push
// 만든 배열을 return해주는 함수

const ingredientData = getIngredientsData();
    for(let i=0;i<ingredientData.length;i++){
        formData.append(`ingredients[${i}]`, JSON.stringify(ingredientData[i]));
    }

배열을 반복문으로 돌려서 필드에 인덱스를 붙여주는 방법으로 보내도록 변경했다.

문제는 이렇게 해도 서버에서 List<String> 형태로는받아지는데

배열 내부의 객체인 CocktailIngredientRequest로는 컨버팅이 되지않았다.

이것저것 시도해보다가 시간만 너무날려서 문자열 배열로 받고 내부에서 컨버팅해줄수있게 함수를 추가해줬다.

@Builder
@Data
@Getter
    private List<String> ingredients;
   
   public List<CocktailIngredientRequest> getListIngredients() {
        ObjectMapper objectMapper = new ObjectMapper();

        return this.ingredients.stream().map(json -> {
            try {
                return objectMapper.readValue(json, CocktailIngredientRequest.class);
            } catch (JsonProcessingException e) {
                throw new RuntimeException("Error parsing JSON: " + e.getMessage());
            }
        }).collect(Collectors.toList());
    }
}

ingredients 배열내에는 Json문자열이있고 해당 Json문자열을 objectmapper로 convert해주도록 메서드를 만들었다.

트러블슈팅은못한것같고 트러블 회피정도는 되는듯한 해결방법이다. 

추후에 더 알아보면 클라이언트에서 객체배열을 보내고 서버에서 한번에 컨버팅해서 받는방법을 알아낼수있겠지 그때되면 이부분은 업데이트 해보겠다.