뻘스러운 리팩토링 후

뻘스러운 리팩토링 후

개발하던 도중 UserOpinion 클래스가 신경에 거슬렸다. 이 클래스는 현재 로그인한 유저의 의견을 CRUD 하는 용도이다. 내부에 상태가 없고, CRUD하는 용도라 공개된 메소드가 모두 static이었다. 다음과 같은 형태이다.

class UserOpinion {
	
    static fetch() {
    	...
    }
    
    static store() {
    	...
    }
	
}

그런데, 이상하게 무언가 마음에 안 드는 것이었다. 어떤 점이 신경에 거슬리는지도 모르겠고. 그래서 멍청하게 static을 우선 다 지웠다. 그래도 마음에 안 든다. 왜 신경이 거슬릴까. 그 후로도 이것저것 뻘스럽게 바꿨는데 마음에 안 들었다. 결국, 쉬다가 왜 이런 결과가 나왔는지 처음부터 생각했다.

처음의 계획은

처음의 계획은 UserOpinion이라는 클래스에 유저의 의견을 담당하는 모델을 구현하고, 유저 의견을 서버에 CRUD하는 UserOpinionService라는 클래스를 만들려고 했다. 다음과 같은 코드이다.

class UserOpinionService {

    fetch() {
    	... 데이터를 가져와서
        
        return UserOpinion
    }

    store(UserOpinion) {
    	... 저장
    }
}

위와 같은 형태는 딱히 특별할 것도 없고, 전형적인 형태이다. 그런데, 개발하다 보니 UserOpinion이라는 모델이 필요가 없다는 점을 느꼈다. 왜 필요가 없을까? 그것은 바로 Vue의 컨셉과 관련이 있다.

Vue와 SFC

Vue는 SFC라는 컨셉으로 하나의 파일이 하나의 컴포넌트에 대응하여 UI의 빌딩 블록을 담당한다. 템플릿, 스크립트, 스타일이 있고 각각 HTML, JS, CSS에 대응한다. 개념적으론 레이아웃, 로직, 디자인을 담당한다고 할 수 있다. 

Vue의 SFC

하나의 UI 빌딩 블록에 SFC 하나가 대응되는 것이다. SFC 자체에서 처리하면 충분해서 UserOpinion이라는 모델이 필요 없는 것이다. SFC가 데이터를 처리하여 UI에 반영하는 과정을 일반화하면 다음과 같을 것이다.

UI에 데이터가 반영되는 흐름

1. 서버, 파일 등 어떤 곳에 데이터를 요청해서 받아온다. 이벤트가 트리거 되어 이벤트의 종류와 데이터를 받는 것도 마찬가지다.
2. SFC의 스크립트에서 데이터를 가공한다.
3. SFC의 템플릿에서 가공 결과를 UI에 반영한다.

데이터를 요청하고 받아오는 것은 UserOpinionService에서 처리한다. 데이터를 가공하는 것은 SFC의 스크립트가 담당한다. UI에 반영하는 것은 SFC의 템플릿이다. UserOpinion이라는 모델이 껴들 곳이 없는 것이다. 받아온 데이터를 스크립트에서 처리하기 위해서 전처리 하는 과정이 필요하다. 스크립트에서 처리한 부분을 UI에 바인딩할 때도 마찬가지. 하지만 그것이 모델은 아니다. 중간 파라미터와 응답을 알맞게 조절하는 과정이지.