TIL-221104- 3연벙 리팩토링

다시 구조 리팩토링에 들어가야 할 것 같다. 

 

 

리팩토링을 결심하게 된 이유는 먼저 현재 ProductController를 보면

 

 

이런식으로 이미지나 , 리뷰 들을 컨트롤러에서 dto로 조합을 하는 구조이다. 

 

이렇게 되면 ProductDto가 가지고 있는 필드값이 엄청나게 많아 지게 된다.

 

 

 

필드값이 많아 지는 것은 뭐 그렇게 큰 문제는 아니다. 이걸로 인해서 엄청나게 복잡해 진다거나 하는 문제가 있는 것은 아니기 떄문에 

하지만 문제점은 바로 프론트엔드에서 관심사의 분리가 잘 이루어 지지 않는다는 것이다.  

 

 

 

ProductStore의 상품 상세페이지를 불러오는 함수인데 ProductDto가 이미지나 리뷰 를 모두 가지고 있는 구조이다보니

ReviewStore나 ImageStore를 개설을 하고 싶어도 할 수가 없는 상황이 되어 버렸다.

 

이런 식으로 하면 ProductStore가 모든 API처리를 담당을 하는 구조로 갈 수도 있기 때문에 리팩토링을 해야 겠다는 판단을 했다.

 

 

어떻게 할 것인가? 

 

하나의 컨트롤러에서 모든 것을 조합해서 넘겨주는 방식을 하지 않으면 된다. 즉 컨트롤러를 여러개를 만들면 되는 것이다.

 

 

상품의 상세페이지를 마운트 할 때 실행이 되는 함수가 fetchProduct라는 함수가 한개 밖에 없었는데 

 

 

이렇게 상품 상세페이지가 마운트 될 때 review에 대한 내용만 가져오고 reviewStore에 상태를 저장을 하는 방식으로 

리팩토링을 해야한다. 

 

즉 localhost:8080/products/1 URL로 접속을 하면 상품, 리뷰 , 상품문의를 각각 스토어에서 API요청을 했으면 됬는데 

이 생각을 왜 못하고 있었을까

 

이런 식으로 하면 이제 컨트롤러가 훨씬 가벼워 지기도 하고 관심사의 분리가 이루어지는 과정인 것 같다. 

 

 

 

 

이렇게 하나의 스토어에서 내려주는  데이터가 많이 지면 한 번 고민을 해봐야 할 것 같다. 뭔가 더 좋은 방법이 반드시 있을 것이다. 

 

 

리팩토링을 최종적으로 상품 상세페이지를 조회하는 product 컨트롤러는 productId에 맞는 product를 찾아서 반환만 해주면 되는 구조로 다이어트에 성공을 할 수 있게 된다.

 

이번 주 에 벌써 3번째 리팩토링을 진행하고 있는데 이제는 그래도 어느 정도 구조에 대해서는 골조가 잡힌 듯한 느낌이다. 

 

내일은 리팩토링을 모두 완료하고 댓글 을 모두 완료하고 상품 문의 불러오기 까지는 하는 걸로