Vue - Reactive 그리고 Proxy객체

실무 중에 reactive의 내부 값이 바뀌지 않는 사태가 발생하였다 

 

이거 때문에 머리통을 잡고 얼마나 고민을 했는가, 단서라고는 내가 찍을 수 있는 log밖에 없었다 

 

같이 개발하시던 사수(사수라 쓰고 대표라 쓴다)분도 vue를 거의 공부 안 하신지라 

 

둘이 머리를 대고 고민해봐도 안 되었는데..

 

집으로 향하는 버스에서 생각난 log에 찍힌 프록시 객체를 보고 깨달았다 

 

나: 아 이거 값이 안바뀌는게 (폼에다가 reactive값을 filter로 돌려서 넣음) 프록시 객체라 그런 거 아니야?

 

하고 다음날 프록시 객체 쌩으로 하나 생성해서 filter 돌리니 똑같이 값이 안 뜨는 것을 보고 

 

이거다!! 

 

하고 vue문서를 뒤지기 시작했다 

 

https://vuejs.org/guide/essentials/reactivity-fundamentals.html

Reactivity Fundamentals | Vue.js

일어 도큐가 있으니 일어로보자

여기 대놓고

"reactive 오브젝트는 javascript의 프록시이며 통상 오브젝트같이 쓰입니다"

 

라고 적혀있다 

 

 

뭐 여하튼.. 이유는 알았으면 해결은 금방이다 

 

올해 1월인가? pinia를 쓰면서 상태값의 getter값에 computed를 감싸서 넣은 기억이 있는데 

 

이게 번뜩 떠올라서 computed를 찾아봤다 

https://ja.vuejs.org/guide/essentials/computed.html#computed-caching-vs-methods

算出プロパティ | Vue.js

 

제목 그대로 산출프로퍼티라고 적혀있다 

 

그럼 내가 할 것은 간단하다 

 

프록시 객체의 값을 떼온다

> 원하는 값에다가 프록시객체의 getter값으로 computed상태를 값으로 넣는다 

> 그럼 상태값 자체가 computed 상태이니 어케 식을 짜내도 target값이 바뀌면 computed의 값도 바뀐다!

 

라는 결론의 생각으로 코드를 짜기 시작했다

 

결국.. 된다 

 

너무 잘돼서 행복했다 

 

대표님도 

 

" 아 역시 방법이 있었네!! 돼서 다행이네요! "

 

ㅠㅠ..

 

확실히 실무 하면 는다는 건.. 시간에 쪼임과 머리를 어떻게든 굴린다는 점

 

또한 "이렇게만 해둬도 괜찮겠지"가 아니라 "이렇게 두면 큰일 날 텐데"가 주가 되어 

 

어떻게 든 코드를 짜내려 하다 보니 더 느나 보다 

 

올해 잘해보자