SSR 에서 상태 오염을 방지하자

개요

• 최근 개발 시 상태 오염이 발생한 것이 잦았다
• 따라서 겪었던 이슈와 함께 어떻게 해결했었는지 정리해 보고자 한다

발단

• 상태 오염으로 인하여 토큰이 잘못 들어간 이슈가 발생
• 백엔드에서는 해당 토큰으로 인증을 시키기 때문에, 사용자가 교체되어 데이터가 인입된 증상이 발생하게 됨

원인

• 프론트의 서버에서 상태를 싱글톤 상태로 만들어서, 하나의 전역 상태를 공유하게 됨

싱글톤 상태가 되었던 이유

• js 에서는 모듈이 싱글톤 형태로 이루어짐 (import, require 등)
• export 해 준 객체를 그저 참조를 해서 사용하고 있었음
• vuex 에서 module 을 등록할 때 참조한 모듈의 주소만 넣어 등록하기 때문에, 매 요청마다 모듈의 state 를 만드는 것이 아닌 참조만 하고 있었음

해결 방안

• module 의 state 를 등록 시킬 땐 객체가 아닌 함수 형태로 등록해야 함
• 해당 이슈는 vuex 도큐먼트에서도 설명을 하고 있음 Vuex Module

그 외에도 발생할 수 있는 이슈

• 공유되지 말아야 할 인스턴스가 있다면 모두 팩토리 함수로 만들어야 함 (예를 들어, store router axios 등)
  • 팩토리 함수는 호출할 때마다 매번 return 해 주는 객체를 만들기 때문에, 매번 인스턴스를 새로 만드는 것