블러썸 프로젝트를 진행하면서 관리자 로그인과 관련하여 퍼널 패턴을 도입하였다. 관리자라는 상태를 전역상태 관리도구는 사용하지 않고 로그인 페이지와 관리자 페이지에서 사용하기 위해서 퍼널패턴을 도입했다. 최초에는 보통의 퍼널패턴이 그러하듯 role이라는 상태를 퍼널 페이지에서 선언해주고 그 아래 로그인 페이지와 관리 페이지를 불러와서 prop으로 넘겨주는 방식을 취했다. 그런데 새로고침하니까 상태가 초기화가 되는 문제가 생겼다.
시도 1 - React Context
지피티 선생님한테 물어보니까 여러가지 방법을 알려줬는데 그 중에는 React Context와 localstorage를 활용한 방법이 있었다. 그런데 localstorage는 보안이 취약할 것 같아서, 누가 role을 관리자로 바꾸고 조작하면 큰일날 것 같아서 React Context만 사용했다.
그러나 간과한 사실 한가지. React Context도 결국 useState를 사용하는 거라서 새로고침에 초기화가 되었다.
시도 2 - React Context + Localstorage
그래서 챗지피티가 알려준 방법대로 localstorage에 저장된 값을 useState에 초기화 시켜주는 방식을 사용했다. 로그인 시에 localstorage에 기타 값을 저장해주고 roleContext에서 꺼내서 쓰는 방식으로 바꾸었다. 결과적으로 roleContext는 Admin 페이지에서만 사용하는 방법으로 바뀌었다.
결론 - Localstorage만 사용하기
어차피 Admin 페이지에서만 context가 사용된다면 굳이 context를 사용할 필요가 없다는 걸로 결론내렸다. 결국에는 돌고돌아 localstorage를 사용하는 방법을 채택하게 됐다.
보안성이 떨어지기에 전역상태 관리도구를 사용하거나 쿠키를 사용하는 방법을 고려하긴 했는데, 전역 상태 관리 도구는 애초에 사용하지 않기로 결정하였고, 그거 도입하는데 드는 비용이 더 클 것 같아서 사용하지 않는 걸로 결정했다.
쿠키는 백엔드에 부탁하기에는 당장 다음날 시연이 예정되어 있어서 백엔드에서 여유가 없을 것 같아서 일단 지금은 localstorage에 저장하고 나중에 여유되면 쿠키 사용하는 방식으로 바꿀까 싶다.
추가적인 조치로 sha256을 사용해서 role을 표시하는 데이터를 암호화 시켜버릴까 싶다. 그렇게하면 다른 일반 사용자가 localstorage에 접근해서 role을 조작하더라도 알 수 없게 되지 않을까 싶다. 하지만 당장 모레 면접이라 일단 여기까지만 하고 면접 준비하다가 심심하면 그때 도입해보려한다.
