!주의! React dev tools 라이브 서버에 보여지면 클나요

React dev tools는 개발자들이 리덕스 스토어를 디버깅할 때 유용하게 쓸 수 있는 chrome에 설치할 수 있는 extension입니다.

이 툴에 미들웨어가 동작하는 방식들을 일일히 로그처럼 볼 수 있습니다.

이 툴은 개발 모드에서는 문제없지만, 실제 라이브되는 모드에서 보여진다면 클납니다.

user info에는 card, item 배송지 정보 등등이 있을 텐데, 그런 것들이 라이브 서버에 보여지면 문제가 될 수 있는 여지가 분명히 있을 겁니다!  

 

그래서 아래와 같이 store에 미들웨어를 적용하는 부분에 'development' 이거나 'stage'(스테이지 환경을 사용할 경우) 에서만

devtools를 적용한 미들웨어를 넣어주면 됩니다.

// ...이상 생략
import 'composeWithDevTools' from 'redux-devtools-extension' 
// devtool 익스텐션을 사용하게 해주는 툴입니다.

// ...이상 리덕스 관련 config 등 생략
const enhancer =
  process.env.NODE_ENV === "development" 
  || process.env.NODE_ENV === 'stage' 
  || typeof window !== undefined 
    ? [composeWithDevTools(applyMiddleware(...middlewares))]
    : [applyMiddleware(...middlewares)]

// 1. window 타입이 undefined인 경우는 브라우저가 아닌 노드 환경 일경우 입니다. 
// 2. 조건(개발환경)이 맞다면 devtools있이 미들웨러를 적용해줍니다.
// 3. 조건(개발환경)이 아니라면 devtools을 없이 미들웨어를 적용해줍니다.
// enhancer은 배열로 넣어줄 수 있습니다.

const store = createStore(rootReducer, [...enhancer]);