리엑트는 라이브러리가 은근 많아서 사용하기 편한 경우가 있다.
앵귤러 사용때는 세션이나 토큰 관리를 수동으로 만들어 줬어야 했는데, 리엑트는 리덕스를 사용해서 State를 관리하다 보면 세션이 헷갈리는 경우가 많다.
그러다가 찾은 리액트와 리덕스를 사용하는 세션관리 라이브러리. 나 같은 경우는 리엑트-리덕스의 세션 관리 (사용자 정보, 토큰)를 위해 Redux-React-Session 이 라이브러리를 사용중이다.
다른건 다 좋은데, /Dashboard /Checklist 가 있다면 /Checklist에서 F5 즉 새로고침을 하면 계속해서 내가 설정해둔 Redirect인 /signin으로 가는것이다.
loadSession()에서 try/catch 되어 에러를 dispatch해서 authenticated:false 로 처리해서 그러는 것 같은데, 그럼 어딘가 에러가 있는가..
에러가 나는 부분, redux-react-session 의 한 부분은 위의 catch부분이다.
처음에는 loadSession()에서 에러가 나는 줄 알았는데 딱히 그건 아니었다. 그래서 그냥 소스 자체 수정을 통해 catch(function(e) { console.log(e)}) 로 찍어본 결과
엥? 이건 redux-react-session문제가 아니구만…. 황당하게도 이는 내가 render하는 페이지 (위 예에서는 /checklist)에서 변수가 정의되지 않아서 발생한 문제다.
아래 소스와 같이, 랜더링 할때 weekInfo.firstDayOfWeek 를 ES6의 destructuring을 해서 firstDayOfWeek 로 나눠주는데,
위 경우는 문제는 weekInfo:{….} <- 이 자체의 기본 생성값이 없었다.
즉, ES6에서 Default Value인 = 을 붙혀서 하는 자체를 해줘야한다. 그걸 나는 Object 내의 Object에서도 해줘야하는줄 몰랐음..
그래서 아래처럼, = {} 을 추가하니 해결 완료!
좌우간 리엑트의 에러 중 대부분은 내가 실수해서 생긴게 많은 것 같다. 그런데 친절하게 알려주지는 않는듯.. 조금 그런게 아쉽지만, 어쨌든 이리저리 버그를 찾아가는 재미는 있다 🙂
