[KLOZ] map -> builder Pattern

 

 

@RestController
@RequiredArgsConstructor
@RequestMapping("/main")
@Slf4j
public class MainRestController {

	private final MainService service;

	@PostMapping("/main.do")
	public Map<String, Object> main() {

		Map<String, Object> map = new HashMap<>();

		try {
			ArrayList<MainDto.Item> list = service.getItems();

			map.put("Data", list);
			map.put("Result", 1);

		}
		catch (Exception e) {
			log.info("메인에러 : ", e);
			map.put("Result", 0);
		}

		return map;
	}
}

 

이렇게 map 에다가 Data 키를 넣어서 Vue컴포넌트에 전달하고 출력했던 것을

builder Pattern 을 이용하는 코드로 변경해보겠다.

 

일단

 

1. 반환타입을 Map<String, Obejct> 에서 MainDto 로 변경해주고

 

2. HashMap 객체 생성했던 것을 ArrayList 객체 생성으로 변경해준다. (난 둘 다 썼기 때문에 그냥 Map삭제나 다름없음)

Map<String, Object> map = new HashMap<>();

↓

ArrayList<MainDto.Item> list = service.getItems();

 

3. map.put("Data", list); 처럼 map 에 담았던 Data키 대신 builder()를 쓴다.

return MainDto.builder().result(1).data(list).build();

 

4. MainDto 에 @Builder 어노테이션 필요

5. MainDto 에 result, data라는 필드(멤버 변수) 필요

private int result;
private ArrayList<Item> data;

 

 

컨트롤러 코드

@RestController
@RequiredArgsConstructor
@RequestMapping("/main")
@Slf4j
public class MainRestController {

    private final MainService service;
    private final ListableBeanFactory listableBeanFactory;

    @PostMapping("/main.do")
    public MainDto main() {

       try {
          ArrayList<MainDto.Item> list = service.getItems();

          return MainDto.builder().result(1).data(list).build();

       }
       catch (Exception e) {
          log.info("메인에러 : ", e);
          return MainDto.builder().result(0).data(null).build();
       }

    }
}

 

 

---

 

 

Vue컴포넌트에서 바꿀 것은

Data: res.data.Data || []

↓

Data: res.data.data || []

 

이것 뿐이다. 

 

 

 

 

참고로, res.data라고 하면 안되고 res.data.data 로 써야한다고 한다..

 

• res는 axios 응답 전체 객체
• res.data는 백엔드가 보낸 JSON 전체
• res.data.data는 그 안에 있는 실제 데이터 리스트(Array)